feat: Allow custom sorting of FolderPage and TagPage (#1250)

quartz/components/PageList.tsx

@@ -27,10 +27,12 @@ export function byDateAndAlphabetical(
 
 type Props = {
   limit?: number
+  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
 } & QuartzComponentProps
 
-export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => {
+export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {
-  let list = allFiles.sort(byDateAndAlphabetical(cfg))
+  const sorter = sort ?? byDateAndAlphabetical(cfg)
+  let list = allFiles.sort(sorter)
   if (limit) {
     list = list.slice(0, limit)
   }

quartz/components/pages/FolderContent.tsx

@@ -7,12 +7,14 @@ import { stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
+import { QuartzPluginData } from "../../plugins/vfile"
 
 interface FolderContentOptions {
   /**
    * Whether to display number of folders
    */
   showFolderCount: boolean
+  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
 }
 
 const defaultOptions: FolderContentOptions = {
@@ -37,6 +39,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
     const classes = ["popover-hint", ...cssClasses].join(" ")
     const listProps = {
       ...props,
+      sort: options.sort,
       allFiles: allPagesInFolder,
     }
 

quartz/components/pages/TagContent.tsx

@@ -7,8 +7,9 @@ import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
 
-const numPages = 10
+export default ((opts?: { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number }) => {
-const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
+  const numPages = 10
+  const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
     const { tree, fileData, allFiles, cfg } = props
     const slug = fileData.slug
 
@@ -80,7 +81,7 @@ const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
                         </>
                       )}
                     </p>
-                  <PageList limit={numPages} {...listProps} />
+                    <PageList limit={numPages} {...listProps} sort={opts?.sort} />
                   </div>
                 </div>
               )
@@ -107,7 +108,8 @@ const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
         </div>
       )
     }
-}
+  }
 
-TagContent.css = style + PageList.css
+  TagContent.css = style + PageList.css
-export default (() => TagContent) satisfies QuartzComponentConstructor
+  return TagContent
+}) satisfies QuartzComponentConstructor

quartz/plugins/emitters/folderPage.tsx

@@ -3,7 +3,7 @@ import { QuartzComponentProps } from "../../components/types"
 import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
-import { ProcessedContent, defaultProcessedContent } from "../vfile"
+import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
 import { FullPageLayout } from "../../cfg"
 import path from "path"
 import {
@@ -21,11 +21,13 @@ import { write } from "./helpers"
 import { i18n } from "../../i18n"
 import DepGraph from "../../depgraph"
 
-export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
+export const FolderPage: QuartzEmitterPlugin<
+  Partial<FullPageLayout> & { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number }
+> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,
-    pageBody: FolderContent(),
+    pageBody: FolderContent({ sort: userOpts?.sort }),
     ...userOpts,
   }
 

quartz/plugins/emitters/tagPage.tsx

@@ -3,7 +3,7 @@ import { QuartzComponentProps } from "../../components/types"
 import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
-import { ProcessedContent, defaultProcessedContent } from "../vfile"
+import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
 import { FullPageLayout } from "../../cfg"
 import {
   FilePath,
@@ -18,11 +18,13 @@ import { write } from "./helpers"
 import { i18n } from "../../i18n"
 import DepGraph from "../../depgraph"
 
-export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
+export const TagPage: QuartzEmitterPlugin<
+  Partial<FullPageLayout> & { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number }
+> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     ...defaultListPageLayout,
-    pageBody: TagContent(),
+    pageBody: TagContent({ sort: userOpts?.sort }),
     ...userOpts,
   }