docs + chore: cleanup custom sort ordering for folder + tag listings, add docs
This commit is contained in:
		@@ -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.
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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) => {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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 = {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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>
 | 
				
			||||||
              )
 | 
					              )
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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,
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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,
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user