feat(folder): add intermediate folders pages (#1295) (#110)

Co-authored-by: Thomas Hack <39602241+tha00@users.noreply.github.com>
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
Co-authored-by: Aaron Pham <contact@aarnphm.xyz>

Author: 3 people

quartz/components/pages/FolderContent.tsx

@@ -2,8 +2,8 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 import path from "path"
 
 import style from "../styles/listPage.scss"
-import { PageList } from "../PageList"
-import { stripSlashes, simplifySlug } from "../../util/path"
+import { byDateAndAlphabetical, PageList, SortFn } from "../PageList"
+import { stripSlashes, simplifySlug, joinSegments, FullSlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
@@ -14,11 +14,13 @@ interface FolderContentOptions {
    * Whether to display number of folders
    */
   showFolderCount: boolean
-  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
+  showSubfolders: boolean
+  sort?: SortFn
 }
 
 const defaultOptions: FolderContentOptions = {
   showFolderCount: true,
+  showSubfolders: true,
 }
 
 export default ((opts?: Partial<FolderContentOptions>) => {
@@ -27,14 +29,47 @@ export default ((opts?: Partial<FolderContentOptions>) => {
   const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
     const { tree, fileData, allFiles, cfg } = props
     const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
-    const allPagesInFolder = allFiles.filter((file) => {
+    const folderParts = folderSlug.split(path.posix.sep)
+
+    const allPagesInFolder: QuartzPluginData[] = []
+    const allPagesInSubfolders: Map<FullSlug, QuartzPluginData[]> = new Map()
+
+    allFiles.forEach((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
+
+      if (!prefixed) {
+        return
+      }
+
+      if (isDirectChild) {
+        allPagesInFolder.push(file)
+      } else if (options.showSubfolders) {
+        const subfolderSlug = joinSegments(
+          ...fileParts.slice(0, folderParts.length + 1),
+        ) as FullSlug
+        const pagesInFolder = allPagesInSubfolders.get(subfolderSlug) || []
+        allPagesInSubfolders.set(subfolderSlug, [...pagesInFolder, file])
+      }
     })
+
+    allPagesInSubfolders.forEach((files, subfolderSlug) => {
+      const hasIndex = allPagesInFolder.some(
+        (file) => subfolderSlug === stripSlashes(simplifySlug(file.slug!)),
+      )
+      if (!hasIndex) {
+        const subfolderDates = files.sort(byDateAndAlphabetical(cfg))[0].dates
+        const subfolderTitle = subfolderSlug.split(path.posix.sep).at(-1)!
+        allPagesInFolder.push({
+          slug: subfolderSlug,
+          dates: subfolderDates,
+          frontmatter: { title: subfolderTitle, tags: ["folder"] },
+        })
+      }
+    })
+
     const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
     const classes = ["popover-hint", ...cssClasses].join(" ")
     const listProps = {

quartz/plugins/emitters/folderPage.tsx

@@ -74,12 +74,11 @@ export const FolderPage: QuartzEmitterPlugin<
 
       const folders: Set<SimpleSlug> = new Set(
         allFiles.flatMap((data) => {
-          const slug = data.slug
-          const folderName = path.dirname(slug ?? "") as SimpleSlug
-          if (slug && folderName !== "." && folderName !== "tags") {
-            return [folderName]
-          }
-          return []
+          return data.slug
+            ? _getFolders(data.slug).filter(
+                (folderName) => folderName !== "." && folderName !== "tags",
+              )
+            : []
         }),
       )
 
@@ -131,3 +130,14 @@ export const FolderPage: QuartzEmitterPlugin<
     },
   }
 }
+
+function _getFolders(slug: FullSlug): SimpleSlug[] {
+  var folderName = path.dirname(slug ?? "") as SimpleSlug
+  const parentFolderNames = [folderName]
+
+  while (folderName !== ".") {
+    folderName = path.dirname(folderName ?? "") as SimpleSlug
+    parentFolderNames.push(folderName)
+  }
+  return parentFolderNames
+}