fix indexing causing main thread freeze, various polish

package.json

@@ -41,6 +41,7 @@
     "mdast-util-find-and-replace": "^2.2.2",
     "mdast-util-to-string": "^3.2.0",
     "micromorph": "^0.4.5",
+    "plausible-tracker": "^0.3.8",
     "preact": "^10.14.1",
     "preact-render-to-string": "^6.0.3",
     "pretty-time": "^1.1.0",

quartz.config.ts

@@ -23,8 +23,8 @@ const contentPageLayout: PageLayout = {
   left: [
     Component.PageTitle(),
     Component.Search(),
-    Component.TableOfContents(),
-    Component.Darkmode()
+    Component.Darkmode(),
+    Component.DesktopOnly(Component.TableOfContents()),
   ],
   right: [
     Component.Graph(),

quartz/components/DesktopOnly.tsx

@@ -0,0 +1,20 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    function DesktopOnly(props: QuartzComponentProps) {
+      return <div class="desktop-only">
+        <Component {...props} />
+      </div>
+    }
+
+    DesktopOnly.displayName = component.displayName
+    DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded
+    DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    DesktopOnly.css = component?.css
+    return DesktopOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor

quartz/components/Graph.tsx

@@ -25,23 +25,23 @@ const defaultOptions: GraphOptions = {
     drag: true,
     zoom: true,
     depth: 1,
-    scale: 1.2,
-    repelForce: 2,
-    centerForce: 1,
+    scale: 1.1,
+    repelForce: 0.5,
+    centerForce: 0.3,
     linkDistance: 30,
     fontSize: 0.6,
-    opacityScale: 3
+    opacityScale: 1
   },
   globalGraph: {
     drag: true,
     zoom: true,
     depth: -1,
-    scale: 1.2,
-    repelForce: 1,
-    centerForce: 1,
+    scale: 0.9,
+    repelForce: 0.5,
+    centerForce: 0.3,
     linkDistance: 30,
-    fontSize: 0.5,
-    opacityScale: 3
+    fontSize: 0.6,
+    opacityScale: 1
   }
 }
 

quartz/components/Head.tsx

@@ -1,10 +1,10 @@
-import { resolveToRoot } from "../path"
+import { clientSideSlug, resolveToRoot } from "../path"
 import { JSResourceToScriptElement } from "../resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
   function Head({ fileData, externalResources }: QuartzComponentProps) {
-    const slug = fileData.slug!
+    const slug = clientSideSlug(fileData.slug!)
     const title = fileData.frontmatter?.title ?? "Untitled"
     const description = fileData.description ?? "No description provided"
     const { css, js } = externalResources

quartz/components/MobileOnly.tsx

@@ -0,0 +1,20 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    function MobileOnly(props: QuartzComponentProps) {
+      return <div class="mobile-only">
+        <Component {...props} />
+      </div>
+    }
+
+    MobileOnly.displayName = component.displayName
+    MobileOnly.afterDOMLoaded = component?.afterDOMLoaded
+    MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    MobileOnly.css = component?.css
+    return MobileOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor

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 popover-hint">
+  return <ul class="section-ul">
     {allFiles.sort(byDateAndAlphabetical).map(page => {
       const title = page.frontmatter?.title
       const pageSlug = page.slug!

quartz/components/ReadingTime.tsx

@@ -3,8 +3,7 @@ import readingTime from "reading-time"
 
 function ReadingTime({ fileData }: QuartzComponentProps) {
   const text = fileData.text
-  const isHomePage = fileData.slug === "index"
-  if (text && !isHomePage) {
+  if (text) {
     const { text: timeTaken, words } = readingTime(text)
     return <p class="reading-time">{words} words, {timeTaken}</p>
   } else {

quartz/components/TableOfContents.tsx

@@ -18,7 +18,7 @@ function TableOfContents({ fileData }: QuartzComponentProps) {
     return null
   }
 
-  return <div>
+  return <div class="desktop-only">
     <button type="button" id="toc">
       <h3>Table of Contents</h3>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">

quartz/components/TagList.tsx

@@ -29,6 +29,7 @@ TagList.css = `
   
 .tags > li {
   display: inline-block;
+  white-space: nowrap;
   margin: 0;
   overflow-wrap: normal;
 }

quartz/components/index.ts

@@ -13,6 +13,8 @@ import Graph from "./Graph"
 import Backlinks from "./Backlinks"
 import Search from "./Search"
 import Footer from "./Footer"
+import DesktopOnly from "./DesktopOnly"
+import MobileOnly from "./MobileOnly"
 
 export {
   ArticleTitle,
@@ -29,5 +31,7 @@ export {
   Graph,
   Backlinks,
   Search,
-  Footer
+  Footer,
+  DesktopOnly,
+  MobileOnly
 } 

quartz/components/pages/FolderContent.tsx

@@ -6,7 +6,7 @@ import path from "path"
 import style from '../styles/listPage.scss'
 import { PageList } from "../PageList"
 
-function TagContent(props: QuartzComponentProps) {
+function FolderContent(props: QuartzComponentProps) {
   const { tree, fileData, allFiles } = props
   const folderSlug = fileData.slug!
   const allPagesInFolder = allFiles.filter(file => {
@@ -25,13 +25,15 @@ function TagContent(props: QuartzComponentProps) {
 
   // @ts-ignore
   const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
-  return <div>
+  return <div class="popover-hint">
     <article>{content}</article>
+    <hr/>
+    <p>{allPagesInFolder.length} items under this folder.</p>
     <div>
       <PageList {...listProps} /> 
     </div>
   </div>
 }
 
-TagContent.css = style + PageList.css
-export default (() => TagContent) satisfies QuartzComponentConstructor
+FolderContent.css = style + PageList.css
+export default (() => FolderContent) satisfies QuartzComponentConstructor

quartz/components/pages/TagContent.tsx

@@ -3,13 +3,14 @@ import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import style from '../styles/listPage.scss'
 import { PageList } from "../PageList"
+import { clientSideSlug } from "../../path"
 
 function TagContent(props: QuartzComponentProps) {
   const { tree, fileData, allFiles } = props
   const slug = fileData.slug
-  if (slug?.startsWith("tags/")) {
-    const tag = slug.slice("tags/".length)
 
+  if (slug?.startsWith("tags/")) {
+    const tag = clientSideSlug(slug.slice("tags/".length))
     const allPagesWithTag = allFiles.filter(file => (file.frontmatter?.tags ?? []).includes(tag))
     const listProps = {
       ...props,
@@ -18,8 +19,10 @@ function TagContent(props: QuartzComponentProps) {
 
     // @ts-ignore
     const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
-    return <div>
+    return <div class="popover-hint">
       <article>{content}</article>
+      <hr/>
+      <p>{allPagesWithTag.length} items with this tag.</p>
       <div>
         <PageList {...listProps} />
       </div>

quartz/components/renderPage.tsx

@@ -25,7 +25,7 @@ export function pageResources(slug: string, staticResources: StaticResources): S
     css: [baseDir + "/index.css", ...staticResources.css],
     js: [
       { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" },
-      { loadTime: "afterDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript },
+      { loadTime: "beforeDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript },
       ...staticResources.js,
       { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" }
     ]

quartz/components/scripts/graph.inline.ts

@@ -110,12 +110,12 @@ async function renderGraph(container: string, slug: string) {
     .join("line")
     .attr("class", "link")
     .attr("stroke", "var(--lightgray)")
-    .attr("stroke-width", 2)
+    .attr("stroke-width", 1)
 
   // svg groups
   const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
 
-  // calculate radius
+  // calculate color
   const color = (d: NodeData) => {
     const isCurrent = d.id === slug
     if (isCurrent) {
@@ -182,7 +182,12 @@ async function renderGraph(container: string, slug: string) {
       neighbourNodes.transition().duration(200).attr("fill", color)
 
       // highlight links
-      linkNodes.transition().duration(200).attr("stroke", "var(--gray)")
+      linkNodes
+        .transition()
+        .duration(200)
+        .attr("stroke", "var(--gray)")
+        .attr("stroke-width", 1)
+
 
       const bigFont = fontSize * 1.5
 
@@ -220,7 +225,7 @@ async function renderGraph(container: string, slug: string) {
   const labels = graphNode
     .append("text")
     .attr("dx", 0)
-    .attr("dy", (d) => nodeRadius(d) + 8 + "px")
+    .attr("dy", (d) => nodeRadius(d) - 8 + "px")
     .attr("text-anchor", "middle")
     .text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
     .style('opacity', (opacityScale - 1) / 3.75)
@@ -266,12 +271,11 @@ async function renderGraph(container: string, slug: string) {
   })
 }
 
-async function renderGlobalGraph() {
+function renderGlobalGraph() {
   const slug = document.body.dataset["slug"]!
-  await renderGraph("global-graph-container", slug)
   const container = document.getElementById("global-graph-outer")
   container?.classList.add("active")
-
+  renderGraph("global-graph-container", slug)
 
   function hideGlobalGraph() {
     container?.classList.remove("active")