Jacky Zhao
2024-01-01 b33f13ccaf4ec14a94ee0ee467dda04cf4981d00
quartz/components/pages/TagContent.tsx
@@ -1,11 +1,11 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
import style from "../styles/listPage.scss"
import { PageList } from "../PageList"
import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
import { QuartzPluginData } from "../../plugins/vfile"
import { Root } from "hast"
import { pluralize } from "../../util/lang"
import { htmlToJsx } from "../../util/jsx"
const numPages = 10
function TagContent(props: QuartzComponentProps) {
@@ -25,11 +25,14 @@
  const content =
    (tree as Root).children.length === 0
      ? fileData.description
      : // @ts-ignore
        toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
      : htmlToJsx(fileData.filePath!, tree)
  if (tag === "") {
    const tags = [...new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))]
  if (tag === "/") {
    const tags = [
      ...new Set(
        allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
      ),
    ].sort((a, b) => a.localeCompare(b))
    const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
    for (const tag of tags) {
      tagItemMap.set(tag, allPagesWithTag(tag))
@@ -54,13 +57,13 @@
            return (
              <div>
                <h2>
                  <a class="internal tag-link" href={`./${tag}`}>
                  <a class="internal tag-link" href={`../tags/${tag}`}>
                    #{tag}
                  </a>
                </h2>
                {content && <p>{content}</p>}
                <p>
                  {pages.length} items with this tag.{" "}
                  {pluralize(pages.length, "item")} with this tag.{" "}
                  {pages.length > numPages && `Showing first ${numPages}.`}
                </p>
                <PageList limit={numPages} {...listProps} />
@@ -80,7 +83,7 @@
    return (
      <div class="popover-hint">
        <article>{content}</article>
        <p>{pages.length} items with this tag.</p>
        <p>{pluralize(pages.length, "item")} with this tag.</p>
        <div>
          <PageList {...listProps} />
        </div>