Striven
yesterday c538c151c7462ad0395ff2c15c5e11e89e362aa8
quartz/components/ContentMeta.tsx
@@ -1,16 +1,22 @@
import { formatDate, getDate } from "./Date"
import { Date, getDate } from "./Date"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time"
import { classNames } from "../util/lang"
import { i18n } from "../i18n"
import { JSX } from "preact"
import style from "./styles/contentMeta.scss"
interface ContentMetaOptions {
  /**
   * Whether to display reading time
   */
  showReadingTime: boolean
  showComma: boolean
}
const defaultOptions: ContentMetaOptions = {
  showReadingTime: true,
  showComma: true,
}
export default ((opts?: Partial<ContentMetaOptions>) => {
@@ -21,29 +27,32 @@
    const text = fileData.text
    if (text) {
      const segments: string[] = []
      const segments: (string | JSX.Element)[] = []
      if (fileData.dates) {
        segments.push(formatDate(getDate(cfg, fileData)!))
        segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
      }
      // Display reading time if enabled
      if (options.showReadingTime) {
        const { text: timeTaken, words: _words } = readingTime(text)
        segments.push(timeTaken)
        const { minutes, words: _words } = readingTime(text)
        const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
          minutes: Math.ceil(minutes),
        })
        segments.push(<span>{displayedTime}</span>)
      }
      return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p>
      return (
        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
          {segments}
        </p>
      )
    } else {
      return null
    }
  }
  ContentMetadata.css = `
  .content-meta {
    margin-top: 0;
    color: var(--gray);
  }
  `
  ContentMetadata.css = style
  return ContentMetadata
}) satisfies QuartzComponentConstructor