Sean Missingham
2024-07-01 f7bd2137ecbb81f3ed50ae9ccaaee27ae855c11a
quartz/components/pages/TagContent.tsx
@@ -1,15 +1,14 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
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"
import { i18n } from "../../i18n/i18next"
import { i18n } from "../../i18n"
const numPages = 10
function TagContent(props: QuartzComponentProps) {
const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
  const { tree, fileData, allFiles, cfg } = props
  const slug = fileData.slug
@@ -44,10 +43,7 @@
        <article>
          <p>{content}</p>
        </article>
        <p>
          {i18n(cfg.locale, "tagContent.found")} {tags.length}{" "}
          {i18n(cfg.locale, "tagContent.totalTags")}.
        </p>
        <p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
        <div>
          {tags.map((tag) => {
            const pages = tagItemMap.get(tag)!
@@ -56,22 +52,33 @@
              allFiles: pages,
            }
            const contentPage = allFiles.filter((file) => file.slug === `tags/${tag}`)[0]
            const content = contentPage?.description
            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 (
              <div>
                <h2>
                  <a class="internal tag-link" href={`../tags/${tag}`}>
                    #{tag}
                    {tag}
                  </a>
                </h2>
                {content && <p>{content}</p>}
                <div class="page-listing">
                  <p>
                    {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
                    {i18n(cfg.locale, "tagContent.withThisTag")}.{" "}
                    {pages.length > numPages &&
                      `${i18n(cfg.locale, "tagContent.showingFirst")} ${numPages}.`}
                    {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
                    {pages.length > numPages && (
                      <>
                        {" "}
                        <span>
                          {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
                        </span>
                      </>
                    )}
                  </p>
                  <PageList limit={numPages} {...listProps} />
                </div>
@@ -92,10 +99,7 @@
      <div class={classes}>
        <article>{content}</article>
        <div class="page-listing">
          <p>
            {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
            {i18n(cfg.locale, "tagContent.withThisTag")}.
          </p>
          <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
          <div>
            <PageList {...listProps} />
          </div>