fix: use time HTML element for date strings

For dates, use a [time][mdn:time] element instead, to annotate date strings with a machine-readable timestamp [mdn:time]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#specifications
jackyzha0 · Nov 28, 2024 · 1b6da4d · 1b6da4d
1 parent e1d754e
commit 1b6da4d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
@@ -1,4 +1,4 @@
-import { formatDate, getDate } from "./Date"
+import { Date, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
@@ -30,7 +30,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       const segments: (string | JSX.Element)[] = []
 
       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
@@ -39,14 +39,12 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
         const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
           minutes: Math.ceil(minutes),
         })
-        segments.push(displayedTime)
+        segments.push(<span>{displayedTime}</span>)
       }
 
-      const segmentsElements = segments.map((segment) => <span>{segment}</span>)
-
       return (
         <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
-          {segmentsElements}
+          {segments}
         </p>
       )
     } else {

diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
@@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
 }
 
 export function Date({ date, locale }: Props) {
-  return <>{formatDate(date, locale)}</>
+  return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
 }
diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
@@ -46,13 +46,11 @@ export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort
         return (
           <li class="section-li">
             <div class="section">
-              <div>
+              <p class="meta">
                 {page.dates && (
-                  <p class="meta">
-                    <Date date={getDate(cfg, page)!} locale={cfg.locale} />
-                  </p>
+                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                 )}
-              </div>
+              </p>
               <div class="desc">
                 <h3>
                   <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">

diff --git a/quartz/components/styles/contentMeta.scss b/quartz/components/styles/contentMeta.scss
@@ -3,7 +3,7 @@
   color: var(--gray);
 
   &[show-comma="true"] {
-    > span:not(:last-child) {
+    > *:not(:last-child) {
       margin-right: 8px;
 
       &::after {