components: semantic web for main components

jackyzha0 · Nov 29, 2024 · 7c49f58 · 7c49f58
1 parent 920fd4e
commit 7c49f58
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 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

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/Explorer.tsx b/quartz/components/Explorer.tsx
@@ -112,12 +112,12 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div id="explorer-content">
+        <nav id="explorer-content">
           <ul class="overflow" id="explorer-ul">
             <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
             <li id="explorer-end" />
           </ul>
-        </div>
+        </nav>
       </div>
     )
   }

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -202,19 +202,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"
@@ -230,7 +230,7 @@ export function renderPage(
           </Header>
           <Body {...componentData}>
             {LeftComponent}
-            <div class="center">
+            <main class="center">
               <div class="page-header">
                 <div class="popover-hint">
                   {beforeBody.map((BodyComponent) => (
@@ -245,7 +245,7 @@ export function renderPage(
                   <BodyComponent {...componentData} />
                 ))}
               </div>
-            </div>
+            </main>
             {RightComponent}
             <Footer {...componentData} />
           </Body>