various polish

axolotlek · Jul 2, 2023 · e0ebee5 · e0ebee5
1 parent 4c904d8
commit e0ebee5
Show file tree

Hide file tree

Showing 30 changed files with 335 additions and 186 deletions.
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -4,12 +4,7 @@ import * as Plugin from "./quartz/plugins"
 
 const sharedPageComponents = {
   head: Component.Head(),
-  header: [
-    Component.PageTitle(),
-    Component.Spacer(),
-    Component.Search(),
-    Component.Darkmode()
-  ],
+  header: [],
   footer: Component.Footer({
     authorName: "Jacky",
     links: {
@@ -25,19 +20,27 @@ const contentPageLayout: PageLayout = {
     Component.ReadingTime(),
     Component.TagList(),
   ],
-  left: [],
+  left: [
+    Component.PageTitle(),
+    Component.Search(),
+    Component.TableOfContents(),
+    Component.Darkmode()
+  ],
   right: [
     Component.Graph(),
-    Component.TableOfContents(),
-    Component.Backlinks()
+    Component.Backlinks(),
   ],
 }
 
 const listPageLayout: PageLayout = {
   beforeBody: [
     Component.ArticleTitle()
   ],
-  left: [],
+  left: [
+    Component.PageTitle(),
+    Component.Search(),
+    Component.Darkmode()
+  ],
   right: [],
 }
 
@@ -46,6 +49,9 @@ const config: QuartzConfig = {
     pageTitle: "🪴 Quartz 4.0",
     enableSPA: true,
     enablePopovers: true,
+    analytics: {
+      provider: 'plausible',
+    },
     canonicalUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates"],
     theme: {
@@ -102,15 +108,15 @@ const config: QuartzConfig = {
         ...contentPageLayout,
         pageBody: Component.Content(),
       }),
-      Plugin.TagPage({
+      Plugin.FolderPage({
         ...sharedPageComponents,
         ...listPageLayout,
-        pageBody: Component.TagContent(),
+        pageBody: Component.FolderContent(),
       }),
-      Plugin.FolderPage({
+      Plugin.TagPage({
         ...sharedPageComponents,
         ...listPageLayout,
-        pageBody: Component.FolderContent(),
+        pageBody: Component.TagContent(),
       }),
       Plugin.ContentIndex({
         enableSiteMap: true,

diff --git a/quartz/bootstrap-cli.mjs b/quartz/bootstrap-cli.mjs
@@ -64,7 +64,7 @@ yargs(hideBin(process.argv))
       packages: "external",
       plugins: [
         sassPlugin({
-          type: 'css-text'
+          type: 'css-text',
         }),
         {
           name: 'inline-script-loader',

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
@@ -2,12 +2,23 @@ import { QuartzComponent } from "./components/types"
 import { PluginTypes } from "./plugins/types"
 import { Theme } from "./theme"
 
+export type Analytics = null
+  | {
+    provider: 'plausible'
+  }
+  | {
+    provider: 'google',
+    tagId: string
+  }
+
 export interface GlobalConfiguration {
   pageTitle: string,
   /** Whether to enable single-page-app style rendering. this prevents flashes of unstyled content and improves smoothness of Quartz */
   enableSPA: boolean,
   /** Whether to display Wikipedia-style popovers when hovering over links */
   enablePopovers: boolean,
+  /** Analytics mode */
+  analytics: Analytics 
   /** Glob patterns to not search */
   ignorePatterns: string[],
   /** Base URL to use for CNAME files, sitemaps, and RSS feeds that require an absolute URL.

diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
@@ -2,9 +2,8 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 function ArticleTitle({ fileData }: QuartzComponentProps) {
   const title = fileData.frontmatter?.title
-  const displayTitle = fileData.slug === "index" ? undefined : title
-  if (displayTitle) {
-    return <h1 class="article-title">{displayTitle}</h1>
+  if (title) {
+    return <h1 class="article-title">{title}</h1>
   } else {
     return null
   }

diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
@@ -14,7 +14,7 @@ export default ((opts?: Options) => {
     return <>
       <hr />
       <footer>
-        <p>Made by {name} using <a>Quartz</a>, © {year}</p>
+        <p>Made by {name} using <a href="https://quartz.jzhao.xyz/">Quartz</a>, © {year}</p>
         <ul>{Object.entries(links).map(([text, link]) => <li>
           <a href={link}>{text}</a>
         </li>)}</ul>

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
@@ -2,15 +2,7 @@ import { resolveToRoot } from "../path"
 import { JSResourceToScriptElement } from "../resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-interface Options {
-  prefetchContentIndex: boolean
-}
-
-const defaultOptions: Options = {
-  prefetchContentIndex: true
-}
-
-export default ((opts?: Options) => {
+export default (() => {
   function Head({ fileData, externalResources }: QuartzComponentProps) {
     const slug = fileData.slug!
     const title = fileData.frontmatter?.title ?? "Untitled"
@@ -20,10 +12,6 @@ export default ((opts?: Options) => {
     const iconPath = baseDir + "/static/icon.png"
     const ogImagePath = baseDir + "/static/og-image.png"
 
-    const prefetchContentIndex = opts?.prefetchContentIndex ?? defaultOptions.prefetchContentIndex
-    const contentIndexPath = baseDir + "/static/contentIndex.json"
-    const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`
-
     return <head>
       <title>{title}</title>
       <meta charSet="utf-8" />
@@ -36,9 +24,8 @@ export default ((opts?: Options) => {
       <link rel="icon" href={iconPath} />
       <meta name="description" content={description} />
       <meta name="generator" content="Quartz" />
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" />
-      {prefetchContentIndex && <script spa-preserve>{contentIndexScript}</script>}
+      <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(res => JSResourceToScriptElement(res, true))}
     </head>

diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
@@ -12,6 +12,7 @@ header {
   flex-direction: row;
   align-items: center;
   margin: 2em 0;
+  gap: 1.5rem;
 }
 
 header h1 {

diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
@@ -23,7 +23,7 @@ function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): numb
 
 export function PageList({ fileData, allFiles }: QuartzComponentProps) {
   const slug = fileData.slug!
-  return <ul class="section-ul">
+  return <ul class="section-ul popover-hint">
     {allFiles.sort(byDateAndAlphabetical).map(page => {
       const title = page.frontmatter?.title
       const pageSlug = page.slug!
@@ -36,9 +36,8 @@ export function PageList({ fileData, allFiles }: QuartzComponentProps) {
           <div class="desc">
             <h3><a href={stripIndex(relativeToRoot(slug, pageSlug))} class="internal">{title}</a></h3>
           </div>
-          <div class="spacer"></div>
           <ul class="tags">
-            {tags.map(tag => <li><a href={relativeToRoot(slug, `tags/${tag}`)}>#{tag}</a></li>)}
+            {tags.map(tag => <li><a class="internal" href={relativeToRoot(slug, `tags/${tag}`)}>#{tag}</a></li>)}
           </ul>
         </div>
       </li>

diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx
@@ -11,7 +11,7 @@ function TagList({ fileData }: QuartzComponentProps) {
       const display = `#${tag}`
       const linkDest = baseDir + `/tags/${slugAnchor(tag)}`
       return <li>
-        <a href={linkDest}>{display}</a>
+        <a href={linkDest} class="internal">{display}</a>
       </li>
     })}</ul>
   } else {
@@ -25,17 +25,18 @@ TagList.css = `
   display: flex;
   padding-left: 0;
   gap: 0.4rem;
+}
+  
+.tags > li {
+  display: inline-block;
+  margin: 0;
+  overflow-wrap: normal;
+}
 
-  & > li {
-    display: inline-block;
-    margin: 0;
-
-    & > a {
-      border-radius: 8px;
-      border: var(--lightgray) 1px solid;
-      padding: 0.2rem 0.5rem;
-    }
-  }
+.tags > li > a {
+  border-radius: 8px;
+  background-color: var(--highlight);
+  padding: 0.2rem 0.5rem;
 }
 `
 

diff --git a/quartz/components/pages/Content.tsx b/quartz/components/pages/Content.tsx
@@ -5,7 +5,7 @@ import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 function Content({ tree }: QuartzComponentProps) {
   // @ts-ignore (preact makes it angry)
   const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
-  return <article>{content}</article>
+  return <article class="popover-hint">{content}</article>
 }
 
-export default (() => Content) satisfies QuartzComponentConstructor
+export default (() => Content) satisfies QuartzComponentConstructor
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -17,10 +17,15 @@ interface RenderComponents {
 
 export function pageResources(slug: string, staticResources: StaticResources): StaticResources {
   const baseDir = resolveToRoot(slug)
+
+  const contentIndexPath = baseDir + "/static/contentIndex.json"
+  const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`
+
   return {
     css: [baseDir + "/index.css", ...staticResources.css],
     js: [
       { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" },
+      { loadTime: "afterDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript },
       ...staticResources.js,
       { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" }
     ]
@@ -32,28 +37,40 @@ export function renderPage(slug: string, componentData: QuartzComponentProps, co
   const Header = HeaderConstructor()
   const Body = BodyConstructor()
 
+  const LeftComponent =
+    <div class="left">
+      <div class="left-inner">
+        {left.map(BodyComponent => <BodyComponent {...componentData} />)}
+      </div>
+    </div>
+
+  const RightComponent =
+    <div class="right">
+      <div class="right-inner">
+        {right.map(BodyComponent => <BodyComponent {...componentData} />)}
+      </div>
+    </div>
+
   const doc = <html>
     <Head {...componentData} />
     <body data-slug={slug}>
       <div id="quartz-root" class="page">
-        <Header {...componentData} >
-          {header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
-        </Header>
-        <div class="popover-hint">
-          {beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
+        <div class="page-header">
+          <Header {...componentData} >
+            {header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
+          </Header>
+          <div class="popover-hint">
+            {beforeBody.map(BodyComponent => <BodyComponent {...componentData} />)}
+          </div>
         </div>
         <Body {...componentData}>
-          <div class="left">
-            {left.map(BodyComponent => <BodyComponent {...componentData} />)}
-          </div>
-          <div class="center popover-hint">
+          {LeftComponent}
+          <div class="center">
             <Content {...componentData} />
+            <Footer {...componentData} />
           </div>
-          <div class="right">
-            {right.map(BodyComponent => <BodyComponent {...componentData} />)}
-          </div>
+          {RightComponent}
         </Body>
-        <Footer {...componentData} />
       </div>
     </body>
     {pageResources.js.filter(resource => resource.loadTime === "afterDOMReady").map(res => JSResourceToScriptElement(res))}

diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
@@ -2,7 +2,7 @@ const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'l
 const currentTheme = localStorage.getItem('theme') ?? userPref
 document.documentElement.setAttribute('saved-theme', currentTheme)
 
-window.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("nav", () => {
   const switchTheme = (e: any) => {
     if (e.target.checked) {
       document.documentElement.setAttribute('saved-theme', 'dark')
@@ -16,7 +16,8 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // Darkmode toggle
   const toggleSwitch = document.querySelector('#darkmode-toggle') as HTMLInputElement
-  toggleSwitch.addEventListener('change', switchTheme, false)
+  toggleSwitch.removeEventListener('change', switchTheme)
+  toggleSwitch.addEventListener('change', switchTheme)
   if (currentTheme === 'dark') {
     toggleSwitch.checked = true
   }

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
@@ -266,9 +266,9 @@ async function renderGraph(container: string, slug: string) {
   })
 }
 
-function renderGlobalGraph() {
+async function renderGlobalGraph() {
   const slug = document.body.dataset["slug"]!
-  renderGraph("global-graph-container", slug)
+  await renderGraph("global-graph-container", slug)
   const container = document.getElementById("global-graph-outer")
   container?.classList.add("active")
 
@@ -293,7 +293,14 @@ document.addEventListener("nav", async (e: unknown) => {
   containerIcon?.addEventListener("click", renderGlobalGraph)
 })
 
-window.addEventListener('resize', async () => {
-  const slug = document.body.dataset["slug"]!
-  await renderGraph("graph-container", slug)
+let resizeEventDebounce: number | undefined = undefined
+window.addEventListener('resize', () => {
+  if (resizeEventDebounce) {
+    clearTimeout(resizeEventDebounce)
+  }
+
+  resizeEventDebounce = window.setTimeout(async () => {
+    const slug = document.body.dataset["slug"]!
+    await renderGraph("graph-container", slug)
+  }, 50)
 })
diff --git a/quartz/components/scripts/plausible.inline.ts b/quartz/components/scripts/plausible.inline.ts
@@ -0,0 +1,3 @@
+import Plausible from 'plausible-tracker'
+const { trackPageview } = Plausible()
+document.addEventListener("nav", () => trackPageview())