DibyashanuPati/quartz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use time HTML element for date strings (#1622)

Browse source
This commit is contained in:
Bao 2024-12-03 00:41:55 -06:00 • committed by GitHub
parent 7ac94e1d84
commit 0c4281eb53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
quartz/components/ContentMeta.tsx
View file

@ -1,4 +1,4 @@
import { formatDate, getDate } from "./Date" import { Date, getDate } from "./Date"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time" import readingTime from "reading-time"
import { classNames } from "../util/lang" import { classNames } from "../util/lang"
@ -30,7 +30,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
const segments: (string | JSX.Element)[] = [] const segments: (string | JSX.Element)[] = []
if (fileData.dates) { if (fileData.dates) {
segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale)) segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
} }
// Display reading time if enabled // Display reading time if enabled
@ -39,14 +39,12 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({ const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
minutes: Math.ceil(minutes), minutes: Math.ceil(minutes),
}) })
segments.push(displayedTime) segments.push(<span>{displayedTime}</span>)
} }
const segmentsElements = segments.map((segment) => <span>{segment}</span>)
return ( return (
<p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}> <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
{segmentsElements} {segments}
</p> </p>
) )
} else { } else {

2
quartz/components/Date.tsx
View file

@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
} }
export function Date({ date, locale }: Props) { export function Date({ date, locale }: Props) {
return <>{formatDate(date, locale)}</> return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
} }

10
quartz/components/PageList.tsx
View file

@ -46,13 +46,9 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
return ( return (
<li class="section-li"> <li class="section-li">
<div class="section"> <div class="section">
<div> <p class="meta">
{page.dates && ( {page.dates && <Date date={getDate(cfg, page)!} locale={cfg.locale} />}
<p class="meta"> </p>
<Date date={getDate(cfg, page)!} locale={cfg.locale} />
</p>
)}
</div>
<div class="desc"> <div class="desc">
<h3> <h3>
<a href={resolveRelative(fileData.slug!, page.slug!)} class="internal"> <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">

2
quartz/components/styles/contentMeta.scss
View file

@ -3,7 +3,7 @@
color: var(--gray); color: var(--gray);
&[show-comma="true"] { &[show-comma="true"] {
> span:not(:last-child) { > *:not(:last-child) {
margin-right: 8px; margin-right: 8px;
&::after { &::after {