change reading time to content meta

Jacky Zhao

2023-08-09 e21f0f9bb97cbc4bd59f6bce0e0fce451b6d2b01

change reading time to content meta

 quartz.layout.ts

@@ -15,7 +15,7 @@

// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [Component.ArticleTitle(), Component.ReadingTime(), Component.TagList()],
  beforeBody: [Component.ArticleTitle(), Component.ContentMeta(), Component.TagList()],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),

 quartz/components/ContentMeta.tsx

New file
@@ -0,0 +1,31 @@
import { formatDate } from "./Date"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time"

export default (() => {
  function ContentMetadata({ fileData }: QuartzComponentProps) {
    const text = fileData.text
    if (text) {
      const segments: string[] = []
      const { text: timeTaken, words: _words } = readingTime(text)
      if (fileData.dates?.modified) {
        segments.push(formatDate(fileData.dates.modified))
      }

      segments.push(timeTaken)
      return (
        <p class="content-meta">{segments.join(", ")}</p>
      )
    } else {
      return null
    }
  }

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

 quartz/components/Date.tsx

@@ -2,11 +2,14 @@
  date: Date
}

export function Date({ date }: Props) {
  const formattedDate = date.toLocaleDateString("en-US", {
export function formatDate(d: Date): string {
  return d.toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "2-digit",
  })
  return <>{formattedDate}</>
}

export function Date({ date }: Props) {
  return <>{formatDate(date)}</>
}

 quartz/components/ReadingTime.tsx

File was deleted

 quartz/components/index.ts

@@ -5,7 +5,7 @@
import Darkmode from "./Darkmode"
import Head from "./Head"
import PageTitle from "./PageTitle"
import ReadingTime from "./ReadingTime"
import ContentMeta from "./ContentMeta"
import Spacer from "./Spacer"
import TableOfContents from "./TableOfContents"
import TagList from "./TagList"
@@ -24,7 +24,7 @@
  Darkmode,
  Head,
  PageTitle,
  ReadingTime,
  ContentMeta,
  Spacer,
  TableOfContents,
  TagList,