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

Cao Mingjun

2024-07-10 ea92ed4f45e6e863a432447a977c33c6319423bc

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

 quartz/components/PageList.tsx

@@ -27,10 +27,12 @@

type Props = {
  limit?: number
  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
} & QuartzComponentProps

export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => {
  let list = allFiles.sort(byDateAndAlphabetical(cfg))
export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {
  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 { 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 @@
    const classes = ["popover-hint", ...cssClasses].join(" ")
    const listProps = {
      ...props,
      sort: options.sort,
      allFiles: allPagesInFolder,
    }


 quartz/components/pages/TagContent.tsx

@@ -7,6 +7,7 @@
import { htmlToJsx } from "../../util/jsx"
import { i18n } from "../../i18n"

export default ((opts?: { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number }) => {
const numPages = 10
const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
  const { tree, fileData, allFiles, cfg } = props
@@ -80,7 +81,7 @@
                      </>
                    )}
                  </p>
                  <PageList limit={numPages} {...listProps} />
                    <PageList limit={numPages} {...listProps} sort={opts?.sort} />
                </div>
              </div>
            )
@@ -110,4 +111,5 @@
}

TagContent.css = style + PageList.css
export default (() => TagContent) satisfies QuartzComponentConstructor
  return TagContent
}) satisfies QuartzComponentConstructor

 quartz/plugins/emitters/folderPage.tsx

@@ -3,7 +3,7 @@
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 { 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 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 { 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,
  }