{options.showFolderCount && (
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 692585c2b..e41ab4644 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -1,107 +1,127 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
import style from "../styles/listPage.scss"
-import { PageList } from "../PageList"
+import { PageList, SortFn } from "../PageList"
import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
import { QuartzPluginData } from "../../plugins/vfile"
import { Root } from "hast"
import { htmlToJsx } from "../../util/jsx"
import { i18n } from "../../i18n"
-const numPages = 10
-const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
- const { tree, fileData, allFiles, cfg } = props
- const slug = fileData.slug
-
- if (!(slug?.startsWith("tags/") || slug === "tags")) {
- throw new Error(`Component "TagContent" tried to render a non-tag page: ${slug}`)
- }
-
- const tag = simplifySlug(slug.slice("tags/".length) as FullSlug)
- const allPagesWithTag = (tag: string) =>
- allFiles.filter((file) =>
- (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
- )
-
- const content =
- (tree as Root).children.length === 0
- ? fileData.description
- : htmlToJsx(fileData.filePath!, tree)
- const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
- const classes = ["popover-hint", ...cssClasses].join(" ")
- if (tag === "/") {
- const tags = [
- ...new Set(
- allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
- ),
- ].sort((a, b) => a.localeCompare(b))
- const tagItemMap: Map = new Map()
- for (const tag of tags) {
- tagItemMap.set(tag, allPagesWithTag(tag))
- }
- return (
-
-
- {content}
-
-
{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}
-
- {tags.map((tag) => {
- const pages = tagItemMap.get(tag)!
- const listProps = {
- ...props,
- allFiles: pages,
- }
-
- const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0]
- const content = contentPage?.description
- return (
-
-
- {content &&
{content}
}
-
-
- {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
- {pages.length > numPages && (
- <>
- {" "}
-
- {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
-
- >
- )}
-
-
-
-
- )
- })}
-
-
- )
- } else {
- const pages = allPagesWithTag(tag)
- const listProps = {
- ...props,
- allFiles: pages,
- }
-
- return (
-
-
{content}
-
-
{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
-
-
-
- )
- }
+interface TagContentOptions {
+ sort?: SortFn
+ numPages: number
}
-TagContent.css = style + PageList.css
-export default (() => TagContent) satisfies QuartzComponentConstructor
+const defaultOptions: TagContentOptions = {
+ numPages: 10,
+}
+
+export default ((opts?: Partial) => {
+ const options: TagContentOptions = { ...defaultOptions, ...opts }
+
+ const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
+ const { tree, fileData, allFiles, cfg } = props
+ const slug = fileData.slug
+
+ if (!(slug?.startsWith("tags/") || slug === "tags")) {
+ throw new Error(`Component "TagContent" tried to render a non-tag page: ${slug}`)
+ }
+
+ const tag = simplifySlug(slug.slice("tags/".length) as FullSlug)
+ const allPagesWithTag = (tag: string) =>
+ allFiles.filter((file) =>
+ (file.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes).includes(tag),
+ )
+
+ const content =
+ (tree as Root).children.length === 0
+ ? fileData.description
+ : htmlToJsx(fileData.filePath!, tree)
+ const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+ const classes = ["popover-hint", ...cssClasses].join(" ")
+ if (tag === "/") {
+ const tags = [
+ ...new Set(
+ allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
+ ),
+ ].sort((a, b) => a.localeCompare(b))
+ const tagItemMap: Map = new Map()
+ for (const tag of tags) {
+ tagItemMap.set(tag, allPagesWithTag(tag))
+ }
+ return (
+
+
+ {content}
+
+
{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}
+
+ {tags.map((tag) => {
+ const pages = tagItemMap.get(tag)!
+ const listProps = {
+ ...props,
+ allFiles: pages,
+ }
+
+ const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`).at(0)
+
+ const root = contentPage?.htmlAst
+ const content =
+ !root || root?.children.length === 0
+ ? contentPage?.description
+ : htmlToJsx(contentPage.filePath!, root)
+
+ return (
+
+
+ {content &&
{content}
}
+
+
+ {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
+ {pages.length > options.numPages && (
+ <>
+ {" "}
+
+ {i18n(cfg.locale).pages.tagContent.showingFirst({
+ count: options.numPages,
+ })}
+
+ >
+ )}
+
+
+
+
+ )
+ })}
+
+
+ )
+ } else {
+ const pages = allPagesWithTag(tag)
+ const listProps = {
+ ...props,
+ allFiles: pages,
+ }
+
+ return (
+
+
{content}
+
+
{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
+
+
+
+ )
+ }
+ }
+
+ TagContent.css = style + PageList.css
+ return TagContent
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 251a53f2e..ec5124f4f 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -14,6 +14,7 @@ interface RenderComponents {
header: QuartzComponent[]
beforeBody: QuartzComponent[]
pageBody: QuartzComponent
+ afterBody: QuartzComponent[]
left: QuartzComponent[]
right: QuartzComponent[]
footer: QuartzComponent
@@ -187,6 +188,7 @@ export function renderPage(
header,
beforeBody,
pageBody: Content,
+ afterBody,
left,
right,
footer: Footer,
@@ -232,6 +234,12 @@ export function renderPage(