docs + various polish

quartz/components/Footer.tsx

@@ -1,19 +1,18 @@
 import { QuartzComponentConstructor } from "./types"
 import style from "./styles/footer.scss"
+import {version} from "../../package.json"
 
 interface Options {
-  authorName: string,
   links: Record<string, string>
 }
 
 export default ((opts?: Options) => {
   function Footer() {
     const year = new Date().getFullYear()
-    const name = opts?.authorName ?? "someone"
     const links = opts?.links ?? []
     return <footer>
       <hr />
-      <p>Made by {name} using <a href="https://quartz.jzhao.xyz/">Quartz</a>, © {year}</p>
+      <p>Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}</p>
       <ul>{Object.entries(links).map(([text, link]) => <li>
         <a href={link}>{text}</a>
       </li>)}</ul>

quartz/components/Graph.tsx

@@ -16,7 +16,7 @@ export interface D3Config {
 }
 
 interface GraphOptions {
-  localGraph: Partial<D3Config>,
+  localGraph: Partial<D3Config> | undefined,
   globalGraph: Partial<D3Config> | undefined
 }
 
@@ -50,7 +50,7 @@ export default ((opts?: GraphOptions) => {
     const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph }
     const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph }
     return <div class="graph">
-      <h3>Site Graph</h3>
+      <h3>Graph View</h3>
       <div class="graph-outer">
         <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
         <svg version="1.1" id="global-graph-icon" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

quartz/components/pages/FolderContent.tsx

@@ -5,10 +5,11 @@ import path from "path"
 
 import style from '../styles/listPage.scss'
 import { PageList } from "../PageList"
+import { clientSideSlug } from "../../path"
 
 function FolderContent(props: QuartzComponentProps) {
   const { tree, fileData, allFiles } = props
-  const folderSlug = fileData.slug!
+  const folderSlug = clientSideSlug(fileData.slug!)
   const allPagesInFolder = allFiles.filter(file => {
     const fileSlug = file.slug ?? ""
     const prefixed = fileSlug.startsWith(folderSlug)
@@ -23,12 +24,9 @@ function FolderContent(props: QuartzComponentProps) {
     allFiles: allPagesInFolder
   }
 
-  const desc = props.fileData.description
-
   // @ts-ignore
   const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
   return <div class="popover-hint">
-    {desc && <p>{desc}</p>}
     <article>{content}</article>
     <p>{allPagesInFolder.length} items under this folder.</p>
     <div>

quartz/components/pages/TagContent.tsx

@@ -17,12 +17,9 @@ function TagContent(props: QuartzComponentProps) {
       allFiles: allPagesWithTag
     }
 
-    const desc = props.fileData.description
-
     // @ts-ignore
     const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
     return <div class="popover-hint">
-      {desc && <p>{desc}</p>}
       <article>{content}</article>
       <p>{allPagesWithTag.length} items with this tag.</p>
       <div>

quartz/components/scripts/graph.inline.ts

@@ -72,7 +72,7 @@ async function renderGraph(container: string, slug: string) {
       }
     }
   } else {
-    links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id))
+    Object.keys(data).forEach(id => neighbourhood.add(id))
   }
 
   const graphData: { nodes: NodeData[], links: LinkData[] } = {

quartz/components/scripts/search.inline.ts

@@ -10,6 +10,7 @@ interface Item {
 let index: Document<Item> | undefined = undefined
 
 const contextWindowWords = 30
+const numSearchResults = 5
 function highlight(searchTerm: string, text: string, trim?: boolean) {
   // try to highlight longest tokens first
   const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "").sort((a, b) => b.length - a.length)
@@ -134,7 +135,7 @@ document.addEventListener("nav", async (e: unknown) => {
 
   function onType(e: HTMLElementEventMap["input"]) {
     const term = (e.target as HTMLInputElement).value
-    const searchResults = index?.search(term, 5) ?? []
+    const searchResults = index?.search(term, numSearchResults) ?? []
     const getByField = (field: string): string[] => {
       const results = searchResults.filter((x) => x.field === field)
       return results.length === 0 ? [] : [...results[0].result] as string[]

quartz/components/styles/footer.scss

@@ -1,6 +1,7 @@
 footer {
   text-align: left;
   margin-bottom: 4rem;
+  opacity: 0.7;
 
   & ul {
     list-style: none;

quartz/components/styles/graph.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 .graph {
   & > h3 {
     font-size: 1rem;
@@ -59,6 +61,10 @@
       transform: translate(-50%, -50%);
       height: 60vh;
       width: 50vw;
+
+      @media all and (max-width: $fullPageWidth) {
+        width: 90%;
+      }
     }
   }
 }

quartz/components/styles/popover.scss

@@ -23,8 +23,8 @@
   & > .popover-inner {
     position: relative;
     width: 30rem;
-    height: 20rem;
-    padding: 0 1rem 1rem 1rem;
+    max-height: 20rem;
+    padding: 0 1rem 2rem 1rem;
     font-weight: initial;
     line-height: normal;
     font-size: initial;

quartz/components/styles/toc.scss

@@ -31,6 +31,10 @@ button#toc {
   max-height: none;
   transition: max-height 0.5s ease;
 
+  &.collapsed > .overflow::after {
+    opacity: 0;
+  }
+
   & ul {
     list-style: none;
     margin: 0.5rem 0;