feat: Option to mask folder count (#734)

LUCASTUCIOUS

2024-01-28 a70078ccdcbb195fe487454e9e3f8612ccd5e7a1

feat: Option to mask folder count (#734)

* Option to mask folder count

* Update quartz/components/pages/FolderContent.tsx

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

 quartz/components/pages/FolderContent.tsx

@@ -8,40 +8,56 @@
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 (
    <div class="popover-hint">
      <article>
        <p>{content}</p>
      </article>
      <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
      <div>
        <PageList {...listProps} />
      </div>
    </div>
  )
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<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