From c4cf0dcb022ff826433b63b8ff68830bb8503895 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 18 Jun 2023 17:47:07 +0000
Subject: [PATCH] local and global graph
---
quartz/components/ArticleTitle.tsx | 7
quartz/components/Header.tsx | 10
quartz/styles/base.scss | 26
package-lock.json | 690 ++++++++++++++++++++++++++++
quartz/components/PageTitle.tsx | 23
quartz/components/index.ts | 4
index.d.ts | 8
quartz/cfg.ts | 1
quartz/components/scripts/popover.inline.ts | 43 +
quartz/components/Head.tsx | 69 +-
quartz/path.ts | 6
quartz/components/Graph.tsx | 81 +++
quartz/components/styles/graph.scss | 68 ++
quartz/components/scripts/spa.inline.ts | 6
quartz/components/scripts/graph.inline.ts | 287 +++++++++++
quartz/plugins/emitters/contentIndex.ts | 7
package.json | 2
quartz/components/TableOfContents.tsx | 4
quartz/components/styles/toc.scss | 3
quartz/components/styles/popover.scss | 33
quartz/plugins/emitters/contentPage.tsx | 4
quartz.config.ts | 10
quartz/components/styles/darkmode.scss | 6
23 files changed, 1,288 insertions(+), 110 deletions(-)
diff --git a/index.d.ts b/index.d.ts
index 26ca700..3b3acfc 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,10 +8,4 @@
"nav": CustomEvent<{ url: string }>;
}
-declare global {
- interface Document {
- addEventListener<K extends keyof CustomEventMap>(type: K,
- listener: (this: Document, ev: CustomEventMap[K]) => void): void;
- dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
- }
-}
+declare const fetchData: Promise<ContentIndex>
diff --git a/package-lock.json b/package-lock.json
index eb3a121..c9f9b3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
"@napi-rs/simple-git": "^0.1.8",
"chalk": "^4.1.2",
"cli-spinner": "^0.2.10",
+ "d3": "^7.8.5",
+ "d3-force-reuse": "^1.0.1",
"esbuild-sass-plugin": "^2.9.0",
"github-slugger": "^2.0.0",
"globby": "^13.1.4",
@@ -54,6 +56,7 @@
},
"devDependencies": {
"@types/cli-spinner": "^0.2.1",
+ "@types/d3": "^7.4.0",
"@types/hast": "^2.3.4",
"@types/node": "^20.1.2",
"@types/pretty-time": "^1.1.2",
@@ -894,6 +897,259 @@
"@types/node": "*"
}
},
+ "node_modules/@types/d3": {
+ "version": "7.4.0",
+ "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
+ "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-array": "*",
+ "@types/d3-axis": "*",
+ "@types/d3-brush": "*",
+ "@types/d3-chord": "*",
+ "@types/d3-color": "*",
+ "@types/d3-contour": "*",
+ "@types/d3-delaunay": "*",
+ "@types/d3-dispatch": "*",
+ "@types/d3-drag": "*",
+ "@types/d3-dsv": "*",
+ "@types/d3-ease": "*",
+ "@types/d3-fetch": "*",
+ "@types/d3-force": "*",
+ "@types/d3-format": "*",
+ "@types/d3-geo": "*",
+ "@types/d3-hierarchy": "*",
+ "@types/d3-interpolate": "*",
+ "@types/d3-path": "*",
+ "@types/d3-polygon": "*",
+ "@types/d3-quadtree": "*",
+ "@types/d3-random": "*",
+ "@types/d3-scale": "*",
+ "@types/d3-scale-chromatic": "*",
+ "@types/d3-selection": "*",
+ "@types/d3-shape": "*",
+ "@types/d3-time": "*",
+ "@types/d3-time-format": "*",
+ "@types/d3-timer": "*",
+ "@types/d3-transition": "*",
+ "@types/d3-zoom": "*"
+ }
+ },
+ "node_modules/@types/d3-array": {
+ "version": "3.0.5",
+ "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.5.tgz",
+ "integrity": "sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==",
+ "dev": true
+ },
+ "node_modules/@types/d3-axis": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.2.tgz",
+ "integrity": "sha512-uGC7DBh0TZrU/LY43Fd8Qr+2ja1FKmH07q2FoZFHo1eYl8aj87GhfVoY1saJVJiq24rp1+wpI6BvQJMKgQm8oA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-selection": "*"
+ }
+ },
+ "node_modules/@types/d3-brush": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.2.tgz",
+ "integrity": "sha512-2TEm8KzUG3N7z0TrSKPmbxByBx54M+S9lHoP2J55QuLU0VSQ9mE96EJSAOVNEqd1bbynMjeTS9VHmz8/bSw8rA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-selection": "*"
+ }
+ },
+ "node_modules/@types/d3-chord": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.2.tgz",
+ "integrity": "sha512-abT/iLHD3sGZwqMTX1TYCMEulr+wBd0SzyOQnjYNLp7sngdOHYtNkMRI5v3w5thoN+BWtlHVDx2Osvq6fxhZWw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-color": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+ "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
+ "dev": true
+ },
+ "node_modules/@types/d3-contour": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.2.tgz",
+ "integrity": "sha512-k6/bGDoAGJZnZWaKzeB+9glgXCYGvh6YlluxzBREiVo8f/X2vpTEdgPy9DN7Z2i42PZOZ4JDhVdlTSTSkLDPlQ==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-array": "*",
+ "@types/geojson": "*"
+ }
+ },
+ "node_modules/@types/d3-delaunay": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
+ "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
+ "dev": true
+ },
+ "node_modules/@types/d3-dispatch": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.2.tgz",
+ "integrity": "sha512-rxN6sHUXEZYCKV05MEh4z4WpPSqIw+aP7n9ZN6WYAAvZoEAghEK1WeVZMZcHRBwyaKflU43PCUAJNjFxCzPDjg==",
+ "dev": true
+ },
+ "node_modules/@types/d3-drag": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.2.tgz",
+ "integrity": "sha512-qmODKEDvyKWVHcWWCOVcuVcOwikLVsyc4q4EBJMREsoQnR2Qoc2cZQUyFUPgO9q4S3qdSqJKBsuefv+h0Qy+tw==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-selection": "*"
+ }
+ },
+ "node_modules/@types/d3-dsv": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.1.tgz",
+ "integrity": "sha512-76pBHCMTvPLt44wFOieouXcGXWOF0AJCceUvaFkxSZEu4VDUdv93JfpMa6VGNFs01FHfuP4a5Ou68eRG1KBfTw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-ease": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+ "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
+ "dev": true
+ },
+ "node_modules/@types/d3-fetch": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.2.tgz",
+ "integrity": "sha512-gllwYWozWfbep16N9fByNBDTkJW/SyhH6SGRlXloR7WdtAaBui4plTP+gbUgiEot7vGw/ZZop1yDZlgXXSuzjA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-dsv": "*"
+ }
+ },
+ "node_modules/@types/d3-force": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.4.tgz",
+ "integrity": "sha512-q7xbVLrWcXvSBBEoadowIUJ7sRpS1yvgMWnzHJggFy5cUZBq2HZL5k/pBSm0GdYWS1vs5/EDwMjSKF55PDY4Aw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-format": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+ "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+ "dev": true
+ },
+ "node_modules/@types/d3-geo": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.3.tgz",
+ "integrity": "sha512-bK9uZJS3vuDCNeeXQ4z3u0E7OeJZXjUgzFdSOtNtMCJCLvDtWDwfpRVWlyt3y8EvRzI0ccOu9xlMVirawolSCw==",
+ "dev": true,
+ "dependencies": {
+ "@types/geojson": "*"
+ }
+ },
+ "node_modules/@types/d3-hierarchy": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+ "integrity": "sha512-9hjRTVoZjRFR6xo8igAJyNXQyPX6Aq++Nhb5ebrUF414dv4jr2MitM2fWiOY475wa3Za7TOS2Gh9fmqEhLTt0A==",
+ "dev": true
+ },
+ "node_modules/@types/d3-interpolate": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+ "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-color": "*"
+ }
+ },
+ "node_modules/@types/d3-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+ "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
+ "dev": true
+ },
+ "node_modules/@types/d3-polygon": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
+ "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-quadtree": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
+ "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-random": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
+ "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
+ "dev": true
+ },
+ "node_modules/@types/d3-scale": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
+ "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-time": "*"
+ }
+ },
+ "node_modules/@types/d3-scale-chromatic": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+ "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-selection": {
+ "version": "3.0.5",
+ "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.5.tgz",
+ "integrity": "sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==",
+ "dev": true
+ },
+ "node_modules/@types/d3-shape": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.1.tgz",
+ "integrity": "sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-path": "*"
+ }
+ },
+ "node_modules/@types/d3-time": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+ "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+ "dev": true
+ },
+ "node_modules/@types/d3-time-format": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
+ "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
+ "dev": true
+ },
+ "node_modules/@types/d3-timer": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
+ "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
+ "dev": true
+ },
+ "node_modules/@types/d3-transition": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.3.tgz",
+ "integrity": "sha512-/S90Od8Id1wgQNvIA8iFv9jRhCiZcGhPd2qX0bKF/PS+y0W5CrXKgIiELd2CvG1mlQrWK/qlYh3VxicqG1ZvgA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-selection": "*"
+ }
+ },
+ "node_modules/@types/d3-zoom": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.3.tgz",
+ "integrity": "sha512-OWk1yYIIWcZ07+igN6BeoG6rqhnJ/pYe+R1qWFM2DtW49zsoSjgb9G5xB0ZXA8hh2jAzey1XuRmMSoXdKw8MDA==",
+ "dev": true,
+ "dependencies": {
+ "@types/d3-interpolate": "*",
+ "@types/d3-selection": "*"
+ }
+ },
"node_modules/@types/debug": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -902,6 +1158,12 @@
"@types/ms": "*"
}
},
+ "node_modules/@types/geojson": {
+ "version": "7946.0.10",
+ "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+ "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+ "dev": true
+ },
"node_modules/@types/hast": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
@@ -1290,6 +1552,408 @@
"node": ">= 8"
}
},
+ "node_modules/d3": {
+ "version": "7.8.5",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+ "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+ "dependencies": {
+ "d3-array": "3",
+ "d3-axis": "3",
+ "d3-brush": "3",
+ "d3-chord": "3",
+ "d3-color": "3",
+ "d3-contour": "4",
+ "d3-delaunay": "6",
+ "d3-dispatch": "3",
+ "d3-drag": "3",
+ "d3-dsv": "3",
+ "d3-ease": "3",
+ "d3-fetch": "3",
+ "d3-force": "3",
+ "d3-format": "3",
+ "d3-geo": "3",
+ "d3-hierarchy": "3",
+ "d3-interpolate": "3",
+ "d3-path": "3",
+ "d3-polygon": "3",
+ "d3-quadtree": "3",
+ "d3-random": "3",
+ "d3-scale": "4",
+ "d3-scale-chromatic": "3",
+ "d3-selection": "3",
+ "d3-shape": "3",
+ "d3-time": "3",
+ "d3-time-format": "4",
+ "d3-timer": "3",
+ "d3-transition": "3",
+ "d3-zoom": "3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-array": {
+ "version": "3.2.4",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+ "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+ "dependencies": {
+ "internmap": "1 - 2"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-axis": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+ "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-brush": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+ "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+ "dependencies": {
+ "d3-dispatch": "1 - 3",
+ "d3-drag": "2 - 3",
+ "d3-interpolate": "1 - 3",
+ "d3-selection": "3",
+ "d3-transition": "3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-chord": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+ "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+ "dependencies": {
+ "d3-path": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-color": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+ "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-contour": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+ "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+ "dependencies": {
+ "d3-array": "^3.2.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-delaunay": {
+ "version": "6.0.4",
+ "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+ "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+ "dependencies": {
+ "delaunator": "5"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-dispatch": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+ "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-drag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+ "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+ "dependencies": {
+ "d3-dispatch": "1 - 3",
+ "d3-selection": "3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-dsv": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+ "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+ "dependencies": {
+ "commander": "7",
+ "iconv-lite": "0.6",
+ "rw": "1"
+ },
+ "bin": {
+ "csv2json": "bin/dsv2json.js",
+ "csv2tsv": "bin/dsv2dsv.js",
+ "dsv2dsv": "bin/dsv2dsv.js",
+ "dsv2json": "bin/dsv2json.js",
+ "json2csv": "bin/json2dsv.js",
+ "json2dsv": "bin/json2dsv.js",
+ "json2tsv": "bin/json2dsv.js",
+ "tsv2csv": "bin/dsv2dsv.js",
+ "tsv2json": "bin/dsv2json.js"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-dsv/node_modules/commander": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+ "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/d3-dsv/node_modules/iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/d3-ease": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+ "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-fetch": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+ "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+ "dependencies": {
+ "d3-dsv": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-force": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+ "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+ "dependencies": {
+ "d3-dispatch": "1 - 3",
+ "d3-quadtree": "1 - 3",
+ "d3-timer": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-force-reuse": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/d3-force-reuse/-/d3-force-reuse-1.0.1.tgz",
+ "integrity": "sha512-TyJfszB6JZmzOYr3oDayjm0LE1Fz0wsn9DkDcYopDOXY/M07rTTDGQ5wYQMZjmcobND3+Og53CATORFbFuQUqw==",
+ "dependencies": {
+ "d3-quadtree": "^1.0.3"
+ }
+ },
+ "node_modules/d3-force-reuse/node_modules/d3-quadtree": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
+ "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
+ },
+ "node_modules/d3-format": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+ "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-geo": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+ "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+ "dependencies": {
+ "d3-array": "2.5.0 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-hierarchy": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+ "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-interpolate": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+ "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+ "dependencies": {
+ "d3-color": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-path": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+ "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-polygon": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+ "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-quadtree": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+ "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-random": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+ "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-scale": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+ "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+ "dependencies": {
+ "d3-array": "2.10.0 - 3",
+ "d3-format": "1 - 3",
+ "d3-interpolate": "1.2.0 - 3",
+ "d3-time": "2.1.1 - 3",
+ "d3-time-format": "2 - 4"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-scale-chromatic": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+ "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+ "dependencies": {
+ "d3-color": "1 - 3",
+ "d3-interpolate": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-selection": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+ "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-shape": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+ "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+ "dependencies": {
+ "d3-path": "^3.1.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-time": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+ "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+ "dependencies": {
+ "d3-array": "2 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-time-format": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+ "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+ "dependencies": {
+ "d3-time": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-timer": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+ "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-transition": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+ "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+ "dependencies": {
+ "d3-color": "1 - 3",
+ "d3-dispatch": "1 - 3",
+ "d3-ease": "1 - 3",
+ "d3-interpolate": "1 - 3",
+ "d3-timer": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "d3-selection": "2 - 3"
+ }
+ },
+ "node_modules/d3-zoom": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+ "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+ "dependencies": {
+ "d3-dispatch": "1 - 3",
+ "d3-drag": "2 - 3",
+ "d3-interpolate": "1 - 3",
+ "d3-selection": "2 - 3",
+ "d3-transition": "2 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1318,6 +1982,14 @@
"url": "https://github.com/sponsors/wooorm"
}
},
+ "node_modules/delaunator": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+ "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+ "dependencies": {
+ "robust-predicates": "^3.0.0"
+ }
+ },
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1965,6 +2637,14 @@
"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
},
+ "node_modules/internmap": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+ "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/is-absolute-url": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
@@ -3596,6 +4276,11 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/robust-predicates": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+ "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+ },
"node_modules/run-async": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz",
@@ -3626,6 +4311,11 @@
"queue-microtask": "^1.2.2"
}
},
+ "node_modules/rw": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+ "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+ },
"node_modules/sade": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
diff --git a/package.json b/package.json
index 3e42cf7..adc3bcc 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"@napi-rs/simple-git": "^0.1.8",
"chalk": "^4.1.2",
"cli-spinner": "^0.2.10",
+ "d3": "^7.8.5",
"esbuild-sass-plugin": "^2.9.0",
"github-slugger": "^2.0.0",
"globby": "^13.1.4",
@@ -67,6 +68,7 @@
},
"devDependencies": {
"@types/cli-spinner": "^0.2.1",
+ "@types/d3": "^7.4.0",
"@types/hast": "^2.3.4",
"@types/node": "^20.1.2",
"@types/pretty-time": "^1.1.2",
diff --git a/quartz.config.ts b/quartz.config.ts
index 5795672..41d65a6 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -4,7 +4,6 @@
const config: QuartzConfig = {
configuration: {
- siteTitle: "🪴 Quartz 4.0",
enableSPA: true,
ignorePatterns: ["private", "templates"],
theme: {
@@ -58,7 +57,11 @@
Plugin.AliasRedirects(),
Plugin.ContentPage({
head: Component.Head(),
- header: [Component.PageTitle(), Component.Spacer(), Component.Darkmode()],
+ header: [
+ Component.PageTitle({ title: "🪴 Quartz 4.0" }),
+ Component.Spacer(),
+ Component.Darkmode()
+ ],
beforeBody: [
Component.ArticleTitle(),
Component.ReadingTime(),
@@ -66,9 +69,10 @@
],
content: Component.Content(),
left: [
- Component.TableOfContents(),
],
right: [
+ Component.Graph(),
+ Component.TableOfContents(),
],
footer: []
}),
diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index 1406402..e1cf3af 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -2,7 +2,6 @@
import { Theme } from "./theme"
export interface GlobalConfiguration {
- siteTitle: string,
/** Whether to enable single-page-app style rendering. this prevents flashes of unstyled content and improves smoothness of Quartz */
enableSPA: boolean,
/** Glob patterns to not search */
diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
index 37950c4..c25769e 100644
--- a/quartz/components/ArticleTitle.tsx
+++ b/quartz/components/ArticleTitle.tsx
@@ -4,10 +4,15 @@
const title = fileData.frontmatter?.title
const displayTitle = fileData.slug === "index" ? undefined : title
if (displayTitle) {
- return <h1>{displayTitle}</h1>
+ return <h1 class="article-title">{displayTitle}</h1>
} else {
return null
}
}
+ArticleTitle.css = `
+.article-title {
+ margin: 2rem 0 0 0;
+}
+`
export default (() => ArticleTitle) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
new file mode 100644
index 0000000..0146188
--- /dev/null
+++ b/quartz/components/Graph.tsx
@@ -0,0 +1,81 @@
+import { QuartzComponentConstructor } from "./types"
+// @ts-ignore
+import script from "./scripts/graph.inline"
+import style from "./styles/graph.scss"
+
+export interface D3Config {
+ drag: boolean,
+ zoom: boolean,
+ depth: number,
+ scale: number,
+ repelForce: number,
+ centerForce: number,
+ linkDistance: number,
+ fontSize: number,
+ opacityScale: number
+}
+
+interface GraphOptions {
+ localGraph: Partial<D3Config>,
+ globalGraph: Partial<D3Config> | undefined
+}
+
+const defaultOptions: GraphOptions = {
+ localGraph: {
+ drag: true,
+ zoom: true,
+ depth: 1,
+ scale: 1.2,
+ repelForce: 2,
+ centerForce: 1,
+ linkDistance: 30,
+ fontSize: 0.6,
+ opacityScale: 3
+ },
+ globalGraph: {
+ drag: true,
+ zoom: true,
+ depth: -1,
+ scale: 1.2,
+ repelForce: 1,
+ centerForce: 1,
+ linkDistance: 30,
+ fontSize: 0.5,
+ opacityScale: 3
+ }
+}
+
+export default ((opts?: GraphOptions) => {
+ function Graph() {
+ const localGraph = { ...opts?.localGraph, ...defaultOptions.localGraph }
+ const globalGraph = { ...opts?.globalGraph, ...defaultOptions.globalGraph }
+ return <div class="graph">
+ <h3>Interactive Graph</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"
+ viewBox="0 0 55 55" fill="currentColor" xmlSpace="preserve">
+ <path d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
+ s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
+ c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
+ C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
+ c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
+ v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
+ s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
+ C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
+ S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
+ s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
+ s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"/>
+ </svg>
+ </div>
+ <div id="global-graph-outer">
+ <div id="global-graph-container" data-cfg={JSON.stringify(globalGraph)}></div>
+ </div>
+ </div>
+ }
+
+ Graph.css = style
+ Graph.afterDOMLoaded = script
+
+ return Graph
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index cc9dd77..a0b62b7 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -2,32 +2,47 @@
import { JSResourceToScriptElement } from "../resources"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-function Head({ fileData, externalResources }: QuartzComponentProps) {
- const slug = fileData.slug!
- const title = fileData.frontmatter?.title ?? "Untitled"
- const description = fileData.description ?? "No description provided"
- const { css, js } = externalResources
- const baseDir = resolveToRoot(slug)
- const iconPath = baseDir + "/static/icon.png"
- const ogImagePath = baseDir + "/static/og-image.png"
-
- return <head>
- <title>{title}</title>
- <meta charSet="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta property="og:title" content={title} />
- <meta property="og:description" content={title} />
- <meta property="og:image" content={ogImagePath} />
- <meta property="og:width" content="1200" />
- <meta property="og:height" content="675" />
- <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" />
- {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>
+interface Options {
+ prefetchContentIndex: boolean
}
-export default (() => Head) satisfies QuartzComponentConstructor
+const defaultOptions: Options = {
+ prefetchContentIndex: true
+}
+
+export default ((opts?: Options) => {
+ function Head({ fileData, externalResources }: QuartzComponentProps) {
+ const slug = fileData.slug!
+ const title = fileData.frontmatter?.title ?? "Untitled"
+ const description = fileData.description ?? "No description provided"
+ const { css, js } = externalResources
+ const baseDir = resolveToRoot(slug)
+ 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" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta property="og:title" content={title} />
+ <meta property="og:description" content={title} />
+ <meta property="og:image" content={ogImagePath} />
+ <meta property="og:width" content="1200" />
+ <meta property="og:height" content="675" />
+ <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>}
+ {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>
+ }
+
+ return Head
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
index 197c4e5..06ae88b 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -1,9 +1,9 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function Header({ children }: QuartzComponentProps) {
- return <header>
+ return (children.length > 0) ? <header>
{children}
- </header>
+ </header> : null
}
Header.css = `
@@ -11,12 +11,10 @@
display: flex;
flex-direction: row;
align-items: center;
- margin: 1em 0 2em 0;
- & > h1 {
- }
+ margin: 2em 0;
}
-header > h1 {
+header h1 {
margin: 0;
flex: auto;
}
diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx
index fe6ec3d..e8377ee 100644
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@@ -1,11 +1,22 @@
import { resolveToRoot } from "../path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-function PageTitle({ cfg, fileData }: QuartzComponentProps) {
- const title = cfg.siteTitle
- const slug = fileData.slug!
- const baseDir = resolveToRoot(slug)
- return <h1><a href={baseDir}>{title}</a></h1>
+interface Options {
+ title: string
}
-export default (() => PageTitle) satisfies QuartzComponentConstructor
+export default ((opts?: Options) => {
+ const title = opts?.title ?? "Untitled Quartz"
+ function PageTitle({ fileData }: QuartzComponentProps) {
+ const slug = fileData.slug!
+ const baseDir = resolveToRoot(slug)
+ return <h1 class="page-title"><a href={baseDir}>{title}</a></h1>
+ }
+ PageTitle.css = `
+ .page-title {
+ margin: 0;
+ }
+ `
+
+ return PageTitle
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 99e73e9..f3d90bb 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -18,7 +18,7 @@
return null
}
- return <>
+ return <div>
<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">
@@ -32,7 +32,7 @@
</li>)}
</ul>
</div>
- </>
+ </div>
}
TableOfContents.css = modernStyle
TableOfContents.afterDOMLoaded = script
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 72350fe..9813238 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -7,6 +7,7 @@
import Spacer from "./Spacer"
import TableOfContents from "./TableOfContents"
import TagList from "./TagList"
+import Graph from "./Graph"
export {
ArticleTitle,
@@ -17,5 +18,6 @@
ReadingTime,
Spacer,
TableOfContents,
- TagList
+ TagList,
+ Graph
}
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
new file mode 100644
index 0000000..40665ca
--- /dev/null
+++ b/quartz/components/scripts/graph.inline.ts
@@ -0,0 +1,287 @@
+import { ContentDetails } from "../../plugins/emitters/contentIndex"
+import * as d3 from 'd3'
+
+type NodeData = {
+ id: string,
+ text: string,
+ tags: string[]
+} & d3.SimulationNodeDatum
+
+type LinkData = {
+ source: string,
+ target: string
+}
+
+function relative(from: string, to: string) {
+ const pieces = [location.protocol, '//', location.host, location.pathname]
+ const url = pieces.join('').slice(0, -from.length) + to
+ return url
+}
+
+function removeAllChildren(node: HTMLElement) {
+ while (node.firstChild) {
+ node.removeChild(node.firstChild)
+ }
+}
+
+async function renderGraph(container: string, slug: string) {
+ const graph = document.getElementById(container)!
+ removeAllChildren(graph)
+
+ let {
+ drag: enableDrag,
+ zoom: enableZoom,
+ depth,
+ scale,
+ repelForce,
+ centerForce,
+ linkDistance,
+ fontSize,
+ opacityScale
+ } = JSON.parse(graph.dataset["cfg"]!)
+
+ const data = await fetchData
+
+ const links: LinkData[] = []
+ for (const [src, details] of Object.entries<ContentDetails>(data)) {
+ const outgoing = details.links ?? []
+ for (const dest of outgoing) {
+ if (src in data && dest in data) {
+ links.push({ source: src, target: dest })
+ }
+ }
+ }
+
+ const neighbourhood = new Set()
+
+ const wl = [slug, "__SENTINEL"]
+ if (depth >= 0) {
+ while (depth >= 0 && wl.length > 0) {
+ // compute neighbours
+ const cur = wl.shift()
+ if (cur === "__SENTINEL") {
+ depth--
+ wl.push("__SENTINEL")
+ } else {
+ neighbourhood.add(cur)
+ const outgoing = links.filter(l => l.source === cur)
+ const incoming = links.filter(l => l.target === cur)
+ wl.push(...outgoing.map((l) => l.target), ...incoming.map((l) => l.source))
+ }
+ }
+ } else {
+ links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id))
+ }
+
+ const graphData: { nodes: NodeData[], links: LinkData[] } = {
+ nodes: Object.keys(data).filter(id => neighbourhood.has(id)).map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
+ links: links.filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target))
+ }
+
+ const simulation: d3.Simulation<NodeData, LinkData> = d3
+ .forceSimulation(graphData.nodes)
+ .force("charge", d3.forceManyBody().strength(-100 * repelForce))
+ .force(
+ "link",
+ d3
+ .forceLink(graphData.links)
+ .id((d: any) => d.id)
+ .distance(linkDistance),
+ )
+ .force("center", d3.forceCenter().strength(centerForce))
+
+ const height = Math.max(graph.offsetHeight, 250)
+ const width = graph.offsetWidth
+
+ const svg = d3
+ .select<HTMLElement, NodeData>('#' + container)
+ .append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .attr('viewBox', [-width / 2 / scale, -height / 2 / scale, width / scale, height / scale])
+
+ // draw links between nodes
+ const link = svg
+ .append("g")
+ .selectAll("line")
+ .data(graphData.links)
+ .join("line")
+ .attr("class", "link")
+ .attr("stroke", "var(--lightgray)")
+ .attr("stroke-width", 2)
+
+ // svg groups
+ const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
+
+ // calculate radius
+ const color = (d: NodeData) => {
+ // TODO: does this handle the index page
+ const isCurrent = d.id === slug
+ return isCurrent ? "var(--secondary)" : "var(--gray)"
+ }
+
+ const drag = (simulation: d3.Simulation<NodeData, LinkData>) => {
+ function dragstarted(event: any, d: NodeData) {
+ if (!event.active) simulation.alphaTarget(1).restart()
+ d.fx = d.x
+ d.fy = d.y
+ }
+
+ function dragged(event: any, d: NodeData) {
+ d.fx = event.x
+ d.fy = event.y
+ }
+
+ function dragended(event: any, d: NodeData) {
+ if (!event.active) simulation.alphaTarget(0)
+ d.fx = null
+ d.fy = null
+ }
+
+ const noop = () => { }
+ return d3
+ .drag<Element, NodeData>()
+ .on("start", enableDrag ? dragstarted : noop)
+ .on("drag", enableDrag ? dragged : noop)
+ .on("end", enableDrag ? dragended : noop)
+ }
+
+ function nodeRadius(d: NodeData) {
+ const numLinks = links.filter((l: any) => l.source.id === d.id || l.target.id === d.id).length
+ return 2 + Math.sqrt(numLinks)
+ }
+
+ // draw individual nodes
+ const node = graphNode
+ .append("circle")
+ .attr("class", "node")
+ .attr("id", (d) => d.id)
+ .attr("r", nodeRadius)
+ .attr("fill", color)
+ .style("cursor", "pointer")
+ .on("click", (_, d) => {
+ const targ = relative(slug, d.id)
+ window.spaNavigate(new URL(targ))
+ })
+ .on("mouseover", function(_, d) {
+ const neighbours: string[] = data[slug].links ?? []
+ const neighbourNodes = d3.selectAll<HTMLElement, NodeData>(".node").filter((d) => neighbours.includes(d.id))
+ const currentId = d.id
+ const linkNodes = d3
+ .selectAll(".link")
+ .filter((d: any) => d.source.id === currentId || d.target.id === currentId)
+
+ // highlight neighbour nodes
+ neighbourNodes.transition().duration(200).attr("fill", color)
+
+ // highlight links
+ linkNodes.transition().duration(200).attr("stroke", "var(--gray)")
+
+ const bigFont = fontSize * 1.5
+
+ // show text for self
+ const parent = this.parentNode as HTMLElement
+ d3.select<HTMLElement, NodeData>(parent)
+ .raise()
+ .select("text")
+ .transition()
+ .duration(200)
+ .attr('opacityOld', d3.select(parent).select('text').style("opacity"))
+ .style('opacity', 1)
+ .style('font-size', bigFont + 'em')
+ })
+ .on("mouseleave", function(_, d) {
+ const currentId = d.id
+ const linkNodes = d3
+ .selectAll(".link")
+ .filter((d: any) => d.source.id === currentId || d.target.id === currentId)
+
+ linkNodes.transition().duration(200).attr("stroke", "var(--lightgray)")
+
+ const parent = this.parentNode as HTMLElement
+ d3.select<HTMLElement, NodeData>(parent)
+ .select("text")
+ .transition()
+ .duration(200)
+ .style('opacity', d3.select(parent).select('text').attr("opacityOld"))
+ .style('font-size', fontSize + 'em')
+ })
+ // @ts-ignore
+ .call(drag(simulation))
+
+ // draw labels
+ const labels = graphNode
+ .append("text")
+ .attr("dx", 0)
+ .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)
+ .style("pointer-events", "none")
+ .style('font-size', fontSize + 'em')
+ .raise()
+ // @ts-ignore
+ .call(drag(simulation))
+
+ // set panning
+ if (enableZoom) {
+ svg.call(
+ d3
+ .zoom<SVGSVGElement, NodeData>()
+ .extent([
+ [0, 0],
+ [width, height],
+ ])
+ .scaleExtent([0.25, 4])
+ .on("zoom", ({ transform }) => {
+ link.attr("transform", transform)
+ node.attr("transform", transform)
+ const scale = transform.k * opacityScale;
+ const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
+ labels.attr("transform", transform).style("opacity", scaledOpacity)
+ }),
+ )
+ }
+
+ // progress the simulation
+ simulation.on("tick", () => {
+ link
+ .attr("x1", (d: any) => d.source.x)
+ .attr("y1", (d: any) => d.source.y)
+ .attr("x2", (d: any) => d.target.x)
+ .attr("y2", (d: any) => d.target.y)
+ node
+ .attr("cx", (d: any) => d.x)
+ .attr("cy", (d: any) => d.y)
+ labels
+ .attr("x", (d: any) => d.x)
+ .attr("y", (d: any) => d.y)
+ })
+}
+
+function renderGlobalGraph() {
+ const slug = document.body.dataset["slug"]!
+ renderGraph("global-graph-container", slug)
+ const container = document.getElementById("global-graph-outer")
+ container?.classList.add("active")
+
+ function hideGlobalGraph(this: HTMLElement, e: HTMLElementEventMap["click"]) {
+ if (e.target !== this) return
+
+ container?.classList.remove("active")
+ const graph = document.getElementById("global-graph-container")!
+ removeAllChildren(graph)
+ }
+
+ container?.removeEventListener("click", hideGlobalGraph)
+ container?.addEventListener("click", hideGlobalGraph)
+}
+
+document.addEventListener("nav", async (e: unknown) => {
+ const slug = (e as CustomEventMap["nav"]).detail.url
+ await renderGraph("graph-container", slug)
+
+ const containerIcon = document.getElementById("global-graph-icon")
+ containerIcon?.removeEventListener("click", renderGlobalGraph)
+ containerIcon?.addEventListener("click", renderGlobalGraph)
+})
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 24c6aec..5cbe170 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -1,39 +1,50 @@
-import { computePosition, inline, shift, autoPlacement } from "@floating-ui/dom"
+import { computePosition, flip, inline, shift } from "@floating-ui/dom"
document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
const p = new DOMParser()
for (const link of links) {
link.addEventListener("mouseenter", async ({ clientX, clientY }) => {
- if (link.dataset.fetchedPopover === "true") return
+ async function setPosition(popoverElement: HTMLElement) {
+ const { x, y } = await computePosition(link, popoverElement, {
+ middleware: [inline({
+ x: clientX,
+ y: clientY
+ }), shift(), flip()]
+ })
+ Object.assign(popoverElement.style, {
+ left: `${x}px`,
+ top: `${y}px`,
+ })
+ }
+
+ if (link.dataset.fetchedPopover === "true") {
+ return setPosition(link.lastChild as HTMLElement)
+ }
+
const url = link.href
+ const anchor = new URL(url).hash
+ if (anchor.startsWith("#")) return
+
const contents = await fetch(`${url}`)
.then((res) => res.text())
.catch((err) => {
console.error(err)
})
+
if (!contents) return
const html = p.parseFromString(contents, "text/html")
const elts = [...html.getElementsByClassName("popover-hint")]
if (elts.length === 0) return
-
const popoverElement = document.createElement("div")
popoverElement.classList.add("popover")
- elts.forEach(elt => popoverElement.appendChild(elt))
+ const popoverInner = document.createElement("div")
+ popoverInner.classList.add("popover-inner")
+ popoverElement.appendChild(popoverInner)
+ elts.forEach(elt => popoverInner.appendChild(elt))
- const { x, y } = await computePosition(link, popoverElement, {
- middleware: [inline({
- x: clientX,
- y: clientY
- }), shift(), autoPlacement()]
- })
-
- Object.assign(popoverElement.style, {
- left: `${x}px`,
- top: `${y}px`,
- })
-
+ setPosition(popoverElement)
link.appendChild(popoverElement)
link.dataset.fetchedPopover = "true"
})
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index a129dc4..057aa3d 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -29,8 +29,8 @@
return { url: new URL(href), scroll: 'routerNoscroll' in a.dataset ? false : undefined }
}
-function notifyNav(slug: string) {
- const event = new CustomEvent("nav", { detail: { slug } })
+function notifyNav(url: string) {
+ const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
document.dispatchEvent(event)
}
@@ -73,6 +73,8 @@
delete announcer.dataset.persist
}
+window.spaNavigate = navigate
+
function createRouter() {
if (typeof window !== "undefined") {
window.addEventListener("click", async (event) => {
diff --git a/quartz/components/styles/darkmode.scss b/quartz/components/styles/darkmode.scss
index 46291d8..730fcd2 100644
--- a/quartz/components/styles/darkmode.scss
+++ b/quartz/components/styles/darkmode.scss
@@ -1,8 +1,7 @@
.darkmode {
- float: right;
- padding: 1rem;
- min-width: 30px;
position: relative;
+ width: 20px;
+ height: 20px;
& > .toggle {
display: none;
@@ -16,7 +15,6 @@
width: 20px;
height: 20px;
top: calc(50% - 10px);
- margin: 0 7px;
fill: var(--darkgray);
transition: opacity 0.1s ease;
}
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
new file mode 100644
index 0000000..76323bb
--- /dev/null
+++ b/quartz/components/styles/graph.scss
@@ -0,0 +1,68 @@
+.graph {
+ & > h3 {
+ font-size: 1rem;
+ margin: 0
+ }
+
+ & > .graph-outer {
+ border-radius: 5px;
+ border: 1px solid var(--lightgray);
+ box-sizing: border-box;
+ height: 250px;
+ width: 300px;
+ margin: 0.5em 0;
+ position: relative;
+
+ & > #global-graph-icon {
+ color: var(--dark);
+ opacity: 0.5;
+ width: 18px;
+ height: 18px;
+ position: absolute;
+ padding: 0.2rem;
+ margin: 0.3rem;
+ top: 0;
+ right: 0;
+ border-radius: 4px;
+ background-color: transparent;
+ transition: background-color 0.5s ease;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--lightgray);
+ }
+ }
+
+ & > #graph-container > svg {
+ margin-bottom: -5px;
+ }
+ }
+
+ & > #global-graph-outer {
+ position: fixed;
+ z-index: 9999;
+ left: 0;
+ top: 0;
+ width: 100vw;
+ height: 100%;
+ overflow: scroll;
+ backdrop-filter: blur(4px);
+ display: none;
+
+ &.active {
+ display: inline-block;
+ }
+
+ & > #global-graph-container {
+ border: 1px solid var(--lightgray);
+ background-color: var(--light);
+ border-radius: 5px;
+ box-sizing: border-box;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ height: 60vh;
+ width: 50vw;
+ }
+ }
+}
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index 0d26d7d..0006292 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -3,7 +3,7 @@
opacity: 0;
visibility: hidden;
}
- 50% {
+ 1% {
opacity: 0;
}
100% {
@@ -15,21 +15,24 @@
.popover {
z-index: 999;
position: absolute;
- overflow: scroll;
- width: 30rem;
- height: 20rem;
- padding: 0 1rem;
- margin-top: -1rem;
- border: 1px solid var(--lightgray);
- background-color: var(--light);
- border-radius: 5px;
- box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
+ overflow: visible;
+ padding: 1rem;
- font-weight: initial;
+ & > .popover-inner {
+ width: 30rem;
+ height: 20rem;
+ padding: 0 1rem 1rem 1rem;
+ font-weight: initial;
+ border: 1px solid var(--gray);
+ background-color: var(--light);
+ border-radius: 5px;
+ box-shadow: 6px 6px 36px 0 rgba(0,0,0,0.25);
+ overflow: scroll;
+ }
visibility: hidden;
opacity: 0;
- transition: opacity 0.2s ease, visibility 0.2s ease;
+ transition: opacity 0.3s ease, visibility 0.3s ease;
@media all and (max-width: 600px) {
display: none !important;
@@ -37,7 +40,7 @@
}
a:hover .popover, .popover:hover {
- animation: dropin 0.5s ease;
- opacity: 1;
- visibility: visible;
+ animation: dropin 0.3s ease;
+ animation-fill-mode: forwards;
+ animation-delay: 0.2s;
}
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 1f1a27b..117d293 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -30,6 +30,7 @@
overflow: hidden;
max-height: none;
transition: max-height 0.3s ease;
+ font-size: 0.9rem;
& ul {
list-style: none;
@@ -38,7 +39,7 @@
& > li > a {
color: var(--dark);
opacity: 0.35;
- transition: 0.5s ease opacity;
+ transition: 0.5s ease opacity, 0.3s ease color;
&.in-view {
opacity: 0.75;
}
diff --git a/quartz/path.ts b/quartz/path.ts
index 4efd748..3ae51cc 100644
--- a/quartz/path.ts
+++ b/quartz/path.ts
@@ -13,10 +13,6 @@
cleanPath = cleanPath.slice(0, -"index".length)
}
- if (cleanPath === "") {
- cleanPath = "./"
- }
-
return cleanPath + anchor
}
@@ -36,7 +32,7 @@
export function resolveToRoot(slug: string): string {
let fp = trimPathSuffix(slug)
- if (fp === "./") {
+ if (fp === "") {
return "."
}
diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts
index 8ee8a9a..0e03c23 100644
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -14,19 +14,20 @@
indexExternalLinks: false,
}
-type ContentIndex = Map<string, {
+export type ContentIndex = Map<string, ContentDetails>
+export type ContentDetails = {
title: string,
links?: string[],
tags?: string[],
content: string,
-}>
+}
export const ContentIndex: QuartzEmitterPlugin<Options> = (userOpts) => {
const opts = { ...userOpts, ...defaultOptions }
return {
name: "ContentIndex",
async emit(_contentDir, _cfg, content, _resources, emit) {
- const fp = "contentIndex"
+ const fp = path.join("static", "contentIndex")
const linkIndex: ContentIndex = new Map()
for (const [tree, file] of content) {
let slug = trimPathSuffix(file.data.slug!)
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index 4728920..d88cf9c 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -2,7 +2,7 @@
import { QuartzEmitterPlugin } from "../types"
import { render } from "preact-render-to-string"
import { QuartzComponent } from "../../components/types"
-import { resolveToRoot } from "../../path"
+import { resolveToRoot, trimPathSuffix } from "../../path"
import HeaderConstructor from "../../components/Header"
import { QuartzComponentProps } from "../../components/types"
import BodyConstructor from "../../components/Body"
@@ -56,7 +56,7 @@
const Content = opts.content
const doc = <html>
<Head {...componentData} />
- <body data-slug={file.data.slug}>
+ <body data-slug={trimPathSuffix(file.data.slug ?? "")}>
<div id="quartz-root" class="page">
<Header {...componentData} >
{header.map(HeaderComponent => <HeaderComponent {...componentData} />)}
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 9fc76f9..fcd4a5d 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -10,8 +10,6 @@
body {
margin: 0;
- height: 100vh;
- width: 100vw;
max-width: 100%;
box-sizing: border-box;
background-color: var(--light);
@@ -48,31 +46,39 @@
}
.page {
- padding: 4rem 30vw;
- margin: 0 auto;
+ margin: 6rem 35vw 6rem 20vw;
max-width: 1000px;
position: relative;
& .left, & .right {
position: fixed;
- padding: 0 4rem 0 6rem;
- max-width: 30vw;
+ height: 100vh;
+ overflow-y: scroll;
box-sizing: border-box;
- top: 10rem;
+ display: flex;
+ flex-direction: column;
+ top: 0;
+ gap: 2rem;
+ padding: 6rem;
}
& .left {
left: 0;
+ padding-left: 10vw;
+ width: 20vw;
}
& .right {
right: 0;
+ padding-right: 10vw;
+ width: 35vw;
}
@media all and (max-width: 1200px) {
- padding: 25px 5vw;
+ margin: 25px 5vw;
& .left, & .right {
padding: 0;
+ height: initial;
max-width: none;
position: initial;
}
@@ -247,3 +253,7 @@
width: 100%;
border-radius: 5px;
}
+
+.spacer {
+ flex: 1 1 auto;
+}
--
Gitblit v1.10.0