change reading time to content meta

This commit is contained in:
Jacky Zhao 2023-08-08 21:28:09 -07:00
parent e9eebd1c87
commit 3f8329207b
5 changed files with 40 additions and 31 deletions

View File

@ -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()),

View 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

View File

@ -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)}</>
}

View File

@ -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

View File

@ -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,