quartz-research-note/quartz/components/ContentMeta.tsx

import { formatDate, getDate } from "./Date"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time"
import { classNames } from "../util/lang"
import { JSX } from "preact/jsx-runtime"

interface ContentMetaOptions {
  /**
   * Whether to display reading time
   */
  showReadingTime: boolean
}

const defaultOptions: ContentMetaOptions = {
  showReadingTime: true,
}

export default ((opts?: Partial<ContentMetaOptions>) => {
  // Merge options with defaults
  const options: ContentMetaOptions = { ...defaultOptions, ...opts }

  function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
    const text = fileData.text
    const filepath = fileData.filePath
    if (text && filepath) {
      const fileRepoUrl: string = `${cfg.repoUrl}/commits/branch/v4/${filepath}`
      const segments: JSX.Element[] = []
      // const segments: string[] = []

      if (fileData.dates?.created) {
        segments.push(<span>created: {formatDate(fileData.dates.created, cfg.locale)}</span>)
      }
      if (fileData.dates?.modified) {
        segments.push(<span> updated: {formatDate(fileData.dates.modified, cfg.locale)}</span>)
      }
      // Display reading time if enabled
      if (options.showReadingTime) {
        const { text: timeTaken, words: _words } = readingTime(text)
        segments.push(<span>{timeTaken}</span>)
      }
      segments.push(
        <a
          href={fileRepoUrl}
          class="external"
          target="_blank"
        >
          view history
          <svg class="external-icon" viewBox="0 0 512 512"><path d="M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z"></path></svg>
        </a>,
      )


      return (
        <p class={classNames(displayClass, "content-meta")}>
          {segments.map((meta, idx) => (
            <>
              {meta}
            </>
          ))}
        </p>
      )
    } else {
      return null
    }
  }

  ContentMetadata.css = `
  .content-meta {
    margin-top: 0;
    color: var(--gray);
  }
  .content-meta span{
    margin-right: 10px;
  }
  `
  return ContentMetadata
}) satisfies QuartzComponentConstructor