rizaldy/rizaldy.club
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Option to mask folder count (#734)

Browse Source 
* Option to mask folder count

* Update quartz/components/pages/FolderContent.tsx

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
LUCASTUCIOUS 2024-01-28 07:21:32 +01:00 committed by GitHub
parent 2b62e29282
commit a70078ccdc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
quartz/components/pages/FolderContent.tsx
View File

@ -8,40 +8,56 @@ import { Root } from "hast"
import { pluralize } from "../../util/lang" import { pluralize } from "../../util/lang"
import { htmlToJsx } from "../../util/jsx" import { htmlToJsx } from "../../util/jsx"
function FolderContent(props: QuartzComponentProps) { interface FolderContentOptions {
const { tree, fileData, allFiles } = props /**
const folderSlug = _stripSlashes(simplifySlug(fileData.slug!)) * Whether to display number of folders
const allPagesInFolder = allFiles.filter((file) => { */
const fileSlug = _stripSlashes(simplifySlug(file.slug!)) showFolderCount: boolean
const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
const folderParts = folderSlug.split(path.posix.sep)
const fileParts = fileSlug.split(path.posix.sep)
const isDirectChild = fileParts.length === folderParts.length + 1
return prefixed && isDirectChild
})
const listProps = {
...props,
allFiles: allPagesInFolder,
}
const content =
(tree as Root).children.length === 0
? fileData.description
: htmlToJsx(fileData.filePath!, tree)
return (
<div class="popover-hint">
<article>
<p>{content}</p>
</article>
<p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
<div>
<PageList {...listProps} />
</div>
</div>
)
} }
FolderContent.css = style + PageList.css const defaultOptions: FolderContentOptions = {
export default (() => FolderContent) satisfies QuartzComponentConstructor showFolderCount: true,
}
export default ((opts?: Partial<FolderContentOptions>) => {
// Merge options with defaults
const options: FolderContentOptions = { ...defaultOptions, ...opts }
function FolderContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props
const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
const allPagesInFolder = allFiles.filter((file) => {
const fileSlug = _stripSlashes(simplifySlug(file.slug!))
const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
const folderParts = folderSlug.split(path.posix.sep)
const fileParts = fileSlug.split(path.posix.sep)
const isDirectChild = fileParts.length === folderParts.length + 1
return prefixed && isDirectChild
})
const listProps = {
...props,
allFiles: allPagesInFolder,
}
const content =
(tree as Root).children.length === 0
? fileData.description
: htmlToJsx(fileData.filePath!, tree)
return (
<div class="popover-hint">
<article>
<p>{content}</p>
</article>
{options.showFolderCount && <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>}
<div>
<PageList {...listProps} />
</div>
</div>
)
}
FolderContent.css = style + PageList.css
return FolderContent
}) satisfies QuartzComponentConstructor