change reading time to content meta
This commit is contained in:
parent
e9eebd1c87
commit
3f8329207b
@ -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()),
|
||||
|
31
quartz/components/ContentMeta.tsx
Normal file
31
quartz/components/ContentMeta.tsx
Normal 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
|
@ -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)}</>
|
||||
}
|
||||
|
@ -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
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user