Merge tag 'v4.4.0' into drone-v4

v4.4.0

# Conflicts:
#	quartz/components/styles/backlinks.scss
#	quartz/plugins/transformers/links.ts
This commit is contained in:
Struchkov Mark 2024-10-11 20:42:05 +03:00
commit b460b61375
No known key found for this signature in database
GPG Key ID: A3F0AC3F0FA52F3C
27 changed files with 674 additions and 222 deletions

View File

@ -21,3 +21,7 @@ This will start a local web server to run your Quartz on your computer. Open a w
> - `--serve`: run a local hot-reloading server to preview your Quartz > - `--serve`: run a local hot-reloading server to preview your Quartz
> - `--port`: what port to run the local preview server on > - `--port`: what port to run the local preview server on
> - `--concurrency`: how many threads to use to parse notes > - `--concurrency`: how many threads to use to parse notes
> [!warning] Not to be used for production
> Serve mode is intended for local previews only.
> For production workloads, see the page on [[hosting]].

View File

@ -0,0 +1,28 @@
---
title: "Roam Research Compatibility"
tags:
- feature/transformer
---
[Roam Research](https://roamresearch.com) is a note-taking tool that organizes your knowledge graph in a unique and interconnected way.
Quartz supports transforming the special Markdown syntax from Roam Research (like `{{[[components]]}}` and other formatting) into
regular Markdown via the [[RoamFlavoredMarkdown]] plugin.
```typescript title="quartz.config.ts"
plugins: {
transformers: [
// ...
Plugin.RoamFlavoredMarkdown(),
Plugin.ObsidianFlavoredMarkdown(),
// ...
],
},
```
> [!warning]
> As seen above placement of `Plugin.RoamFlavoredMarkdown()` within `quartz.config.ts` is very important. It must come before `Plugin.ObsidianFlavoredMarkdown()`.
## Customization
This functionality is provided by the [[RoamFlavoredMarkdown]] plugin. See the plugin page for customization options.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -13,15 +13,19 @@ export interface FullPageLayout {
beforeBody: QuartzComponent[] // laid out vertically beforeBody: QuartzComponent[] // laid out vertically
pageBody: QuartzComponent // single component pageBody: QuartzComponent // single component
afterBody: QuartzComponent[] // laid out vertically afterBody: QuartzComponent[] // laid out vertically
left: QuartzComponent[] // vertical on desktop, horizontal on mobile left: QuartzComponent[] // vertical on desktop and tablet, horizontal on mobile
right: QuartzComponent[] // vertical on desktop, horizontal on mobile right: QuartzComponent[] // vertical on desktop, horizontal on tablet and mobile
footer: QuartzComponent // single component footer: QuartzComponent // single component
} }
``` ```
These correspond to following parts of the page: These correspond to following parts of the page:
![[quartz layout.png|800]] | Layout | Preview |
| ------------------------------- | ----------------------------------- |
| Desktop (width > 1200px) | ![[quartz-layout-desktop.png\|800]] |
| Tablet (800px < width < 1200px) | ![[quartz-layout-tablet.png\|800]] |
| Mobile (width < 800px) | ![[quartz-layout-mobile.png\|800]] |
> [!note] > [!note]
> There are two additional layout fields that are _not_ shown in the above diagram. > There are two additional layout fields that are _not_ shown in the above diagram.
@ -33,6 +37,23 @@ Quartz **components**, like plugins, can take in additional properties as config
See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz. See [a list of all the components](component.md) for all available components along with their configuration options. You can also checkout the guide on [[creating components]] if you're interested in further customizing the behaviour of Quartz.
### Layout breakpoints
Quartz has different layouts depending on the width the screen viewing the website.
The breakpoints for layouts can be configured in `variables.scss`.
- `mobile`: screen width below this size will use mobile layout.
- `desktop`: screen width above this size will use desktop layout.
- Screen width between `mobile` and `desktop` width will use the tablet layout.
```scss
$breakpoints: (
mobile: 800px,
desktop: 1200px,
);
```
### Style ### Style
Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling. Most meaningful style changes like colour scheme and font can be done simply through the [[configuration#General Configuration|general configuration]] options. However, if you'd like to make more involved style changes, you can do this by writing your own styles. Quartz 4, like Quartz 3, uses [Sass](https://sass-lang.com/guide/) for styling.

View File

@ -0,0 +1,26 @@
---
title: RoamFlavoredMarkdown
tags:
- plugin/transformer
---
This plugin provides support for [Roam Research](https://roamresearch.com) compatibility. See [[Roam Research Compatibility]] for more information.
> [!note]
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
This plugin accepts the following configuration options:
- `orComponent`: If `true` (default), converts Roam `{{ or:ONE|TWO|THREE }}` shortcodes into HTML Dropdown options.
- `TODOComponent`: If `true` (default), converts Roam `{{[[TODO]]}}` shortcodes into HTML check boxes.
- `DONEComponent`: If `true` (default), converts Roam `{{[[DONE]]}}` shortcodes into checked HTML check boxes.
- `videoComponent`: If `true` (default), converts Roam `{{[[video]]:URL}}` shortcodes into embeded HTML video.
- `audioComponent`: If `true` (default), converts Roam `{{[[audio]]:URL}}` shortcodes into embeded HTML audio.
- `pdfComponent`: If `true` (default), converts Roam `{{[[pdf]]:URL}}` shortcodes into embeded HTML PDF viewer.
- `blockquoteComponent`: If `true` (default), converts Roam `{{[[>]]}}` shortcodes into Quartz blockquotes.
## API
- Category: Transformer
- Function name: `Plugin.RoamFlavoredMarkdown()`.
- Source: [`quartz/plugins/transformers/roam.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/roam.ts).

View File

@ -27,5 +27,6 @@ Want to see what Quartz can do? Here are some cool community gardens:
- [Ellie's Notes](https://ellie.wtf) - [Ellie's Notes](https://ellie.wtf)
- [🥷🏻🌳🍃 Computer Science & Thinkering Garden](https://notes.yxy.ninja) - [🥷🏻🌳🍃 Computer Science & Thinkering Garden](https://notes.yxy.ninja)
- [Eledah's Crystalline](https://blog.eledah.ir/) - [Eledah's Crystalline](https://blog.eledah.ir/)
- [🌓 Projects & Privacy - FOSS, tech, law](https://be-far.com)
If you want to see your own on here, submit a [Pull Request adding yourself to this file](https://github.com/jackyzha0/quartz/blob/v4/docs/showcase.md)! If you want to see your own on here, submit a [Pull Request adding yourself to this file](https://github.com/jackyzha0/quartz/blob/v4/docs/showcase.md)!

215
package-lock.json generated
View File

@ -1,17 +1,17 @@
{ {
"name": "@jackyzha0/quartz", "name": "@jackyzha0/quartz",
"version": "4.3.1", "version": "4.4.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@jackyzha0/quartz", "name": "@jackyzha0/quartz",
"version": "4.3.1", "version": "4.4.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@clack/prompts": "^0.7.0", "@clack/prompts": "^0.7.0",
"@floating-ui/dom": "^1.6.10", "@floating-ui/dom": "^1.6.10",
"@napi-rs/simple-git": "0.1.17", "@napi-rs/simple-git": "0.1.19",
"@tweenjs/tween.js": "^25.0.0", "@tweenjs/tween.js": "^25.0.0",
"async-mutex": "^0.5.0", "async-mutex": "^0.5.0",
"chalk": "^5.3.0", "chalk": "^5.3.0",
@ -23,7 +23,7 @@
"github-slugger": "^2.0.0", "github-slugger": "^2.0.0",
"globby": "^14.0.2", "globby": "^14.0.2",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"hast-util-to-html": "^9.0.1", "hast-util-to-html": "^9.0.2",
"hast-util-to-jsx-runtime": "^2.3.0", "hast-util-to-jsx-runtime": "^2.3.0",
"hast-util-to-string": "^3.0.0", "hast-util-to-string": "^3.0.0",
"is-absolute-url": "^4.0.1", "is-absolute-url": "^4.0.1",
@ -33,9 +33,9 @@
"mdast-util-to-hast": "^13.2.0", "mdast-util-to-hast": "^13.2.0",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"micromorph": "^0.4.5", "micromorph": "^0.4.5",
"pixi.js": "^8.3.3", "pixi.js": "^8.3.4",
"preact": "^10.23.2", "preact": "^10.24.0",
"preact-render-to-string": "^6.5.9", "preact-render-to-string": "^6.5.11",
"pretty-bytes": "^6.1.1", "pretty-bytes": "^6.1.1",
"pretty-time": "^1.1.0", "pretty-time": "^1.1.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
@ -61,9 +61,9 @@
"source-map-support": "^0.5.21", "source-map-support": "^0.5.21",
"to-vfile": "^8.0.0", "to-vfile": "^8.0.0",
"toml": "^3.0.0", "toml": "^3.0.0",
"unified": "^11.0.4", "unified": "^11.0.5",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
"vfile": "^6.0.2", "vfile": "^6.0.3",
"workerpool": "^9.1.3", "workerpool": "^9.1.3",
"ws": "^8.18.0", "ws": "^8.18.0",
"yargs": "^17.7.2" "yargs": "^17.7.2"
@ -76,15 +76,15 @@
"@types/d3": "^7.4.3", "@types/d3": "^7.4.3",
"@types/hast": "^3.0.4", "@types/hast": "^3.0.4",
"@types/js-yaml": "^4.0.9", "@types/js-yaml": "^4.0.9",
"@types/node": "^22.1.0", "@types/node": "^22.5.5",
"@types/pretty-time": "^1.1.5", "@types/pretty-time": "^1.1.5",
"@types/source-map-support": "^0.5.10", "@types/source-map-support": "^0.5.10",
"@types/ws": "^8.5.12", "@types/ws": "^8.5.12",
"@types/yargs": "^17.0.32", "@types/yargs": "^17.0.33",
"esbuild": "^0.19.9", "esbuild": "^0.19.9",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"tsx": "^4.17.0", "tsx": "^4.19.0",
"typescript": "^5.5.4" "typescript": "^5.6.2"
}, },
"engines": { "engines": {
"node": "20 || >=22", "node": "20 || >=22",
@ -611,33 +611,33 @@
} }
}, },
"node_modules/@napi-rs/simple-git": { "node_modules/@napi-rs/simple-git": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.19.tgz",
"integrity": "sha512-lH8bYk2kqfbKsht/Gejd8K+y069ZXPHBfrlcj1ptS6xlJbHhncHxpFyy57W+PTuCcN+MPGVjs+3CiufG8EUrCQ==", "integrity": "sha512-jMxvwzkKzd3cXo2EB9GM2ic0eYo2rP/BS6gJt6HnWbsDO1O8GSD4k7o2Cpr2YERtMpGF/MGcDfsfj2EbQPtrXw==",
"engines": { "engines": {
"node": ">= 10" "node": ">= 10"
}, },
"optionalDependencies": { "optionalDependencies": {
"@napi-rs/simple-git-android-arm-eabi": "0.1.17", "@napi-rs/simple-git-android-arm-eabi": "0.1.19",
"@napi-rs/simple-git-android-arm64": "0.1.17", "@napi-rs/simple-git-android-arm64": "0.1.19",
"@napi-rs/simple-git-darwin-arm64": "0.1.17", "@napi-rs/simple-git-darwin-arm64": "0.1.19",
"@napi-rs/simple-git-darwin-x64": "0.1.17", "@napi-rs/simple-git-darwin-x64": "0.1.19",
"@napi-rs/simple-git-freebsd-x64": "0.1.17", "@napi-rs/simple-git-freebsd-x64": "0.1.19",
"@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.17", "@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.19",
"@napi-rs/simple-git-linux-arm64-gnu": "0.1.17", "@napi-rs/simple-git-linux-arm64-gnu": "0.1.19",
"@napi-rs/simple-git-linux-arm64-musl": "0.1.17", "@napi-rs/simple-git-linux-arm64-musl": "0.1.19",
"@napi-rs/simple-git-linux-powerpc64le-gnu": "0.1.17", "@napi-rs/simple-git-linux-powerpc64le-gnu": "0.1.19",
"@napi-rs/simple-git-linux-s390x-gnu": "0.1.17", "@napi-rs/simple-git-linux-s390x-gnu": "0.1.19",
"@napi-rs/simple-git-linux-x64-gnu": "0.1.17", "@napi-rs/simple-git-linux-x64-gnu": "0.1.19",
"@napi-rs/simple-git-linux-x64-musl": "0.1.17", "@napi-rs/simple-git-linux-x64-musl": "0.1.19",
"@napi-rs/simple-git-win32-arm64-msvc": "0.1.17", "@napi-rs/simple-git-win32-arm64-msvc": "0.1.19",
"@napi-rs/simple-git-win32-x64-msvc": "0.1.17" "@napi-rs/simple-git-win32-x64-msvc": "0.1.19"
} }
}, },
"node_modules/@napi-rs/simple-git-android-arm-eabi": { "node_modules/@napi-rs/simple-git-android-arm-eabi": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.19.tgz",
"integrity": "sha512-P+B95PKy46Dq9q1sr18wCn+Uj/WShMIyBBA+ezVHWJge6JSeGh4hLhKEpv3+Rk6S7ITCXxrr7Pn7U4o20nVqhQ==", "integrity": "sha512-XryEH/hadZ4Duk/HS/HC/cA1j0RHmqUGey3MsCf65ZS0VrWMqChXM/xlTPWuY5jfCc/rPubHaqI7DZlbexnX/g==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -650,9 +650,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-android-arm64": { "node_modules/@napi-rs/simple-git-android-arm64": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.19.tgz",
"integrity": "sha512-qggMcxfNKiQsAa1pupFuC8fajvAz6QQcZirHxTPWUxQSEwUvliL8cyKM4QdJwSac0VEITTmHaegDSXsn43EvGg==", "integrity": "sha512-ZQ0cPvY6nV9p7zrR9ZPo7hQBkDAcY/CHj3BjYNhykeUCiSNCrhvwX+WEeg5on8M1j4d5jcI/cwVG2FslfiByUg==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -665,9 +665,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-darwin-arm64": { "node_modules/@napi-rs/simple-git-darwin-arm64": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.19.tgz",
"integrity": "sha512-LYgvP3Rw1lCkBW0Ud4xZFUZ2SI+Y2vvy9X/OEzlmqee5VPC1wiez2kZ62lD3ABU0Ta4Khv7W+eJsaXiTuvcq+Q==", "integrity": "sha512-viZB5TYgjA1vH+QluhxZo0WKro3xBA+1xSzYx8mcxUMO5gnAoUMwXn0ZO/6Zy6pai+aGae+cj6XihGnrBRu3Pg==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -680,9 +680,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-darwin-x64": { "node_modules/@napi-rs/simple-git-darwin-x64": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.19.tgz",
"integrity": "sha512-CyLbxyLILT47jdNDTCREdO0LELKWqfkbw9EV4gaFrLZVD1Dej+NnZogR4oDrg7N12pcgVWnleaK1hcBDs7SeLQ==", "integrity": "sha512-6dNkzSNUV5X9rsVYQbpZLyJu4Gtkl2vNJ3abBXHX/Etk0ILG5ZasO3ncznIANZQpqcbn/QPHr49J2QYAXGoKJA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -695,9 +695,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-freebsd-x64": { "node_modules/@napi-rs/simple-git-freebsd-x64": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-freebsd-x64/-/simple-git-freebsd-x64-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-freebsd-x64/-/simple-git-freebsd-x64-0.1.19.tgz",
"integrity": "sha512-SHWa3o5EZWYh7UoLi2sO4uLjZd58UFHaMttw4O9PZPvFcdjz5LjC6CQclwZbLyPDPMGefalrkUeYTs+/VJ+XEA==", "integrity": "sha512-sB9krVIchzd20FjI2ZZ8FDsTSsXLBdnwJ6CpeVyrhXHnoszfcqxt49ocZHujAS9lMpXq7i2Nv1EXJmCy4KdhwA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -710,9 +710,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-arm-gnueabihf": { "node_modules/@napi-rs/simple-git-linux-arm-gnueabihf": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.19.tgz",
"integrity": "sha512-nQpwitNfSN4qGmDpWOlS3XqeE7NARxCvL+lxO0CtKih2iBuWIoU0wViVKdf9fb/Rm3xsQHcblMkliMnjcAOupg==", "integrity": "sha512-6HPn09lr9N1n5/XKfP8Np53g4fEXVxOFqNkS6rTH3Rm1lZHdazTRH62RggXLTguZwjcE+MvOLvoTIoR5kAS8+g==",
"cpu": [ "cpu": [
"arm" "arm"
], ],
@ -725,9 +725,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-arm64-gnu": { "node_modules/@napi-rs/simple-git-linux-arm64-gnu": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.19.tgz",
"integrity": "sha512-JD8nSLa9WY1kAppMufYqcqFYYjZKjZZFdZtlpz6Kn0kk4Qmm3Rvt1etnuQBwax9R2wG4n9YPYfpidDxic8rlNw==", "integrity": "sha512-G0gISckt4cVDp3oh5Z6PV3GHJrJO6Z8bIS+9xA7vTtKdqB1i5y0n3cSFLlzQciLzhr+CajFD27doW4lEyErQ/Q==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -740,9 +740,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-arm64-musl": { "node_modules/@napi-rs/simple-git-linux-arm64-musl": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.19.tgz",
"integrity": "sha512-PRdVIEvgdIuJhDvdneO3X7XfZwujU7MOyymwK3kR1RMJPlbwzxdQBA86am/jEkBP7d8Cx8RbREzJ6y/2hAHKOQ==", "integrity": "sha512-OwTRF+H4IZYxmDFRi1IrLMfqbdIpvHeYbJl2X94NVsLVOY+3NUHvEzL3fYaVx5urBaMnIK0DD3wZLbcueWvxbA==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -755,9 +755,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-powerpc64le-gnu": { "node_modules/@napi-rs/simple-git-linux-powerpc64le-gnu": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-powerpc64le-gnu/-/simple-git-linux-powerpc64le-gnu-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-powerpc64le-gnu/-/simple-git-linux-powerpc64le-gnu-0.1.19.tgz",
"integrity": "sha512-afbfsJMpQjtdLP3BRGj/hKpRqymxw2Lt+dmyoRej0zKxZnuPrws3Fi85RyYsT/6Tq0hSUAMeh5UtxGAOH3q8gA==", "integrity": "sha512-p7zuNNVyzpRvkCt2RIGv9FX/WPcPbZ6/FRUgUTZkA2WU33mrbvNqSi4AOqCCl6mBvEd+EOw5NU4lS9ORRJvAEg==",
"cpu": [ "cpu": [
"powerpc64le" "powerpc64le"
], ],
@ -770,9 +770,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-s390x-gnu": { "node_modules/@napi-rs/simple-git-linux-s390x-gnu": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-s390x-gnu/-/simple-git-linux-s390x-gnu-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-s390x-gnu/-/simple-git-linux-s390x-gnu-0.1.19.tgz",
"integrity": "sha512-qTgRIUsU+b7RMls+Ji4xlDYq0rsUuNBpzVgb991UPnzrhFWFFkCtyk6I6tJqMtRfg7Vgn1stCghFEQiHmpqkew==", "integrity": "sha512-6N2vwJUPLiak8GLrS0a3is0gSb0UwI2CHOOqtvQxPmv+JVI8kn3vKiUscsktdDb0wGEPeZ8PvZs0y8UWix7K4g==",
"cpu": [ "cpu": [
"s390x" "s390x"
], ],
@ -785,9 +785,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-x64-gnu": { "node_modules/@napi-rs/simple-git-linux-x64-gnu": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.19.tgz",
"integrity": "sha512-xHlyUDJhjPUCR07JGrvMfLg5XSRVDsxgpo6B6zYQOSMcVgM7fjvyWNMBe508r4eD5YZKZyBPfSJUc5Ls9ToJNQ==", "integrity": "sha512-61YfeO1J13WK7MalLgP3QlV6of2rWnVw1aqxWkAgy/lGxoOFSJ4Wid6ANVCEZk4tJpPX/XNeneqkUz5xpeb2Cw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -800,9 +800,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-linux-x64-musl": { "node_modules/@napi-rs/simple-git-linux-x64-musl": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.19.tgz",
"integrity": "sha512-eaTr+WPeiuEegduE3O7VzHhHftGXmX1pzzILoOTbbdmeEuH1BHnGAr35XTu+1lUHUqE2JHef3d3PgBHeh844hA==", "integrity": "sha512-cCTWNpMJnN3PrUBItWcs3dQKCydsIasbrS3laMzq8k7OzF93Zrp2LWDTPlLCO9brbBVpBzy2Qk5Xg9uAfe/Ukw==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -815,9 +815,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-win32-arm64-msvc": { "node_modules/@napi-rs/simple-git-win32-arm64-msvc": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.19.tgz",
"integrity": "sha512-v1F72stOCjapCd0Ha928m8X8i/IPhPQIXbYEGX0MEmaaAzbAJ3PTSSFpb0rFLShXaDFA2Wuw/jzlkPLESPdKVQ==", "integrity": "sha512-sWavb1BjeLKKBA+PbTsRSSzVNfb7V/dOpaJvkgR5d2kWFn/AHmCZHSSj/3nyZdYf0BdDC+DIvqk3daAEZ6QMVw==",
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
@ -830,9 +830,9 @@
} }
}, },
"node_modules/@napi-rs/simple-git-win32-x64-msvc": { "node_modules/@napi-rs/simple-git-win32-x64-msvc": {
"version": "0.1.17", "version": "0.1.19",
"resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.17.tgz", "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.19.tgz",
"integrity": "sha512-ziSqhCGE2eTUqpQKEutGobU2fH1t9fXwGF58dMFaPgTJIISaENvdnKu5FDJfA94vPbe3BMN64JoTmjBSglGFhQ==", "integrity": "sha512-FmNuPoK4+qwaSCkp8lm3sJlrxk374enW+zCE5ZksXlZzj/9BDJAULJb5QUJ7o9Y8A/G+d8LkdQLPBE2Jaxe5XA==",
"cpu": [ "cpu": [
"x64" "x64"
], ],
@ -1263,12 +1263,12 @@
} }
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.1.0", "version": "22.5.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
"integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==", "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"undici-types": "~6.13.0" "undici-types": "~6.19.2"
} }
}, },
"node_modules/@types/pretty-time": { "node_modules/@types/pretty-time": {
@ -1301,9 +1301,9 @@
} }
}, },
"node_modules/@types/yargs": { "node_modules/@types/yargs": {
"version": "17.0.32", "version": "17.0.33",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
"integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==", "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/yargs-parser": "*" "@types/yargs-parser": "*"
@ -2831,15 +2831,14 @@
"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==" "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
}, },
"node_modules/hast-util-to-html": { "node_modules/hast-util-to-html": {
"version": "9.0.1", "version": "9.0.2",
"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.1.tgz", "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.2.tgz",
"integrity": "sha512-hZOofyZANbyWo+9RP75xIDV/gq+OUKx+T46IlwERnKmfpwp81XBFbT9mi26ws+SJchA4RVUQwIBJpqEOBhMzEQ==", "integrity": "sha512-RP5wNpj5nm1Z8cloDv4Sl4RS8jH5HYa0v93YB6Wb4poEzgMo/dAAL0KcT4974dCjcNG5pkLqTImeFHHCwwfY3g==",
"dependencies": { "dependencies": {
"@types/hast": "^3.0.0", "@types/hast": "^3.0.0",
"@types/unist": "^3.0.0", "@types/unist": "^3.0.0",
"ccount": "^2.0.0", "ccount": "^2.0.0",
"comma-separated-tokens": "^2.0.0", "comma-separated-tokens": "^2.0.0",
"hast-util-raw": "^9.0.0",
"hast-util-whitespace": "^3.0.0", "hast-util-whitespace": "^3.0.0",
"html-void-elements": "^3.0.0", "html-void-elements": "^3.0.0",
"mdast-util-to-hast": "^13.0.0", "mdast-util-to-hast": "^13.0.0",
@ -4840,10 +4839,9 @@
} }
}, },
"node_modules/pixi.js": { "node_modules/pixi.js": {
"version": "8.3.3", "version": "8.3.4",
"resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.3.3.tgz", "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.3.4.tgz",
"integrity": "sha512-dpucBKAqEm0K51MQKlXvyIJ40bcxniP82uz4ZPEQejGtPp0P+vueuG5DyArHCkC48mkVE2FEDvyYvBa45/JlQg==", "integrity": "sha512-b5qdoHMQy79JjTiOOAH/fDiK9dLKGAoxfBwkHIdsK5XKNxsFuII2MBbktvR9pVaAmTDobDkMPDoIBFKYYpDeOg==",
"license": "MIT",
"dependencies": { "dependencies": {
"@pixi/colord": "^2.9.6", "@pixi/colord": "^2.9.6",
"@types/css-font-loading-module": "^0.0.12", "@types/css-font-loading-module": "^0.0.12",
@ -4857,18 +4855,18 @@
} }
}, },
"node_modules/preact": { "node_modules/preact": {
"version": "10.23.2", "version": "10.24.0",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz", "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.0.tgz",
"integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==", "integrity": "sha512-aK8Cf+jkfyuZ0ZZRG9FbYqwmEiGQ4y/PUO4SuTWoyWL244nZZh7bd5h2APd4rSNDYTBNghg1L+5iJN3Skxtbsw==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/preact" "url": "https://opencollective.com/preact"
} }
}, },
"node_modules/preact-render-to-string": { "node_modules/preact-render-to-string": {
"version": "6.5.9", "version": "6.5.11",
"resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.9.tgz", "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.11.tgz",
"integrity": "sha512-Fn9R89h6qrQeSRmsH2O2fWzqpVwsJgEL9UTly5nGEV2ldhVuG+9JhXdNJ6zreIkOZcBT20+AOMwlG1x72znJ+g==", "integrity": "sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==",
"peerDependencies": { "peerDependencies": {
"preact": ">=10" "preact": ">=10"
} }
@ -5911,9 +5909,9 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
}, },
"node_modules/tsx": { "node_modules/tsx": {
"version": "4.17.0", "version": "4.19.0",
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.17.0.tgz", "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.0.tgz",
"integrity": "sha512-eN4mnDA5UMKDt4YZixo9tBioibaMBpoxBkD+rIPAjVmYERSG0/dWEY1CEFuV89CgASlKL499q8AhmkMnnjtOJg==", "integrity": "sha512-bV30kM7bsLZKZIOCHeMNVMJ32/LuJzLVajkQI/qf92J2Qr08ueLQvW00PUZGiuLPP760UINwupgUj8qrSCPUKg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "~0.23.0", "esbuild": "~0.23.0",
@ -6337,9 +6335,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "5.5.4", "version": "5.6.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
"dev": true, "dev": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
@ -6350,9 +6348,9 @@
} }
}, },
"node_modules/undici-types": { "node_modules/undici-types": {
"version": "6.13.0", "version": "6.19.8",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
"integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==", "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true "dev": true
}, },
"node_modules/unicorn-magic": { "node_modules/unicorn-magic": {
@ -6367,9 +6365,9 @@
} }
}, },
"node_modules/unified": { "node_modules/unified": {
"version": "11.0.4", "version": "11.0.5",
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz", "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
"integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==", "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
"dependencies": { "dependencies": {
"@types/unist": "^3.0.0", "@types/unist": "^3.0.0",
"bail": "^2.0.0", "bail": "^2.0.0",
@ -6551,12 +6549,11 @@
} }
}, },
"node_modules/vfile": { "node_modules/vfile": {
"version": "6.0.2", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.2.tgz", "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
"integrity": "sha512-zND7NlS8rJYb/sPqkb13ZvbbUoExdbi4w3SfRrMq6R3FvnLQmmfpajJNITuuYm6AZ5uao9vy4BAos3EXBPf2rg==", "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
"dependencies": { "dependencies": {
"@types/unist": "^3.0.0", "@types/unist": "^3.0.0",
"unist-util-stringify-position": "^4.0.0",
"vfile-message": "^4.0.0" "vfile-message": "^4.0.0"
}, },
"funding": { "funding": {

View File

@ -2,7 +2,7 @@
"name": "@jackyzha0/quartz", "name": "@jackyzha0/quartz",
"description": "🌱 publish your digital garden and notes as a website", "description": "🌱 publish your digital garden and notes as a website",
"private": true, "private": true,
"version": "4.3.1", "version": "4.4.0",
"type": "module", "type": "module",
"author": "jackyzha0 <j.zhao2k19@gmail.com>", "author": "jackyzha0 <j.zhao2k19@gmail.com>",
"license": "MIT", "license": "MIT",
@ -37,7 +37,7 @@
"dependencies": { "dependencies": {
"@clack/prompts": "^0.7.0", "@clack/prompts": "^0.7.0",
"@floating-ui/dom": "^1.6.10", "@floating-ui/dom": "^1.6.10",
"@napi-rs/simple-git": "0.1.17", "@napi-rs/simple-git": "0.1.19",
"@tweenjs/tween.js": "^25.0.0", "@tweenjs/tween.js": "^25.0.0",
"async-mutex": "^0.5.0", "async-mutex": "^0.5.0",
"chalk": "^5.3.0", "chalk": "^5.3.0",
@ -49,7 +49,7 @@
"github-slugger": "^2.0.0", "github-slugger": "^2.0.0",
"globby": "^14.0.2", "globby": "^14.0.2",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"hast-util-to-html": "^9.0.1", "hast-util-to-html": "^9.0.2",
"hast-util-to-jsx-runtime": "^2.3.0", "hast-util-to-jsx-runtime": "^2.3.0",
"hast-util-to-string": "^3.0.0", "hast-util-to-string": "^3.0.0",
"is-absolute-url": "^4.0.1", "is-absolute-url": "^4.0.1",
@ -59,9 +59,9 @@
"mdast-util-to-hast": "^13.2.0", "mdast-util-to-hast": "^13.2.0",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"micromorph": "^0.4.5", "micromorph": "^0.4.5",
"pixi.js": "^8.3.3", "pixi.js": "^8.3.4",
"preact": "^10.23.2", "preact": "^10.24.0",
"preact-render-to-string": "^6.5.9", "preact-render-to-string": "^6.5.11",
"pretty-bytes": "^6.1.1", "pretty-bytes": "^6.1.1",
"pretty-time": "^1.1.0", "pretty-time": "^1.1.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
@ -87,9 +87,9 @@
"source-map-support": "^0.5.21", "source-map-support": "^0.5.21",
"to-vfile": "^8.0.0", "to-vfile": "^8.0.0",
"toml": "^3.0.0", "toml": "^3.0.0",
"unified": "^11.0.4", "unified": "^11.0.5",
"unist-util-visit": "^5.0.0", "unist-util-visit": "^5.0.0",
"vfile": "^6.0.2", "vfile": "^6.0.3",
"workerpool": "^9.1.3", "workerpool": "^9.1.3",
"ws": "^8.18.0", "ws": "^8.18.0",
"yargs": "^17.7.2" "yargs": "^17.7.2"
@ -99,14 +99,14 @@
"@types/d3": "^7.4.3", "@types/d3": "^7.4.3",
"@types/hast": "^3.0.4", "@types/hast": "^3.0.4",
"@types/js-yaml": "^4.0.9", "@types/js-yaml": "^4.0.9",
"@types/node": "^22.1.0", "@types/node": "^22.5.5",
"@types/pretty-time": "^1.1.5", "@types/pretty-time": "^1.1.5",
"@types/source-map-support": "^0.5.10", "@types/source-map-support": "^0.5.10",
"@types/ws": "^8.5.12", "@types/ws": "^8.5.12",
"@types/yargs": "^17.0.32", "@types/yargs": "^17.0.33",
"esbuild": "^0.19.9", "esbuild": "^0.19.9",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"tsx": "^4.17.0", "tsx": "^4.19.0",
"typescript": "^5.5.4" "typescript": "^5.6.2"
} }
} }

View File

@ -39,7 +39,7 @@ type BuildData = {
type FileEvent = "add" | "change" | "delete" type FileEvent = "add" | "change" | "delete"
function newBuildId() { function newBuildId() {
return new Date().toISOString() return Math.random().toString(36).substring(2, 8)
} }
async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) { async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
@ -162,17 +162,19 @@ async function partialRebuildFromEntrypoint(
return return
} }
const buildStart = new Date().getTime() const buildId = newBuildId()
buildData.lastBuildMs = buildStart ctx.buildId = buildId
buildData.lastBuildMs = new Date().getTime()
const release = await mut.acquire() const release = await mut.acquire()
if (buildData.lastBuildMs > buildStart) {
// if there's another build after us, release and let them do it
if (ctx.buildId !== buildId) {
release() release()
return return
} }
const perf = new PerfTimer() const perf = new PerfTimer()
console.log(chalk.yellow("Detected change, rebuilding...")) console.log(chalk.yellow("Detected change, rebuilding..."))
ctx.buildId = newBuildId()
// UPDATE DEP GRAPH // UPDATE DEP GRAPH
const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
@ -357,19 +359,19 @@ async function rebuildFromEntrypoint(
toRemove.add(filePath) toRemove.add(filePath)
} }
const buildStart = new Date().getTime() const buildId = newBuildId()
buildData.lastBuildMs = buildStart ctx.buildId = buildId
buildData.lastBuildMs = new Date().getTime()
const release = await mut.acquire() const release = await mut.acquire()
// there's another build after us, release and let them do it // there's another build after us, release and let them do it
if (buildData.lastBuildMs > buildStart) { if (ctx.buildId !== buildId) {
release() release()
return return
} }
const perf = new PerfTimer() const perf = new PerfTimer()
console.log(chalk.yellow("Detected change, rebuilding...")) console.log(chalk.yellow("Detected change, rebuilding..."))
ctx.buildId = newBuildId()
try { try {
const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp)) const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
@ -405,10 +407,10 @@ async function rebuildFromEntrypoint(
} }
} }
release()
clientRefresh() clientRefresh()
toRebuild.clear() toRebuild.clear()
toRemove.clear() toRemove.clear()
release()
} }
export default async (argv: Argv, mut: Mutex, clientRefresh: () => void) => { export default async (argv: Argv, mut: Mutex, clientRefresh: () => void) => {

View File

@ -241,8 +241,8 @@ export function renderPage(
</div> </div>
</div> </div>
{RightComponent} {RightComponent}
<Footer {...componentData} />
</Body> </Body>
<Footer {...componentData} />
</div> </div>
</body> </body>
{pageResources.js {pageResources.js

View File

@ -550,6 +550,19 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
addToVisited(simplifySlug(slug)) addToVisited(simplifySlug(slug))
await renderGraph("graph-container", slug) await renderGraph("graph-container", slug)
// Function to re-render the graph when the theme changes
const handleThemeChange = () => {
renderGraph("graph-container", slug)
}
// event listener for theme change
document.addEventListener("themechange", handleThemeChange)
// cleanup for the event listener
window.addCleanup(() => {
document.removeEventListener("themechange", handleThemeChange)
})
const container = document.getElementById("global-graph-outer") const container = document.getElementById("global-graph-outer")
const sidebar = container?.closest(".sidebar") as HTMLElement const sidebar = container?.closest(".sidebar") as HTMLElement

View File

@ -1,18 +1,49 @@
@use "../../styles/variables.scss" as *;
.backlinks { .backlinks {
position: relative; @media all and not ($desktop) {
overflow-y: auto;
display: initial;
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
& > h3 { &:has(> .overflow) {
font-size: 1rem; position: unset;
margin: 0; }
}
& > ul { & > h3 {
list-style: none; font-size: 1rem;
margin: 0.5rem 0; margin: 0;
}
& > li { & > ul {
& > a { list-style: none;
background-color: transparent; margin: 0.5rem 0;
& > li {
& > a {
background-color: transparent;
}
}
}
& > .overflow {
max-height: unset;
& > li:last-of-type {
margin-bottom: 0;
}
&:after {
display: none;
} }
} }
} }

View File

@ -1,5 +1,23 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
.explorer {
&.desktop-only {
overflow-y: auto;
}
&:after {
pointer-events: none;
content: "";
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
}
}
button#explorer { button#explorer {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -58,10 +76,6 @@ button#explorer {
visibility: hidden; visibility: hidden;
} }
&.collapsed > .overflow::after {
opacity: 0;
}
& ul { & ul {
list-style: none; list-style: none;
margin: 0.08rem 0; margin: 0.08rem 0;
@ -76,6 +90,9 @@ button#explorer {
pointer-events: all; pointer-events: all;
} }
} }
> #explorer-ul {
max-height: none;
}
} }
svg { svg {

View File

@ -65,7 +65,7 @@
height: 80vh; height: 80vh;
width: 80vw; width: 80vw;
@media all and (max-width: $fullPageWidth) { @media all and ($desktop) {
width: 90%; width: 90%;
} }
} }

View File

@ -13,7 +13,7 @@ li.section-li {
display: grid; display: grid;
grid-template-columns: fit-content(8em) 3fr 1fr; grid-template-columns: fit-content(8em) 3fr 1fr;
@media all and (max-width: $mobileBreakpoint) { @media all and ($mobile) {
& > .tags { & > .tags {
display: none; display: none;
} }

View File

@ -70,7 +70,7 @@
opacity 0.3s ease, opacity 0.3s ease,
visibility 0.3s ease; visibility 0.3s ease;
@media all and (max-width: $mobileBreakpoint) { @media all and ($mobile) {
display: none !important; display: none !important;
} }
} }

View File

@ -3,7 +3,9 @@
.search { .search {
min-width: fit-content; min-width: fit-content;
max-width: 14rem; max-width: 14rem;
flex-grow: 0.3; @media all and ($mobile) {
flex-grow: 0.3;
}
& > .search-button { & > .search-button {
background-color: var(--lightgray); background-color: var(--lightgray);
@ -62,7 +64,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and (max-width: $fullPageWidth) { @media all and ($desktop) {
width: 90%; width: 90%;
} }
@ -104,7 +106,7 @@
flex: 0 0 min(30%, 450px); flex: 0 0 min(30%, 450px);
} }
@media all and (min-width: $tabletBreakpoint) { @media all and not ($tablet) {
&[data-preview] { &[data-preview] {
& .result-card > p.preview { & .result-card > p.preview {
display: none; display: none;
@ -130,7 +132,7 @@
border-radius: 5px; border-radius: 5px;
} }
@media all and (max-width: $tabletBreakpoint) { @media all and ($tablet) {
& > #preview-container { & > #preview-container {
display: none !important; display: none !important;
} }

View File

@ -1,3 +1,7 @@
.toc {
overflow-y: auto;
}
button#toc { button#toc {
background-color: transparent; background-color: transparent;
border: none; border: none;

View File

@ -147,7 +147,7 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
} else if (cfg.analytics?.provider === "cabin") { } else if (cfg.analytics?.provider === "cabin") {
componentResources.afterDOMLoaded.push(` componentResources.afterDOMLoaded.push(`
const cabinScript = document.createElement("script") const cabinScript = document.createElement("script")
cabinScript.src = "${cfg.analytics.host ?? "https://scripts.cabin.dev"}/cabin.js" cabinScript.src = "${cfg.analytics.host ?? "https://scripts.withcabin.com"}/hello.js"
cabinScript.defer = true cabinScript.defer = true
cabinScript.async = true cabinScript.async = true
document.head.appendChild(cabinScript) document.head.appendChild(cabinScript)

View File

@ -10,3 +10,4 @@ export { OxHugoFlavouredMarkdown } from "./oxhugofm"
export { SyntaxHighlighting } from "./syntax" export { SyntaxHighlighting } from "./syntax"
export { TableOfContents } from "./toc" export { TableOfContents } from "./toc"
export { HardLineBreaks } from "./linebreaks" export { HardLineBreaks } from "./linebreaks"
export { RoamFlavoredMarkdown } from "./roam"

View File

@ -324,8 +324,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
replacements.push([ replacements.push([
tagRegex, tagRegex,
(_value: string, tag: string) => { (_value: string, tag: string) => {
// Check if the tag only includes numbers // Check if the tag only includes numbers and slashes
if (/^\d+$/.test(tag)) { if (/^[\/\d]+$/.test(tag)) {
return false return false
} }

View File

@ -0,0 +1,224 @@
import { QuartzTransformerPlugin } from "../types"
import { PluggableList } from "unified"
import { SKIP, visit } from "unist-util-visit"
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
import { Root, Html, Paragraph, Text, Link, Parent } from "mdast"
import { Node } from "unist"
import { VFile } from "vfile"
import { BuildVisitor } from "unist-util-visit"
export interface Options {
orComponent: boolean
TODOComponent: boolean
DONEComponent: boolean
videoComponent: boolean
audioComponent: boolean
pdfComponent: boolean
blockquoteComponent: boolean
tableComponent: boolean
attributeComponent: boolean
}
const defaultOptions: Options = {
orComponent: true,
TODOComponent: true,
DONEComponent: true,
videoComponent: true,
audioComponent: true,
pdfComponent: true,
blockquoteComponent: true,
tableComponent: true,
attributeComponent: true,
}
const orRegex = new RegExp(/{{or:(.*?)}}/, "g")
const TODORegex = new RegExp(/{{.*?\bTODO\b.*?}}/, "g")
const DONERegex = new RegExp(/{{.*?\bDONE\b.*?}}/, "g")
const videoRegex = new RegExp(/{{.*?\[\[video\]\].*?\:(.*?)}}/, "g")
const youtubeRegex = new RegExp(
/{{.*?\[\[video\]\].*?(https?:\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?)}}/,
"g",
)
// const multimediaRegex = new RegExp(/{{.*?\b(video|audio)\b.*?\:(.*?)}}/, "g")
const audioRegex = new RegExp(/{{.*?\[\[audio\]\].*?\:(.*?)}}/, "g")
const pdfRegex = new RegExp(/{{.*?\[\[pdf\]\].*?\:(.*?)}}/, "g")
const blockquoteRegex = new RegExp(/(\[\[>\]\])\s*(.*)/, "g")
const roamHighlightRegex = new RegExp(/\^\^(.+)\^\^/, "g")
const roamItalicRegex = new RegExp(/__(.+)__/, "g")
const tableRegex = new RegExp(/- {{.*?\btable\b.*?}}/, "g") /* TODO */
const attributeRegex = new RegExp(/\b\w+(?:\s+\w+)*::/, "g") /* TODO */
function isSpecialEmbed(node: Paragraph): boolean {
if (node.children.length !== 2) return false
const [textNode, linkNode] = node.children
return (
textNode.type === "text" &&
textNode.value.startsWith("{{[[") &&
linkNode.type === "link" &&
linkNode.children[0].type === "text" &&
linkNode.children[0].value.endsWith("}}")
)
}
function transformSpecialEmbed(node: Paragraph, opts: Options): Html | null {
const [textNode, linkNode] = node.children as [Text, Link]
const embedType = textNode.value.match(/\{\{\[\[(.*?)\]\]:/)?.[1]?.toLowerCase()
const url = linkNode.url.slice(0, -2) // Remove the trailing '}}'
switch (embedType) {
case "audio":
return opts.audioComponent
? {
type: "html",
value: `<audio controls>
<source src="${url}" type="audio/mpeg">
<source src="${url}" type="audio/ogg">
Your browser does not support the audio tag.
</audio>`,
}
: null
case "video":
if (!opts.videoComponent) return null
// Check if it's a YouTube video
const youtubeMatch = url.match(
/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/,
)
if (youtubeMatch) {
const videoId = youtubeMatch[1].split("&")[0] // Remove additional parameters
const playlistMatch = url.match(/[?&]list=([^#\&\?]*)/)
const playlistId = playlistMatch ? playlistMatch[1] : null
return {
type: "html",
value: `<iframe
class="external-embed youtube"
width="600px"
height="350px"
src="https://www.youtube.com/embed/${videoId}${playlistId ? `?list=${playlistId}` : ""}"
frameborder="0"
allow="fullscreen"
></iframe>`,
}
} else {
return {
type: "html",
value: `<video controls>
<source src="${url}" type="video/mp4">
<source src="${url}" type="video/webm">
Your browser does not support the video tag.
</video>`,
}
}
case "pdf":
return opts.pdfComponent
? {
type: "html",
value: `<embed src="${url}" type="application/pdf" width="100%" height="600px" />`,
}
: null
default:
return null
}
}
export const RoamFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
userOpts,
) => {
const opts = { ...defaultOptions, ...userOpts }
return {
name: "RoamFlavoredMarkdown",
markdownPlugins() {
const plugins: PluggableList = []
plugins.push(() => {
return (tree: Root, file: VFile) => {
const replacements: [RegExp, ReplaceFunction][] = []
// Handle special embeds (audio, video, PDF)
if (opts.audioComponent || opts.videoComponent || opts.pdfComponent) {
visit(tree, "paragraph", ((node: Paragraph, index: number, parent: Parent | null) => {
if (isSpecialEmbed(node)) {
const transformedNode = transformSpecialEmbed(node, opts)
if (transformedNode && parent) {
parent.children[index] = transformedNode
}
}
}) as BuildVisitor<Root, "paragraph">)
}
// Roam italic syntax
replacements.push([
roamItalicRegex,
(_value: string, match: string) => ({
type: "emphasis",
children: [{ type: "text", value: match }],
}),
])
// Roam highlight syntax
replacements.push([
roamHighlightRegex,
(_value: string, inner: string) => ({
type: "html",
value: `<span class="text-highlight">${inner}</span>`,
}),
])
if (opts.orComponent) {
replacements.push([
orRegex,
(match: string) => {
const matchResult = match.match(/{{or:(.*?)}}/)
if (matchResult === null) {
return { type: "html", value: "" }
}
const optionsString: string = matchResult[1]
const options: string[] = optionsString.split("|")
const selectHtml: string = `<select>${options.map((option: string) => `<option value="${option}">${option}</option>`).join("")}</select>`
return { type: "html", value: selectHtml }
},
])
}
if (opts.TODOComponent) {
replacements.push([
TODORegex,
() => ({
type: "html",
value: `<input type="checkbox" disabled>`,
}),
])
}
if (opts.DONEComponent) {
replacements.push([
DONERegex,
() => ({
type: "html",
value: `<input type="checkbox" checked disabled>`,
}),
])
}
if (opts.blockquoteComponent) {
replacements.push([
blockquoteRegex,
(_match: string, _marker: string, content: string) => ({
type: "html",
value: `<blockquote>${content.trim()}</blockquote>`,
}),
])
}
mdastFindReplace(tree, replacements)
}
})
return plugins
},
}
}

View File

@ -12,7 +12,6 @@ html {
body, body,
section { section {
margin: 0; margin: 0;
max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--light); background-color: var(--light);
font-family: var(--bodyFont); font-family: var(--bodyFont);
@ -101,25 +100,21 @@ a {
.desktop-only { .desktop-only {
display: initial; display: initial;
@media all and (max-width: $fullPageWidth) { @media all and ($mobile) {
display: none; display: none;
} }
} }
.mobile-only { .mobile-only {
display: none; display: none;
@media all and (max-width: $fullPageWidth) { @media all and ($mobile) {
display: initial; display: initial;
} }
} }
.page { .page {
@media all and (max-width: $fullPageWidth) { max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto; margin: 0 auto;
padding: 0 1rem;
max-width: $pageWidth;
}
& article { & article {
& > h1 { & > h1 {
font-size: 2rem; font-size: 2rem;
@ -147,78 +142,117 @@ a {
} }
& > #quartz-body { & > #quartz-body {
width: 100%; display: grid;
display: flex; grid-template-columns: #{map-get($desktopGrid, templateColumns)};
@media all and (max-width: $fullPageWidth) { grid-template-rows: #{map-get($desktopGrid, templateRows)};
flex-direction: column; column-gap: #{map-get($desktopGrid, columnGap)};
row-gap: #{map-get($desktopGrid, rowGap)};
grid-template-areas: #{map-get($desktopGrid, templateAreas)};
@media all and ($desktop) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)};
row-gap: #{map-get($tabletGrid, rowGap)};
grid-template-areas: #{map-get($tabletGrid, templateAreas)};
}
@media all and ($mobile) {
grid-template-columns: #{map-get($mobileGrid, templateColumns)};
grid-template-rows: #{map-get($mobileGrid, templateRows)};
column-gap: #{map-get($mobileGrid, columnGap)};
row-gap: #{map-get($mobileGrid, rowGap)};
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
}
@media all and ($desktop) {
padding: 0 1rem;
}
@media all and ($mobile) {
margin: 0 auto;
} }
& .sidebar { & .sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem; gap: 2rem;
top: 0; top: 0;
width: $sidePanelWidth;
margin-top: $topSpacing;
box-sizing: border-box; box-sizing: border-box;
padding: 0 4rem; padding: $topSpacing 2rem 2rem 2rem;
position: fixed; display: flex;
@media all and (max-width: $fullPageWidth) { height: 100vh;
position: initial; position: sticky;
flex-direction: row;
padding: 0;
width: initial;
margin-top: 2rem;
}
} }
& .sidebar.left { & .sidebar.left {
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); z-index: 1;
@media all and (max-width: $fullPageWidth) { grid-area: sidebar-left;
flex-direction: column;
@media all and ($mobile) {
gap: 0; gap: 0;
align-items: center; align-items: center;
position: initial;
display: flex;
height: unset;
flex-direction: row;
padding: 0;
padding-top: 2rem;
} }
} }
& .sidebar.right { & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); grid-area: sidebar-right;
flex-wrap: wrap; margin-right: 0;
& > * { flex-direction: column;
@media all and (max-width: $fullPageWidth) { @media all and ($mobile) {
margin-left: inherit;
margin-right: inherit;
}
@media all and ($desktop) {
position: initial;
height: unset;
width: 100%;
flex-direction: row;
padding: 0;
& > * {
flex: 1; flex: 1;
min-width: 140px; }
& > .toc {
display: none;
} }
} }
} }
} & .page-header,
& .page-footer {
& .page-header, margin-top: 1rem;
& .page-footer {
width: $pageWidth;
margin-top: 1rem;
@media all and (max-width: $fullPageWidth) {
width: initial;
} }
}
& .page-header { & .page-header {
margin: $topSpacing auto 0 auto; grid-area: page-header;
@media all and (max-width: $fullPageWidth) { margin: $topSpacing 0 0 0;
margin-top: 2rem; @media all and ($mobile) {
margin-top: 0;
padding: 0;
}
} }
}
& .center, & .center > article {
& footer { grid-area: page-center;
margin-left: auto; }
margin-right: auto;
width: $pageWidth; & .page-footer {
@media all and (max-width: $fullPageWidth) { grid-area: page-footer;
width: initial; }
& .center,
& footer {
margin-left: auto;
margin-right: auto;
@media all and ($desktop) {
margin-right: 0;
}
@media all and ($mobile) {
margin-left: 0;
}
}
& footer {
margin-left: 0; margin-left: 0;
margin-right: 0;
} }
} }
} }

View File

@ -1,9 +1,56 @@
$pageWidth: 750px; /**
$mobileBreakpoint: 600px; * Layout breakpoints
$tabletBreakpoint: 1000px; * $mobile: screen width below this value will use mobile styles
$sidePanelWidth: 380px; * $desktop: screen width above this value will use desktop styles
* Screen width between $mobile and $desktop width will use the tablet layout.
* assuming mobile < desktop
*/
$breakpoints: (
mobile: 800px,
desktop: 1200px,
);
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
$pageWidth: #{map-get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px;
$topSpacing: 6rem; $topSpacing: 6rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$boldWeight: 700; $boldWeight: 700;
$semiBoldWeight: 600; $semiBoldWeight: 600;
$normalWeight: 400; $normalWeight: 400;
$mobileGrid: (
templateRows: "auto auto auto auto auto",
templateColumns: "auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left"\
"page-header"\
"page-center"\
"sidebar-right"\
"page-footer"',
);
$tabletGrid: (
templateRows: "auto auto auto auto",
templateColumns: "#{$sidePanelWidth} auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left page-header"\
"sidebar-left page-center"\
"sidebar-left sidebar-right"\
"sidebar-left page-footer"',
);
$desktopGrid: (
templateRows: "auto auto auto",
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"sidebar-left page-header sidebar-right"\
"sidebar-left page-center sidebar-right"\
"sidebar-left page-footer sidebar-right"',
);