feat(layout): better tags on components

* move Explorer to menu
* move Search to search
* move sidebars to aside

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

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)}</>
 }

quartz/components/Explorer.tsx

@@ -112,12 +112,12 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <nav id="explorer-content">
-          <ul class="overflow" id="explorer-ul">
+        <div id="explorer-content">
+          <menu class="overflow" id="explorer-ul">
             <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
             <li id="explorer-end" />
-          </ul>
-        </nav>
+          </menu>
+        </div>
       </div>
     )
   }

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>
       )}

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>
     )
   }
 

quartz/components/renderPage.tsx

@@ -204,19 +204,19 @@ export function renderPage(
   const Body = BodyConstructor()
 
   const LeftComponent = (
-    <section class="left sidebar">
+    <aside class="left sidebar">
       {left.map((BodyComponent) => (
         <BodyComponent {...componentData} />
       ))}
-    </section>
+    </aside>
   )
 
   const RightComponent = (
-    <section class="right sidebar">
+    <aside class="right sidebar">
       {right.map((BodyComponent) => (
         <BodyComponent {...componentData} />
       ))}
-    </section>
+    </aside>
   )
 
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"

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;