From 3f8329207b8406bdcaab066f92d29a07b5521857 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 1a3f99f..482aba6 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 0000000..007ce3e
--- /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 16c4544..f4b284a 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 f802c87..0000000
--- 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 c0fe1ec..caaf416 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,