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

Bao

2024-12-03 0c4281eb537d1d7675bcf8f84316a5d7ed0b3bcb

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

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

 quartz/components/Date.tsx

@@ -27,5 +27,5 @@
}

export function Date({ date, locale }: Props) {
  return <>{formatDate(date, locale)}</>
  return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
}

 quartz/components/PageList.tsx

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

 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 {