Merge 883f4e60684988a9ca6deeb79dc0ea618f3b450f into 7be47742a6dc86f22d148ca9d304f7a9eea318cf

2025-05-18 06:24:22 +02:00 · 2025-02-01 00:27:47 -05:00 · 2025-02-01 00:27:47 -05:00 · b5bf5e23a5
commit b5bf5e23a5
parent 7be47742a6 883f4e6068
10 changed files with 31 additions and 28 deletions
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@ -1,4 +1,4 @@
-import { Date, getDate } from "./Date"
+import { formatDate, 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(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
+        segments.push(formatDate(getDate(cfg, fileData)!))
      }

      // Display reading time if enabled
--- 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 <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
+  return <>{formatDate(date, locale)}</>
 }
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@ -113,10 +113,10 @@ export default ((userOpts?: Partial<Options>) => {
          </svg>
        </button>
        <div id="explorer-content">
-          <ul class="overflow" id="explorer-ul">
+          <menu class="overflow" id="explorer-ul">
            <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
            <li id="explorer-end" />
-          </ul>
+          </menu>
        </div>
      </div>
    )
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@ -216,7 +216,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
          )}
          {/* Recursively render children of folder */}
          <div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}>
-            <ul
+            <menu
              // Inline style for left folder paddings
              style={{
                paddingLeft: node.name !== "" ? "1.4rem" : "0",
@ -233,7 +233,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                  fileData={fileData}
                />
              ))}
-            </ul>
+            </menu>
          </div>
        </li>
      )}
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@ -9,7 +9,7 @@ header {
  display: flex;
  flex-direction: row;
  align-items: center;
-  margin: 2rem 0;
+  padding: 1rem 2rem;
  gap: 1.5rem;
 }

--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
    const opts = { ...defaultOptions, ...userOpts }
    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
    return (
-      <div class={classNames(displayClass, "search")}>
+      <search class={classNames(displayClass, "search")}>
        <button class="search-button" id="search-button">
          <p>{i18n(cfg.locale).components.search.title}</p>
          <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
@ -42,7 +42,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
            <div id="search-layout" data-preview={opts.enablePreview}></div>
          </div>
        </div>
-      </div>
+      </search>
    )
  }

--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@ -221,19 +221,19 @@ export function renderPage(
  const Body = BodyConstructor()

  const LeftComponent = (
-    <div class="left sidebar">
+    <aside class="left sidebar">
      {left.map((BodyComponent) => (
        <BodyComponent {...componentData} />
      ))}
-    </div>
+    </aside>
  )

  const RightComponent = (
-    <div class="right sidebar">
+    <aside class="right sidebar">
      {right.map((BodyComponent) => (
        <BodyComponent {...componentData} />
      ))}
-    </div>
+    </aside>
  )

  const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
@ -242,29 +242,31 @@ export function renderPage(
      <Head {...componentData} />
      <body data-slug={slug}>
        <div id="quartz-root" class="page">
+          <Header {...componentData}>
+            {header.map((HeaderComponent) => (
+              <HeaderComponent {...componentData} />
+            ))}
+          </Header>
          <Body {...componentData}>
            {LeftComponent}
-            <div class="center">
+            <section class="center">
              <div class="page-header">
-                <Header {...componentData}>
-                  {header.map((HeaderComponent) => (
-                    <HeaderComponent {...componentData} />
-                  ))}
-                </Header>
                <div class="popover-hint">
                  {beforeBody.map((BodyComponent) => (
                    <BodyComponent {...componentData} />
                  ))}
                </div>
              </div>
-              <Content {...componentData} />
+              <main>
+                <Content {...componentData} />
+              </main>
              <hr />
              <div class="page-footer">
                {afterBody.map((BodyComponent) => (
                  <BodyComponent {...componentData} />
                ))}
              </div>
-            </div>
+            </section>
            {RightComponent}
            <Footer {...componentData} />
          </Body>
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@ -60,7 +60,7 @@ button#explorer {
  grid-template-rows: 1fr;
 }

-.folder-outer > ul {
+.folder-outer > menu {
  overflow: hidden;
 }

@ -83,7 +83,7 @@ button#explorer {
    visibility: hidden;
  }

-  & ul {
+  & menu {
    list-style: none;
    margin: 0.08rem 0;
    padding: 0;
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@ -125,6 +125,7 @@ a {
 .page {
  max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
  margin: 0 auto;
+
  & article {
    & > h1 {
      font-size: 2rem;
@ -235,7 +236,7 @@ a {
    }

    & .page-header {
-      grid-area: grid-header;
+      grid-area: grid-page-header;
      margin: $topSpacing 0 0 0;
      @media all and ($mobile) {
        margin-top: 0;
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@ -30,7 +30,7 @@ $mobileGrid: (
  columnGap: "5px",
  templateAreas:
    '"grid-sidebar-left"\
-      "grid-header"\
+      "grid-page-header"\
      "grid-center"\
      "grid-sidebar-right"\
      "grid-footer"',
@ -41,7 +41,7 @@ $tabletGrid: (
  rowGap: "5px",
  columnGap: "5px",
  templateAreas:
-    '"grid-sidebar-left grid-header"\
+    '"grid-sidebar-left grid-page-header"\
      "grid-sidebar-left grid-center"\
      "grid-sidebar-left grid-sidebar-right"\
      "grid-sidebar-left grid-footer"',
@ -52,7 +52,7 @@ $desktopGrid: (
  rowGap: "5px",
  columnGap: "5px",
  templateAreas:
-    '"grid-sidebar-left grid-header grid-sidebar-right"\
+    '"grid-sidebar-left grid-page-header grid-sidebar-right"\
      "grid-sidebar-left grid-center grid-sidebar-right"\
      "grid-sidebar-left grid-footer grid-sidebar-right"',
 );