taglist, mermaid

quartz/components/Head.tsx

@@ -1,4 +1,5 @@
 import { resolveToRoot } from "../path"
+import { JSResourceToScriptElement } from "../resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 function Head({ fileData, externalResources }: QuartzComponentProps) {
@@ -25,7 +26,7 @@ function Head({ fileData, externalResources }: QuartzComponentProps) {
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     {css.map(href => <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />)}
-    {js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => <script key={resource.src} {...resource} spa-preserve />)}
+    {js.filter(resource => resource.loadTime === "beforeDOMReady").map(res => JSResourceToScriptElement(res, true))}
   </head>
 }
 

quartz/components/TableOfContents.tsx

@@ -1,21 +1,38 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/toc.scss"
 
-function TableOfContents({ fileData }: QuartzComponentProps) {
-  if (!fileData.toc) {
-    return null
-  }
 
-  return <details class="toc" open>
-    <summary><h3>Table of Contents</h3></summary>
-    <ul>
-      {fileData.toc.map(tocEntry => <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
-        <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
-      </li>)}
-    </ul>
-  </details>
+interface Options {
+  layout: 'modern' | 'quartz-3'
 }
 
-TableOfContents.css = style
+const defaultOptions: Options = {
+  layout: 'quartz-3'
+}
 
-export default (() => TableOfContents) satisfies QuartzComponentConstructor
+export default ((opts?: Partial<Options>) => {
+  const layout = opts?.layout ?? defaultOptions.layout
+  if (layout === "modern") {
+    return function() {
+      return null // TODO (make this look like nextra)
+    }
+  } else {
+    function TableOfContents({ fileData }: QuartzComponentProps) {
+      if (!fileData.toc) {
+        return null
+      }
+
+      return <details class="toc" open>
+        <summary><h3>Table of Contents</h3></summary>
+        <ul>
+          {fileData.toc.map(tocEntry => <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+            <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
+          </li>)}
+        </ul>
+      </details>
+    }
+
+    TableOfContents.css = style
+    return TableOfContents
+  }
+}) satisfies QuartzComponentConstructor

quartz/components/TagList.tsx

@@ -0,0 +1,42 @@
+import { resolveToRoot } from "../path"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { slug as slugAnchor } from 'github-slugger'
+
+function TagList({ fileData }: QuartzComponentProps) {
+  const tags = fileData.frontmatter?.tags
+  const slug = fileData.slug!
+  const baseDir = resolveToRoot(slug)
+  if (tags) {
+    return <ul class="tags">{tags.map(tag => {
+      const display = `#${tag}`
+      const linkDest = baseDir + `/tags/${slugAnchor(tag)}`
+      return <li>
+        <a href={linkDest}>{display}</a>
+      </li>
+    })}</ul>
+  } else {
+    return null
+  }
+}
+
+TagList.css = `
+.tags {
+  list-style: none;
+  display: flex;
+  padding-left: 0;
+  gap: 0.4rem;
+
+  & > li {
+    display: inline-block;
+    margin: 0;
+
+    & > a {
+      border-radius: 8px;
+      border: var(--lightgray) 1px solid;
+      padding: 0.2rem 0.5rem;
+    }
+  }
+}
+`
+
+export default (() => TagList) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -6,6 +6,7 @@ import PageTitle from "./PageTitle"
 import ReadingTime from "./ReadingTime"
 import Spacer from "./Spacer"
 import TableOfContents from "./TableOfContents"
+import TagList from "./TagList"
 
 export {
   ArticleTitle,
@@ -15,5 +16,6 @@ export {
   PageTitle,
   ReadingTime,
   Spacer,
-  TableOfContents
+  TableOfContents,
+  TagList
 }