fixup! feat: add subfolders to folder page: remove separate folder list

quartz/components/FolderList.tsx

@@ -1,38 +0,0 @@
-import path from "path"
-import { resolveRelative, SimpleSlug } from "../util/path"
-import { QuartzComponent, QuartzComponentProps } from "./types"
-
-type Props = {
-  limit?: number
-} & QuartzComponentProps
-
-export const FolderList: QuartzComponent = ({ cfg, fileData, allFolders, limit }: Props) => {
-  let list: SimpleSlug[] = allFolders.sort(_alphabetical)
-  if (limit) {
-    list = list.slice(0, limit)
-  }
-
-  return (
-    <ul>
-      {list.map((folderSlug) => {
-        const title = _getTitle(folderSlug)
-
-        return (
-          <li>
-            <a href={resolveRelative(fileData.slug!, folderSlug!)}>{title}</a>
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-
-function _alphabetical(f1: SimpleSlug, f2: SimpleSlug): number {
-  const f1Title = _getTitle(f1)
-  const f2Title = _getTitle(f2)
-  return f1Title.localeCompare(f2Title)
-}
-
-function _getTitle(folderSlug: SimpleSlug): string {
-  return folderSlug.split(path.posix.sep).at(-1)!
-}

quartz/components/pages/FolderContent.tsx

@@ -3,8 +3,7 @@ import path from "path"
 
 import style from "../styles/listPage.scss"
 import { PageList, SortFn } from "../PageList"
-import { FolderList } from "../FolderList"
-import { stripSlashes, simplifySlug, SimpleSlug, joinSegments } from "../../util/path"
+import { stripSlashes, simplifySlug, SimpleSlug, joinSegments, FullSlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
@@ -32,7 +31,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
     const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
 
     const allPagesInFolder: QuartzPluginData[] = []
-    const allSubfolders: Set<SimpleSlug> = new Set()
+    const allSubfolders: Set<FullSlug> = new Set()
 
     allFiles.forEach((file) => {
       const fileSlug = stripSlashes(simplifySlug(file.slug!))
@@ -48,22 +47,21 @@ export default ((opts?: Partial<FolderContentOptions>) => {
       if (isDirectChild) {
         allPagesInFolder.push(file)
       } else {
-        const folderSlug = joinSegments(...fileParts.slice(0, folderParts.length + 1))
-        allSubfolders.add(folderSlug as SimpleSlug)
+        const folderSlug = joinSegments(...fileParts.slice(0, folderParts.length + 1)) as FullSlug
+        if (!allSubfolders.has(folderSlug)) {
+          allPagesInFolder.push(_createFolderData(folderSlug))
+        }
+        allSubfolders.add(folderSlug)
       }
     })
 
     const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
     const classes = ["popover-hint", ...cssClasses].join(" ")
-    const pageListProps = {
+    const listProps = {
       ...props,
       sort: options.sort,
       allFiles: allPagesInFolder,
     }
-    const folderListProps = {
-      ...props,
-      allFolders: Array.from(allSubfolders.values()),
-    }
 
     const content =
       (tree as Root).children.length === 0
@@ -82,15 +80,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
             </p>
           )}
           <div>
-            <PageList {...pageListProps} />
-          </div>
-        </div>
-        <div class="page-listing">
-          {options.showSubfolders && (
-            <p>{allSubfolders.size === 1 ? "1 subfolder." : `${allSubfolders.size} subfolders.`}</p>
-          )}
-          <div>
-            <FolderList {...folderListProps} />
+            <PageList {...listProps} />
           </div>
         </div>
       </div>
@@ -100,3 +90,12 @@ export default ((opts?: Partial<FolderContentOptions>) => {
   FolderContent.css = style + PageList.css
   return FolderContent
 }) satisfies QuartzComponentConstructor
+
+function _createFolderData(folderSlug: FullSlug): QuartzPluginData {
+  return {
+    slug: folderSlug,
+    frontmatter: {
+      title: folderSlug.split(path.posix.sep).at(-1)!,
+    },
+  }
+}