change reading time to content meta

quartz.layout.ts

@@ -15,7 +15,7 @@ export const sharedPageComponents: SharedLayout = {
 
 // 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

@@ -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 @@ interface Props {
   date: Date
 }
 
-export function Date({ date }: Props) {
+export function formatDate(d: Date): string {
-  const formattedDate = date.toLocaleDateString("en-US", {
+  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

@@ -1,25 +0,0 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import readingTime from "reading-time"
-
-function ReadingTime({ fileData }: QuartzComponentProps) {
-  const text = fileData.text
-  if (text) {
-    const { text: timeTaken, words } = readingTime(text)
-    return (
-      <p class="reading-time">
-        {words} words, {timeTaken}
-      </p>
-    )
-  } else {
-    return null
-  }
-}
-
-ReadingTime.css = `
-.reading-time {
-  margin-top: 0;
-  color: var(--gray);
-}
-`
-
-export default (() => ReadingTime) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -5,7 +5,7 @@ import FolderContent from "./pages/FolderContent"
 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 @@ export {
   Darkmode,
   Head,
   PageTitle,
-  ReadingTime,
+  ContentMeta,
   Spacer,
   TableOfContents,
   TagList,