feat: separated content meta (#929)

Matt Vogel

2024-03-10 0f5a9d7b661a1f8610d7001f80a3fd2c52661e51

feat: separated content meta (#929)

to allow for CSS styling

 quartz/components/ContentMeta.tsx

@@ -3,16 +3,20 @@
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>) => {
@@ -23,7 +27,7 @@
    const text = fileData.text

    if (text) {
      const segments: string[] = []
      const segments: (string | JSX.Element)[] = []

      if (fileData.dates) {
        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
@@ -38,17 +42,19 @@
        segments.push(displayedTime)
      }

      return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
      const segmentsElements = segments.map((segment) => <span>{segment}</span>)

      return (
        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
          {segmentsElements}
        </p>
      )
    } else {
      return null
    }
  }

  ContentMetadata.css = `
  .content-meta {
    margin-top: 0;
    color: var(--gray);
  }
  `
  ContentMetadata.css = style

  return ContentMetadata
}) satisfies QuartzComponentConstructor

 quartz/components/styles/contentMeta.scss

New file
@@ -0,0 +1,14 @@
.content-meta {
  margin-top: 0;
  color: var(--gray);

  &[show-comma="true"] {
    > span:not(:last-child) {
      margin-right: 8px;

      &::after {
        content: ",";
      }
    }
  }
}