diff --git a/quartz.layout.ts b/quartz.layout.ts index 1a3f99fae..482aba6e3 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 000000000..007ce3e6c --- /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 ( +
+ ) + } 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 16c454403..f4b284af9 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 f802c876c..000000000 --- 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 ( -- {words} words, {timeTaken} -
- ) - } 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 c0fe1ec12..caaf41618 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,