From a70078ccdcbb195fe487454e9e3f8612ccd5e7a1 Mon Sep 17 00:00:00 2001 From: LUCASTUCIOUS Date: Sun, 28 Jan 2024 07:21:32 +0100 Subject: [PATCH] feat: Option to mask folder count (#734) * Option to mask folder count * Update quartz/components/pages/FolderContent.tsx --------- Co-authored-by: Jacky Zhao --- quartz/components/pages/FolderContent.tsx | 86 ++++++++++++++--------- 1 file changed, 51 insertions(+), 35 deletions(-) diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx index 765f846..1acb98a 100644 --- a/quartz/components/pages/FolderContent.tsx +++ b/quartz/components/pages/FolderContent.tsx @@ -8,40 +8,56 @@ import { Root } from "hast" import { pluralize } from "../../util/lang" import { htmlToJsx } from "../../util/jsx" -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 ( -
-
-

{content}

-
-

{pluralize(allPagesInFolder.length, "item")} under this folder.

-
- -
-
- ) +interface FolderContentOptions { + /** + * Whether to display number of folders + */ + showFolderCount: boolean } -FolderContent.css = style + PageList.css -export default (() => FolderContent) satisfies QuartzComponentConstructor +const defaultOptions: FolderContentOptions = { + showFolderCount: true, +} + +export default ((opts?: Partial) => { + // 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 ( +
+
+

{content}

+
+ {options.showFolderCount &&

{pluralize(allPagesInFolder.length, "item")} under this folder.

} +
+ +
+
+ ) + } + + FolderContent.css = style + PageList.css + return FolderContent +}) satisfies QuartzComponentConstructor