From e21f0f9bb97cbc4bd59f6bce0e0fce451b6d2b01 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 8 Aug 2023 21:28:09 -0700
Subject: [PATCH] change reading time to content meta

---
 quartz.layout.ts                  |  2 +-
 quartz/components/ContentMeta.tsx | 31 +++++++++++++++++++++++++++++++
 quartz/components/Date.tsx        |  9 ++++++---
 quartz/components/ReadingTime.tsx | 25 -------------------------
 quartz/components/index.ts        |  4 ++--
 5 files changed, 40 insertions(+), 31 deletions(-)
 create mode 100644 quartz/components/ContentMeta.tsx
 delete mode 100644 quartz/components/ReadingTime.tsx

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 1a3f99fa..482aba6e 100644
--- a/quartz.layout.ts
+++ b/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()),
diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
new file mode 100644
index 00000000..007ce3e6
--- /dev/null
+++ b/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
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 16c45440..f4b284af 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -2,11 +2,14 @@ interface Props {
   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)}</>
 }
diff --git a/quartz/components/ReadingTime.tsx b/quartz/components/ReadingTime.tsx
deleted file mode 100644
index f802c876..00000000
--- a/quartz/components/ReadingTime.tsx
+++ /dev/null
@@ -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
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index c0fe1ec1..caaf4161 100644
--- a/quartz/components/index.ts
+++ b/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,