docs + chore: cleanup custom sort ordering for folder + tag listings, add docs

This commit is contained in:
Jacky Zhao 2024-07-09 17:55:19 -07:00
parent ea92ed4f45
commit 965425d54d
8 changed files with 43 additions and 24 deletions

View file

@ -30,4 +30,4 @@ As with folder listings, you can also provide a description and title for a tag
## Customization ## Customization
The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options. Quartz allows you to define a custom sort ordering for content on both page types. The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.

View file

@ -11,10 +11,12 @@ Example: [[advanced/|Advanced]]
> [!note] > [!note]
> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page. > For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
This plugin has no configuration options.
The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `FolderContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/FolderContent.tsx`). The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `FolderContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/FolderContent.tsx`).
This plugin accepts the following configuration options:
- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
## API ## API
- Category: Emitter - Category: Emitter

View file

@ -9,10 +9,12 @@ This plugin emits dedicated pages for each tag used in the content. See [[folder
> [!note] > [!note]
> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page. > For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
This plugin has no configuration options.
The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `TagContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/TagContent.tsx`). The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `TagContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/TagContent.tsx`).
This plugin accepts the following configuration options:
- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
## API ## API
- Category: Emitter - Category: Emitter

View file

@ -4,9 +4,9 @@ import { Date, getDate } from "./Date"
import { QuartzComponent, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentProps } from "./types"
import { GlobalConfiguration } from "../cfg" import { GlobalConfiguration } from "../cfg"
export function byDateAndAlphabetical( export type SortFn = (f1: QuartzPluginData, f2: QuartzPluginData) => number
cfg: GlobalConfiguration,
): (f1: QuartzPluginData, f2: QuartzPluginData) => number { export function byDateAndAlphabetical(cfg: GlobalConfiguration): SortFn {
return (f1, f2) => { return (f1, f2) => {
if (f1.dates && f2.dates) { if (f1.dates && f2.dates) {
// sort descending // sort descending
@ -27,7 +27,7 @@ export function byDateAndAlphabetical(
type Props = { type Props = {
limit?: number limit?: number
sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number sort?: SortFn
} & QuartzComponentProps } & QuartzComponentProps
export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => { export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => {

View file

@ -2,19 +2,18 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
import path from "path" import path from "path"
import style from "../styles/listPage.scss" import style from "../styles/listPage.scss"
import { PageList } from "../PageList" import { PageList, SortFn } from "../PageList"
import { stripSlashes, simplifySlug } from "../../util/path" import { stripSlashes, simplifySlug } from "../../util/path"
import { Root } from "hast" import { Root } from "hast"
import { htmlToJsx } from "../../util/jsx" import { htmlToJsx } from "../../util/jsx"
import { i18n } from "../../i18n" import { i18n } from "../../i18n"
import { QuartzPluginData } from "../../plugins/vfile"
interface FolderContentOptions { interface FolderContentOptions {
/** /**
* Whether to display number of folders * Whether to display number of folders
*/ */
showFolderCount: boolean showFolderCount: boolean
sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number sort?: SortFn
} }
const defaultOptions: FolderContentOptions = { const defaultOptions: FolderContentOptions = {

View file

@ -1,14 +1,24 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
import style from "../styles/listPage.scss" import style from "../styles/listPage.scss"
import { PageList } from "../PageList" import { PageList, SortFn } from "../PageList"
import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path" import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
import { QuartzPluginData } from "../../plugins/vfile" import { QuartzPluginData } from "../../plugins/vfile"
import { Root } from "hast" import { Root } from "hast"
import { htmlToJsx } from "../../util/jsx" import { htmlToJsx } from "../../util/jsx"
import { i18n } from "../../i18n" import { i18n } from "../../i18n"
export default ((opts?: { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number }) => { interface TagContentOptions {
const numPages = 10 sort?: SortFn
numPages: number
}
const defaultOptions: TagContentOptions = {
numPages: 10,
}
export default ((opts?: Partial<TagContentOptions>) => {
const options: TagContentOptions = { ...defaultOptions, ...opts }
const TagContent: QuartzComponent = (props: QuartzComponentProps) => { const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
const { tree, fileData, allFiles, cfg } = props const { tree, fileData, allFiles, cfg } = props
const slug = fileData.slug const slug = fileData.slug
@ -72,16 +82,18 @@ export default ((opts?: { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) =>
<div class="page-listing"> <div class="page-listing">
<p> <p>
{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })} {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
{pages.length > numPages && ( {pages.length > options.numPages && (
<> <>
{" "} {" "}
<span> <span>
{i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })} {i18n(cfg.locale).pages.tagContent.showingFirst({
count: options.numPages,
})}
</span> </span>
</> </>
)} )}
</p> </p>
<PageList limit={numPages} {...listProps} sort={opts?.sort} /> <PageList limit={options.numPages} {...listProps} sort={opts?.sort} />
</div> </div>
</div> </div>
) )

View file

@ -21,9 +21,11 @@ import { write } from "./helpers"
import { i18n } from "../../i18n" import { i18n } from "../../i18n"
import DepGraph from "../../depgraph" import DepGraph from "../../depgraph"
export const FolderPage: QuartzEmitterPlugin< interface FolderPageOptions extends FullPageLayout {
Partial<FullPageLayout> & { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number } sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
> = (userOpts) => { }
export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (userOpts) => {
const opts: FullPageLayout = { const opts: FullPageLayout = {
...sharedPageComponents, ...sharedPageComponents,
...defaultListPageLayout, ...defaultListPageLayout,

View file

@ -18,9 +18,11 @@ import { write } from "./helpers"
import { i18n } from "../../i18n" import { i18n } from "../../i18n"
import DepGraph from "../../depgraph" import DepGraph from "../../depgraph"
export const TagPage: QuartzEmitterPlugin< interface TagPageOptions extends FullPageLayout {
Partial<FullPageLayout> & { sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number } sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
> = (userOpts) => { }
export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts) => {
const opts: FullPageLayout = { const opts: FullPageLayout = {
...sharedPageComponents, ...sharedPageComponents,
...defaultListPageLayout, ...defaultListPageLayout,