initial changes

Bumps the production-dependencies group with 1 update: [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node).


Updates `@types/node` from 22.12.0 to 22.13.0
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: production-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.gitignore

@@ -9,3 +9,6 @@ tsconfig.tsbuildinfo
 private/
 .replit
 replit.nix
+/References.bib
+content
+/static/

docs/features/graph view.md

@@ -36,6 +36,7 @@ Component.Graph({
     opacityScale: 1, // how quickly do we fade out the labels when zooming out?
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: false, // whether to constrain the graph, similar to Obsidian
   },
   globalGraph: {
     drag: true,
@@ -49,6 +50,7 @@ Component.Graph({
     opacityScale: 1,
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: true, // whether to constrain the graph, similar to Obsidian
   },
 })
 ```

package-lock.json

@@ -9,8 +9,8 @@
       "version": "4.4.0",
       "license": "MIT",
       "dependencies": {
-        "@clack/prompts": "^0.9.0",
+        "@clack/prompts": "^0.9.1",
-        "@floating-ui/dom": "^1.6.12",
+        "@floating-ui/dom": "^1.6.13",
         "@myriaddreamin/rehype-typst": "^0.5.4",
         "@napi-rs/simple-git": "0.1.19",
         "@tweenjs/tween.js": "^25.0.0",
@@ -29,14 +29,14 @@
         "hast-util-to-string": "^3.0.1",
         "is-absolute-url": "^4.0.1",
         "js-yaml": "^4.1.0",
-        "lightningcss": "^1.28.2",
+        "lightningcss": "^1.29.1",
-        "mdast-util-find-and-replace": "^3.0.1",
+        "mdast-util-find-and-replace": "^3.0.2",
         "mdast-util-to-hast": "^13.2.0",
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
-        "pixi.js": "^8.6.6",
+        "pixi.js": "^8.7.3",
         "preact": "^10.25.4",
-        "preact-render-to-string": "^6.5.12",
+        "preact-render-to-string": "^6.5.13",
         "pretty-bytes": "^6.1.1",
         "pretty-time": "^1.1.0",
         "reading-time": "^1.5.0",
@@ -57,10 +57,10 @@
         "remark-smartypants": "^3.0.2",
         "rfdc": "^1.4.1",
         "rimraf": "^6.0.1",
-        "satori": "^0.12.0",
+        "satori": "^0.12.1",
         "serve-handler": "^6.1.6",
         "sharp": "^0.33.5",
-        "shiki": "^1.24.4",
+        "shiki": "^1.26.2",
         "source-map-support": "^0.5.21",
         "to-vfile": "^8.0.0",
         "toml": "^3.0.0",
@@ -79,15 +79,15 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^22.10.2",
+        "@types/node": "^22.13.0",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
-        "@types/ws": "^8.5.13",
+        "@types/ws": "^8.5.14",
         "@types/yargs": "^17.0.33",
         "esbuild": "^0.24.2",
         "prettier": "^3.4.2",
         "tsx": "^4.19.2",
-        "typescript": "^5.7.2"
+        "typescript": "^5.7.3"
       },
       "engines": {
         "node": "20 || >=22",
@@ -187,20 +187,20 @@
       }
     },
     "node_modules/@clack/core": {
-      "version": "0.4.0",
+      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
-      "integrity": "sha512-YJCYBsyJfNDaTbvDUVSJ3SgSuPrcujarRgkJ5NLjexDZKvaOiVVJvAQYx8lIgG0qRT8ff0fPgqyBCVivanIZ+A==",
+      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
       "dependencies": {
         "picocolors": "^1.0.0",
         "sisteransi": "^1.0.5"
       }
     },
     "node_modules/@clack/prompts": {
-      "version": "0.9.0",
+      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
-      "integrity": "sha512-nGsytiExgUr4FL0pR/LeqxA28nz3E0cW7eLTSh3Iod9TGrbBt8Y7BHbV3mmkNC4G0evdYyQ3ZsbiBkk7ektArA==",
+      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
       "dependencies": {
-        "@clack/core": "0.4.0",
+        "@clack/core": "0.4.1",
         "picocolors": "^1.0.0",
         "sisteransi": "^1.0.5"
       }
@@ -600,18 +600,18 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.12",
+      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
       "dependencies": {
         "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.8"
+        "@floating-ui/utils": "^0.2.9"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.8",
+      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
     },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
@@ -1473,50 +1473,66 @@
       }
     },
     "node_modules/@shikijs/core": {
-      "version": "1.24.4",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.26.2.tgz",
-      "integrity": "sha512-jjLsld+xEEGYlxAXDyGwWsKJ1sw5Pc1pnp4ai2ORpjx2UX08YYTC0NNqQYO1PaghYaR+PvgMOGuvzw2he9sk0Q==",
+      "integrity": "sha512-ORyu3MrY7dCC7FDLDsFSkBM9b/AT9/Y8rH+UQ07Rtek48pp0ZhQOMPTKolqszP4bBCas6FqTZQYt18BBamVl/g==",
       "dependencies": {
-        "@shikijs/engine-javascript": "1.24.4",
+        "@shikijs/engine-javascript": "1.26.2",
-        "@shikijs/engine-oniguruma": "1.24.4",
+        "@shikijs/engine-oniguruma": "1.26.2",
-        "@shikijs/types": "1.24.4",
+        "@shikijs/types": "1.26.2",
-        "@shikijs/vscode-textmate": "^9.3.1",
+        "@shikijs/vscode-textmate": "^10.0.1",
         "@types/hast": "^3.0.4",
         "hast-util-to-html": "^9.0.4"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "1.24.4",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.26.2.tgz",
-      "integrity": "sha512-TClaQOLvo9WEMJv6GoUsykQ6QdynuKszuORFWCke8qvi6PeLm7FcD9+7y45UenysxEWYpDL5KJaVXTngTE+2BA==",
+      "integrity": "sha512-ngkIu9swLVo9Zt5QBtz5Sk08vmPcwuj01r7pPK/Zjmo2U2WyKMK4WMUMmkdQiUacdcLth0zt8u1onp4zhkFXKQ==",
       "dependencies": {
-        "@shikijs/types": "1.24.4",
+        "@shikijs/types": "1.26.2",
-        "@shikijs/vscode-textmate": "^9.3.1",
+        "@shikijs/vscode-textmate": "^10.0.1",
-        "oniguruma-to-es": "0.8.1"
+        "oniguruma-to-es": "^1.0.0"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "1.24.4",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.26.2.tgz",
-      "integrity": "sha512-Do2ry6flp2HWdvpj2XOwwa0ljZBRy15HKZITzPcNIBOGSeprnA8gOooA/bLsSPuy8aJBa+Q/r34dMmC3KNL/zw==",
+      "integrity": "sha512-mlN7Qrs+w60nKrd7at7XkXSwz6728Pe34taDmHrG6LRHjzCqQ+ysg+/AT6/D2LMk0s2lsr71DjpI73430QP4/w==",
       "dependencies": {
-        "@shikijs/types": "1.24.4",
+        "@shikijs/types": "1.26.2",
-        "@shikijs/vscode-textmate": "^9.3.1"
+        "@shikijs/vscode-textmate": "^10.0.1"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "1.26.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-1.26.2.tgz",
+      "integrity": "sha512-o5cdPycB2Kw3IgncHxWopWPiTkjAj7dG01fLkkUyj3glb5ftxL/Opecq9F54opMlrgXy7ZIqDERvFLlUzsCOuA==",
+      "dependencies": {
+        "@shikijs/types": "1.26.2"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "1.26.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-1.26.2.tgz",
+      "integrity": "sha512-y4Pn6PM5mODz/e3yF6jAUG7WLKJzqL2tJ5qMJCUkMUB1VRgtQVvoa1cHh7NScryGXyrYGJ8nPnRDhdv2rw0xpA==",
+      "dependencies": {
+        "@shikijs/types": "1.26.2"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "1.24.4",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.26.2.tgz",
-      "integrity": "sha512-0r0XU7Eaow0PuDxuWC1bVqmWCgm3XqizIaT7SM42K03vc69LGooT0U8ccSR44xP/hGlNx4FKhtYpV+BU6aaKAA==",
+      "integrity": "sha512-PO2jucx2FIdlLBPYbIUlMtWSLs5ulcRcuV93cR3T65lkK5SJP4MGBRt9kmWGXiQc0f7+FHj/0BEawditZcI/fQ==",
       "dependencies": {
-        "@shikijs/vscode-textmate": "^9.3.1",
+        "@shikijs/vscode-textmate": "^10.0.1",
         "@types/hast": "^3.0.4"
       }
     },
     "node_modules/@shikijs/vscode-textmate": {
-      "version": "9.3.1",
+      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.1.tgz",
-      "integrity": "sha512-79QfK1393x9Ho60QFyLti+QfdJzRQCVLFb97kOIV7Eo9vQU/roINgk7m24uv0a7AUvN//RDH36FLjjK48v0s9g=="
+      "integrity": "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg=="
     },
     "node_modules/@shuding/opentype.js": {
       "version": "1.4.0-beta.0",
@@ -1898,10 +1914,11 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.10.2",
+      "version": "22.13.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.0.tgz",
-      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
+      "integrity": "sha512-ClIbNe36lawluuvq3+YYhnIN2CELi+6q8NpnM7PYp4hBn/TatfboPgVSm2rwKRfnV2M+Ty9GWDFI64KEe+kysA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
       }
@@ -1927,10 +1944,11 @@
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
     "node_modules/@types/ws": {
-      "version": "8.5.13",
+      "version": "8.5.14",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz",
-      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
+      "integrity": "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -4070,9 +4088,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.1.tgz",
-      "integrity": "sha512-ePLRrbt3fgjXI5VFZOLbvkLD5ZRuxGKm+wJ3ujCqBtL3NanDHPo/5zicR5uEKAPiIjBYF99BM4K4okvMznjkVA==",
+      "integrity": "sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==",
       "dependencies": {
         "detect-libc": "^1.0.3"
       },
@@ -4084,22 +4102,22 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.28.2",
+        "lightningcss-darwin-arm64": "1.29.1",
-        "lightningcss-darwin-x64": "1.28.2",
+        "lightningcss-darwin-x64": "1.29.1",
-        "lightningcss-freebsd-x64": "1.28.2",
+        "lightningcss-freebsd-x64": "1.29.1",
-        "lightningcss-linux-arm-gnueabihf": "1.28.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.1",
-        "lightningcss-linux-arm64-gnu": "1.28.2",
+        "lightningcss-linux-arm64-gnu": "1.29.1",
-        "lightningcss-linux-arm64-musl": "1.28.2",
+        "lightningcss-linux-arm64-musl": "1.29.1",
-        "lightningcss-linux-x64-gnu": "1.28.2",
+        "lightningcss-linux-x64-gnu": "1.29.1",
-        "lightningcss-linux-x64-musl": "1.28.2",
+        "lightningcss-linux-x64-musl": "1.29.1",
-        "lightningcss-win32-arm64-msvc": "1.28.2",
+        "lightningcss-win32-arm64-msvc": "1.29.1",
-        "lightningcss-win32-x64-msvc": "1.28.2"
+        "lightningcss-win32-x64-msvc": "1.29.1"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.1.tgz",
-      "integrity": "sha512-/8cPSqZiusHSS+WQz0W4NuaqFjquys1x+NsdN/XOHb+idGHJSoJ7SoQTVl3DZuAgtPZwFZgRfb/vd1oi8uX6+g==",
+      "integrity": "sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==",
       "cpu": [
         "arm64"
       ],
@@ -4116,9 +4134,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.1.tgz",
-      "integrity": "sha512-R7sFrXlgKjvoEG8umpVt/yutjxOL0z8KWf0bfPT3cYMOW4470xu5qSHpFdIOpRWwl3FKNMUdbKtMUjYt0h2j4g==",
+      "integrity": "sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==",
       "cpu": [
         "x64"
       ],
@@ -4135,9 +4153,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.1.tgz",
-      "integrity": "sha512-l2qrCT+x7crAY+lMIxtgvV10R8VurzHAoUZJaVFSlHrN8kRLTvEg9ObojIDIexqWJQvJcVVV3vfzsEynpiuvgA==",
+      "integrity": "sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==",
       "cpu": [
         "x64"
       ],
@@ -4154,9 +4172,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.1.tgz",
-      "integrity": "sha512-DKMzpICBEKnL53X14rF7hFDu8KKALUJtcKdFUCW5YOlGSiwRSgVoRjM97wUm/E0NMPkzrTi/rxfvt7ruNK8meg==",
+      "integrity": "sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==",
       "cpu": [
         "arm"
       ],
@@ -4173,9 +4191,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.1.tgz",
-      "integrity": "sha512-nhfjYkfymWZSxdtTNMWyhFk2ImUm0X7NAgJWFwnsYPOfmtWQEapzG/DXZTfEfMjSzERNUNJoQjPAbdqgB+sjiw==",
+      "integrity": "sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==",
       "cpu": [
         "arm64"
       ],
@@ -4192,9 +4210,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.1.tgz",
-      "integrity": "sha512-1SPG1ZTNnphWvAv8RVOymlZ8BDtAg69Hbo7n4QxARvkFVCJAt0cgjAw1Fox0WEhf4PwnyoOBaVH0Z5YNgzt4dA==",
+      "integrity": "sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==",
       "cpu": [
         "arm64"
       ],
@@ -4211,9 +4229,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.1.tgz",
-      "integrity": "sha512-ZhQy0FcO//INWUdo/iEdbefntTdpPVQ0XJwwtdbBuMQe+uxqZoytm9M+iqR9O5noWFaxK+nbS2iR/I80Q2Ofpg==",
+      "integrity": "sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==",
       "cpu": [
         "x64"
       ],
@@ -4230,9 +4248,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.1.tgz",
-      "integrity": "sha512-alb/j1NMrgQmSFyzTbN1/pvMPM+gdDw7YBuQ5VSgcFDypN3Ah0BzC2dTZbzwzaMdUVDszX6zH5MzjfVN1oGuww==",
+      "integrity": "sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==",
       "cpu": [
         "x64"
       ],
@@ -4249,9 +4267,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.1.tgz",
-      "integrity": "sha512-WnwcjcBeAt0jGdjlgbT9ANf30pF0C/QMb1XnLnH272DQU8QXh+kmpi24R55wmWBwaTtNAETZ+m35ohyeMiNt+g==",
+      "integrity": "sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==",
       "cpu": [
         "arm64"
       ],
@@ -4268,9 +4286,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.28.2",
+      "version": "1.29.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.1.tgz",
-      "integrity": "sha512-3piBifyT3avz22o6mDKywQC/OisH2yDK+caHWkiMsF82i3m5wDBadyCjlCQ5VNgzYkxrWZgiaxHDdd5uxsi0/A==",
+      "integrity": "sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==",
       "cpu": [
         "x64"
       ],
@@ -4343,9 +4361,9 @@
       }
     },
     "node_modules/mdast-util-find-and-replace": {
-      "version": "3.0.1",
+      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
-      "integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
       "dependencies": {
         "@types/mdast": "^4.0.0",
         "escape-string-regexp": "^5.0.0",
@@ -5408,13 +5426,13 @@
       }
     },
     "node_modules/oniguruma-to-es": {
-      "version": "0.8.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-0.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-1.0.0.tgz",
-      "integrity": "sha512-dekySTEvCxCj0IgKcA2uUCO/e4ArsqpucDPcX26w9ajx+DvMWLc5eZeJaRQkd7oC/+rwif5gnT900tA34uN9Zw==",
+      "integrity": "sha512-kihvp0O4lFwf5tZMkfanwQLIZ9ORe9OeOFgZonH0BQeThgwfJiaZFeOfvvJVnJIM9TiVmx0RDD35hUJDR0++rQ==",
       "dependencies": {
         "emoji-regex-xs": "^1.0.0",
-        "regex": "^5.0.2",
+        "regex": "^5.1.1",
-        "regex-recursion": "^5.0.0"
+        "regex-recursion": "^5.1.1"
       }
     },
     "node_modules/package-json-from-dist": {
@@ -5567,9 +5585,10 @@
       }
     },
     "node_modules/pixi.js": {
-      "version": "8.6.6",
+      "version": "8.7.3",
-      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.6.6.tgz",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.7.3.tgz",
-      "integrity": "sha512-o5pw7G2yuIrnBx0G4npBlmFp+XGNcapI/Ufs62rRj/4XKxc1Zo74YJr/BtEXcXTraTKd+pQvYOLvnfxRjxBMvQ==",
+      "integrity": "sha512-wfWlhJYnGx1s4f2yoouevQjaeacbJ12LTkJGa+n9AIYNIjOnmJylBtZ2mARX7iFk3mr2xv0wuo//XPe2hk5OBw==",
+      "license": "MIT",
       "dependencies": {
         "@pixi/colord": "^2.9.6",
         "@types/css-font-loading-module": "^0.0.12",
@@ -5598,9 +5617,9 @@
       }
     },
     "node_modules/preact-render-to-string": {
-      "version": "6.5.12",
+      "version": "6.5.13",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.12.tgz",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.13.tgz",
-      "integrity": "sha512-FpU7/cRipZo4diSWQq7gZWVp+Px76CtVduJZNvQwVzynDsAIxKteMrjCCGPbM2oEasReoDffaeMCMlaur9ohIg==",
+      "integrity": "sha512-iGPd+hKPMFKsfpR2vL4kJ6ZPcFIoWZEcBf0Dpm3zOpdVvj77aY8RlLiQji5OMrngEyaxGogeakTb54uS2FvA6w==",
       "peerDependencies": {
         "preact": ">=10"
       }
@@ -5703,18 +5722,19 @@
       "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
     },
     "node_modules/regex": {
-      "version": "5.0.2",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-5.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-5.1.1.tgz",
-      "integrity": "sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==",
+      "integrity": "sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==",
       "dependencies": {
         "regex-utilities": "^2.3.0"
       }
     },
     "node_modules/regex-recursion": {
-      "version": "5.0.0",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.1.1.tgz",
-      "integrity": "sha512-UwyOqeobrCCqTXPcsSqH4gDhOjD5cI/b8kjngWgSZbxYh5yVjAwTjO5+hAuPRNiuR70+5RlWSs+U9PVcVcW9Lw==",
+      "integrity": "sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==",
       "dependencies": {
+        "regex": "^5.1.1",
         "regex-utilities": "^2.3.0"
       }
     },
@@ -6567,9 +6587,9 @@
       }
     },
     "node_modules/satori": {
-      "version": "0.12.0",
+      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/satori/-/satori-0.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.12.1.tgz",
-      "integrity": "sha512-e0e+qQyeFwEszujN7SpWpRtZgww7Nh8lSO3bUn2spHZ5JpqEl3zJ3P14/JlWruxEwdgREs35ZnavrPrWaRVFDg==",
+      "integrity": "sha512-0SbjchvDrDbeXeQgxWVtSWxww7qcFgk3DtSE2/blHOSlLsSHwIqO2fCrtVa/EudJ7Eqno8A33QNx56rUyGbLuw==",
       "dependencies": {
         "@shuding/opentype.js": "1.4.0-beta.0",
         "css-background-parser": "^0.1.0",
@@ -6730,15 +6750,17 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.24.4",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.24.4.tgz",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.26.2.tgz",
-      "integrity": "sha512-aVGSFAOAr1v26Hh/+GBIsRVDWJ583XYV7CuNURKRWh9gpGv4OdbisZGq96B9arMYTZhTQkmRF5BrShOSTvNqhw==",
+      "integrity": "sha512-iP7u2NA9A6JwRRCkIUREEX2cMhlYV5EBmbbSlfSRvPThwca8HBRbVkWuNWW+kw9+i6BSUZqqG6YeUs5dC2SjZw==",
       "dependencies": {
-        "@shikijs/core": "1.24.4",
+        "@shikijs/core": "1.26.2",
-        "@shikijs/engine-javascript": "1.24.4",
+        "@shikijs/engine-javascript": "1.26.2",
-        "@shikijs/engine-oniguruma": "1.24.4",
+        "@shikijs/engine-oniguruma": "1.26.2",
-        "@shikijs/types": "1.24.4",
+        "@shikijs/langs": "1.26.2",
-        "@shikijs/vscode-textmate": "^9.3.1",
+        "@shikijs/themes": "1.26.2",
+        "@shikijs/types": "1.26.2",
+        "@shikijs/vscode-textmate": "^10.0.1",
         "@types/hast": "^3.0.4"
       }
     },
@@ -7529,9 +7551,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.2",
+      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",

package.json

@@ -35,8 +35,8 @@
     "quartz": "./quartz/bootstrap-cli.mjs"
   },
   "dependencies": {
-    "@clack/prompts": "^0.9.0",
+    "@clack/prompts": "^0.9.1",
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "@myriaddreamin/rehype-typst": "^0.5.4",
     "@napi-rs/simple-git": "0.1.19",
     "@tweenjs/tween.js": "^25.0.0",
@@ -55,14 +55,14 @@
     "hast-util-to-string": "^3.0.1",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.28.2",
+    "lightningcss": "^1.29.1",
-    "mdast-util-find-and-replace": "^3.0.1",
+    "mdast-util-find-and-replace": "^3.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "pixi.js": "^8.6.6",
+    "pixi.js": "^8.7.3",
     "preact": "^10.25.4",
-    "preact-render-to-string": "^6.5.12",
+    "preact-render-to-string": "^6.5.13",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
@@ -83,10 +83,10 @@
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
     "rimraf": "^6.0.1",
-    "satori": "^0.12.0",
+    "satori": "^0.12.1",
     "serve-handler": "^6.1.6",
     "sharp": "^0.33.5",
-    "shiki": "^1.24.4",
+    "shiki": "^1.26.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
@@ -102,14 +102,14 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.13.0",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
-    "@types/ws": "^8.5.13",
+    "@types/ws": "^8.5.14",
     "@types/yargs": "^17.0.33",
     "esbuild": "^0.24.2",
     "prettier": "^3.4.2",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   }
 }

quartz.config.ts

@@ -6,23 +6,27 @@ import * as Plugin from "./quartz/plugins"
  *
  * See https://quartz.jzhao.xyz/configuration for more information.
  */
+
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🪴 Quartz 4.0",
+    pageTitle: "˖°𓇼🌊⋆🐚🫧 My Thought Ocean",
     pageTitleSuffix: "",
-    enableSPA: true,
+    enableSPA: false,
     enablePopovers: true,
-    analytics: {
+    analytics: null,
-      provider: "plausible",
-    },
     locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
+    baseUrl: "cosmicflow.space/exocortex/",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
-    generateSocialImages: false,
+    generateSocialImages: {
+  colorScheme: "darkMode", // what colors to use for generating image, same as theme colors from config, valid values are "darkMode" and "lightMode"
+  width: 1200, // width to generate with (in pixels)
+  height: 630, // height to generate with (in pixels)
+  excludeRoot: false, // wether to exclude "/" index path to be excluded from auto generated images (false = use auto, true = use default og image)
+},
     theme: {
       fontOrigin: "googleFonts",
-      cdnCaching: true,
+      cdnCaching: false,
       typography: {
         header: "Schibsted Grotesk",
         body: "Source Sans Pro",
@@ -30,18 +34,26 @@ const config: QuartzConfig = {
       },
       colors: {
         lightMode: {
-          light: "#faf8f8",
+          // light: "#faf8f8",
+	  light: "#304555",
           lightgray: "#e5e5e5",
           gray: "#b8b8b8",
-          darkgray: "#4e4e4e",
+          // darkgray: "#4e4e4e",
           dark: "#2b2b2b",
-          secondary: "#284b63",
+          //secondary: "#284b63",
+          // tertiary: "#84a59d",
+          // highlight: "rgba(143, 159, 169, 0.15)",
+          // textHighlight: "#fff23688",
+	  darkgray: "#d4d4d4",
+          // dark: "#ebebec",
+          secondary: "#7b97aa",
           tertiary: "#84a59d",
-          highlight: "rgba(143, 159, 169, 0.15)",
+          highlight: "rgba(169, 109, 60, 0.15)",
-          textHighlight: "#fff23688",
+          textHighlight: "#b3aa0288",
         },
         darkMode: {
-          light: "#161618",
+          // light: "#161618",
+	  light: "#203545",
           lightgray: "#393639",
           gray: "#646464",
           darkgray: "#d4d4d4",
@@ -57,22 +69,23 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
-      Plugin.CreatedModifiedDate({
-        priority: ["frontmatter", "filesystem"],
-      }),
       Plugin.SyntaxHighlighting({
         theme: {
-          light: "github-light",
           dark: "github-dark",
+          // light: "github-light",
+          light: "ayu-dark",
         },
-        keepBackground: false,
+        keepBackground: true,
       }),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
+      Plugin.OxHugoFlavouredMarkdown(),
       Plugin.TableOfContents(),
-      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
+      Plugin.Citations({
+      bibliographyFile: "./References.bib"}), 
+      Plugin.CrawlLinks({ markdownLinkResolution: "absolute"}),
       Plugin.Description(),
-      Plugin.Latex({ renderEngine: "katex" }),
+     // Plugin.Latex({ renderEngine: "katex" }),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [

quartz.layout.ts

@@ -8,8 +8,8 @@ export const sharedPageComponents: SharedLayout = {
   afterBody: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
+      Home: "https://cosmicflow.space",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      "Git": "https://cosmicflow.space:3030",
     },
   }),
 }
@@ -26,8 +26,8 @@ export const defaultContentPageLayout: PageLayout = {
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
-    Component.Darkmode(),
+    // Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [
     Component.Graph(),
@@ -43,8 +43,8 @@ export const defaultListPageLayout: PageLayout = {
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
-    Component.Darkmode(),
+    // Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [],
 }

quartz/components/Explorer.tsx

@@ -1,5 +1,5 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import explorerStyle from "./styles/explorer.scss"
+import style from "./styles/explorer.scss"
 
 // @ts-ignore
 import script from "./scripts/explorer.inline"
@@ -83,18 +83,46 @@ export default ((userOpts?: Partial<Options>) => {
       lastBuildId = ctx.buildId
       constructFileTree(allFiles)
     }
-
     return (
       <div class={classNames(displayClass, "explorer")}>
         <button
           type="button"
-          id="explorer"
+          id="mobile-explorer"
+          class="collapsed hide-until-loaded"
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
+          data-mobile={true}
           aria-controls="explorer-content"
-          aria-expanded={opts.folderDefaultState === "open"}
+          aria-expanded={false}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-menu"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          id="desktop-explorer"
+          class="title-button"
+          data-behavior={opts.folderClickBehavior}
+          data-collapsed={opts.folderDefaultState}
+          data-savestate={opts.useSavedState}
+          data-tree={jsonTree}
+          data-mobile={false}
+          aria-controls="explorer-content"
+          aria-expanded={true}
         >
           <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
           <svg
@@ -122,7 +150,7 @@ export default ((userOpts?: Partial<Options>) => {
     )
   }
 
-  Explorer.css = explorerStyle
+  Explorer.css = style
   Explorer.afterDOMLoaded = script
   return Explorer
 }) satisfies QuartzComponentConstructor

quartz/components/Footer.tsx

@@ -13,17 +13,20 @@ export default ((opts?: Options) => {
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
-        <p>
+      <ul>
-          {i18n(cfg.locale).components.footer.createdWith}{" "}
-          <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>
+        <p>
+          <a href="https://quartz.jzhao.xyz/">Created with Quartz v{version}</a> © {year} <img src="static/quartz-icon.png" alt=""  width="25" height="25" style='vertical-align:middle; display:inline;'></img>
+	  <br></br>
+	  <a href="https://orgmode.org/">Exported with pleasure 💎 using Org Mode <img src="static/org-mode-unicorn.svg" alt=""  width="25" height="25" style='vertical-align:middle; display:inline;'></img></a>   
+	  
+        </p>
+        
       </footer>
     )
   }

quartz/components/Graph.tsx

@@ -18,6 +18,7 @@ export interface D3Config {
   removeTags: string[]
   showTags: boolean
   focusOnHover?: boolean
+  enableRadial?: boolean
 }
 
 interface GraphOptions {
@@ -39,6 +40,7 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: false,
+    enableRadial: false,
   },
   globalGraph: {
     drag: true,
@@ -53,10 +55,11 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: true,
+    enableRadial: true,
   },
 }
 
-export default ((opts?: GraphOptions) => {
+export default ((opts?: Partial<GraphOptions>) => {
   const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }

quartz/components/scripts/explorer.inline.ts

@@ -1,7 +1,9 @@
 import { FolderState } from "../ExplorerNode"
 
+// Current state of folders
 type MaybeHTMLElement = HTMLElement | undefined
 let currentExplorerState: FolderState[]
+
 const observer = new IntersectionObserver((entries) => {
   // If last element is observed, remove gradient of "overflow" class so element is visible
   const explorerUl = document.getElementById("explorer-ul")
@@ -16,23 +18,43 @@ const observer = new IntersectionObserver((entries) => {
 })
 
 function toggleExplorer(this: HTMLElement) {
+  // Toggle collapsed state of entire explorer
   this.classList.toggle("collapsed")
+
+  // Toggle collapsed aria state of entire explorer
   this.setAttribute(
     "aria-expanded",
     this.getAttribute("aria-expanded") === "true" ? "false" : "true",
   )
-  const content = this.nextElementSibling as MaybeHTMLElement
-  if (!content) return
 
+  const content = (
+    this.nextElementSibling?.nextElementSibling
+      ? this.nextElementSibling.nextElementSibling
+      : this.nextElementSibling
+  ) as MaybeHTMLElement
+  if (!content) return
   content.classList.toggle("collapsed")
+  content.classList.toggle("explorer-viewmode")
+
+  // Prevent scroll under
+  if (document.querySelector("#mobile-explorer")) {
+    // Disable scrolling on the page when the explorer is opened on mobile
+    const bodySelector = document.querySelector("#quartz-body")
+    if (bodySelector) bodySelector.classList.toggle("lock-scroll")
+  }
 }
 
 function toggleFolder(evt: MouseEvent) {
   evt.stopPropagation()
+
+  // Element that was clicked
   const target = evt.target as MaybeHTMLElement
   if (!target) return
 
+  // Check if target was svg icon or button
   const isSvg = target.nodeName === "svg"
+
+  // corresponding <ul> element relative to clicked button/folder
   const childFolderContainer = (
     isSvg
       ? target.parentElement?.nextSibling
@@ -42,10 +64,14 @@ function toggleFolder(evt: MouseEvent) {
     isSvg ? target.nextElementSibling : target.parentElement
   ) as MaybeHTMLElement
   if (!(childFolderContainer && currentFolderParent)) return
-
+  // <li> element of folder (stores folder-path dataset)
   childFolderContainer.classList.toggle("open")
+
+  // Collapse folder container
   const isCollapsed = childFolderContainer.classList.contains("open")
   setFolderState(childFolderContainer, !isCollapsed)
+
+  // Save folder state to localStorage
   const fullFolderPath = currentFolderParent.dataset.folderpath as string
   toggleCollapsedByPath(currentExplorerState, fullFolderPath)
   const stringifiedFileTree = JSON.stringify(currentExplorerState)
@@ -53,57 +79,106 @@ function toggleFolder(evt: MouseEvent) {
 }
 
 function setupExplorer() {
-  const explorer = document.getElementById("explorer")
+  // Set click handler for collapsing entire explorer
-  if (!explorer) return
+  const allExplorers = document.querySelectorAll(".explorer > button") as NodeListOf<HTMLElement>
 
-  if (explorer.dataset.behavior === "collapse") {
+  for (const explorer of allExplorers) {
+    // Get folder state from local storage
+    const storageTree = localStorage.getItem("fileTree")
+
+    // Convert to bool
+    const useSavedFolderState = explorer?.dataset.savestate === "true"
+
+    if (explorer) {
+      // Get config
+      const collapseBehavior = explorer.dataset.behavior
+
+      // Add click handlers for all folders (click handler on folder "label")
+      if (collapseBehavior === "collapse") {
+        for (const item of document.getElementsByClassName(
+          "folder-button",
+        ) as HTMLCollectionOf<HTMLElement>) {
+          window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+          item.addEventListener("click", toggleFolder)
+        }
+      }
+
+      // Add click handler to main explorer
+      window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+      explorer.addEventListener("click", toggleExplorer)
+    }
+
+    // Set up click handlers for each folder (click handler on folder "icon")
     for (const item of document.getElementsByClassName(
-      "folder-button",
+      "folder-icon",
     ) as HTMLCollectionOf<HTMLElement>) {
       item.addEventListener("click", toggleFolder)
       window.addCleanup(() => item.removeEventListener("click", toggleFolder))
     }
+
+    // Get folder state from local storage
+    const oldExplorerState: FolderState[] =
+      storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
+    const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
+    const newExplorerState: FolderState[] = explorer.dataset.tree
+      ? JSON.parse(explorer.dataset.tree)
+      : []
+    currentExplorerState = []
+
+    for (const { path, collapsed } of newExplorerState) {
+      currentExplorerState.push({
+        path,
+        collapsed: oldIndex.get(path) ?? collapsed,
+      })
+    }
+
+    currentExplorerState.map((folderState) => {
+      const folderLi = document.querySelector(
+        `[data-folderpath='${folderState.path.replace("'", "-")}']`,
+      ) as MaybeHTMLElement
+      const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
+      if (folderUl) {
+        setFolderState(folderUl, folderState.collapsed)
+      }
+    })
   }
+}
 
-  explorer.addEventListener("click", toggleExplorer)
+function toggleExplorerFolders() {
-  window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+  const currentFile = (document.querySelector("body")?.getAttribute("data-slug") ?? "").replace(
+    /\/index$/g,
+    "",
+  )
+  const allFolders = document.querySelectorAll(".folder-outer")
 
-  // Set up click handlers for each folder (click handler on folder "icon")
+  allFolders.forEach((element) => {
-  for (const item of document.getElementsByClassName(
+    const folderUl = Array.from(element.children).find((child) =>
-    "folder-icon",
+      child.matches("ul[data-folderul]"),
-  ) as HTMLCollectionOf<HTMLElement>) {
+    )
-    item.addEventListener("click", toggleFolder)
-    window.addCleanup(() => item.removeEventListener("click", toggleFolder))
-  }
-
-  // Get folder state from local storage
-  const storageTree = localStorage.getItem("fileTree")
-  const useSavedFolderState = explorer?.dataset.savestate === "true"
-  const oldExplorerState: FolderState[] =
-    storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
-  const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
-  const newExplorerState: FolderState[] = explorer.dataset.tree
-    ? JSON.parse(explorer.dataset.tree)
-    : []
-  currentExplorerState = []
-  for (const { path, collapsed } of newExplorerState) {
-    currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
-  }
-
-  currentExplorerState.map((folderState) => {
-    const folderLi = document.querySelector(
-      `[data-folderpath='${folderState.path}']`,
-    ) as MaybeHTMLElement
-    const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
     if (folderUl) {
-      setFolderState(folderUl, folderState.collapsed)
+      if (currentFile.includes(folderUl.getAttribute("data-folderul") ?? "")) {
+        if (!element.classList.contains("open")) {
+          element.classList.add("open")
+        }
+      }
     }
   })
 }
 
 window.addEventListener("resize", setupExplorer)
+
 document.addEventListener("nav", () => {
+  const explorer = document.querySelector("#mobile-explorer")
+  if (explorer) {
+    explorer.classList.add("collapsed")
+    const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
+    if (content) {
+      content.classList.add("collapsed")
+      content.classList.toggle("explorer-viewmode")
+    }
+  }
   setupExplorer()
+
   observer.disconnect()
 
   // select pseudo element at end of list
@@ -111,6 +186,12 @@ document.addEventListener("nav", () => {
   if (lastItem) {
     observer.observe(lastItem)
   }
+
+  // Hide explorer on mobile until it is requested
+  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
+
+  toggleExplorerFolders()
 })
 
 /**

quartz/components/scripts/graph.inline.ts

@@ -8,6 +8,7 @@ import {
   forceCenter,
   forceLink,
   forceCollide,
+  forceRadial,
   zoomIdentity,
   select,
   drag,
@@ -87,6 +88,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     removeTags,
     showTags,
     focusOnHover,
+    enableRadial,
   } = JSON.parse(graph.dataset["cfg"]!) as D3Config
 
   const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -161,15 +163,20 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
       })),
   }
 
+  const width = graph.offsetWidth
+  const height = Math.max(graph.offsetHeight, 250)
+
   // we virtualize the simulation and use pixi to actually render it
+  // Calculate the radius of the container circle
+  const radius = Math.min(width, height) / 2 - 40 // 40px padding
   const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
     .force("charge", forceManyBody().strength(-100 * repelForce))
     .force("center", forceCenter().strength(centerForce))
     .force("link", forceLink(graphData.links).distance(linkDistance))
     .force("collide", forceCollide<NodeData>((n) => nodeRadius(n)).iterations(3))
 
-  const width = graph.offsetWidth
+  if (enableRadial)
-  const height = Math.max(graph.offsetHeight, 250)
+    simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3))
 
   // precompute style prop strings as pixi doesn't support css variables
   const cssVars = [

quartz/components/styles/explorer.scss

@@ -1,14 +1,70 @@
 @use "../../styles/variables.scss" as *;
 
+@media all and ($mobile) {
+  .page > #quartz-body {
+    // Shift page position when toggling Explorer on mobile.
+    & > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(0);
+      transition: transform 300ms ease-in-out;
+    }
+    &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(100dvw);
+      transition: transform 300ms ease-in-out;
+    }
+
+    // Sticky top bar (stays in place when scrolling down on mobile).
+    .sidebar.left:has(.explorer) {
+      box-sizing: border-box;
+      position: sticky;
+      background-color: var(--light);
+    }
+
+    // Hide Explorer on mobile until done loading.
+    // Prevents ugly animation on page load.
+    .hide-until-loaded ~ #explorer-content {
+      display: none;
+    }
+  }
+}
+
 .explorer {
   display: flex;
+  height: 100%;
   flex-direction: column;
   overflow-y: hidden;
+
+  @media all and ($mobile) {
+    order: -1;
+    height: initial;
+    overflow: hidden;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  button#mobile-explorer {
+    display: none;
+  }
+
+  button#desktop-explorer {
+    display: flex;
+  }
+
+  @media all and ($mobile) {
+    button#mobile-explorer {
+      display: flex;
+    }
+
+    button#desktop-explorer {
+      display: none;
+    }
+  }
+
   &.desktop-only {
     @media all and not ($mobile) {
       display: flex;
     }
   }
+
   /*&:after {
     pointer-events: none;
     content: "";
@@ -23,7 +79,8 @@
   }*/
 }
 
-button#explorer {
+button#mobile-explorer,
+button#desktop-explorer {
   background-color: transparent;
   border: none;
   text-align: left;
@@ -68,19 +125,19 @@ button#explorer {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
-  max-height: 100%;
+  max-height: 0px;
   transition:
     max-height 0.35s ease,
-    visibility 0s linear 0s;
+    visibility 0s linear 0.35s;
   margin-top: 0.5rem;
-  visibility: visible;
+  visibility: hidden;
 
   &.collapsed {
-    max-height: 0;
+    max-height: 100%;
     transition:
       max-height 0.35s ease,
-      visibility 0s linear 0.35s;
+      visibility 0s linear 0s;
-    visibility: hidden;
+    visibility: visible;
   }
 
   & ul {
@@ -91,12 +148,14 @@ button#explorer {
       max-height 0.35s ease,
       transform 0.35s ease,
       opacity 0.2s ease;
+
     & li > a {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
     }
   }
+
   > #explorer-ul {
     max-height: none;
   }
@@ -179,3 +238,80 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   // remove default margin from li
   margin: 0;
 }
+
+.explorer {
+  @media all and ($mobile) {
+    #explorer-content {
+      box-sizing: border-box;
+      overscroll-behavior: none;
+      z-index: 100;
+      position: absolute;
+      top: 0;
+      background-color: var(--light);
+      max-width: 100dvw;
+      left: -100dvw;
+      width: 100%;
+      transition: transform 300ms ease-in-out;
+      overflow: hidden;
+      padding: $topSpacing 2rem 2rem;
+      height: 100dvh;
+      max-height: 100dvh;
+      margin-top: 0;
+      visibility: hidden;
+
+      &:not(.collapsed) {
+        transform: translateX(100dvw);
+        visibility: visible;
+      }
+
+      ul.overflow {
+        max-height: 100%;
+        width: 100%;
+      }
+
+      &.collapsed {
+        transform: translateX(0);
+        visibility: visible;
+      }
+    }
+
+    #mobile-explorer {
+      margin: 5px;
+      z-index: 101;
+
+      &:not(.collapsed) .lucide-menu {
+        transform: rotate(-90deg);
+        transition: transform 200ms ease-in-out;
+      }
+
+      .lucide-menu {
+        stroke: var(--darkgray);
+        transition: transform 200ms ease;
+
+        &:hover {
+          stroke: var(--dark);
+        }
+      }
+    }
+  }
+}
+
+.no-scroll {
+  opacity: 0;
+  overflow: hidden;
+}
+
+html:has(.no-scroll) {
+  overflow: hidden;
+}
+
+@media all and not ($mobile) {
+  .no-scroll {
+    opacity: 1 !important;
+    overflow: auto !important;
+  }
+
+  html:has(.no-scroll) {
+    overflow: auto !important;
+  }
+}

quartz/i18n/index.ts

@@ -22,6 +22,8 @@ import fa from "./locales/fa-IR"
 import pl from "./locales/pl-PL"
 import cs from "./locales/cs-CZ"
 import tr from "./locales/tr-TR"
+import th from "./locales/th-TH"
+import lt from "./locales/lt-LT"
 
 export const TRANSLATIONS = {
   "en-US": enUs,
@@ -68,6 +70,8 @@ export const TRANSLATIONS = {
   "pl-PL": pl,
   "cs-CZ": cs,
   "tr-TR": tr,
+  "th-TH": th,
+  "lt-LT": lt,
 } as const
 
 export const defaultTranslation = "en-US"

quartz/i18n/locales/lt-LT.ts

@@ -0,0 +1,104 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Be Pavadinimo",
+    description: "Aprašymas Nepateiktas",
+  },
+  components: {
+    callout: {
+      note: "Pastaba",
+      abstract: "Santrauka",
+      info: "Informacija",
+      todo: "Darbų sąrašas",
+      tip: "Patarimas",
+      success: "Sėkmingas",
+      question: "Klausimas",
+      warning: "Įspėjimas",
+      failure: "Nesėkmingas",
+      danger: "Pavojus",
+      bug: "Klaida",
+      example: "Pavyzdys",
+      quote: "Citata",
+    },
+    backlinks: {
+      title: "Atgalinės Nuorodos",
+      noBacklinksFound: "Atgalinių Nuorodų Nerasta",
+    },
+    themeToggle: {
+      lightMode: "Šviesus Režimas",
+      darkMode: "Tamsus Režimas",
+    },
+    explorer: {
+      title: "Naršyklė",
+    },
+    footer: {
+      createdWith: "Sukurta Su",
+    },
+    graph: {
+      title: "Grafiko Vaizdas",
+    },
+    recentNotes: {
+      title: "Naujausi Užrašai",
+      seeRemainingMore: ({ remaining }) => `Peržiūrėti dar ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Įterpimas iš ${targetSlug}`,
+      linkToOriginal: "Nuoroda į originalą",
+    },
+    search: {
+      title: "Paieška",
+      searchBarPlaceholder: "Ieškoti",
+    },
+    tableOfContents: {
+      title: "Turinys",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min skaitymo`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Naujausi užrašai",
+      lastFewNotes: ({ count }) =>
+        count === 1
+          ? "Paskutinis 1 užrašas"
+          : count < 10
+            ? `Paskutiniai ${count} užrašai`
+            : `Paskutiniai ${count} užrašų`,
+    },
+    error: {
+      title: "Nerasta",
+      notFound:
+        "Arba šis puslapis yra pasiekiamas tik tam tikriems vartotojams, arba tokio puslapio nėra.",
+      home: "Grįžti į pagrindinį puslapį",
+    },
+    folderContent: {
+      folder: "Aplankas",
+      itemsUnderFolder: ({ count }) =>
+        count === 1
+          ? "1 elementas šiame aplanke."
+          : count < 10
+            ? `${count} elementai šiame aplanke.`
+            : `${count} elementų šiame aplanke.`,
+    },
+    tagContent: {
+      tag: "Žyma",
+      tagIndex: "Žymų indeksas",
+      itemsUnderTag: ({ count }) =>
+        count === 1
+          ? "1 elementas su šia žyma."
+          : count < 10
+            ? `${count} elementai su šia žyma.`
+            : `${count} elementų su šia žyma.`,
+      showingFirst: ({ count }) =>
+        count < 10 ? `Rodomos pirmosios ${count} žymos.` : `Rodomos pirmosios ${count} žymų.`,
+      totalTags: ({ count }) =>
+        count === 1
+          ? "Rasta iš viso 1 žyma."
+          : count < 10
+            ? `Rasta iš viso ${count} žymos.`
+            : `Rasta iš viso ${count} žymų.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/th-TH.ts

@@ -0,0 +1,82 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "ไม่มีชื่อ",
+    description: "ไม่ได้ระบุคำอธิบายย่อ",
+  },
+  components: {
+    callout: {
+      note: "หมายเหตุ",
+      abstract: "บทคัดย่อ",
+      info: "ข้อมูล",
+      todo: "ต้องทำเพิ่มเติม",
+      tip: "คำแนะนำ",
+      success: "เรียบร้อย",
+      question: "คำถาม",
+      warning: "คำเตือน",
+      failure: "ข้อผิดพลาด",
+      danger: "อันตราย",
+      bug: "บั๊ก",
+      example: "ตัวอย่าง",
+      quote: "คำพูกยกมา",
+    },
+    backlinks: {
+      title: "หน้าที่กล่าวถึง",
+      noBacklinksFound: "ไม่มีหน้าที่โยงมาหน้านี้",
+    },
+    themeToggle: {
+      lightMode: "โหมดสว่าง",
+      darkMode: "โหมดมืด",
+    },
+    explorer: {
+      title: "รายการหน้า",
+    },
+    footer: {
+      createdWith: "สร้างด้วย",
+    },
+    graph: {
+      title: "มุมมองกราฟ",
+    },
+    recentNotes: {
+      title: "บันทึกล่าสุด",
+      seeRemainingMore: ({ remaining }) => `ดูเพิ่มอีก ${remaining} รายการ →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `รวมข้ามเนื้อหาจาก ${targetSlug}`,
+      linkToOriginal: "ดูหน้าต้นทาง",
+    },
+    search: {
+      title: "ค้นหา",
+      searchBarPlaceholder: "ค้นหาบางอย่าง",
+    },
+    tableOfContents: {
+      title: "สารบัญ",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `อ่านราว ${minutes} นาที`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "บันทึกล่าสุด",
+      lastFewNotes: ({ count }) => `${count} บันทึกล่าสุด`,
+    },
+    error: {
+      title: "ไม่มีหน้านี้",
+      notFound: "หน้านี้อาจตั้งค่าเป็นส่วนตัวหรือยังไม่ถูกสร้าง",
+      home: "กลับหน้าหลัก",
+    },
+    folderContent: {
+      folder: "โฟลเดอร์",
+      itemsUnderFolder: ({ count }) => `มี ${count} รายการในโฟลเดอร์นี้`,
+    },
+    tagContent: {
+      tag: "แท็ก",
+      tagIndex: "แท็กทั้งหมด",
+      itemsUnderTag: ({ count }) => `มี ${count} รายการในแท็กนี้`,
+      showingFirst: ({ count }) => `แสดง ${count} แท็กแรก`,
+      totalTags: ({ count }) => `มีทั้งหมด ${count} แท็ก`,
+    },
+  },
+} as const satisfies Translation

quartz/plugins/transformers/ofm.ts

@@ -1,5 +1,13 @@
 import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
+import {
+  Root,
+  Html,
+  BlockContent,
+  PhrasingContent,
+  DefinitionContent,
+  Paragraph,
+  Code,
+} from "mdast"
 import { Element, Literal, Root as HtmlRoot } from "hast"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
 import rehypeRaw from "rehype-raw"
@@ -14,7 +22,6 @@ import checkboxScript from "../../components/scripts/checkbox.inline.ts"
 import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
 import { toHast } from "mdast-util-to-hast"
 import { toHtml } from "hast-util-to-html"
-import { PhrasingContent } from "mdast-util-find-and-replace/lib"
 import { capitalize } from "../../util/lang"
 import { PluggableList } from "unified"
 

quartz/styles/base.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "./variables.scss" as *;
 @use "./syntax.scss";
 @use "./callouts.scss";
@@ -121,7 +123,7 @@ a {
 }
 
 .page {
-  max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
+  max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
   margin: 0 auto;
   & article {
     & > h1 {
@@ -151,24 +153,25 @@ a {
 
   & > #quartz-body {
     display: grid;
-    grid-template-columns: #{map-get($desktopGrid, templateColumns)};
+    grid-template-columns: #{map.get($desktopGrid, templateColumns)};
-    grid-template-rows: #{map-get($desktopGrid, templateRows)};
+    grid-template-rows: #{map.get($desktopGrid, templateRows)};
-    column-gap: #{map-get($desktopGrid, columnGap)};
+    column-gap: #{map.get($desktopGrid, columnGap)};
-    row-gap: #{map-get($desktopGrid, rowGap)};
+    row-gap: #{map.get($desktopGrid, rowGap)};
-    grid-template-areas: #{map-get($desktopGrid, templateAreas)};
+    grid-template-areas: #{map.get($desktopGrid, templateAreas)};
+
     @media all and ($tablet) {
-      grid-template-columns: #{map-get($tabletGrid, templateColumns)};
+      grid-template-columns: #{map.get($tabletGrid, templateColumns)};
-      grid-template-rows: #{map-get($tabletGrid, templateRows)};
+      grid-template-rows: #{map.get($tabletGrid, templateRows)};
-      column-gap: #{map-get($tabletGrid, columnGap)};
+      column-gap: #{map.get($tabletGrid, columnGap)};
-      row-gap: #{map-get($tabletGrid, rowGap)};
+      row-gap: #{map.get($tabletGrid, rowGap)};
-      grid-template-areas: #{map-get($tabletGrid, templateAreas)};
+      grid-template-areas: #{map.get($tabletGrid, templateAreas)};
     }
     @media all and ($mobile) {
-      grid-template-columns: #{map-get($mobileGrid, templateColumns)};
+      grid-template-columns: #{map.get($mobileGrid, templateColumns)};
-      grid-template-rows: #{map-get($mobileGrid, templateRows)};
+      grid-template-rows: #{map.get($mobileGrid, templateRows)};
-      column-gap: #{map-get($mobileGrid, columnGap)};
+      column-gap: #{map.get($mobileGrid, columnGap)};
-      row-gap: #{map-get($mobileGrid, rowGap)};
+      row-gap: #{map.get($mobileGrid, rowGap)};
-      grid-template-areas: #{map-get($mobileGrid, templateAreas)};
+      grid-template-areas: #{map.get($mobileGrid, templateAreas)};
     }
 
     @media all and not ($desktop) {

quartz/styles/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 /**
  * Layout breakpoints
  * $mobile: screen width below this value will use mobile styles
@@ -10,11 +12,11 @@ $breakpoints: (
   desktop: 1200px,
 );
 
-$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
+$mobile: "(max-width: #{map.get($breakpoints, mobile)})";
-$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
+$tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
-$desktop: "(min-width: #{map-get($breakpoints, desktop)})";
+$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
 
-$pageWidth: #{map-get($breakpoints, mobile)};
+$pageWidth: #{map.get($breakpoints, mobile)};
 $sidePanelWidth: 320px; //380px;
 $topSpacing: 6rem;
 $boldWeight: 700;