mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
Upstream Sync (#55)
* fix: small typos (#686) * fix: sluggify pound (closes #681) * fix: add another test for notes with dots * fix: dont hijack handlers when search is not focused (closes #680) * docs: add sidneys artist handbook to showcase * feat: improve default layout * fix: unbork search shortcut * fix: allow transcludes of notes with dots (closes #682) * fix: rebuild errors on windows (#692) * Revert "fix: rebuild errors on windows (#692)" (#695) This reverts commit8eec47c340. * fix: dont use default callout title if theres additional title children left (closes #693) * feat: External link icons (#697) * fix: external link icon shouldn't be vertical aligned (#699) * fix: use joinSegments for `contentIndex.json` file path (#702) * feat: add ofm option to transform `<img>` tags with video exts into `<video>` (closes #463) (#664) * enableVideoEmbed plugin * enableVideoEmbed plugin * enableVideoEmbed plugin * enableVideoEmbed plugin * enableVideoEmbed plugin * cleaned up index validation, regex, conditional, no autoplay * Update quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update ofm.ts * Update ofm.ts --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: clean up ofm code for video parsing * fix: remove extra console log * style: make internal link have less visual padding (closes #706) * refactor: move emit from callback to helper file function (#704) * Change emit from callback to helpers file function * Update docs, remove commented code, improve type sig * fix: allow dashes and underscores in block references (closes #712) * feat: Add an option to display or not reading time from notes (#707) * add an option to display or not reading time from notes * Prettier (?) * Remove ContentMeta override from quartz.layout.ts * Make it positive ! 🌞 * Update quartz/components/ContentMeta.tsx --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat(ofm): add options to parse arrows (#713) * feat(ofm): add options to parse arrows Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(ofm): add options to parse arrows Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: remove quartz 3 references, update font style in popovers * fix(search): use anchor element (closes #698) (#717) * fix(search): use anchor element This addresses #698 to allow search title to include links for SPA Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: formatter Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: move itemTile to `a` Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove nested a title Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(search): remove spaNavigate since now searchResult is an `a` item Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: breadcrumbs on non-folder pages * fix: process comments at a text level rather than a markdown level * fix: more robust ofm comment handling * fix: font weight in search * fix: add polyfill for broken tabindex on mac * pkg: bump to 4.1.5 * fix(search): update no results to be `a` (#721) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * cleanup: Move `rebuild` function outside `startServing` function (#715) * Move rebuild function outside `startServing` * Move toRebuild and toRemove inside rebuild func * Revert "Move toRebuild and toRemove inside rebuild func" This reverts commit8c4dbb13c7. * Rename func to rebuildFromEntrypoint * feat: Emit custom event when theme changes (#723) * Emit custom event when theme changes * Type themechange custom event * Update darkmode docs * fix(style): make a not inline-block * fix: make search result card block * fix: border-box result-card * feat: Enable custom callout (#724) * Enable custom callout make a callout custom defaulted to a note one. * Add a comment * remove comment from quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: code block overflow scroll (#729) * docs: rearrange showcase * docs: add nicole van der hoeven's setup guide * fix: allow partial when specifiying layout for emitter plugins * docs: fix phrasing * docs: i can't type * feat: Handling cssclasses properties in Quartz (#711) * Add cssclasses to article * Prettier * Update quartz/components/pages/Content.tsx * Update quartz/components/pages/Content.tsx --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: generalize frontmatter parsing and coercing * feat: enable dependabot * chore(deps): bump rehype-pretty-code from 0.12.3 to 0.12.6 (#741) Bumps [rehype-pretty-code](https://github.com/atomiks/rehype-pretty-code) from 0.12.3 to 0.12.6. - [Release notes](https://github.com/atomiks/rehype-pretty-code/releases) - [Commits](https://github.com/atomiks/rehype-pretty-code/compare/v0.12.3...v0.12.6) --- updated-dependencies: - dependency-name: rehype-pretty-code dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump tsx from 4.6.2 to 4.7.0 (#743) Bumps [tsx](https://github.com/privatenumber/tsx) from 4.6.2 to 4.7.0. - [Release notes](https://github.com/privatenumber/tsx/releases) - [Changelog](https://github.com/privatenumber/tsx/blob/develop/release.config.cjs) - [Commits](https://github.com/privatenumber/tsx/compare/v4.6.2...v4.7.0) --- updated-dependencies: - dependency-name: tsx dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @napi-rs/simple-git from 0.1.9 to 0.1.11 (#746) Bumps [@napi-rs/simple-git](https://github.com/Brooooooklyn/simple-git) from 0.1.9 to 0.1.11. - [Release notes](https://github.com/Brooooooklyn/simple-git/releases) - [Commits](https://github.com/Brooooooklyn/simple-git/compare/v0.1.9...v0.1.11) --- updated-dependencies: - dependency-name: "@napi-rs/simple-git" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump rehype-mathjax from 5.0.0 to 6.0.0 (#745) Bumps [rehype-mathjax](https://github.com/remarkjs/remark-math) from 5.0.0 to 6.0.0. - [Release notes](https://github.com/remarkjs/remark-math/releases) - [Commits](https://github.com/remarkjs/remark-math/compare/rehype-mathjax@5.0.0...rehype-mathjax@6.0.0) --- updated-dependencies: - dependency-name: rehype-mathjax dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump shikiji from 0.9.9 to 0.10.2 (#742) Bumps [shikiji](https://github.com/antfu/shikiji/tree/HEAD/packages/shikiji) from 0.9.9 to 0.10.2. - [Release notes](https://github.com/antfu/shikiji/releases) - [Commits](https://github.com/antfu/shikiji/commits/v0.10.2/packages/shikiji) --- updated-dependencies: - dependency-name: shikiji dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * deps: bump flexsearch * fix: revert bad tsconfig change * feat: Option to mask folder count (#734) * Option to mask folder count * Update quartz/components/pages/FolderContent.tsx --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: fmt * fix: allow alt to be defined in wikilinks alongside dims * style: remove redundant webkit prefix * docs: improve first-time git setup * fix: revert parsing dates in frontmatter * fix: content-disposition inline should apply to all resource types (closes #728) * fix: `cssclasses` was not applied on folder note (index) (#749) * docs: improve first-time git setup * fix: cssClasses was not applied on index page * refactor: remove vscode files * fix: format * fix: cssClasses should be applied on the entire div, not only the article * feat: support cssClasses for tag-listing --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat: allow to config a translation for date (#739) * fix: alt error mix with height/width More granular detection of alt and resize in image * fix: format * feat: allow to translate the date displayed * style: format * fix: rename to fusion dateLocale with locale (i18n support) * Update quartz/components/PageList.tsx Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * remove default key as it was already set * add docstring for locale --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat: div that encapsulate PageList component (#750) * feat: div that encapsulate PageList component * change class to follow review Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * apply page-listing div to TagContent --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat(icon): update content for gfm links (#751) * feat(icon): update content for gfm links Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove unused var Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: inherit display to remove additional spacing Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * revert: remove redundant svg attribute Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: attempt to merge cached folder state between builds (closes #691) * fix: implement regex fix for alt in image wikilinks (closes #753) * fix: fmt * chore(deps): bump @napi-rs/simple-git from 0.1.11 to 0.1.14 (#756) Bumps [@napi-rs/simple-git](https://github.com/Brooooooklyn/simple-git) from 0.1.11 to 0.1.14. - [Release notes](https://github.com/Brooooooklyn/simple-git/releases) - [Commits](https://github.com/Brooooooklyn/simple-git/compare/v0.1.11...v0.1.14) --- updated-dependencies: - dependency-name: "@napi-rs/simple-git" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump rfdc from 1.3.0 to 1.3.1 (#759) Bumps [rfdc](https://github.com/davidmarkclements/rfdc) from 1.3.0 to 1.3.1. - [Commits](https://github.com/davidmarkclements/rfdc/compare/v1.3.0...v1.3.1) --- updated-dependencies: - dependency-name: rfdc dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump remark-rehype from 11.0.0 to 11.1.0 (#758) Bumps [remark-rehype](https://github.com/remarkjs/remark-rehype) from 11.0.0 to 11.1.0. - [Release notes](https://github.com/remarkjs/remark-rehype/releases) - [Commits](https://github.com/remarkjs/remark-rehype/compare/11.0.0...11.1.0) --- updated-dependencies: - dependency-name: remark-rehype dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump workerpool from 8.0.0 to 9.1.0 (#757) * chore(deps): bump workerpool from 8.0.0 to 9.1.0 Bumps [workerpool](https://github.com/josdejong/workerpool) from 8.0.0 to 9.1.0. - [Changelog](https://github.com/josdejong/workerpool/blob/master/HISTORY.md) - [Commits](https://github.com/josdejong/workerpool/compare/v8.0.0...v9.1.0) --- updated-dependencies: - dependency-name: workerpool dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * remove @types/workerpool --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix(type): make sure dispatchEvent also accept UIEvent (#760) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(div): update class name to remove weird space afterwards (#763) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(type): annotate event for nav (#761) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(css): improve wrapping when right sidebar has more than two items (#762) * improve wrapping when right sidebar has more than two items, particularly on mobile * Adjusted min-width * feat: support selfhost umami (#764) * feat: support selfhsot umami * Update quartz/plugins/emitters/componentResources.ts Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * Update quartz/plugins/emitters/componentResources.ts Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * chore(deps-dev): bump prettier from 3.1.1 to 3.2.4 (#768) * chore(deps-dev): bump prettier from 3.1.1 to 3.2.4 Bumps [prettier](https://github.com/prettier/prettier) from 3.1.1 to 3.2.4. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.1.1...3.2.4) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * format --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore(deps-dev): bump @types/node from 20.3.3 to 20.11.11 (#767) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.3.3 to 20.11.11. - [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 ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @floating-ui/dom from 1.5.3 to 1.6.1 (#766) Bumps [@floating-ui/dom](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/dom) from 1.5.3 to 1.6.1. - [Release notes](https://github.com/floating-ui/floating-ui/releases) - [Changelog](https://github.com/floating-ui/floating-ui/blob/master/packages/dom/CHANGELOG.md) - [Commits](https://github.com/floating-ui/floating-ui/commits/@floating-ui/dom@1.6.1/packages/dom) --- updated-dependencies: - dependency-name: "@floating-ui/dom" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump lightningcss from 1.22.1 to 1.23.0 (#765) Bumps [lightningcss](https://github.com/parcel-bundler/lightningcss) from 1.22.1 to 1.23.0. - [Release notes](https://github.com/parcel-bundler/lightningcss/releases) - [Commits](https://github.com/parcel-bundler/lightningcss/compare/v1.22.1...v1.23.0) --- updated-dependencies: - dependency-name: lightningcss dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: Feature/custom callout icon (#727) * Add icons as masks To handle a simple way to add custom icons, i made it pure css. Icon are now a mask for the callout-icon div, so they always follow the --color form the current callout. Now to add a custom icon, you simply add ```css .callout { &[data-callout="custom"] { --color: #customcolor; --border: #custombordercolor; --bg: #custombg; --callout-icon: url('data:image/svg+xml; utf8, <custom formatted svg>'); } ``` to custom.scss * remove now unused code * Make callouts an enum * docs: update instructions for custom callouts * Prettier & run format * dynamic matching For maintainability, make dynamic mathching. If we or Obsidian want to support more callouts, we simply add it to the enum * callout mapping const Getting ride of the enum entierly as it's not worth here? * fix callout icon styling * Add forgotten icons * Rebase * harmonize callout icon and fold icon * fix docs + prettier * Update docs/features/callouts.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update quartz/plugins/transformers/ofm.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Suggestions fix * remove unecessary rules * comment is always nice * Update docs/features/callouts.md --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: properly parse tags in body * feat(search): experimental telescope layout (closes #718) (#722) * feat(search): telescope-style search Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(search): cleanup some basis and borders Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(search): make sure to set overflow-y Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(search): shows preview on desktop only search Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * perf: add options to control layout through config cache memoize results to avoid fetching Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: use the default configuration * fix: correct minor type for search Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: use datasets to query for preview Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: layout changes show preview on normal layout, and only show previous layout in list page. * fix(type): annotate search with types Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: apply jacky's suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: using map API and scss Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: styling on search container view on phones Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Update quartz.layout.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore(deps): bump katex to 0.16.9 (#772) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(usability): update functions for search (#774) * feat(usability): update functions for search Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * perf: slightly cleaner variables Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(style): search preview consistency * pkg: bump to 4.1.6 * fix: allow formatting in callout titles * docs: fix outdated comment on rebuild debounce behaviour * fix: fmt * fix(search): remove background with mouseEvent (#775) * fix(search): remove background with mouseEvent make sure when mouseenter we remove all existing background Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: update logics from suggestions Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * revert: class is evicted * fix: address correct type Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix: regression in formatted callout titles * deps: reduce dependabot frequency * chore(deps-dev): bump @types/node from 20.11.11 to 20.11.14 (#779) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.11 to 20.11.14. - [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-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump async-mutex from 0.4.0 to 0.4.1 (#777) Bumps [async-mutex](https://github.com/DirtyHairy/async-mutex) from 0.4.0 to 0.4.1. - [Changelog](https://github.com/DirtyHairy/async-mutex/blob/master/CHANGELOG.md) - [Commits](https://github.com/DirtyHairy/async-mutex/compare/v0.4.0...v0.4.1) --- updated-dependencies: - dependency-name: async-mutex dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump mdast-util-to-hast from 13.0.2 to 13.1.0 (#776) Bumps [mdast-util-to-hast](https://github.com/syntax-tree/mdast-util-to-hast) from 13.0.2 to 13.1.0. - [Release notes](https://github.com/syntax-tree/mdast-util-to-hast/releases) - [Commits](https://github.com/syntax-tree/mdast-util-to-hast/compare/13.0.2...13.1.0) --- updated-dependencies: - dependency-name: mdast-util-to-hast dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/hast from 3.0.3 to 3.0.4 (#780) Bumps [@types/hast](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/hast) from 3.0.3 to 3.0.4. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/hast) --- updated-dependencies: - dependency-name: "@types/hast" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(search): improve more general usability (closes #781) (#782) * fix(search): improve more general usability Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: revert naming Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: correct check for enter event on no-match cases Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Update quartz/components/scripts/search.inline.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: remove unecessary class for tracking mouse Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat(search): highlight on preview (#783) * feat: primitive full-text search on preview Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: remove invalid regex and unused code path Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(search): increase size on fullPageWidth viewport (#784) * fix(search): increase size on fullPageWidth viewport Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: fix width size to be consistent on multiple views Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: set layout to 0 if there is no term remove flashing by setting max-height Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(search): check for input type and assignment of focus (#785) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * docs: clarity for `RecentNotes` (#786) - Removed a word for clarity - added reference to layout file * chore: add window.addCleanup() for cleaning up handlers * feat: improve search preview styling and tokenization * fix: border radius on search preview * fix: index setup, styling fixes * chore(cleanup): misc refactoring for cleanup, fix some search bugs * pkg: bump to 4.2.0 * chore: fmt * fix: flatmap children when highlighting rich preview to avoid body * fix: be more eager about constructing search index * fix(style): reasonable page width for rich search preview * fix(search): set correct attribute on hover icon (#787) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: parallelize search indexing * fix: font weight consistency * fix: font smoothing defaults * fix(revert): font aliasing * fix: use display instead of visibility for click handling pasthrough * fix: search async ordering, scroll offset * fix(style): remove redundant selector * pkg: bump to 4.2.1 * fix(style): correctly collapse on mobile * fix: properly handle absolute paths in `CreatedModifiedDate` (#790) When providing an absolute path to the content directory (e.g. when using an Obsidian Vault in another directory), the build step would fail with Failed to process `/absolute/path/to/file.md`: ENOENT: no such file or directory, stat '/current/working/directory/absolute/path/' This problem originated in the `CreatedModifiedDate` transformer which tries to construct a native filesystem path to the file to call `fs.stat` on. It did not however, account for the original file path contained in the received `VFile` being an absolute path and so, just concatenated the current working directory with the absolute path producing a nonexistent one. This patch adds a simple fix for this issue by checking if the original file path is already absolute before concatenating with the current working directory. * fix(search): null checks and focus fixes * fix(style): prevent callout icon from shrinking on long titles (closes #792) * fix(search): dont rely on mouse to manipulate focus * fix(search): oops restore ability to preview on hover lol * fix(search): flex basis and card highlighting * fix: calculate heading after latex (closes #719) * feat: Adding support for i18n (closes #462) (#738) * fix: alt error mix with height/width More granular detection of alt and resize in image * fix: format * feat: init i18n * feat: add translation * style: prettier for test * fix: build-up the locale to fusion with dateLocale * style: run prettier * remove cursed file * refactor: remove i18n library and use locale way instead * format with prettier * forgot to remove test * prevent merging error * format * format * fix: allow string for locale - Check during translation if valid / existing locale - Allow to use "en" and "en-US" for example - Add fallback directly in the function - Add default key in the function - Add docstring to cfg.ts * forgot item translation * remove unused locale variable * forgot to remove fr-FR testing * format * feat(ofm): parsing all type of arrow (#797) * feat(ofm): parsing all type of arrow Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: use html value instead of decimal Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: skip parsing arrow if it is not a valid supported mapping Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(i18n): backlinks naming in mapping (#800) * chore(i18n): refactor and cleanup (#805) * checkpoint * finish * docs * fix(path): properly path encode & * pkg: bump to 4.2.2 * style(search): increase width on mobile view (#796) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat: support checkbox (closes #646) (#799) * feat: support checkbox Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: apply review from jacky --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(i18n): German translation (#808) * feat(i18n): Add Japanese to i18n (#809) Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * feat(i18n): Add Dutch to i18n (#813) * Create nl-NL.ts * Update index.ts * Update nl-NL.ts * chore(deps): bump @napi-rs/simple-git from 0.1.14 to 0.1.16 (#810) Bumps [@napi-rs/simple-git](https://github.com/Brooooooklyn/simple-git) from 0.1.14 to 0.1.16. - [Release notes](https://github.com/Brooooooklyn/simple-git/releases) - [Commits](https://github.com/Brooooooklyn/simple-git/compare/v0.1.14...v0.1.16) --- updated-dependencies: - dependency-name: "@napi-rs/simple-git" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 20.11.14 to 20.11.16 (#811) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.14 to 20.11.16. - [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-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(i18n): add default locale * fix(i18n): forgot a string * perf: don't load mermaid if its not on the page * fix(search): set background-color for icon within preview panel (#815) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(links): show backdrop on links highlighted in headers alias (#816) * fix: assign specific classes based on parent node Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: use custom role for anchor icone Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: allow color on links 😄 Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: unify search inner container Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(i18n): add Romanian to i18n (#821) * chore(lang): lang element based on frontmatter or default locale (#819) default locale Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * add Spanish translations (#822) * add Spanish translations * format with prettier * clears npm ci, formatted w/ prettier * feat(fonts): fetch before build (#817) * feat: fetch google fonts before build Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Update quartz/plugins/emitters/componentResources.ts * fix: fetching wolff2 Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove request stylesheet Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: race condition Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove preconnect for static fonts since we are already downloading fonts into public folder Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove deadcode Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: add options to gate for cdn caching Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: apply jacky's suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: add docs and only use one promise Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: fmt Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove deadcode * chore: final touches Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * revert: changes in theme.ts * fix: styles and remove deadcode Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix(umami): format correct string from custom hosts (#826) * added Ukrainian to i18n (#829) * feat(i18n): use Romanian translation for `ro-MD` locale (#828) * fix: set default locale for lang attribute * feat(experimental): partial rebuilds (#716) * feat(i18n): add Arabic translation (#837) * feat(i18n): add Arabic translation * chore: format * feat(i18n): support parsing callouts (#834) * feat(i18n): support parsing callouts Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: move callout into components Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: update arabic translation Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: make sure to use correct items Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: move fonts all into static folder (#835) * chore: move fonts all into static folder Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: update formatter Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore(callouts): remove unnecessary whitespaces after class name (#833) Though we should have a plugins that just strip whitespace in all node class. Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(i18n): localize the min read string (#838) * feat(i18n): localize the min read string fixes #825 * chore: format * docs: add documentation for Umami analytics integration (#846) * chore: refactor out and export endsWith * fix: breadcrumbs displayName issue for file names ending with index (#839) * feat(i18n): localize the `min read` string for the `ro-RO` locale (#847) * feat(i18n): localize `min read` string for `ro-RO` locale * chore: run Prettier on `quartz/i18n/locales/ro-RO.ts` * fix(breadcrumbs): folder index by full path rather than folder name (closes #676) * chore(deps): bump esbuild-sass-plugin from 2.16.0 to 2.16.1 (#778) Bumps [esbuild-sass-plugin](https://github.com/glromeo/esbuild-sass-plugin) from 2.16.0 to 2.16.1. - [Release notes](https://github.com/glromeo/esbuild-sass-plugin/releases) - [Commits](https://github.com/glromeo/esbuild-sass-plugin/compare/v2.16.0...v2.16.1) --- updated-dependencies: - dependency-name: esbuild-sass-plugin dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(ofm): allow diacretic marks in tag regex (closes #830) * fix(fast rebuild): call only required emitters, don't always copy assets (#845) * fix(fast rebuild): call only required emitters, don't always copy assets * Type function * feat: add transclude-src to transclude 'link to original' * feat(i18n): localize the min read string for the nl-NL locale (#850) * Update min read translation * Added nl_BE to Dutch Added Flemish (nl_BE) to point to nl. * Removed period to match other translations * fix(analytics): umami custom host should be a string (closes #852) * chore(deps-dev): bump tsx from 4.7.0 to 4.7.1 (#859) Bumps [tsx](https://github.com/privatenumber/tsx) from 4.7.0 to 4.7.1. - [Release notes](https://github.com/privatenumber/tsx/releases) - [Changelog](https://github.com/privatenumber/tsx/blob/develop/release.config.cjs) - [Commits](https://github.com/privatenumber/tsx/compare/v4.7.0...v4.7.1) --- updated-dependencies: - dependency-name: tsx dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump preact from 10.19.3 to 10.19.4 (#858) Bumps [preact](https://github.com/preactjs/preact) from 10.19.3 to 10.19.4. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.19.3...10.19.4) --- updated-dependencies: - dependency-name: preact dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @floating-ui/dom from 1.6.1 to 1.6.3 (#857) Bumps [@floating-ui/dom](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/dom) from 1.6.1 to 1.6.3. - [Release notes](https://github.com/floating-ui/floating-ui/releases) - [Changelog](https://github.com/floating-ui/floating-ui/blob/master/packages/dom/CHANGELOG.md) - [Commits](https://github.com/floating-ui/floating-ui/commits/@floating-ui/dom@1.6.3/packages/dom) --- updated-dependencies: - dependency-name: "@floating-ui/dom" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: incorrect link resolution for transclusion in root index file (#853) Co-authored-by: Lauréline Nevin <laureline.nevin@unicaen.fr> * fix: base.com not being resolved properly with joinSegments * chore(types): add additional hint for LSP support (#864) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * docs: workaround for shallow clones on Cloudflare Pages (#868) Rather than recommend a different hosting provider, Cloudflare Pages users that prioritize the `git` method for their `CreatedModifiedDate` configuration can preface the build command with a means of fetching the required repository history. See: - https://gohugo.io/methods/page/gitinfo/#hosting-considerations * Add support for image popovers (#854) * feat(popover): Add support for images * fix: run prettier * feat(popover): use switch logic for content types & adjust styles * feat(popover): Add content type data tag for popover-inner class * feat: implement getDependencyGraph for FolderPage (#849) * feat: implement getDependencyGraph for AliasRedirects emitter (#860) * fix/feat(fast rebuild): re-render transclusions in normal and fastRebuild mode (#842) * Re-render transclusions in normal watch mode * Include transclusions in ContentPage getDependencyGraph * Address PR comments * feat: add user-defined config for syntax highlighting plugin (#869) * feat: add user-defined options to syntax highlighting plugin * feat: add default syntax highlighting config to `quartz.config.ts` * chore: refactor according to @aarnphm's review Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * chore: run Prettier on `quartz/plugins/transformers/syntax.ts` * Update quartz/plugins/transformers/syntax.ts Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Update syntax.ts --------- Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * fix(style): introduce semiBoldWeight and various improvements to reduce CLS * fix(style): bold should use semibold * fix(breadcrumbs): calculate trailing slash for tag hierarchies (closes #873) * feat(i18n): add Russian (#886) * feat(i18n): add Korean (#889) * feat(i18n): add Korean * feat(i18n): add Korean * perf(cdn): CDNJS instead of JSDelivr (#891) * fix(frontmatter): delimiters parameter was not passed (#885) * fix: delimiters parameter was not passed Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> * fix: remove unneeded undefined --------- Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> * feat(i18n): Add Italian (#893) Signed-off-by: Leonardo Ledda <leonardoledda@gmail.com> * docs: add self-hosting section (#883) * Add Self-Hosting section Add Nginx section * run prettier * feat(i18n): add Simplified Chinese (#896) * feat: implement getDependencyGraph for TagPage (#872) * feat: implement getDependencyGraph for TagPage * Only add file to dg if it has at least 1 tag * fix: remove assets via globs to avoid volume mount lock (#877) * Fix docker volume lock issue by altering asset cleanup method Modified build process to prevent the deletion of the output directory. * Add fsOps utility for filesystem operations * Use cleanDirectory in build process to fix volume lock issue * applied prettier * handle ENOENT error when output dir does not exist * remove native function in favor of rimraf * use path.join to concatenate paths * chore(deps-dev): bump @types/node from 20.11.16 to 20.11.19 (#899) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.16 to 20.11.19. - [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-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump globby from 14.0.0 to 14.0.1 (#897) Bumps [globby](https://github.com/sindresorhus/globby) from 14.0.0 to 14.0.1. - [Release notes](https://github.com/sindresorhus/globby/releases) - [Commits](https://github.com/sindresorhus/globby/compare/v14.0.0...v14.0.1) --- updated-dependencies: - dependency-name: globby dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump preact from 10.19.4 to 10.19.5 (#898) Bumps [preact](https://github.com/preactjs/preact) from 10.19.4 to 10.19.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.19.4...10.19.5) --- updated-dependencies: - dependency-name: preact dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: correctly parse falsy js as title (#900) * feat(i18n): change itemsUnderFolder, itemsUnderTag translation of ko-KR (#905) * feat(i18n): add Korean * feat(i18n): add Korean * feat(i18n): change itemsUnderFolder, itemsUnderTag translation of ko-KR * fix: add space and missing dot for listing pages (#907) * fix(toc): correct type for minEntries param (#909) * docs: Fix in explorer.md (#911) * docs: Add Aster's notebook to showcase.md (#912) * chore: passing additional buildCtx to componentData (#914) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * feat(popover): add support for PDF (#913) * feat(popover): add support for PDF Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: split pdf by ';' Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: remove unnecessary check Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(img): return targetUrl as given href (#916) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * deps(highlighting): migrate to shiki as shikiji has been archived (#918) * fix(docs): make docs accurate to callout behaviour (closes #920) * fix(callouts): use user provided title instead of canonical for default title * docs: update plugin documentation (#888) * docs: first few plugins documented * docs: move plugin info * docs: move plugin docs to tag based system * docs: update latex example code snippet * docs: fix spelling of latex in title * docs: add missing linebreak * docs: remove plugin tag from feature pages * docs: shorten titles * docs: refine wording * docs: move plugin details for frontmatter * docs: add features/* tags * docs: update latex example * docs: make references more explicit * docs: add stubs for the remaining plugins * docs: more descriptions * docs: fix feature tags * docs: descriptions * docs: new plugin pages * docs: update configuration page * docs: more plugin work * docs: run prettier * docs: remove comments in config file and add link to docs * docs: minor fixes * docs: run prettier * docs: spelling * docs: update docs/plugins/AliasRedirects.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Assets.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/CNAME.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/Static.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs * docs: update docs/features/Mermaid diagrams.md Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * docs: update docs/plugins/RemoveDrafts.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/plugins/Assets.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: update docs/configuration.md Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs: some updates * docs: work in review comments --------- Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * docs(latex): mhchem * fix(fast rebuild): handle added an deleted markdown correctly (#921) * Handle added files correctly * Handle deletes properly * addGraph renamed to mergeGraph * fix(ci): autotag * pkg: bump to 4.2.3 * ci: fix autotag * ci: tag as a separate step * ci: fix typo in runs-on * ci: also checkout and install node before tagging * docs: fix tag page oops (#925) * chore(types): update correct annotations for pages (#928) * chore(type): export attribute for theme key (#933) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(deps): bump preact from 10.19.5 to 10.19.6 (#935) Bumps [preact](https://github.com/preactjs/preact) from 10.19.5 to 10.19.6. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.19.5...10.19.6) --- updated-dependencies: - dependency-name: preact dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump chokidar from 3.5.3 to 3.6.0 (#937) Bumps [chokidar](https://github.com/paulmillr/chokidar) from 3.5.3 to 3.6.0. - [Release notes](https://github.com/paulmillr/chokidar/releases) - [Commits](https://github.com/paulmillr/chokidar/compare/3.5.3...3.6.0) --- updated-dependencies: - dependency-name: chokidar dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * docs: Clarifications in the Explorer Docs (#938) add example to filter by tags. * fix: correct umami host for self-hosted (#939) * fixed umami script path for self-hosted version * Update quartz/plugins/emitters/componentResources.ts Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> --------- Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> * feat(i18n): add Vietnamese translation (#950) * fix(callout): reorder the plugins to render latex on callout title (closes #952) (#934) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(deps): bump remark-smartypants from 2.0.0 to 2.1.0 (#755) Bumps [remark-smartypants](https://github.com/silvenon/remark-smartypants) from 2.0.0 to 2.1.0. - [Release notes](https://github.com/silvenon/remark-smartypants/releases) - [Commits](https://github.com/silvenon/remark-smartypants/compare/v2.0.0...v2.1.0) --- updated-dependencies: - dependency-name: remark-smartypants dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: support transcluding codeblocks and blockquotes (closes #940) * fix(docs): correct ExplicitPublish as filters instead of transformers (#953) * feat(frontmatter): configure max length for description (#946) * Sentence length check * Replace external links with domain name. * Updated documentation. * Updated replacement values. * Updated Regex based on feedback. * Check description for undefined * Updated external url transform regex. * Updated formatting * feat(graph): focusOnHover (#954) by default, globalGraph will enable focusOnHover, similar to Obsidian. --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore(deps): bump lightningcss from 1.23.0 to 1.24.0 (#961) Bumps [lightningcss](https://github.com/parcel-bundler/lightningcss) from 1.23.0 to 1.24.0. - [Release notes](https://github.com/parcel-bundler/lightningcss/releases) - [Commits](https://github.com/parcel-bundler/lightningcss/compare/v1.23.0...v1.24.0) --- updated-dependencies: - dependency-name: lightningcss dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump preact-render-to-string from 6.3.1 to 6.4.0 (#960) Bumps [preact-render-to-string](https://github.com/developit/preact-render-to-string) from 6.3.1 to 6.4.0. - [Release notes](https://github.com/developit/preact-render-to-string/releases) - [Changelog](https://github.com/preactjs/preact-render-to-string/blob/main/CHANGELOG.md) - [Commits](https://github.com/developit/preact-render-to-string/compare/v6.3.1...6.4.0) --- updated-dependencies: - dependency-name: preact-render-to-string dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump shiki from 1.1.6 to 1.1.7 (#959) Bumps [shiki](https://github.com/shikijs/shiki/tree/HEAD/packages/shiki) from 1.1.6 to 1.1.7. - [Release notes](https://github.com/shikijs/shiki/releases) - [Changelog](https://github.com/shikijs/shiki/blob/main/CHANGELOG.md) - [Commits](https://github.com/shikijs/shiki/commits/v1.1.7/packages/shiki) --- updated-dependencies: - dependency-name: shiki dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * revert: "fix(callout): reorder the plugins to render latex on callout… (#965) This reverts commit018c6358c4. * fix: transclude all subsections for embedded call (closes #963) (#964) * chore(deps-dev): bump @types/node from 20.11.19 to 20.11.24 (#958) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.19 to 20.11.24. - [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-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: transclude subsection without dynamic regex construction * feat: support youtube playlist iframe (#968) * feat: support youtube playlist iframe * chore: updated Youtube embed documentation to include playlists * fix(tag): move hash to sass styling only (#930) * fix(tag): remove hash on main page (#969) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: remove extra # from tag content * feat(analytics): Goatcounter support (#956) * Add options to support goatcounter analytics * goatcounter: support self-hosted * Add to configuration docs for goatcounter settings * use https instead of protocol-relative link for goatcounter js * fix(description): make sure to we join space correctly (#970) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix(description): counts characters instead of words (#972) * fix(description): make sure description counts characters instead of words * ref: removed duplicate ternary * fix(i18n): make sure to use correct fileData for manual localization (#975) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Signed-off-by: Leonardo Ledda <leonardoledda@gmail.com> Co-authored-by: ikorihn <16367098+ikorihn@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> Co-authored-by: kabirgh <15871468+kabirgh@users.noreply.github.com> Co-authored-by: sean <146651411+tuta-amb@users.noreply.github.com> Co-authored-by: Matthew Bailin <matthewdbailin@gmail.com> Co-authored-by: LUCASTUCIOUS <peterlucas2804@gmail.com> Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Xinyang Yu <47915643+xy-241@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Mara-Li <lili.simonetti@outlook.fr> Co-authored-by: Mara-Li <mara-li@outlook.fr> Co-authored-by: Justin Fowler <justin.fowler@hey.com> Co-authored-by: 1900 <me@1900.live> Co-authored-by: Luis Michaelis <me@lmichaelis.de> Co-authored-by: Mats Fangohr <83273529+MatsFangohr@users.noreply.github.com> Co-authored-by: 松浦 知也 Matsuura Tomoya <me@matsuuratomoya.com> Co-authored-by: Emile Bangma <ewjbangma@hotmail.com> Co-authored-by: Silviu Lorenț <124451350+smilorent@users.noreply.github.com> Co-authored-by: Miguel Pimentel <contact@miguelpimentel.do> Co-authored-by: Serhii Stets <stets.serhii@gmail.com> Co-authored-by: Alq <ahmed.elq53@gmail.com> Co-authored-by: Neel Shah <neelshah.1998@gmail.com> Co-authored-by: Lin <git@compilin.dev> Co-authored-by: Lauréline Nevin <laureline.nevin@unicaen.fr> Co-authored-by: Aaron Bull Schaefer <aaron@elasticdog.com> Co-authored-by: David Fischer <david@konst.fish> Co-authored-by: makondratev <69584771+makondratev@users.noreply.github.com> Co-authored-by: JONG HWAN KIM <99215801+JongDeug@users.noreply.github.com> Co-authored-by: s-crypt <41712656+s-crypt@users.noreply.github.com> Co-authored-by: Eiko Wagenknecht <git@eiko-wagenknecht.de> Co-authored-by: Leonardo Ledda <35930217+LeddaZ@users.noreply.github.com> Co-authored-by: kon-foo <25391223+kon-foo@users.noreply.github.com> Co-authored-by: KylinDC <solder-hulls.06@icloud.com> Co-authored-by: Aster Hu <asterhu17@gmail.com> Co-authored-by: HakuGuen <80277109+HakuGuen@users.noreply.github.com> Co-authored-by: sventec <sventec@users.noreply.github.com> Co-authored-by: Matt Vogel <mainmoniker@googlemail.com> Co-authored-by: Tyler Funk <tcfunk25@gmail.com>
This commit is contained in:
Vineeth Voruganti
GitHub
parent
db7ddf1389
commit
8e3ff6a943
11
.github/ISSUE_TEMPLATE/bug_report.md
vendored
11
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -20,12 +20,19 @@ Steps to reproduce the behavior:
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
**Screenshots and Source**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
You can help speed up fixing the problem by either
|
||||
|
||||
1. providing a simple reproduction
|
||||
2. linking to your Quartz repository where the problem can be observed
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
|
||||
- Device: [e.g. iPhone6]
|
||||
- Quartz Version: [e.g. v4.1.2]
|
||||
- `node` Version: [e.g. v18.16]
|
||||
- `npm` version: [e.g. v10.1.0]
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
|
||||
|
||||
11
.github/dependabot.yml
vendored
Normal file
11
.github/dependabot.yml
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
# To get started with Dependabot version updates, you'll need to specify which
|
||||
# package ecosystems to update and where the package manifests are located.
|
||||
# Please see the documentation for all configuration options:
|
||||
# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
|
||||
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
26
.github/workflows/ci.yaml
vendored
26
.github/workflows/ci.yaml
vendored
@ -46,8 +46,26 @@ jobs:
|
||||
- name: Ensure Quartz builds, check bundle info
|
||||
run: npx quartz build --bundleInfo
|
||||
|
||||
- name: Create release tag
|
||||
uses: Klemensas/action-autotag@stable
|
||||
publish-tag:
|
||||
if: ${{ github.repository == 'jackyzha0/quartz' }}
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
|
||||
tag_prefix: "v"
|
||||
fetch-depth: 0
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
- name: Get package version
|
||||
run: node -p -e '`PACKAGE_VERSION=${require("./package.json").version}`' >> $GITHUB_ENV
|
||||
- name: Create release tag
|
||||
uses: pkgdeps/git-tag-action@v2
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
github_repo: ${{ github.repository }}
|
||||
version: ${{ env.PACKAGE_VERSION }}
|
||||
git_commit_sha: ${{ github.sha }}
|
||||
git_tag_prefix: "v"
|
||||
|
||||
@ -5,8 +5,6 @@
|
||||
Quartz is a set of tools that helps you publish your [digital garden](https://jzhao.xyz/posts/networked-thought) and notes as a website for free.
|
||||
Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.
|
||||
|
||||
**If you are looking for Quartz v3, you can find it on the [`hugo` branch](https://github.com/jackyzha0/quartz/tree/hugo).**
|
||||
|
||||
🔗 Read the documentation and get started: https://quartz.jzhao.xyz/
|
||||
|
||||
[Join the Discord Community](https://discord.gg/cRFFHYye7t)
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
title: "Memories for All"
|
||||
date: "Feb 15, 2024"
|
||||
---
|
||||
## TL;DR
|
||||
|
||||
Personalization is the next frontier. OpenAI gets it:
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
---
|
||||
title: "User State is State of the Art"
|
||||
date: "Feb 23, 2024"
|
||||
---
|
||||
## TL;DR
|
||||
LLM apps can embrace the complexity and plasticity of human identity to deliver unparalleled personalization.
|
||||
|
||||
@ -98,4 +102,4 @@ The reason is because language models generate responses by sampling from a dist
|
||||
Honcho is laying the groundwork for this latter future. The solution here is to manage data on a per-user basis. The primitives we've designed in Honcho allow for persistent user context to be stored in a convenient `User` object that exists at an application level. Our goal with these data structures is to make it trivially easy to manage data in your application logic so you can spend more time figuring out how to excel at your task in both a general and personalized sense.
|
||||
|
||||
|
||||
[^1]: Sutton. ["The Bitter Lesson."](http://www.incompleteideas.net/IncIdeas/BitterLesson.html) 2019.
|
||||
[^1]: Sutton. ["The Bitter Lesson."](http://www.incompleteideas.net/IncIdeas/BitterLesson.html) 2019.
|
||||
|
||||
@ -156,12 +156,13 @@ document.addEventListener("nav", () => {
|
||||
// do page specific logic here
|
||||
// e.g. attach event listeners
|
||||
const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
|
||||
toggleSwitch.removeEventListener("change", switchTheme)
|
||||
toggleSwitch.addEventListener("change", switchTheme)
|
||||
window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
|
||||
})
|
||||
```
|
||||
|
||||
It is best practice to also unmount any existing event handlers to prevent memory leaks.
|
||||
It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
|
||||
This will get called on page navigation.
|
||||
|
||||
#### Importing Code
|
||||
|
||||
|
||||
@ -53,12 +53,12 @@ All transformer plugins must define at least a `name` field to register the plug
|
||||
|
||||
Normally for both `remark` and `rehype`, you can find existing plugins that you can use to . If you'd like to create your own `remark` or `rehype` plugin, checkout the [guide to creating a plugin](https://unifiedjs.com/learn/guide/create-a-plugin/) using `unified` (the underlying AST parser and transformer library).
|
||||
|
||||
A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[Latex]] plugin:
|
||||
A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[plugins/Latex|Latex]] plugin:
|
||||
|
||||
```ts title="quartz/plugins/transformers/latex.ts"
|
||||
import remarkMath from "remark-math"
|
||||
import rehypeKatex from "rehype-katex"
|
||||
import rehypeMathjax from "rehype-mathjax/svg.js"
|
||||
import rehypeMathjax from "rehype-mathjax/svg"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
|
||||
interface Options {
|
||||
@ -84,10 +84,14 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
|
||||
externalResources() {
|
||||
if (engine === "katex") {
|
||||
return {
|
||||
css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"],
|
||||
css: [
|
||||
// base css
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
|
||||
],
|
||||
js: [
|
||||
{
|
||||
src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
|
||||
// fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
|
||||
src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "external",
|
||||
},
|
||||
@ -216,22 +220,19 @@ export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (
|
||||
|
||||
export type QuartzEmitterPluginInstance = {
|
||||
name: string
|
||||
emit(
|
||||
ctx: BuildCtx,
|
||||
content: ProcessedContent[],
|
||||
resources: StaticResources,
|
||||
emitCallback: EmitCallback,
|
||||
): Promise<FilePath[]>
|
||||
emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
|
||||
getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
|
||||
}
|
||||
```
|
||||
|
||||
An emitter plugin must define a `name` field an `emit` function and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
|
||||
An emitter plugin must define a `name` field, an `emit` function, and a `getQuartzComponents` function. `emit` is responsible for looking at all the parsed and filtered content and then appropriately creating files and returning a list of paths to files the plugin created.
|
||||
|
||||
Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `emitCallback` if you are creating files that contain text. The `emitCallback` function is the 4th argument of the emit function. Its interface looks something like this:
|
||||
Creating new files can be done via regular Node [fs module](https://nodejs.org/api/fs.html) (i.e. `fs.cp` or `fs.writeFile`) or via the `write` function in `quartz/plugins/emitters/helpers.ts` if you are creating files that contain text. `write` has the following signature:
|
||||
|
||||
```ts
|
||||
export type EmitCallback = (data: {
|
||||
export type WriteOptions = (data: {
|
||||
// the build context
|
||||
ctx: BuildCtx
|
||||
// the name of the file to emit (not including the file extension)
|
||||
slug: ServerSlug
|
||||
// the file extension
|
||||
@ -281,7 +282,7 @@ export const ContentPage: QuartzEmitterPlugin = () => {
|
||||
allFiles,
|
||||
}
|
||||
|
||||
const content = renderPage(slug, componentData, opts, externalResources)
|
||||
const content = renderPage(cfg, slug, componentData, opts, externalResources)
|
||||
const fp = await emit({
|
||||
content,
|
||||
slug: file.data.slug!,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Authoring Content
|
||||
---
|
||||
|
||||
All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[index#🪴 Get Started|setup Quartz]] already, this folder should already be initailized. Any Markdown in this folder will get processed by Quartz.
|
||||
All of the content in your Quartz should go in the `/content` folder. The content for the home page of your Quartz lives in `content/index.md`. If you've [[index#🪴 Get Started|setup Quartz]] already, this folder should already be initialized. Any Markdown in this folder will get processed by Quartz.
|
||||
|
||||
It is recommended that you use [Obsidian](https://obsidian.md/) as a way to edit and maintain your Quartz. It comes with a nice editor and graphical interface to preview, edit, and link your local files and attachments.
|
||||
|
||||
@ -28,21 +28,17 @@ The rest of your content lives here. You can use **Markdown** here :)
|
||||
Some common frontmatter fields that are natively supported by Quartz:
|
||||
|
||||
- `title`: Title of the page. If it isn't provided, Quartz will use the name of the file as the title.
|
||||
- `description`: Description of the page used for link previews.
|
||||
- `aliases`: Other names for this note. This is a list of strings.
|
||||
- `tags`: Tags for this note.
|
||||
- `draft`: Whether to publish the page or not. This is one way to make [[private pages|pages private]] in Quartz.
|
||||
- `date`: A string representing the day the note was published. Normally uses `YYYY-MM-DD` format.
|
||||
|
||||
## Syncing your Content
|
||||
|
||||
When your Quartz is at a point you're happy with, you can save your changes to GitHub by doing `npx quartz sync`.
|
||||
When your Quartz is at a point you're happy with, you can save your changes to GitHub.
|
||||
First, make sure you've [[setting up your GitHub repository|already setup your GitHub repository]] and then do `npx quartz sync`.
|
||||
|
||||
> [!hint] Flags and options
|
||||
> For full help options, you can run `npx quartz sync --help`.
|
||||
>
|
||||
> Most of these have sensible defaults but you can override them if you have a custom setup:
|
||||
>
|
||||
> - `-d` or `--directory`: the content folder. This is normally just `content`
|
||||
> - `-v` or `--verbose`: print out extra logging information
|
||||
> - `--commit` or `--no-commit`: whether to make a `git` commit for your changes
|
||||
> - `--push` or `--no-push`: whether to push updates to your GitHub fork of Quartz
|
||||
> - `--pull` or `--no-pull`: whether to try and pull in any updates from your GitHub fork (i.e. from other devices) before pushing
|
||||
## Customization
|
||||
|
||||
Frontmatter parsing for `title`, `tags`, `aliases` and `cssclasses` is a functionality of the [[Frontmatter]] plugin, `date` is handled by the [[CreatedModifiedDate]] plugin and `description` by the [[Description]] plugin. See the plugin pages for customization options.
|
||||
|
||||
@ -25,14 +25,18 @@ This part of the configuration concerns anything that can affect the whole site.
|
||||
- `enablePopovers`: whether to enable [[popover previews]] on your site.
|
||||
- `analytics`: what to use for analytics on your site. Values can be
|
||||
- `null`: don't use analytics;
|
||||
- `{ provider: 'plausible' }`: use [Plausible](https://plausible.io/), a privacy-friendly alternative to Google Analytics; or
|
||||
- `{ provider: 'google', tagId: <your-google-tag> }`: use Google Analytics
|
||||
- `{ provider: 'google', tagId: '<your-google-tag>' }`: use Google Analytics;
|
||||
- `{ provider: 'plausible' }` (managed) or `{ provider: 'plausible', host: '<your-plausible-host>' }` (self-hosted): use [Plausible](https://plausible.io/);
|
||||
- `{ provider: 'umami', host: '<your-umami-host>', websiteId: '<your-umami-website-id>' }`: use [Umami](https://umami.is/);
|
||||
- `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id' }` (managed) or `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id', host: 'my-goatcounter-domain.com', scriptSrc: 'https://my-url.to/counter.js' }` (self-hosted) use [GoatCounter](https://goatcounter.com)
|
||||
- `locale`: used for [[i18n]] and date formatting
|
||||
- `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
|
||||
- This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`
|
||||
- This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.
|
||||
- Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter _where_ you end up actually deploying it.
|
||||
- `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
|
||||
- `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
|
||||
- `theme`: configure how the site looks.
|
||||
- `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
|
||||
- `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
|
||||
- `header`: Font to use for headers
|
||||
- `code`: Font for inline and block quotes.
|
||||
@ -53,7 +57,7 @@ You can think of Quartz plugins as a series of transformations over content.
|
||||
|
||||
![[quartz transform pipeline.png]]
|
||||
|
||||
```ts
|
||||
```ts title="quartz.config.ts"
|
||||
plugins: {
|
||||
transformers: [...],
|
||||
filters: [...],
|
||||
@ -61,22 +65,40 @@ plugins: {
|
||||
}
|
||||
```
|
||||
|
||||
- [[making plugins#Transformers|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
|
||||
- [[making plugins#Filters|Filters]] **filter** content (e.g. filtering out drafts)
|
||||
- [[making plugins#Emitters|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
|
||||
- [[tags/plugin/transformer|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
|
||||
- [[tags/plugin/filter|Filters]] **filter** content (e.g. filtering out drafts)
|
||||
- [[tags/plugin/emitter|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
|
||||
|
||||
By adding, removing, and reordering plugins from the `tranformers`, `filters`, and `emitters` fields, you can customize the behaviour of Quartz.
|
||||
You can customize the behaviour of Quartz by adding, removing and reordering plugins in the `transformers`, `filters` and `emitters` fields.
|
||||
|
||||
> [!note]
|
||||
> Each node is modified by every transformer _in order_. Some transformers are position-sensitive so you may need to take special note of whether it needs come before or after any other particular plugins.
|
||||
> Each node is modified by every transformer _in order_. Some transformers are position sensitive, so you may need to pay particular attention to whether they need to come before or after certain other plugins.
|
||||
|
||||
Additionally, plugins may also have their own configuration settings that you can pass in. For example, the [[Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
|
||||
You should take care to add the plugin to the right entry corresponding to its plugin type. For example, to add the [[ExplicitPublish]] plugin (a [[tags/plugin/filter|Filter]]), you would add the following line:
|
||||
|
||||
```ts
|
||||
```ts title="quartz.config.ts"
|
||||
filters: [
|
||||
...
|
||||
Plugin.ExplicitPublish(),
|
||||
...
|
||||
],
|
||||
```
|
||||
|
||||
To remove a plugin, you should remove all occurrences of it in the `quartz.config.ts`.
|
||||
|
||||
To customize plugins further, some plugins may also have their own configuration settings that you can pass in. If you do not pass in a configuration, the plugin will use its default settings.
|
||||
|
||||
For example, the [[plugins/Latex|Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
|
||||
|
||||
```ts title="quartz.config.ts"
|
||||
transformers: [
|
||||
Plugin.FrontMatter(), // uses default options
|
||||
Plugin.Latex({ renderEngine: "katex" }), // specify some options
|
||||
Plugin.FrontMatter(), // use default options
|
||||
Plugin.Latex({ renderEngine: "katex" }), // set some custom options
|
||||
]
|
||||
```
|
||||
|
||||
If you'd like to make your own plugins, read the guide on [[making plugins]] for more information.
|
||||
Some plugins are included by default in the[ `quartz.config.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz.config.ts), but there are more available.
|
||||
|
||||
You can see a list of all plugins and their configuration options [[tags/plugin|here]].
|
||||
|
||||
If you'd like to make your own plugins, see the [[making plugins|making custom plugins]] guide.
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
title: LaTeX
|
||||
tags:
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Quartz uses [Katex](https://katex.org/) by default to typeset both inline and block math expressions at build time.
|
||||
@ -38,6 +39,9 @@ a & b & c
|
||||
\end{bmatrix}
|
||||
$$
|
||||
|
||||
> [!warn]
|
||||
> Due to limitations in the [underlying parsing library](https://github.com/remarkjs/remark-math), block math in Quartz requires the `$$` delimiters to be on newlines like above.
|
||||
|
||||
### Inline Math
|
||||
|
||||
Similarly, inline math can be rendered by delimiting math expression with a single `$`. For example, `$e^{i\pi} = -1$` produces $e^{i\pi} = -1$
|
||||
@ -53,11 +57,15 @@ For example:
|
||||
- Incorrect: `I have $1 and you have $2` produces I have $1 and you have $2
|
||||
- Correct: `I have \$1 and you have \$2` produces I have \$1 and you have \$2
|
||||
|
||||
## MathJax
|
||||
### Using mhchem
|
||||
|
||||
In `quartz.config.ts`, you can configure Quartz to use [MathJax SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html) by replacing `Plugin.Latex({ renderEngine: 'katex' })` with `Plugin.Latex({ renderEngine: 'mathjax' })`
|
||||
Add the following import to the top of `quartz/plugins/transformers/latex.ts` (before all the other
|
||||
imports):
|
||||
|
||||
```ts title="quartz/plugins/transformers/latex.ts"
|
||||
import "katex/contrib/mhchem"
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
- Removing Latex support: remove all instances of `Plugin.Latex()` from `quartz.config.ts`.
|
||||
- Plugin: `quartz/plugins/transformers/latex.ts`
|
||||
Latex parsing is a functionality of the [[plugins/Latex|Latex]] plugin. See the plugin page for customization options.
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
---
|
||||
title: "Mermaid Diagrams"
|
||||
tags:
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as [flow charts](https://mermaid.js.org/syntax/flowchart.html), [sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html), and [timelines](https://mermaid.js.org/syntax/timeline.html). This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
|
||||
|
||||
By default, Quartz will render Mermaid diagrams to match the site theme.
|
||||
|
||||
> [!warning]
|
||||
> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
|
||||
> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
|
||||
|
||||
## Syntax
|
||||
|
||||
|
||||
@ -1,31 +1,17 @@
|
||||
---
|
||||
title: "Obsidian Compatibility"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Quartz was originally designed as a tool to publish Obsidian vaults as websites. Even as the scope of Quartz has widened over time, it hasn't lost the ability to seamlessly interoperate with Obsidian.
|
||||
|
||||
By default, Quartz ships with `Plugin.ObsidianFlavoredMarkdown` which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
|
||||
By default, Quartz ships with the [[ObsidianFlavoredMarkdown]] plugin, which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
|
||||
|
||||
It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the `Plugin.FrontMatter` transformer plugin.
|
||||
It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the [[Frontmatter]] transformer plugin.
|
||||
|
||||
Finally, Quartz also provides `Plugin.CrawlLinks` which allows you to customize Quartz's link resolution behaviour to match Obsidian.
|
||||
Finally, Quartz also provides [[CrawlLinks]] plugin, which allows you to customize Quartz's link resolution behaviour to match Obsidian.
|
||||
|
||||
## Configuration
|
||||
|
||||
- Frontmatter parsing:
|
||||
- Disabling: remove all instances of `Plugin.FrontMatter()` from `quartz.config.ts`.
|
||||
- Customize default values for frontmatter: edit `quartz/plugins/transformers/frontmatter.ts`
|
||||
- Obsidian Flavored Markdown:
|
||||
- Disabling: remove all instances of `Plugin.ObsidianFlavoredMarkdown()` from `quartz.config.ts`
|
||||
- Customizing features: `Plugin.ObsidianFlavoredMarkdown` has several other options to toggle on and off:
|
||||
- `comments`: whether to enable `%%` style Obsidian comments. Defaults to `true`
|
||||
- `highlight`: whether to enable `==` style highlights. Defaults to `true`
|
||||
- `wikilinks`: whether to enable turning [[wikilinks]] into regular links. Defaults to `true`
|
||||
- `callouts`: whether to enable [[callouts]]. Defaults to `true`
|
||||
- `mermaid`: whether to enable [[Mermaid diagrams]]. Defaults to `true`
|
||||
- `parseTags`: whether to try and parse tags in the content body. Defaults to `true`
|
||||
- `enableInHtmlEmbed`: whether to try and parse Obsidian flavoured markdown in raw HTML. Defaults to `false`
|
||||
- Link resolution behaviour:
|
||||
- Disabling: remove all instances of `Plugin.CrawlLinks()` from `quartz.config.ts`
|
||||
- Changing link resolution preference: set `markdownLinkResolution` to one of `absolute`, `relative` or `shortest`
|
||||
This functionality is provided by the [[ObsidianFlavoredMarkdown]], [[Frontmatter]] and [[CrawlLinks]] plugins. See the plugin pages for customization options.
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
---
|
||||
title: "OxHugo Compatibility"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
[org-roam](https://www.orgroam.com/) is a plain-text personal knowledge management system for [emacs](https://en.wikipedia.org/wiki/Emacs). [ox-hugo](https://github.com/kaushalmodi/ox-hugo) is org exporter backend that exports `org-mode` files to [Hugo](https://gohugo.io/) compatible Markdown.
|
||||
|
||||
Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by `Plugin.OxHugoFlavouredMarkdown`. Even though this [[making plugins|plugin]] was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
|
||||
Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by the [[OxHugoFlavoredMarkdown]] plugin. Even though this plugin was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
|
||||
|
||||
```typescript title="quartz.config.ts"
|
||||
plugins: {
|
||||
@ -25,15 +26,4 @@ Quartz by default doesn't understand `org-roam` files as they aren't Markdown. Y
|
||||
|
||||
## Configuration
|
||||
|
||||
- Link resolution
|
||||
- `wikilinks`: Whether to replace `{{ relref }}` with Quartz [[wikilinks]]
|
||||
- `removePredefinedAnchor`: Whether to remove [pre-defined anchor set by ox-hugo](https://ox-hugo.scripter.co/doc/anchors/).
|
||||
- Image handling
|
||||
- `replaceFigureWithMdImg`: Whether to replace `<figure/>` with `![]()`
|
||||
- Formatting
|
||||
- `removeHugoShortcode`: Whether to remove hugo shortcode syntax (`{{}}`)
|
||||
- `replaceOrgLatex`: Whether to replace org-mode formatting for latex fragments with what `Plugin.Latex` supports.
|
||||
|
||||
> [!warning]
|
||||
>
|
||||
> While you can use `Plugin.OxHugoFlavoredMarkdown` and `Plugin.ObsidianFlavoredMarkdown` together, it's not recommended because it might mutate the file in unexpected ways. Use with caution.
|
||||
This functionality is provided by the [[OxHugoFlavoredMarkdown]] plugin. See the plugin page for customization options.
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
Quartz creates an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
|
||||
Quartz emits an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
|
||||
|
||||
## Configuration
|
||||
|
||||
- Remove RSS feed: set the `enableRSS` field of `Plugin.ContentIndex` in `quartz.config.ts` to be `false`.
|
||||
- Change number of entries: set the `rssLimit` field of `Plugin.ContentIndex` to be the desired value. It defaults to latest 10 items.
|
||||
- Use rich HTML output in RSS: set `rssFullHtml` field of `Plugin.ContentIndex` to be `true`.
|
||||
This functionality is provided by the [[ContentIndex]] plugin. See the plugin page for customization options.
|
||||
|
||||
@ -20,7 +20,7 @@ Component.Breadcrumbs({
|
||||
rootName: "Home", // name of first/root element
|
||||
resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
|
||||
hideOnRoot: true, // whether to hide breadcrumbs on root `index.md` page
|
||||
showCurrentPage: true, // wether to display the current page in the breadcrumbs
|
||||
showCurrentPage: true, // whether to display the current page in the breadcrumbs
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Callouts
|
||||
tags:
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Quartz supports the same Admonition-callout syntax as Obsidian.
|
||||
@ -19,68 +19,78 @@ This includes
|
||||
See [documentation on supported types and syntax here](https://help.obsidian.md/Editing+and+formatting/Callouts).
|
||||
|
||||
> [!warning]
|
||||
> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
|
||||
> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
|
||||
|
||||
## Customization
|
||||
|
||||
- Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
|
||||
- Editing icons: `quartz/plugins/transformers/ofm.ts`
|
||||
The callouts are a functionality of the [[ObsidianFlavoredMarkdown]] plugin. See the plugin page for how to enable or disable them.
|
||||
|
||||
You can edit the icons by customizing `quartz/styles/callouts.scss`.
|
||||
|
||||
### Add custom callouts
|
||||
|
||||
By default, custom callouts are handled by applying the `note` style. To make fancy ones, you have to add these lines to `custom.scss`.
|
||||
|
||||
```scss title="quartz/styles/custom.scss"
|
||||
.callout {
|
||||
&[data-callout="custom"] {
|
||||
--color: #customcolor;
|
||||
--border: #custombordercolor;
|
||||
--bg: #custombg;
|
||||
--callout-icon: url("data:image/svg+xml; utf8, <custom formatted svg>"); //SVG icon code
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> [!warning]
|
||||
> Don't forget to ensure that the SVG is URL encoded before putting it in the CSS. You can use tools like [this one](https://yoksel.github.io/url-encoder/) to help you do that.
|
||||
|
||||
## Showcase
|
||||
|
||||
> [!info]
|
||||
> Default title
|
||||
|
||||
> [!question]+ Can callouts be nested?
|
||||
> [!question]+ Can callouts be _nested_?
|
||||
>
|
||||
> > [!todo]- Yes!, they can. And collapsed!
|
||||
> >
|
||||
> > > [!example] You can even use multiple layers of nesting.
|
||||
|
||||
> [!EXAMPLE] Examples
|
||||
>
|
||||
> Aliases: example
|
||||
> [!note]
|
||||
> Aliases: "note"
|
||||
|
||||
> [!note] Notes
|
||||
>
|
||||
> Aliases: note
|
||||
> [!abstract]
|
||||
> Aliases: "abstract", "summary", "tldr"
|
||||
|
||||
> [!abstract] Summaries
|
||||
>
|
||||
> Aliases: abstract, summary, tldr
|
||||
> [!info]
|
||||
> Aliases: "info"
|
||||
|
||||
> [!info] Info
|
||||
>
|
||||
> Aliases: info, todo
|
||||
> [!todo]
|
||||
> Aliases: "todo"
|
||||
|
||||
> [!tip] Hint
|
||||
>
|
||||
> Aliases: tip, hint, important
|
||||
> [!tip]
|
||||
> Aliases: "tip", "hint", "important"
|
||||
|
||||
> [!success] Success
|
||||
>
|
||||
> Aliases: success, check, done
|
||||
> [!success]
|
||||
> Aliases: "success", "check", "done"
|
||||
|
||||
> [!question] Question
|
||||
>
|
||||
> Aliases: question, help, faq
|
||||
> [!question]
|
||||
> Aliases: "question", "help", "faq"
|
||||
|
||||
> [!warning] Warning
|
||||
>
|
||||
> Aliases: warning, caution, attention
|
||||
> [!warning]
|
||||
> Aliases: "warning", "attention", "caution"
|
||||
|
||||
> [!failure] Failure
|
||||
>
|
||||
> Aliases: failure, fail, missing
|
||||
> [!failure]
|
||||
> Aliases: "failure", "missing", "fail"
|
||||
|
||||
> [!danger] Error
|
||||
>
|
||||
> Aliases: danger, error
|
||||
> [!danger]
|
||||
> Aliases: "danger", "error"
|
||||
|
||||
> [!bug] Bug
|
||||
>
|
||||
> Aliases: bug
|
||||
> [!bug]
|
||||
> Aliases: "bug"
|
||||
|
||||
> [!quote] Quote
|
||||
>
|
||||
> Aliases: quote, cite
|
||||
> [!example]
|
||||
> Aliases: "example"
|
||||
|
||||
> [!quote]
|
||||
> Aliases: "quote", "cite"
|
||||
|
||||
@ -12,3 +12,12 @@ Quartz supports darkmode out of the box that respects the user's theme preferenc
|
||||
- Component: `quartz/components/Darkmode.tsx`
|
||||
- Style: `quartz/components/styles/darkmode.scss`
|
||||
- Script: `quartz/components/scripts/darkmode.inline.ts`
|
||||
|
||||
You can also listen to the `themechange` event to perform any custom logic when the theme changes.
|
||||
|
||||
```js
|
||||
document.addEventListener("themechange", (e) => {
|
||||
console.log("Theme changed to " + e.detail.theme) // either "light" or "dark"
|
||||
// your logic here
|
||||
})
|
||||
```
|
||||
|
||||
@ -26,7 +26,7 @@ Component.Explorer({
|
||||
title: "Explorer", // title of the explorer component
|
||||
folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click)
|
||||
folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open")
|
||||
useSavedState: true, // wether to use local storage to save "state" (which folders are opened) of explorer
|
||||
useSavedState: true, // whether to use local storage to save "state" (which folders are opened) of explorer
|
||||
// Sort order: folders first, then files. Sort folders and files alphabetically
|
||||
sortFn: (a, b) => {
|
||||
... // default implementation shown later
|
||||
@ -42,7 +42,7 @@ When passing in your own options, you can omit any or all of these fields if you
|
||||
|
||||
Want to customize it even more?
|
||||
|
||||
- Removing table of contents: remove `Component.Explorer()` from `quartz.layout.ts`
|
||||
- Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
|
||||
- (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
|
||||
- Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
|
||||
- Component:
|
||||
@ -61,7 +61,7 @@ export class FileNode {
|
||||
children: FileNode[] // children of current node
|
||||
name: string // last part of slug
|
||||
displayName: string // what actually should be displayed in the explorer
|
||||
file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
|
||||
file: QuartzPluginData | null // if node is a file, this is the file's metadata. See `QuartzPluginData` for more detail
|
||||
depth: number // depth of current node
|
||||
|
||||
... // rest of implementation
|
||||
@ -167,6 +167,19 @@ Component.Explorer({
|
||||
|
||||
You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.
|
||||
|
||||
### Remove files by tag
|
||||
|
||||
You can access the frontmatter of a file by `node.file?.frontmatter?`. This allows you to filter out files based on their frontmatter, for example by their tags.
|
||||
|
||||
```ts title="quartz.layout.ts"
|
||||
Component.Explorer({
|
||||
filterFn: (node) => {
|
||||
// exclude files with the tag "explorerexclude"
|
||||
return node.file?.frontmatter?.tags?.includes("explorerexclude") !== true
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Show every element in explorer
|
||||
|
||||
To override the default filter function that removes the `tags` folder from the explorer, you can set the filter function to `undefined`.
|
||||
@ -179,6 +192,34 @@ Component.Explorer({
|
||||
|
||||
## Advanced examples
|
||||
|
||||
> [!tip]
|
||||
> When writing more complicated functions, the `layout` file can start to look very cramped.
|
||||
> You can fix this by defining your functions in another file.
|
||||
>
|
||||
> ```ts title="functions.ts"
|
||||
> import { Options } from "./quartz/components/ExplorerNode"
|
||||
> export const mapFn: Options["mapFn"] = (node) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> export const filterFn: Options["filterFn"] = (node) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> export const sortFn: Options["sortFn"] = (a, b) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> You can then import them like this:
|
||||
>
|
||||
> ```ts title="quartz.layout.ts"
|
||||
> import { mapFn, filterFn, sortFn } from "./functions.ts"
|
||||
> Component.Explorer({
|
||||
> mapFn: mapFn,
|
||||
> filterFn: filterFn,
|
||||
> sortFn: sortFn,
|
||||
> })
|
||||
> ```
|
||||
|
||||
### Add emoji prefix
|
||||
|
||||
To add emoji prefixes (📁 for folders, 📄 for files), you could use a map function like this:
|
||||
@ -216,30 +257,63 @@ Notice how we customized the `order` array here. This is done because the defaul
|
||||
|
||||
To fix this, we just changed around the order and apply the `sort` function before changing the display names in the `map` function.
|
||||
|
||||
> [!tip]
|
||||
> When writing more complicated functions, the `layout` file can start to look very cramped.
|
||||
> You can fix this by defining your functions in another file.
|
||||
>
|
||||
> ```ts title="functions.ts"
|
||||
> import { Options } from "./quartz/components/ExplorerNode"
|
||||
> export const mapFn: Options["mapFn"] = (node) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> export const filterFn: Options["filterFn"] = (node) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> export const sortFn: Options["sortFn"] = (a, b) => {
|
||||
> // implement your function here
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> You can then import them like this:
|
||||
>
|
||||
> ```ts title="quartz.layout.ts"
|
||||
> import { mapFn, filterFn, sortFn } from "./functions.ts"
|
||||
> Component.Explorer({
|
||||
> mapFn: mapFn,
|
||||
> filterFn: filterFn,
|
||||
> sortFn: sortFn,
|
||||
> })
|
||||
> ```
|
||||
### Use `sort` with pre-defined sort order
|
||||
|
||||
Here's another example where a map containing file/folder names (as slugs) is used to define the sort order of the explorer in quartz. All files/folders that aren't listed inside of `nameOrderMap` will appear at the top of that folders hierarchy level.
|
||||
|
||||
It's also worth mentioning, that the smaller the number set in `nameOrderMap`, the higher up the entry will be in the explorer. Incrementing every folder/file by 100, makes ordering files in their folders a lot easier. Lastly, this example still allows you to use a `mapFn` or frontmatter titles to change display names, as it uses slugs for `nameOrderMap` (which is unaffected by display name changes).
|
||||
|
||||
```ts title="quartz.layout.ts"
|
||||
Component.Explorer({
|
||||
sortFn: (a, b) => {
|
||||
const nameOrderMap: Record<string, number> = {
|
||||
"poetry-folder": 100,
|
||||
"essay-folder": 200,
|
||||
"research-paper-file": 201,
|
||||
"dinosaur-fossils-file": 300,
|
||||
"other-folder": 400,
|
||||
}
|
||||
|
||||
let orderA = 0
|
||||
let orderB = 0
|
||||
|
||||
if (a.file && a.file.slug) {
|
||||
orderA = nameOrderMap[a.file.slug] || 0
|
||||
} else if (a.name) {
|
||||
orderA = nameOrderMap[a.name] || 0
|
||||
}
|
||||
|
||||
if (b.file && b.file.slug) {
|
||||
orderB = nameOrderMap[b.file.slug] || 0
|
||||
} else if (b.name) {
|
||||
orderB = nameOrderMap[b.name] || 0
|
||||
}
|
||||
|
||||
return orderA - orderB
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
For reference, this is how the quartz explorer window would look like with that example:
|
||||
|
||||
```
|
||||
📖 Poetry Folder
|
||||
📑 Essay Folder
|
||||
⚗️ Research Paper File
|
||||
🦴 Dinosaur Fossils File
|
||||
🔮 Other Folder
|
||||
```
|
||||
|
||||
And this is how the file structure would look like:
|
||||
|
||||
```
|
||||
index.md
|
||||
poetry-folder
|
||||
index.md
|
||||
essay-folder
|
||||
index.md
|
||||
research-paper-file.md
|
||||
dinosaur-fossils-file.md
|
||||
other-folder
|
||||
index.md
|
||||
```
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
---
|
||||
title: Folder and Tag Listings
|
||||
tags:
|
||||
- plugin/emitter
|
||||
- feature/emitter
|
||||
---
|
||||
|
||||
Quartz creates listing pages for any folders and tags you have.
|
||||
Quartz emits listing pages for any folders and tags you have.
|
||||
|
||||
## Folder Listings
|
||||
|
||||
Quartz will generate an index page for all the pages under that folder. This includes any content that is multiple levels deep.
|
||||
|
||||
Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then, Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
|
||||
Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
|
||||
|
||||
By default, Quartz will title the page `Folder: <name of folder>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the description of the folder.
|
||||
You can link to the folder listing by referencing its name, plus a trailing slash, like this: `[[advanced/]]` (results in [[advanced/]]).
|
||||
|
||||
By default, Quartz will title the page `Folder: <folder name>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the folder description.
|
||||
|
||||
For example, for the folder `content/posts`, you can add another file `content/posts/index.md` to add a specific description for it.
|
||||
|
||||
@ -20,13 +22,12 @@ For example, for the folder `content/posts`, you can add another file `content/p
|
||||
|
||||
Quartz will also create an index page for each unique tag in your vault and render a list of all notes with that tag.
|
||||
|
||||
Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each layer of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
|
||||
Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each level of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
|
||||
|
||||
Like folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
|
||||
You can link to the tag listing by referencing its name with a `tag/` prefix, like this: `[[tags/plugin]]` (results in [[tags/plugin]]).
|
||||
|
||||
As with folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
|
||||
|
||||
## Customization
|
||||
|
||||
The layout for both the folder and content pages can be customized. By default, they use the `defaultListPageLayout` in `quartz.layouts.ts`. If you'd like to make more involved changes to the layout and don't mind editing some [[creating components|Quartz components]], you can take a look at `quartz/components/pages/FolderContent.tsx` and `quartz/components/pages/TagContent.tsx` respectively.
|
||||
|
||||
- Removing folder listings: remove `Plugin.FolderPage()` from `emitters` in `quartz.config.ts`
|
||||
- Removing tag listings: remove `Plugin.TagPage()` from `emitters` in `quartz.config.ts`
|
||||
The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.
|
||||
|
||||
@ -34,6 +34,8 @@ Component.Graph({
|
||||
linkDistance: 30, // how long should the links be by default?
|
||||
fontSize: 0.6, // what size should the node labels be?
|
||||
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
|
||||
},
|
||||
globalGraph: {
|
||||
drag: true,
|
||||
@ -45,6 +47,8 @@ Component.Graph({
|
||||
linkDistance: 30,
|
||||
fontSize: 0.6,
|
||||
opacityScale: 1,
|
||||
removeTags: [], // what tags to remove from the graph
|
||||
showTags: true, // whether to show tags in the graph
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
18
docs/features/i18n.md
Normal file
18
docs/features/i18n.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Internationalization
|
||||
---
|
||||
|
||||
Internationalization allows users to translate text in the Quartz interface into various supported languages without needing to make extensive code changes. This can be changed via the `locale` [[configuration]] field in `quartz.config.ts`.
|
||||
|
||||
The locale field generally follows a certain format: `{language}-{REGION}`
|
||||
|
||||
- `{language}` is usually a [2-letter lowercase language code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes).
|
||||
- `{REGION}` is usually a [2-letter uppercase region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
|
||||
|
||||
> [!tip] Interested in contributing?
|
||||
> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v4/quartz/i18n/locales)! To contribute a translation, do the following things:
|
||||
>
|
||||
> 1. In the `quartz/i18n/locales` folder, copy the `en-US.ts` file.
|
||||
> 2. Rename it to `{language}-{REGION}.ts` so it matches a locale of the format shown above.
|
||||
> 3. Fill in the translations!
|
||||
> 4. Add the entry under `TRANSLATIONS` in `quartz/i18n/index.ts`.
|
||||
@ -8,6 +8,8 @@ By default, Quartz only fetches previews for pages inside your vault due to [COR
|
||||
|
||||
When [[creating components|creating your own components]], you can include this `popover-hint` class to also include it in the popover.
|
||||
|
||||
Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] can also be viewed as popups.
|
||||
|
||||
## Configuration
|
||||
|
||||
- Remove popovers: set the `enablePopovers` field in `quartz.config.ts` to be `false`.
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Private Pages
|
||||
tags:
|
||||
- plugin/filter
|
||||
- feature/filter
|
||||
---
|
||||
|
||||
There may be some notes you want to avoid publishing as a website. Quartz supports this through two mechanisms which can be used in conjunction:
|
||||
|
||||
## Filter Plugins
|
||||
|
||||
[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the `Plugin.RemoveDrafts` plugin which filters out any note that has `draft: true` in the frontmatter.
|
||||
[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the [[RemoveDrafts]] plugin which filters out any note that has `draft: true` in the frontmatter.
|
||||
|
||||
If you'd like to only publish a select number of notes, you can instead use `Plugin.ExplicitPublish` which will filter out all notes except for any that have `publish: true` in the frontmatter.
|
||||
If you'd like to only publish a select number of notes, you can instead use [[ExplicitPublish]] which will filter out all notes except for any that have `publish: true` in the frontmatter.
|
||||
|
||||
> [!warning]
|
||||
> Regardless of the filter plugin used, **all non-markdown files will be emitted and available publically in the final build.** This includes files such as images, voice recordings, PDFs, etc. One way to prevent this and still be able to embed local images is to create a folder specifically for public media and add the following two patterns to the ignorePatterns array.
|
||||
|
||||
@ -3,7 +3,7 @@ title: Recent Notes
|
||||
tags: component
|
||||
---
|
||||
|
||||
Quartz can generate a list of recent notes for based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes`.
|
||||
Quartz can generate a list of recent notes based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes` in `quartz.layout.ts`.
|
||||
|
||||
## Customization
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Syntax Highlighting
|
||||
tags:
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Syntax highlighting in Quartz is completely done at build-time. This means that Quartz only ships pre-calculated CSS to highlight the right words so there is no heavy client-side bundle that does the syntax highlighting.
|
||||
@ -130,6 +130,4 @@ const [name, setName] = useState('Taylor');
|
||||
|
||||
## Customization
|
||||
|
||||
- Removing syntax highlighting: delete all usages of `Plugin.SyntaxHighlighting()` from `quartz.config.ts`.
|
||||
- Style: By default, Quartz uses derivatives of the GitHub light and dark themes. You can customize the colours in the `quartz/styles/syntax.scss` file.
|
||||
- Plugin: `quartz/plugins/transformers/syntax.ts`
|
||||
Syntax highlighting is a functionality of the [[SyntaxHighlighting]] plugin. See the plugin page for customization options.
|
||||
|
||||
@ -2,25 +2,17 @@
|
||||
title: "Table of Contents"
|
||||
tags:
|
||||
- component
|
||||
- plugin/transformer
|
||||
- feature/transformer
|
||||
---
|
||||
|
||||
Quartz can automatically generate a table of contents from a list of headings on each page. It will also show you your current scroll position on the site by marking headings you've scrolled through with a different colour.
|
||||
Quartz can automatically generate a table of contents (TOC) from a list of headings on each page. It will also show you your current scrolling position on the page by highlighting headings you've scrolled through with a different color.
|
||||
|
||||
By default, it will show all headers from H1 (`# Title`) all the way to H3 (`### Title`) and will only show the table of contents if there is more than 1 header on the page.
|
||||
You can also hide the table of contents on a page by adding `enableToc: false` to the frontmatter for that page.
|
||||
You can hide the TOC on a page by adding `enableToc: false` to the frontmatter for that page.
|
||||
|
||||
> [!info]
|
||||
> This feature requires both `Plugin.TableOfContents` in your `quartz.config.ts` and `Component.TableOfContents` in your `quartz.layout.ts` to function correctly.
|
||||
By default, the TOC shows all headings from H1 (`# Title`) to H3 (`### Title`) and is only displayed if there is more than one heading on the page.
|
||||
|
||||
## Customization
|
||||
|
||||
- Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.layout.ts`
|
||||
- Changing the max depth: pass in a parameter to `Plugin.TableOfContents({ maxDepth: 4 })`
|
||||
- Changing the minimum number of entries in the Table of Contents before it renders: pass in a parameter to `Plugin.TableOfContents({ minEntries: 3 })`
|
||||
- Collapse the table of content by default: pass in a parameter to `Plugin.TableOfContents({ collapseByDefault: true })`
|
||||
- Component: `quartz/components/TableOfContents.tsx`
|
||||
- Style:
|
||||
- Modern (default): `quartz/components/styles/toc.scss`
|
||||
- Legacy Quartz 3 style: `quartz/components/styles/legacyToc.scss`
|
||||
- Script: `quartz/components/scripts/toc.inline.ts`
|
||||
The table of contents is a functionality of the [[TableOfContents]] plugin. See the plugin page for more customization options.
|
||||
|
||||
It also needs the `TableOfContents` component, which is displayed in the right sidebar by default. You can change this by customizing the [[layout]]. The TOC component can be configured with the `layout` parameter, which can either be `modern` (default) or `legacy`.
|
||||
|
||||
@ -4,7 +4,7 @@ title: Wikilinks
|
||||
|
||||
Wikilinks were pioneered by earlier internet wikis to make it easier to write links across pages without needing to write Markdown or HTML links each time.
|
||||
|
||||
Quartz supports Wikilinks by default and these links are resolved by Quartz using `Plugin.CrawlLinks`. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
|
||||
Quartz supports Wikilinks by default and these links are resolved by Quartz using the [[CrawlLinks]] plugin. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
|
||||
|
||||
This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
|
||||
|
||||
@ -14,3 +14,11 @@ This is enabled as a part of [[Obsidian compatibility]] and can be configured an
|
||||
- `[[Path to file | Here's the title override]]`: produces a link to `Path to file.md` with the text `Here's the title override`
|
||||
- `[[Path to file#Anchor]]`: produces a link to the anchor `Anchor` in the file `Path to file.md`
|
||||
- `[[Path to file#^block-ref]]`: produces a link to the specific block `block-ref` in the file `Path to file.md`
|
||||
|
||||
### Embeds
|
||||
|
||||
- `![[Path to image]]`: embeds an image into the page
|
||||
- `![[Path to image|100x145]]`: embeds an image into the page with dimensions 100px by 145px
|
||||
- `![[Path to file]]`: transclude an entire page
|
||||
- `![[Path to file#Anchor]]`: transclude everything under the header `Anchor`
|
||||
- `![[Path to file#^b15695]]`: transclude block with ID `^b15695`
|
||||
|
||||
@ -30,7 +30,7 @@ Press "Save and deploy" and Cloudflare should have a deployed version of your si
|
||||
To add a custom domain, check out [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/).
|
||||
|
||||
> [!warning]
|
||||
> Cloudflare Pages only allows shallow `git` clones so if you rely on `git` for timestamps, it is recommended you either add dates to your frontmatter (see [[authoring content#Syntax]]) or use another hosting provider.
|
||||
> Cloudflare Pages performs a shallow clone by default, so if you rely on `git` for timestamps, it is recommended that you add `git fetch --unshallow &&` to the beginning of the build command (e.g., `git fetch --unshallow && npx quartz build`).
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
@ -225,6 +225,28 @@ pages:
|
||||
- public
|
||||
```
|
||||
|
||||
When `.gitlab-ci.yaml` is commited, GitLab will build and deploy the website as a GitLab Page. You can find the url under `Deploy > Pages` in the sidebar.
|
||||
When `.gitlab-ci.yaml` is committed, GitLab will build and deploy the website as a GitLab Page. You can find the url under `Deploy > Pages` in the sidebar.
|
||||
|
||||
By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under `Deploy` -> `Pages`.
|
||||
|
||||
## Self-Hosting
|
||||
|
||||
Copy the `public` directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the `.html` extension, you need to let your web server know how to deal with it.
|
||||
|
||||
### Using Nginx
|
||||
|
||||
Here's an example of how to do this with Nginx:
|
||||
|
||||
```nginx title="nginx.conf"
|
||||
server {
|
||||
listen 80;
|
||||
server_name example.com;
|
||||
root /path/to/quartz/public;
|
||||
index index.html;
|
||||
error_page 404 /404.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri.html $uri/ =404;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -23,14 +23,15 @@ This will guide you through initializing your Quartz with content. Once you've d
|
||||
2. [[configuration|Configure]] Quartz's behaviour
|
||||
3. Change Quartz's [[layout]]
|
||||
4. [[build|Build and preview]] Quartz
|
||||
5. [[hosting|Host]] Quartz online
|
||||
5. Sync your changes with [[setting up your GitHub repository|GitHub]]
|
||||
6. [[hosting|Host]] Quartz online
|
||||
|
||||
> [!info]
|
||||
> Coming from Quartz 3? See the [[migrating from Quartz 3|migration guide]] for the differences between Quartz 3 and Quartz 4 and how to migrate.
|
||||
If you prefer instructions in a video format you can try following Nicole van der Hoeven's
|
||||
[video guide on how to set up Quartz!](https://www.youtube.com/watch?v=6s6DT1yN4dw&t=227s)
|
||||
|
||||
## 🔧 Features
|
||||
|
||||
- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], and [many more](./features) right out of the box
|
||||
- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
|
||||
- Hot-reload for both configuration and content
|
||||
- Simple JSX layouts and [[creating components|page components]]
|
||||
- [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
|
||||
|
||||
@ -8,7 +8,9 @@ title: Philosophy of Quartz
|
||||
>
|
||||
> _(The Garden and the Stream)_
|
||||
|
||||
The problem with the file cabinet is that it focuses on efficiency of access and interoperability rather than generativity and creativity. Thinking is not linear, nor is it hierarchical. In fact, not many things are linear or hierarchical at all. Then why is it that most tools and thinking strategies assume a nice chronological or hierarchical order for my thought processes? The ideal tool for thought for me would embrace the messiness of my mind, and organically help insights emerge from chaos instead of forcing an artificial order. A rhizomatic, not arboresecent, form of note taking.
|
||||
The problem with the file cabinet is that it focuses on efficiency of access and interoperability rather than generativity and creativity. Thinking is not linear, nor is it hierarchical. In fact, not many things are linear or hierarchical at all. Then why is it that most tools and thinking strategies assume a nice chronological or hierarchical order for my thought processes?
|
||||
|
||||
The ideal tool for thought for me would embrace the messiness of my mind, and organically help insights emerge from chaos instead of forcing an artificial order. A rhizomatic, not arboresecent, form of note taking.
|
||||
|
||||
My goal with a digital garden is not purely as an organizing system and information store (though it works nicely for that). I want my digital garden to be a playground for new ways ideas can connect together. As a result, existing formal organizing systems like Zettelkasten or the hierarchical folder structures of Notion don’t work well for me. There is way too much upfront friction that by the time I’ve thought about how to organize my thought into folders categories, I’ve lost it.
|
||||
|
||||
@ -25,4 +27,21 @@ Quartz is designed first and foremost as a tool for publishing [digital gardens]
|
||||
> “[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.”
|
||||
> — Richard Hamming
|
||||
|
||||
**The goal of Quartz is to make sharing your digital garden free and simple.** At its core, Quartz is designed to be easy to use enough for non-technical people to get going but also powerful enough that senior developers can tweak it to work how they'd like it to work.
|
||||
**The goal of Quartz is to make sharing your digital garden free and simple.**
|
||||
|
||||
---
|
||||
|
||||
## A garden should be your own
|
||||
|
||||
At its core, Quartz is designed to be easy to use enough for non-technical people to get going but also powerful enough that senior developers can tweak it to work how they'd like it to work.
|
||||
|
||||
1. If you like the default configuration of Quartz and just want to change the content, the only thing that you need to change is the contents of the `content` folder.
|
||||
2. If you'd like to make basic configuration tweaks but don't want to edit source code, one can tweak the plugins and components in `quartz.config.ts` and `quartz.layout.ts` in a guided manner to their liking.
|
||||
3. If you'd like to tweak the actual source code of the underlying plugins, components, or even build process, Quartz purposefully ships its full source code to the end user to allow customization at this level too.
|
||||
|
||||
Most software either confines you to either
|
||||
|
||||
1. Makes it easy to tweak content but not the presentation
|
||||
2. Gives you too many knobs to tune the presentation without good opinionated defaults
|
||||
|
||||
**Quartz should feel powerful but ultimately be an intuitive tool fully within your control.** It should be a piece of [agentic software](https://jzhao.xyz/posts/agentic-computing). Ultimately, it should have the right affordances to nudge users towards good defaults but never dictate what the 'correct' way of using it is.
|
||||
|
||||
37
docs/plugins/AliasRedirects.md
Normal file
37
docs/plugins/AliasRedirects.md
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
title: AliasRedirects
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits HTML redirect pages for aliases and permalinks defined in the frontmatter of content files.
|
||||
|
||||
For example, A `foo.md` has the following frontmatter
|
||||
|
||||
```md title="foo.md"
|
||||
---
|
||||
title: "Foo"
|
||||
alias:
|
||||
- "bar"
|
||||
---
|
||||
```
|
||||
|
||||
The target `host.me/bar` will be redirected to `host.me/foo`
|
||||
|
||||
Note that these are permanent redirect.
|
||||
|
||||
The emitter supports the following aliases:
|
||||
|
||||
- `aliases`
|
||||
- `alias`
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.AliasRedirects()`.
|
||||
- Source: [`quartz/plugins/emitters/aliases.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/aliases.ts).
|
||||
20
docs/plugins/Assets.md
Normal file
20
docs/plugins/Assets.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Assets
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits all non-Markdown static assets in your content folder (like images, videos, HTML, etc). The plugin respects the `ignorePatterns` in the global [[configuration]].
|
||||
|
||||
Note that all static assets will then be accessible through its path on your generated site, i.e: `host.me/path/to/static.pdf`
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.Assets()`.
|
||||
- Source: [`quartz/plugins/emitters/assets.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/assets.ts).
|
||||
22
docs/plugins/CNAME.md
Normal file
22
docs/plugins/CNAME.md
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: CNAME
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits a `CNAME` record that points your subdomain to the default domain of your site.
|
||||
|
||||
If you want to use a custom domain name like `quartz.example.com` for the site, then this is needed.
|
||||
|
||||
See [[Hosting]] for more information.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.CNAME()`.
|
||||
- Source: [`quartz/plugins/emitters/cname.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/cname.ts).
|
||||
18
docs/plugins/ComponentResources.md
Normal file
18
docs/plugins/ComponentResources.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: ComponentResources
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin manages and emits the static resources required for the Quartz framework. This includes CSS stylesheets and JavaScript scripts that enhance the functionality and aesthetics of the generated site. See also the `cdnCaching` option in the `theme` section of the [[configuration]].
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.ComponentResources()`.
|
||||
- Source: [`quartz/plugins/emitters/componentResources.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/componentResources.ts).
|
||||
26
docs/plugins/ContentIndex.md
Normal file
26
docs/plugins/ContentIndex.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: ContentIndex
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits both RSS and an XML sitemap for your site. The [[RSS Feed]] allows users to subscribe to content on your site and the sitemap allows search engines to better index your site. The plugin also emits a `contentIndex.json` file which is used by dynamic frontend components like search and graph.
|
||||
|
||||
This plugin emits a comprehensive index of the site's content, generating additional resources such as a sitemap, an RSS feed, and a
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin accepts the following configuration options:
|
||||
|
||||
- `enableSiteMap`: If `true` (default), generates a sitemap XML file (`sitemap.xml`) listing all site URLs for search engines in content discovery.
|
||||
- `enableRSS`: If `true` (default), produces an RSS feed (`index.xml`) with recent content updates.
|
||||
- `rssLimit`: Defines the maximum number of entries to include in the RSS feed, helping to focus on the most recent or relevant content. Defaults to `10`.
|
||||
- `rssFullHtml`: If `true`, the RSS feed includes full HTML content. Otherwise it includes just summaries.
|
||||
- `includeEmptyFiles`: If `true` (default), content files with no body text are included in the generated index and resources.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.ContentIndex()`.
|
||||
- Source: [`quartz/plugins/emitters/contentIndex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentIndex.ts).
|
||||
18
docs/plugins/ContentPage.md
Normal file
18
docs/plugins/ContentPage.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: ContentPage
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin is a core component of the Quartz framework. It generates the HTML pages for each piece of Markdown content. It emits the full-page [[layout]], including headers, footers, and body content, among others.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.ContentPage()`.
|
||||
- Source: [`quartz/plugins/emitters/contentPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentPage.tsx).
|
||||
30
docs/plugins/CrawlLinks.md
Normal file
30
docs/plugins/CrawlLinks.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
title: CrawlLinks
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin parses links and processes them to point to the right places. It is also needed for embedded links (like images). See [[Obsidian 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:
|
||||
|
||||
- `markdownLinkResolution`: Sets the strategy for resolving Markdown paths, can be `"absolute"` (default), `"relative"` or `"shortest"`. You should use the same setting here as in [[Obsidian compatibility|Obsidian]].
|
||||
- `absolute`: Path relative to the root of the content folder.
|
||||
- `relative`: Path relative to the file you are linking from.
|
||||
- `shortest`: Name of the file. If this isn't enough to identify the file, use the full absolute path.
|
||||
- `prettyLinks`: If `true` (default), simplifies links by removing folder paths, making them more user friendly (e.g. `folder/deeply/nested/note` becomes `note`).
|
||||
- `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
|
||||
- `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
|
||||
- `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
|
||||
|
||||
> [!warning]
|
||||
> Removing this plugin is _not_ recommended and will likely break the page.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.CrawlLinks()`.
|
||||
- Source: [`quartz/plugins/transformers/links.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/links.ts).
|
||||
25
docs/plugins/CreatedModifiedDate.md
Normal file
25
docs/plugins/CreatedModifiedDate.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: "CreatedModifiedDate"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin determines the created, modified, and published dates for a document using three potential data sources: frontmatter metadata, Git history, and the filesystem. See [[authoring content#Syntax]] 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:
|
||||
|
||||
- `priority`: The data sources to consult for date information. Highest priority first. Possible values are `"frontmatter"`, `"git"`, and `"filesystem"`. Defaults to `"frontmatter", "git", "filesystem"]`.
|
||||
|
||||
> [!warning]
|
||||
> If you rely on `git` for dates, make sure `defaultDateType` is set to `modified` in `quartz.config.ts`.
|
||||
>
|
||||
> Depending on how you [[hosting|host]] your Quartz, the `filesystem` dates of your local files may not match the final dates. In these cases, it may be better to use `git` or `frontmatter` to guarantee correct dates.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.CreatedModifiedDate()`.
|
||||
- Source: [`quartz/plugins/transformers/lastmod.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/lastmod.ts).
|
||||
23
docs/plugins/Description.md
Normal file
23
docs/plugins/Description.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Description
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin generates descriptions that are used as metadata for the HTML `head`, the [[RSS Feed]] and in [[folder and tag listings]] if there is no main body content, the description is used as the text between the title and the listing.
|
||||
|
||||
If the frontmatter contains a `description` property, it is used (see [[authoring content#Syntax]]). Otherwise, the plugin will do its best to use the first few sentences of the content to reach the target description length.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin accepts the following configuration options:
|
||||
|
||||
- `descriptionLength`: the maximum length of the generated description. Default is 150 characters. The cut off happens after the first _sentence_ that ends after the given length.
|
||||
- `replaceExternalLinks`: If `true` (default), replace external links with their domain and path in the description (e.g. `https://domain.tld/some_page/another_page?query=hello&target=world` is replaced with `domain.tld/some_page/another_page`).
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.Description()`.
|
||||
- Source: [`quartz/plugins/transformers/description.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/description.ts).
|
||||
18
docs/plugins/ExplicitPublish.md
Normal file
18
docs/plugins/ExplicitPublish.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: ExplicitPublish
|
||||
tags:
|
||||
- plugin/filter
|
||||
---
|
||||
|
||||
This plugin filters content based on an explicit `publish` flag in the frontmatter, allowing only content that is explicitly marked for publication to pass through. It's the opt-in version of [[RemoveDrafts]]. See [[private pages]] for more information.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Filter
|
||||
- Function name: `Plugin.ExplicitPublish()`.
|
||||
- Source: [`quartz/plugins/filters/explicit.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/explicit.ts).
|
||||
22
docs/plugins/FolderPage.md
Normal file
22
docs/plugins/FolderPage.md
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: FolderPage
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin generates index pages for folders, creating a listing page for each folder that contains multiple content files. See [[folder and tag listings]] for more information.
|
||||
|
||||
Example: [[advanced/|Advanced]]
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `FolderContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/FolderContent.tsx`).
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.FolderPage()`.
|
||||
- Source: [`quartz/plugins/emitters/folderPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/folderPage.tsx).
|
||||
24
docs/plugins/Frontmatter.md
Normal file
24
docs/plugins/Frontmatter.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "Frontmatter"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin parses the frontmatter of the page using the [gray-matter](https://github.com/jonschlinkert/gray-matter) library. See [[authoring content#Syntax]], [[Obsidian compatibility]] and [[OxHugo 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:
|
||||
|
||||
- `delimiters`: the delimiters to use for the frontmatter. Can have one value (e.g. `"---"`) or separate values for opening and closing delimiters (e.g. `["---", "~~~"]`). Defaults to `"---"`.
|
||||
- `language`: the language to use for parsing the frontmatter. Can be `yaml` (default) or `toml`.
|
||||
|
||||
> [!warning]
|
||||
> This plugin must not be removed, otherwise Quartz will break.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.Frontmatter()`.
|
||||
- Source: [`quartz/plugins/transformers/frontmatter.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/frontmatter.ts).
|
||||
23
docs/plugins/GitHubFlavoredMarkdown.md
Normal file
23
docs/plugins/GitHubFlavoredMarkdown.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: GitHubFlavoredMarkdown
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin enhances Markdown processing to support GitHub Flavored Markdown (GFM) which adds features like autolink literals, footnotes, strikethrough, tables and tasklists.
|
||||
|
||||
In addition, this plugin adds optional features for typographic refinement (such as converting straight quotes to curly quotes, dashes to en-dashes/em-dashes, and ellipses) and automatic heading links as a symbol that appears next to the heading on hover.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin accepts the following configuration options:
|
||||
|
||||
- `enableSmartyPants`: When true, enables typographic enhancements. Default is true.
|
||||
- `linkHeadings`: When true, automatically adds links to headings. Default is true.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.GitHubFlavoredMarkdown()`.
|
||||
- Source: [`quartz/plugins/transformers/gfm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/gfm.ts).
|
||||
18
docs/plugins/HardLineBreaks.md
Normal file
18
docs/plugins/HardLineBreaks.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: HardLineBreaks
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin automatically converts single line breaks in Markdown text into hard line breaks in the HTML output. This plugin is not enabled by default as this doesn't follow the semantics of actual Markdown but you may enable it if you'd like parity with [[Obsidian compatibility|Obsidian]].
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.HardLineBreaks()`.
|
||||
- Source: [`quartz/plugins/transformers/linebreaks.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/linebreaks.ts).
|
||||
20
docs/plugins/Latex.md
Normal file
20
docs/plugins/Latex.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: "Latex"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin adds LaTeX support to Quartz. See [[features/Latex|Latex]] 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:
|
||||
|
||||
- `renderEngine`: the engine to use to render LaTeX equations. Can be `"katex"` for [KaTeX](https://katex.org/) or `"mathjax"` for [MathJax](https://www.mathjax.org/) [SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html). Defaults to KaTeX.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.Latex()`.
|
||||
- Source: [`quartz/plugins/transformers/latex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/latex.ts).
|
||||
18
docs/plugins/NotFoundPage.md
Normal file
18
docs/plugins/NotFoundPage.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: NotFoundPage
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits a 404 (Not Found) page for broken or non-existent URLs.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.NotFoundPage()`.
|
||||
- Source: [`quartz/plugins/emitters/404.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/404.tsx).
|
||||
34
docs/plugins/ObsidianFlavoredMarkdown.md
Normal file
34
docs/plugins/ObsidianFlavoredMarkdown.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
title: ObsidianFlavoredMarkdown
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin provides support for [[Obsidian compatibility]].
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin accepts the following configuration options:
|
||||
|
||||
- `comments`: If `true` (default), enables parsing of `%%` style Obsidian comment blocks.
|
||||
- `highlight`: If `true` (default), enables parsing of `==` style highlights within content.
|
||||
- `wikilinks`:If `true` (default), turns [[wikilinks]] into regular links.
|
||||
- `callouts`: If `true` (default), adds support for [[callouts|callout]] blocks for emphasizing content.
|
||||
- `mermaid`: If `true` (default), enables [[Mermaid diagrams|Mermaid diagram]] rendering within Markdown files.
|
||||
- `parseTags`: If `true` (default), parses and links tags within the content.
|
||||
- `parseArrows`: If `true` (default), transforms arrow symbols into their HTML character equivalents.
|
||||
- `parseBlockReferences`: If `true` (default), handles block references, linking to specific content blocks.
|
||||
- `enableInHtmlEmbed`: If `true`, allows embedding of content directly within HTML. Defaults to `false`.
|
||||
- `enableYouTubeEmbed`: If `true` (default), enables the embedding of YouTube videos and playlists using external image Markdown syntax.
|
||||
- `enableVideoEmbed`: If `true` (default), enables the embedding of video files.
|
||||
- `enableCheckbox`: If `true`, adds support for interactive checkboxes in content. Defaults to `false`.
|
||||
|
||||
> [!warning]
|
||||
> Don't remove this plugin if you're using [[Obsidian compatibility|Obsidian]] to author the content!
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.ObsidianFlavoredMarkdown()`.
|
||||
- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).
|
||||
29
docs/plugins/OxHugoFlavoredMarkdown.md
Normal file
29
docs/plugins/OxHugoFlavoredMarkdown.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: OxHugoFlavoredMarkdown
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin provides support for [ox-hugo](https://github.com/kaushalmodi/ox-hugo) compatibility. See [[OxHugo 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:
|
||||
|
||||
- `wikilinks`: If `true` (default), converts Hugo `{{ relref }}` shortcodes to Quartz [[wikilinks]].
|
||||
- `removePredefinedAnchor`: If `true` (default), strips predefined anchors from headings.
|
||||
- `removeHugoShortcode`: If `true` (default), removes Hugo shortcode syntax (`{{}}`) from the content.
|
||||
- `replaceFigureWithMdImg`: If `true` (default), replaces `<figure/>` with `![]()`.
|
||||
- `replaceOrgLatex`: If `true` (default), converts Org-mode [[features/Latex|Latex]] fragments to Quartz-compatible LaTeX wrapped in `$` (for inline) and `$$` (for block equations).
|
||||
|
||||
> [!warning]
|
||||
> While you can use this together with [[ObsidianFlavoredMarkdown]], it's not recommended because it might mutate the file in unexpected ways. Use with caution.
|
||||
>
|
||||
> If you use `toml` frontmatter, make sure to configure the [[Frontmatter]] plugin accordingly. See [[OxHugo compatibility]] for an example.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.OxHugoFlavoredMarkdown()`.
|
||||
- Source: [`quartz/plugins/transformers/oxhugofm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/oxhugofm.ts).
|
||||
18
docs/plugins/RemoveDrafts.md
Normal file
18
docs/plugins/RemoveDrafts.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: RemoveDrafts
|
||||
tags:
|
||||
- plugin/filter
|
||||
---
|
||||
|
||||
This plugin filters out content from your vault, so that only finalized content is made available. This prevents [[private pages]] from being published. By default, it filters out all pages with `draft: true` in the frontmatter and leaves all other pages intact.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Filter
|
||||
- Function name: `Plugin.RemoveDrafts()`.
|
||||
- Source: [`quartz/plugins/filters/draft.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/draft.ts).
|
||||
21
docs/plugins/Static.md
Normal file
21
docs/plugins/Static.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Static
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits all static resources needed by Quartz. This is used, for example, for fonts and images that need a stable position, such as banners and icons. The plugin respects the `ignorePatterns` in the global [[configuration]].
|
||||
|
||||
> [!important]
|
||||
> This is different from [[Assets]]. The resources from the [[Static]] plugin are located under `quartz/static`, whereas [[Assets]] renders all static resources under `content` and is used for images, videos, audio, etc. that are directly referenced by your markdown content.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.Static()`.
|
||||
- Source: [`quartz/plugins/emitters/static.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/static.ts).
|
||||
23
docs/plugins/SyntaxHighlighting.md
Normal file
23
docs/plugins/SyntaxHighlighting.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: "SyntaxHighlighting"
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin is used to add syntax highlighting to code blocks in Quartz. See [[syntax highlighting]] 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:
|
||||
|
||||
- `theme`: a separate id of one of the [themes bundled with Shikiji](https://shikiji.netlify.app/themes). One for light mode and one for dark mode. Defaults to `theme: { light: "github-light", dark: "github-dark" }`.
|
||||
- `keepBackground`: If set to `true`, the background of the Shikiji theme will be used. With `false` (default) the Quartz theme color for background will be used instead.
|
||||
|
||||
In addition, you can further override the colours in the `quartz/styles/syntax.scss` file.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.SyntaxHighlighting()`.
|
||||
- Source: [`quartz/plugins/transformers/syntax.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/syntax.ts).
|
||||
26
docs/plugins/TableOfContents.md
Normal file
26
docs/plugins/TableOfContents.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: TableOfContents
|
||||
tags:
|
||||
- plugin/transformer
|
||||
---
|
||||
|
||||
This plugin generates a table of contents (TOC) for Markdown documents. See [[table of contents]] 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:
|
||||
|
||||
- `maxDepth`: Limits the depth of headings included in the TOC, ranging from `1` (top level headings only) to `6` (all heading levels). Default is `3`.
|
||||
- `minEntries`: The minimum number of heading entries required for the TOC to be displayed. Default is `1`.
|
||||
- `showByDefault`: If `true` (default), the TOC should be displayed by default. Can be overridden by frontmatter settings.
|
||||
- `collapseByDefault`: If `true`, the TOC will start in a collapsed state. Default is `false`.
|
||||
|
||||
> [!warning]
|
||||
> This plugin needs the `Component.TableOfContents` component in `quartz.layout.ts` to determine where to display the TOC. Without it, nothing will be displayed. They should always be added or removed together.
|
||||
|
||||
## API
|
||||
|
||||
- Category: Transformer
|
||||
- Function name: `Plugin.TableOfContents()`.
|
||||
- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).
|
||||
20
docs/plugins/TagPage.md
Normal file
20
docs/plugins/TagPage.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: TagPage
|
||||
tags:
|
||||
- plugin/emitter
|
||||
---
|
||||
|
||||
This plugin emits dedicated pages for each tag used in the content. See [[folder and tag listings]] for more information.
|
||||
|
||||
> [!note]
|
||||
> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
|
||||
|
||||
This plugin has no configuration options.
|
||||
|
||||
The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `TagContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/TagContent.tsx`).
|
||||
|
||||
## API
|
||||
|
||||
- Category: Emitter
|
||||
- Function name: `Plugin.TagPage()`.
|
||||
- Source: [`quartz/plugins/emitters/tagPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/tagPage.tsx).
|
||||
3
docs/plugins/index.md
Normal file
3
docs/plugins/index.md
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Plugins
|
||||
---
|
||||
@ -12,20 +12,37 @@ At the top of your repository on GitHub.com's Quick Setup page, click the clipb
|
||||
|
||||
![[github-quick-setup.png]]
|
||||
|
||||
In your terminal of choice, navigate to the root of your Quartz folder. Then, run the following command, replacing `REMOTE-URL` with the URL you just copied from the previous step.
|
||||
|
||||
```bash
|
||||
git remote add origin REMOTE-URL
|
||||
```
|
||||
|
||||
To verify that you set the remote URL correctly, run the following command.
|
||||
In your terminal of choice, navigate to the root of your Quartz folder. Then, run the following commands, replacing `REMOTE-URL` with the URL you just copied from the previous step.
|
||||
|
||||
```bash
|
||||
# list all the repositories that are tracked
|
||||
git remote -v
|
||||
|
||||
# if the origin doesn't match your own repository, set your repository as the origin
|
||||
git remote set-url origin REMOTE-URL
|
||||
|
||||
# if you don't have upstream as a remote, add it so updates work
|
||||
git remote add upstream https://github.com/jackyzha0/quartz.git
|
||||
```
|
||||
|
||||
Then, you can sync the content to upload it to your repository.
|
||||
Then, you can sync the content to upload it to your repository. This is a helper command that will do the initial push of your content to your repository.
|
||||
|
||||
```bash
|
||||
npx quartz sync
|
||||
npx quartz sync --no-pull
|
||||
```
|
||||
|
||||
> [!warning]- `fatal: --[no-]autostash option is only valid with --rebase`
|
||||
> You may have an outdated version of `git`. Updating `git` should fix this issue.
|
||||
|
||||
In future updates, you can simply run `npx quartz sync` every time you want to push updates to your repository.
|
||||
|
||||
> [!hint] Flags and options
|
||||
> For full help options, you can run `npx quartz sync --help`.
|
||||
>
|
||||
> Most of these have sensible defaults but you can override them if you have a custom setup:
|
||||
>
|
||||
> - `-d` or `--directory`: the content folder. This is normally just `content`
|
||||
> - `-v` or `--verbose`: print out extra logging information
|
||||
> - `--commit` or `--no-commit`: whether to make a `git` commit for your changes
|
||||
> - `--push` or `--no-push`: whether to push updates to your GitHub fork of Quartz
|
||||
> - `--pull` or `--no-pull`: whether to try and pull in any updates from your GitHub fork (i.e. from other devices) before pushing
|
||||
|
||||
@ -6,26 +6,11 @@ Want to see what Quartz can do? Here are some cool community gardens :)
|
||||
|
||||
- [Quartz Documentation (this site!)](https://quartz.jzhao.xyz/)
|
||||
- [Jacky Zhao's Garden](https://jzhao.xyz/)
|
||||
- [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
|
||||
- [AWAGMI Intern Notes](https://notes.awagmi.xyz/)
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
- [Shihyu's PKM](https://shihyuho.github.io/pkm/)
|
||||
- [SlRvb's Site](https://slrvb.github.io/Site/)
|
||||
- [Course notes for Information Technology Advanced Theory](https://a2itnotes.github.io/quartz/)
|
||||
- [Brandon Boswell's Garden](https://brandonkboswell.com)
|
||||
- [Siyang's Courtyard](https://siyangsun.github.io/courtyard/)
|
||||
>>>>>>> 574c7f48 (chore: migrate content)
|
||||
- [Data Dictionary 🧠](https://glossary.airbyte.com/)
|
||||
- [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
|
||||
<<<<<<<< HEAD:docs/showcase.md
|
||||
- [Socratica Toolbox](https://toolbox.socratica.info/)
|
||||
- [oldwinter の数字花园](https://garden.oldwinter.top/)
|
||||
========
|
||||
- [oldwinterの数字花园](https://garden.oldwinter.top/)
|
||||
- [SethMB Work](https://sethmb.xyz/)
|
||||
>>>>>>>> 1cc21a28 (chore: migrate content):content/notes/showcase.md
|
||||
- [Aaron Pham's Garden](https://aarnphm.xyz/)
|
||||
- [The Quantum Garden](https://quantumgardener.blog/)
|
||||
- [Abhijeet's Math Wiki](https://abhmul.github.io/quartz/Math-Wiki/)
|
||||
- [Mike's AI Garden 🤖🪴](https://mwalton.me/)
|
||||
- [Matt Dunn's Second Brain](https://mattdunn.info/)
|
||||
- [Pelayo Arbues' Notes](https://pelayoarbues.github.io/)
|
||||
- [Vince Imbat's Talahardin](https://vinceimbat.com/)
|
||||
@ -33,9 +18,13 @@ Want to see what Quartz can do? Here are some cool community gardens :)
|
||||
- [Pedro MC Fernandes's Topo da Mente](https://www.pmcf.xyz/topo-da-mente/)
|
||||
- [Mau Camargo's Notkesto](https://notes.camargomau.com/)
|
||||
- [Caicai's Novels](https://imoko.cc/blog/caicai/)
|
||||
- [🌊 Collapsed Wave](https://collapsedwave.com/)
|
||||
- [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)
|
||||
- [Mike's AI Garden 🤖🪴](https://mwalton.me/)
|
||||
- [Brandon Boswell's Garden](https://brandonkboswell.com)
|
||||
- [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
|
||||
- [Data Dictionary 🧠](https://glossary.airbyte.com/)
|
||||
- [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
|
||||
- [🪴Aster's notebook](https://notes.asterhu.com)
|
||||
|
||||
<<<<<<< HEAD
|
||||
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/hugo/content/notes/showcase.md)!
|
||||
>>>>>>> f95d4be1 (chore: migrate content)
|
||||
|
||||
3
docs/tags/plugin.md
Normal file
3
docs/tags/plugin.md
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
title: Plugins
|
||||
---
|
||||
3
globals.d.ts
vendored
3
globals.d.ts
vendored
@ -4,9 +4,10 @@ export declare global {
|
||||
type: K,
|
||||
listener: (this: Document, ev: CustomEventMap[K]) => void,
|
||||
): void
|
||||
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void
|
||||
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K] | UIEvent): void
|
||||
}
|
||||
interface Window {
|
||||
spaNavigate(url: URL, isBack: boolean = false)
|
||||
addCleanup(fn: (...args: any[]) => void)
|
||||
}
|
||||
}
|
||||
|
||||
1
index.d.ts
vendored
1
index.d.ts
vendored
@ -6,6 +6,7 @@ declare module "*.scss" {
|
||||
// dom custom event
|
||||
interface CustomEventMap {
|
||||
nav: CustomEvent<{ url: FullSlug }>
|
||||
themechange: CustomEvent<{ theme: "light" | "dark" }>
|
||||
}
|
||||
|
||||
declare const fetchData: Promise<ContentIndex>
|
||||
|
||||
3642
package-lock.json
generated
3642
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
115
package.json
115
package.json
@ -2,7 +2,7 @@
|
||||
"name": "@jackyzha0/quartz",
|
||||
"description": "🌱 publish your digital garden and notes as a website",
|
||||
"private": true,
|
||||
"version": "4.1.2",
|
||||
"version": "4.2.3",
|
||||
"type": "module",
|
||||
"author": "jackyzha0 <j.zhao2k19@gmail.com>",
|
||||
"license": "MIT",
|
||||
@ -15,7 +15,7 @@
|
||||
"docs": "npx quartz build --serve -d docs",
|
||||
"check": "tsc --noEmit && npx prettier . --check",
|
||||
"format": "npx prettier . --write",
|
||||
"test": "tsx ./quartz/util/path.test.ts",
|
||||
"test": "tsx ./quartz/util/path.test.ts && tsx ./quartz/depgraph.test.ts",
|
||||
"profile": "0x -D prof ./quartz/bootstrap-cli.mjs build --concurrency=1"
|
||||
},
|
||||
"engines": {
|
||||
@ -34,76 +34,75 @@
|
||||
"quartz": "./quartz/bootstrap-cli.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@clack/prompts": "^0.6.3",
|
||||
"@floating-ui/dom": "^1.4.0",
|
||||
"@napi-rs/simple-git": "0.1.9",
|
||||
"async-mutex": "^0.4.0",
|
||||
"chalk": "^4.1.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"@clack/prompts": "^0.7.0",
|
||||
"@floating-ui/dom": "^1.6.3",
|
||||
"@napi-rs/simple-git": "0.1.16",
|
||||
"async-mutex": "^0.4.1",
|
||||
"chalk": "^5.3.0",
|
||||
"chokidar": "^3.6.0",
|
||||
"cli-spinner": "^0.2.10",
|
||||
"d3": "^7.8.5",
|
||||
"esbuild-sass-plugin": "^2.12.0",
|
||||
"flexsearch": "0.7.21",
|
||||
"esbuild-sass-plugin": "^2.16.1",
|
||||
"flexsearch": "0.7.43",
|
||||
"github-slugger": "^2.0.0",
|
||||
"globby": "^13.1.4",
|
||||
"globby": "^14.0.1",
|
||||
"gray-matter": "^4.0.3",
|
||||
"hast-util-to-html": "^8.0.4",
|
||||
"hast-util-to-jsx-runtime": "^1.2.0",
|
||||
"hast-util-to-string": "^2.0.0",
|
||||
"hast-util-to-html": "^9.0.0",
|
||||
"hast-util-to-jsx-runtime": "^2.3.0",
|
||||
"hast-util-to-string": "^3.0.0",
|
||||
"is-absolute-url": "^4.0.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"lightningcss": "1.21.7",
|
||||
"mdast-util-find-and-replace": "^2.2.2",
|
||||
"mdast-util-to-hast": "^12.3.0",
|
||||
"mdast-util-to-string": "^3.2.0",
|
||||
"lightningcss": "^1.24.0",
|
||||
"mdast-util-find-and-replace": "^3.0.1",
|
||||
"mdast-util-to-hast": "^13.1.0",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"micromorph": "^0.4.5",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"preact": "^10.14.1",
|
||||
"preact-render-to-string": "^6.0.3",
|
||||
"pretty-bytes": "^6.1.0",
|
||||
"preact": "^10.19.6",
|
||||
"preact-render-to-string": "^6.4.0",
|
||||
"pretty-bytes": "^6.1.1",
|
||||
"pretty-time": "^1.1.0",
|
||||
"reading-time": "^1.5.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-katex": "^6.0.3",
|
||||
"rehype-mathjax": "^4.0.3",
|
||||
"rehype-pretty-code": "^0.10.0",
|
||||
"rehype-raw": "^6.1.1",
|
||||
"rehype-slug": "^5.1.0",
|
||||
"remark": "^14.0.2",
|
||||
"remark-breaks": "^3.0.3",
|
||||
"remark-frontmatter": "^4.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1",
|
||||
"remark-parse": "^10.0.1",
|
||||
"remark-rehype": "^10.1.0",
|
||||
"remark-smartypants": "^2.0.0",
|
||||
"rimraf": "^5.0.1",
|
||||
"rehype-autolink-headings": "^7.1.0",
|
||||
"rehype-katex": "^7.0.0",
|
||||
"rehype-mathjax": "^6.0.0",
|
||||
"rehype-pretty-code": "^0.13.0",
|
||||
"rehype-raw": "^7.0.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark": "^15.0.1",
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-frontmatter": "^5.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-math": "^6.0.0",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.0",
|
||||
"remark-smartypants": "^2.1.0",
|
||||
"rfdc": "^1.3.1",
|
||||
"rimraf": "^5.0.5",
|
||||
"serve-handler": "^6.1.5",
|
||||
"shiki": "^1.1.7",
|
||||
"source-map-support": "^0.5.21",
|
||||
"to-vfile": "^7.2.4",
|
||||
"to-vfile": "^8.0.0",
|
||||
"toml": "^3.0.0",
|
||||
"unified": "^10.1.2",
|
||||
"unist-util-visit": "^4.1.2",
|
||||
"vfile": "^5.3.7",
|
||||
"workerpool": "^6.4.0",
|
||||
"ws": "^8.13.0",
|
||||
"unified": "^11.0.4",
|
||||
"unist-util-visit": "^5.0.0",
|
||||
"vfile": "^6.0.1",
|
||||
"workerpool": "^9.1.0",
|
||||
"ws": "^8.15.1",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cli-spinner": "^0.2.1",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/flexsearch": "^0.7.3",
|
||||
"@types/hast": "^2.3.4",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/node": "^20.1.2",
|
||||
"@types/pretty-time": "^1.1.2",
|
||||
"@types/source-map-support": "^0.5.6",
|
||||
"@types/workerpool": "^6.4.0",
|
||||
"@types/ws": "^8.5.5",
|
||||
"@types/yargs": "^17.0.24",
|
||||
"esbuild": "0.19.2",
|
||||
"prettier": "^3.0.0",
|
||||
"tsx": "^3.12.7",
|
||||
"typescript": "^5.0.4"
|
||||
"@types/cli-spinner": "^0.2.3",
|
||||
"@types/d3": "^7.4.3",
|
||||
"@types/hast": "^3.0.4",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/node": "^20.11.24",
|
||||
"@types/pretty-time": "^1.1.5",
|
||||
"@types/source-map-support": "^0.5.10",
|
||||
"@types/ws": "^8.5.10",
|
||||
"@types/yargs": "^17.0.32",
|
||||
"esbuild": "^0.19.9",
|
||||
"prettier": "^3.2.4",
|
||||
"tsx": "^4.7.1",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import { QuartzConfig } from "./quartz/cfg"
|
||||
import * as Plugin from "./quartz/plugins"
|
||||
|
||||
/**
|
||||
* Quartz 4.0 Configuration
|
||||
*
|
||||
* See https://quartz.jzhao.xyz/configuration for more information.
|
||||
*/
|
||||
const config: QuartzConfig = {
|
||||
configuration: {
|
||||
pageTitle: "🥽 Plastic Labs",
|
||||
@ -11,8 +16,10 @@ const config: QuartzConfig = {
|
||||
},
|
||||
baseUrl: "plasticlabs.ai",
|
||||
ignorePatterns: ["private", "templates"],
|
||||
locale: "en-US",
|
||||
defaultDateType: "created",
|
||||
theme: {
|
||||
cdnCaching: true,
|
||||
typography: {
|
||||
header: "Exo 2",
|
||||
body: "Hind Madurai",
|
||||
@ -45,15 +52,21 @@ const config: QuartzConfig = {
|
||||
plugins: {
|
||||
transformers: [
|
||||
Plugin.FrontMatter(),
|
||||
Plugin.TableOfContents(),
|
||||
Plugin.CreatedModifiedDate({
|
||||
priority: ["frontmatter", "filesystem"], // you can add 'git' here for last modified from Git but this makes the build slower
|
||||
priority: ["frontmatter", "filesystem"],
|
||||
}),
|
||||
Plugin.Latex({ renderEngine: "katex" }),
|
||||
Plugin.SyntaxHighlighting({
|
||||
theme: {
|
||||
light: "github-light",
|
||||
dark: "github-dark",
|
||||
},
|
||||
keepBackground: false,
|
||||
}),
|
||||
Plugin.SyntaxHighlighting(),
|
||||
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
|
||||
Plugin.GitHubFlavoredMarkdown(),
|
||||
Plugin.TableOfContents(),
|
||||
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
|
||||
Plugin.Latex({ renderEngine: "katex" }),
|
||||
Plugin.Description(),
|
||||
],
|
||||
filters: [Plugin.RemoveDrafts()],
|
||||
|
||||
@ -38,5 +38,13 @@ export const defaultContentPageLayout: PageLayout = {
|
||||
export const defaultListPageLayout: PageLayout = {
|
||||
beforeBody: [Component.ArticleTitle()],
|
||||
left: [],
|
||||
// beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
|
||||
// left: [
|
||||
// Component.PageTitle(),
|
||||
// Component.MobileOnly(Component.Spacer()),
|
||||
// Component.Search(),
|
||||
// Component.Darkmode(),
|
||||
// Component.DesktopOnly(Component.Explorer()),
|
||||
// ],
|
||||
right: [],
|
||||
}
|
||||
|
||||
394
quartz/build.ts
394
quartz/build.ts
@ -3,13 +3,13 @@ sourceMapSupport.install(options)
|
||||
import path from "path"
|
||||
import { PerfTimer } from "./util/perf"
|
||||
import { rimraf } from "rimraf"
|
||||
import { isGitIgnored } from "globby"
|
||||
import { GlobbyFilterFunction, isGitIgnored } from "globby"
|
||||
import chalk from "chalk"
|
||||
import { parseMarkdown } from "./processors/parse"
|
||||
import { filterContent } from "./processors/filter"
|
||||
import { emitContent } from "./processors/emit"
|
||||
import cfg from "../quartz.config"
|
||||
import { FilePath, joinSegments, slugifyFilePath } from "./util/path"
|
||||
import { FilePath, FullSlug, joinSegments, slugifyFilePath } from "./util/path"
|
||||
import chokidar from "chokidar"
|
||||
import { ProcessedContent } from "./plugins/vfile"
|
||||
import { Argv, BuildCtx } from "./util/ctx"
|
||||
@ -17,6 +17,26 @@ import { glob, toPosixPath } from "./util/glob"
|
||||
import { trace } from "./util/trace"
|
||||
import { options } from "./util/sourcemap"
|
||||
import { Mutex } from "async-mutex"
|
||||
import DepGraph from "./depgraph"
|
||||
import { getStaticResourcesFromPlugins } from "./plugins"
|
||||
|
||||
type Dependencies = Record<string, DepGraph<FilePath> | null>
|
||||
|
||||
type BuildData = {
|
||||
ctx: BuildCtx
|
||||
ignored: GlobbyFilterFunction
|
||||
mut: Mutex
|
||||
initialSlugs: FullSlug[]
|
||||
// TODO merge contentMap and trackedAssets
|
||||
contentMap: Map<FilePath, ProcessedContent>
|
||||
trackedAssets: Set<FilePath>
|
||||
toRebuild: Set<FilePath>
|
||||
toRemove: Set<FilePath>
|
||||
lastBuildMs: number
|
||||
dependencies: Dependencies
|
||||
}
|
||||
|
||||
type FileEvent = "add" | "change" | "delete"
|
||||
|
||||
async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
|
||||
const ctx: BuildCtx = {
|
||||
@ -40,7 +60,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
|
||||
|
||||
const release = await mut.acquire()
|
||||
perf.addEvent("clean")
|
||||
await rimraf(output)
|
||||
await rimraf(path.join(output, "*"), { glob: true })
|
||||
console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
|
||||
|
||||
perf.addEvent("glob")
|
||||
@ -55,12 +75,24 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
|
||||
|
||||
const parsedFiles = await parseMarkdown(ctx, filePaths)
|
||||
const filteredContent = filterContent(ctx, parsedFiles)
|
||||
|
||||
const dependencies: Record<string, DepGraph<FilePath> | null> = {}
|
||||
|
||||
// Only build dependency graphs if we're doing a fast rebuild
|
||||
if (argv.fastRebuild) {
|
||||
const staticResources = getStaticResourcesFromPlugins(ctx)
|
||||
for (const emitter of cfg.plugins.emitters) {
|
||||
dependencies[emitter.name] =
|
||||
(await emitter.getDependencyGraph?.(ctx, filteredContent, staticResources)) ?? null
|
||||
}
|
||||
}
|
||||
|
||||
await emitContent(ctx, filteredContent)
|
||||
console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
|
||||
release()
|
||||
|
||||
if (argv.serve) {
|
||||
return startServing(ctx, mut, parsedFiles, clientRefresh)
|
||||
return startServing(ctx, mut, parsedFiles, clientRefresh, dependencies)
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,92 +102,28 @@ async function startServing(
|
||||
mut: Mutex,
|
||||
initialContent: ProcessedContent[],
|
||||
clientRefresh: () => void,
|
||||
dependencies: Dependencies, // emitter name: dep graph
|
||||
) {
|
||||
const { argv } = ctx
|
||||
|
||||
const ignored = await isGitIgnored()
|
||||
// cache file parse results
|
||||
const contentMap = new Map<FilePath, ProcessedContent>()
|
||||
for (const content of initialContent) {
|
||||
const [_tree, vfile] = content
|
||||
contentMap.set(vfile.data.filePath!, content)
|
||||
}
|
||||
|
||||
const initialSlugs = ctx.allSlugs
|
||||
let lastBuildMs = 0
|
||||
const toRebuild: Set<FilePath> = new Set()
|
||||
const toRemove: Set<FilePath> = new Set()
|
||||
const trackedAssets: Set<FilePath> = new Set()
|
||||
async function rebuild(fp: string, action: "add" | "change" | "delete") {
|
||||
// don't do anything for gitignored files
|
||||
if (ignored(fp)) {
|
||||
return
|
||||
}
|
||||
|
||||
// dont bother rebuilding for non-content files, just track and refresh
|
||||
fp = toPosixPath(fp)
|
||||
const filePath = joinSegments(argv.directory, fp) as FilePath
|
||||
if (path.extname(fp) !== ".md") {
|
||||
if (action === "add" || action === "change") {
|
||||
trackedAssets.add(filePath)
|
||||
} else if (action === "delete") {
|
||||
trackedAssets.delete(filePath)
|
||||
}
|
||||
clientRefresh()
|
||||
return
|
||||
}
|
||||
|
||||
if (action === "add" || action === "change") {
|
||||
toRebuild.add(filePath)
|
||||
} else if (action === "delete") {
|
||||
toRemove.add(filePath)
|
||||
}
|
||||
|
||||
// debounce rebuilds every 250ms
|
||||
|
||||
const buildStart = new Date().getTime()
|
||||
lastBuildMs = buildStart
|
||||
const release = await mut.acquire()
|
||||
if (lastBuildMs > buildStart) {
|
||||
release()
|
||||
return
|
||||
}
|
||||
|
||||
const perf = new PerfTimer()
|
||||
console.log(chalk.yellow("Detected change, rebuilding..."))
|
||||
try {
|
||||
const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
|
||||
|
||||
const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
|
||||
.filter((fp) => !toRemove.has(fp))
|
||||
.map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
|
||||
|
||||
ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
|
||||
const parsedContent = await parseMarkdown(ctx, filesToRebuild)
|
||||
for (const content of parsedContent) {
|
||||
const [_tree, vfile] = content
|
||||
contentMap.set(vfile.data.filePath!, content)
|
||||
}
|
||||
|
||||
for (const fp of toRemove) {
|
||||
contentMap.delete(fp)
|
||||
}
|
||||
|
||||
const parsedFiles = [...contentMap.values()]
|
||||
const filteredContent = filterContent(ctx, parsedFiles)
|
||||
|
||||
// TODO: we can probably traverse the link graph to figure out what's safe to delete here
|
||||
// instead of just deleting everything
|
||||
await rimraf(argv.output)
|
||||
await emitContent(ctx, filteredContent)
|
||||
console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
|
||||
} catch {
|
||||
console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
|
||||
}
|
||||
|
||||
clientRefresh()
|
||||
toRebuild.clear()
|
||||
toRemove.clear()
|
||||
release()
|
||||
const buildData: BuildData = {
|
||||
ctx,
|
||||
mut,
|
||||
dependencies,
|
||||
contentMap,
|
||||
ignored: await isGitIgnored(),
|
||||
initialSlugs: ctx.allSlugs,
|
||||
toRebuild: new Set<FilePath>(),
|
||||
toRemove: new Set<FilePath>(),
|
||||
trackedAssets: new Set<FilePath>(),
|
||||
lastBuildMs: 0,
|
||||
}
|
||||
|
||||
const watcher = chokidar.watch(".", {
|
||||
@ -164,16 +132,274 @@ async function startServing(
|
||||
ignoreInitial: true,
|
||||
})
|
||||
|
||||
const buildFromEntry = argv.fastRebuild ? partialRebuildFromEntrypoint : rebuildFromEntrypoint
|
||||
watcher
|
||||
.on("add", (fp) => rebuild(fp, "add"))
|
||||
.on("change", (fp) => rebuild(fp, "change"))
|
||||
.on("unlink", (fp) => rebuild(fp, "delete"))
|
||||
.on("add", (fp) => buildFromEntry(fp, "add", clientRefresh, buildData))
|
||||
.on("change", (fp) => buildFromEntry(fp, "change", clientRefresh, buildData))
|
||||
.on("unlink", (fp) => buildFromEntry(fp, "delete", clientRefresh, buildData))
|
||||
|
||||
return async () => {
|
||||
await watcher.close()
|
||||
}
|
||||
}
|
||||
|
||||
async function partialRebuildFromEntrypoint(
|
||||
filepath: string,
|
||||
action: FileEvent,
|
||||
clientRefresh: () => void,
|
||||
buildData: BuildData, // note: this function mutates buildData
|
||||
) {
|
||||
const { ctx, ignored, dependencies, contentMap, mut, toRemove } = buildData
|
||||
const { argv, cfg } = ctx
|
||||
|
||||
// don't do anything for gitignored files
|
||||
if (ignored(filepath)) {
|
||||
return
|
||||
}
|
||||
|
||||
const buildStart = new Date().getTime()
|
||||
buildData.lastBuildMs = buildStart
|
||||
const release = await mut.acquire()
|
||||
if (buildData.lastBuildMs > buildStart) {
|
||||
release()
|
||||
return
|
||||
}
|
||||
|
||||
const perf = new PerfTimer()
|
||||
console.log(chalk.yellow("Detected change, rebuilding..."))
|
||||
|
||||
// UPDATE DEP GRAPH
|
||||
const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
|
||||
|
||||
const staticResources = getStaticResourcesFromPlugins(ctx)
|
||||
let processedFiles: ProcessedContent[] = []
|
||||
|
||||
switch (action) {
|
||||
case "add":
|
||||
// add to cache when new file is added
|
||||
processedFiles = await parseMarkdown(ctx, [fp])
|
||||
processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
|
||||
|
||||
// update the dep graph by asking all emitters whether they depend on this file
|
||||
for (const emitter of cfg.plugins.emitters) {
|
||||
const emitterGraph =
|
||||
(await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
|
||||
|
||||
if (emitterGraph) {
|
||||
const existingGraph = dependencies[emitter.name]
|
||||
if (existingGraph !== null) {
|
||||
existingGraph.mergeGraph(emitterGraph)
|
||||
} else {
|
||||
// might be the first time we're adding a mardown file
|
||||
dependencies[emitter.name] = emitterGraph
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case "change":
|
||||
// invalidate cache when file is changed
|
||||
processedFiles = await parseMarkdown(ctx, [fp])
|
||||
processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
|
||||
|
||||
// only content files can have added/removed dependencies because of transclusions
|
||||
if (path.extname(fp) === ".md") {
|
||||
for (const emitter of cfg.plugins.emitters) {
|
||||
// get new dependencies from all emitters for this file
|
||||
const emitterGraph =
|
||||
(await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
|
||||
|
||||
// only update the graph if the emitter plugin uses the changed file
|
||||
// eg. Assets plugin ignores md files, so we skip updating the graph
|
||||
if (emitterGraph?.hasNode(fp)) {
|
||||
// merge the new dependencies into the dep graph
|
||||
dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case "delete":
|
||||
toRemove.add(fp)
|
||||
break
|
||||
}
|
||||
|
||||
if (argv.verbose) {
|
||||
console.log(`Updated dependency graphs in ${perf.timeSince()}`)
|
||||
}
|
||||
|
||||
// EMIT
|
||||
perf.addEvent("rebuild")
|
||||
let emittedFiles = 0
|
||||
|
||||
for (const emitter of cfg.plugins.emitters) {
|
||||
const depGraph = dependencies[emitter.name]
|
||||
|
||||
// emitter hasn't defined a dependency graph. call it with all processed files
|
||||
if (depGraph === null) {
|
||||
if (argv.verbose) {
|
||||
console.log(
|
||||
`Emitter ${emitter.name} doesn't define a dependency graph. Calling it with all files...`,
|
||||
)
|
||||
}
|
||||
|
||||
const files = [...contentMap.values()].filter(
|
||||
([_node, vfile]) => !toRemove.has(vfile.data.filePath!),
|
||||
)
|
||||
|
||||
const emittedFps = await emitter.emit(ctx, files, staticResources)
|
||||
|
||||
if (ctx.argv.verbose) {
|
||||
for (const file of emittedFps) {
|
||||
console.log(`[emit:${emitter.name}] ${file}`)
|
||||
}
|
||||
}
|
||||
|
||||
emittedFiles += emittedFps.length
|
||||
continue
|
||||
}
|
||||
|
||||
// only call the emitter if it uses this file
|
||||
if (depGraph.hasNode(fp)) {
|
||||
// re-emit using all files that are needed for the downstream of this file
|
||||
// eg. for ContentIndex, the dep graph could be:
|
||||
// a.md --> contentIndex.json
|
||||
// b.md ------^
|
||||
//
|
||||
// if a.md changes, we need to re-emit contentIndex.json,
|
||||
// and supply [a.md, b.md] to the emitter
|
||||
const upstreams = [...depGraph.getLeafNodeAncestors(fp)] as FilePath[]
|
||||
|
||||
const upstreamContent = upstreams
|
||||
// filter out non-markdown files
|
||||
.filter((file) => contentMap.has(file))
|
||||
// if file was deleted, don't give it to the emitter
|
||||
.filter((file) => !toRemove.has(file))
|
||||
.map((file) => contentMap.get(file)!)
|
||||
|
||||
const emittedFps = await emitter.emit(ctx, upstreamContent, staticResources)
|
||||
|
||||
if (ctx.argv.verbose) {
|
||||
for (const file of emittedFps) {
|
||||
console.log(`[emit:${emitter.name}] ${file}`)
|
||||
}
|
||||
}
|
||||
|
||||
emittedFiles += emittedFps.length
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince("rebuild")}`)
|
||||
|
||||
// CLEANUP
|
||||
const destinationsToDelete = new Set<FilePath>()
|
||||
for (const file of toRemove) {
|
||||
// remove from cache
|
||||
contentMap.delete(file)
|
||||
Object.values(dependencies).forEach((depGraph) => {
|
||||
// remove the node from dependency graphs
|
||||
depGraph?.removeNode(file)
|
||||
// remove any orphan nodes. eg if a.md is deleted, a.html is orphaned and should be removed
|
||||
const orphanNodes = depGraph?.removeOrphanNodes()
|
||||
orphanNodes?.forEach((node) => {
|
||||
// only delete files that are in the output directory
|
||||
if (node.startsWith(argv.output)) {
|
||||
destinationsToDelete.add(node)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
await rimraf([...destinationsToDelete])
|
||||
|
||||
toRemove.clear()
|
||||
release()
|
||||
clientRefresh()
|
||||
}
|
||||
|
||||
async function rebuildFromEntrypoint(
|
||||
fp: string,
|
||||
action: FileEvent,
|
||||
clientRefresh: () => void,
|
||||
buildData: BuildData, // note: this function mutates buildData
|
||||
) {
|
||||
const { ctx, ignored, mut, initialSlugs, contentMap, toRebuild, toRemove, trackedAssets } =
|
||||
buildData
|
||||
|
||||
const { argv } = ctx
|
||||
|
||||
// don't do anything for gitignored files
|
||||
if (ignored(fp)) {
|
||||
return
|
||||
}
|
||||
|
||||
// dont bother rebuilding for non-content files, just track and refresh
|
||||
fp = toPosixPath(fp)
|
||||
const filePath = joinSegments(argv.directory, fp) as FilePath
|
||||
if (path.extname(fp) !== ".md") {
|
||||
if (action === "add" || action === "change") {
|
||||
trackedAssets.add(filePath)
|
||||
} else if (action === "delete") {
|
||||
trackedAssets.delete(filePath)
|
||||
}
|
||||
clientRefresh()
|
||||
return
|
||||
}
|
||||
|
||||
if (action === "add" || action === "change") {
|
||||
toRebuild.add(filePath)
|
||||
} else if (action === "delete") {
|
||||
toRemove.add(filePath)
|
||||
}
|
||||
|
||||
const buildStart = new Date().getTime()
|
||||
buildData.lastBuildMs = buildStart
|
||||
const release = await mut.acquire()
|
||||
|
||||
// there's another build after us, release and let them do it
|
||||
if (buildData.lastBuildMs > buildStart) {
|
||||
release()
|
||||
return
|
||||
}
|
||||
|
||||
const perf = new PerfTimer()
|
||||
console.log(chalk.yellow("Detected change, rebuilding..."))
|
||||
try {
|
||||
const filesToRebuild = [...toRebuild].filter((fp) => !toRemove.has(fp))
|
||||
|
||||
const trackedSlugs = [...new Set([...contentMap.keys(), ...toRebuild, ...trackedAssets])]
|
||||
.filter((fp) => !toRemove.has(fp))
|
||||
.map((fp) => slugifyFilePath(path.posix.relative(argv.directory, fp) as FilePath))
|
||||
|
||||
ctx.allSlugs = [...new Set([...initialSlugs, ...trackedSlugs])]
|
||||
const parsedContent = await parseMarkdown(ctx, filesToRebuild)
|
||||
for (const content of parsedContent) {
|
||||
const [_tree, vfile] = content
|
||||
contentMap.set(vfile.data.filePath!, content)
|
||||
}
|
||||
|
||||
for (const fp of toRemove) {
|
||||
contentMap.delete(fp)
|
||||
}
|
||||
|
||||
const parsedFiles = [...contentMap.values()]
|
||||
const filteredContent = filterContent(ctx, parsedFiles)
|
||||
|
||||
// TODO: we can probably traverse the link graph to figure out what's safe to delete here
|
||||
// instead of just deleting everything
|
||||
await rimraf(path.join(argv.output, ".*"), { glob: true })
|
||||
await emitContent(ctx, filteredContent)
|
||||
console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
|
||||
} catch (err) {
|
||||
console.log(chalk.yellow(`Rebuild failed. Waiting on a change to fix the error...`))
|
||||
if (argv.verbose) {
|
||||
console.log(chalk.red(err))
|
||||
}
|
||||
}
|
||||
|
||||
release()
|
||||
clientRefresh()
|
||||
toRebuild.clear()
|
||||
toRemove.clear()
|
||||
}
|
||||
|
||||
export default async (argv: Argv, mut: Mutex, clientRefresh: () => void) => {
|
||||
try {
|
||||
return await buildQuartz(argv, mut, clientRefresh)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { ValidDateType } from "./components/Date"
|
||||
import { QuartzComponent } from "./components/types"
|
||||
import { ValidLocale } from "./i18n"
|
||||
import { PluginTypes } from "./plugins/types"
|
||||
import { Theme } from "./util/theme"
|
||||
|
||||
@ -7,6 +8,7 @@ export type Analytics =
|
||||
| null
|
||||
| {
|
||||
provider: "plausible"
|
||||
host?: string
|
||||
}
|
||||
| {
|
||||
provider: "google"
|
||||
@ -15,11 +17,16 @@ export type Analytics =
|
||||
| {
|
||||
provider: "umami"
|
||||
websiteId: string
|
||||
host?: string
|
||||
}
|
||||
| {
|
||||
provider: "postHog"
|
||||
}
|
||||
|
||||
| {
|
||||
provider: "goatcounter"
|
||||
websiteId: string
|
||||
host?: string
|
||||
scriptSrc?: string
|
||||
}
|
||||
|
||||
export interface GlobalConfiguration {
|
||||
pageTitle: string
|
||||
@ -38,6 +45,15 @@ export interface GlobalConfiguration {
|
||||
*/
|
||||
baseUrl?: string
|
||||
theme: Theme
|
||||
/**
|
||||
* Allow to translate the date in the language of your choice.
|
||||
* Also used for UI translation (default: en-US)
|
||||
* Need to be formated following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
|
||||
* The first part is the language (en) and the second part is the script/region (US)
|
||||
* Language Codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
|
||||
* Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
|
||||
*/
|
||||
locale: ValidLocale
|
||||
}
|
||||
|
||||
export interface QuartzConfig {
|
||||
|
||||
@ -71,6 +71,11 @@ export const BuildArgv = {
|
||||
default: false,
|
||||
describe: "run a local server to live-preview your Quartz",
|
||||
},
|
||||
fastRebuild: {
|
||||
boolean: true,
|
||||
default: false,
|
||||
describe: "[experimental] rebuild only the changed files",
|
||||
},
|
||||
baseDir: {
|
||||
string: true,
|
||||
default: "",
|
||||
|
||||
@ -113,7 +113,10 @@ export async function handleCreate(argv) {
|
||||
}
|
||||
}
|
||||
|
||||
await fs.promises.unlink(path.join(contentFolder, ".gitkeep"))
|
||||
const gitkeepPath = path.join(contentFolder, ".gitkeep")
|
||||
if (fs.existsSync(gitkeepPath)) {
|
||||
await fs.promises.unlink(gitkeepPath)
|
||||
}
|
||||
if (setupStrategy === "copy" || setupStrategy === "symlink") {
|
||||
let originalFolder = sourceDirectory
|
||||
|
||||
@ -165,22 +168,20 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
|
||||
// get a preferred link resolution strategy
|
||||
linkResolutionStrategy = exitIfCancel(
|
||||
await select({
|
||||
message: `Choose how Quartz should resolve links in your content. You can change this later in \`quartz.config.ts\`.`,
|
||||
message: `Choose how Quartz should resolve links in your content. This should match Obsidian's link format. You can change this later in \`quartz.config.ts\`.`,
|
||||
options: [
|
||||
{
|
||||
value: "absolute",
|
||||
label: "Treat links as absolute path",
|
||||
hint: "for content made for Quartz 3 and Hugo",
|
||||
},
|
||||
{
|
||||
value: "shortest",
|
||||
label: "Treat links as shortest path",
|
||||
hint: "for most Obsidian vaults",
|
||||
hint: "(default)",
|
||||
},
|
||||
{
|
||||
value: "absolute",
|
||||
label: "Treat links as absolute path",
|
||||
},
|
||||
{
|
||||
value: "relative",
|
||||
label: "Treat links as relative paths",
|
||||
hint: "for just normal Markdown files",
|
||||
},
|
||||
],
|
||||
}),
|
||||
@ -199,6 +200,7 @@ See the [documentation](https://quartz.jzhao.xyz) for how to get started.
|
||||
// setup remote
|
||||
execSync(
|
||||
`git remote show upstream || git remote add upstream https://github.com/jackyzha0/quartz.git`,
|
||||
{ stdio: "ignore" },
|
||||
)
|
||||
|
||||
outro(`You're all set! Not sure what to do next? Try:
|
||||
@ -255,6 +257,7 @@ export async function handleBuild(argv) {
|
||||
},
|
||||
write: false,
|
||||
bundle: true,
|
||||
minify: true,
|
||||
platform: "browser",
|
||||
format: "esm",
|
||||
})
|
||||
@ -344,7 +347,7 @@ export async function handleBuild(argv) {
|
||||
directoryListing: false,
|
||||
headers: [
|
||||
{
|
||||
source: "**/*.html",
|
||||
source: "**/*.*",
|
||||
headers: [{ key: "Content-Disposition", value: "inline" }],
|
||||
},
|
||||
],
|
||||
@ -447,7 +450,7 @@ export async function handleUpdate(argv) {
|
||||
try {
|
||||
gitPull(UPSTREAM_NAME, QUARTZ_SOURCE_BRANCH)
|
||||
} catch {
|
||||
console.log(chalk.red("An error occured above while pulling updates."))
|
||||
console.log(chalk.red("An error occurred above while pulling updates."))
|
||||
await popContentFolder(contentFolder)
|
||||
return
|
||||
}
|
||||
@ -519,7 +522,7 @@ export async function handleSync(argv) {
|
||||
try {
|
||||
gitPull(ORIGIN_NAME, QUARTZ_SOURCE_BRANCH)
|
||||
} catch {
|
||||
console.log(chalk.red("An error occured above while pulling updates."))
|
||||
console.log(chalk.red("An error occurred above while pulling updates."))
|
||||
await popContentFolder(contentFolder)
|
||||
return
|
||||
}
|
||||
@ -528,7 +531,7 @@ export async function handleSync(argv) {
|
||||
await popContentFolder(contentFolder)
|
||||
if (argv.push) {
|
||||
console.log("Pushing your changes")
|
||||
const res = spawnSync("git", ["push", "-f", ORIGIN_NAME, QUARTZ_SOURCE_BRANCH], {
|
||||
const res = spawnSync("git", ["push", "-uf", ORIGIN_NAME, QUARTZ_SOURCE_BRANCH], {
|
||||
stdio: "inherit",
|
||||
})
|
||||
if (res.status !== 0) {
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
|
||||
const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
|
||||
const title = fileData.frontmatter?.title
|
||||
if (title) {
|
||||
return <h1 class={`article-title ${displayClass ?? ""}`}>{title}</h1>
|
||||
return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
ArticleTitle.css = `
|
||||
.article-title {
|
||||
margin: 2rem 0 0 0;
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import style from "./styles/backlinks.scss"
|
||||
import { resolveRelative, simplifySlug } from "../util/path"
|
||||
import { i18n } from "../i18n"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
|
||||
const Backlinks: QuartzComponent = ({
|
||||
fileData,
|
||||
allFiles,
|
||||
displayClass,
|
||||
cfg,
|
||||
}: QuartzComponentProps) => {
|
||||
const slug = simplifySlug(fileData.slug!)
|
||||
const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
|
||||
return (
|
||||
<div class={`backlinks ${displayClass ?? ""}`}>
|
||||
<h3>Backlinks</h3>
|
||||
<div class={classNames(displayClass, "backlinks")}>
|
||||
<h3>{i18n(cfg.locale).components.backlinks.title}</h3>
|
||||
<ul class="overflow">
|
||||
{backlinkFiles.length > 0 ? (
|
||||
backlinkFiles.map((f) => (
|
||||
@ -18,7 +25,7 @@ function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li>No backlinks found</li>
|
||||
<li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// @ts-ignore
|
||||
import clipboardScript from "./scripts/clipboard.inline"
|
||||
import clipboardStyle from "./styles/clipboard.scss"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
|
||||
function Body({ children }: QuartzComponentProps) {
|
||||
const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
|
||||
return <div id="quartz-body">{children}</div>
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import breadcrumbsStyle from "./styles/breadcrumbs.scss"
|
||||
import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
|
||||
import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
type CrumbData = {
|
||||
displayName: string
|
||||
@ -18,15 +19,15 @@ interface BreadcrumbOptions {
|
||||
*/
|
||||
rootName: string
|
||||
/**
|
||||
* wether to look up frontmatter title for folders (could cause performance problems with big vaults)
|
||||
* Whether to look up frontmatter title for folders (could cause performance problems with big vaults)
|
||||
*/
|
||||
resolveFrontmatterTitle: boolean
|
||||
/**
|
||||
* Wether to display breadcrumbs on root `index.md`
|
||||
* Whether to display breadcrumbs on root `index.md`
|
||||
*/
|
||||
hideOnRoot: boolean
|
||||
/**
|
||||
* Wether to display the current page in the breadcrumbs.
|
||||
* Whether to display the current page in the breadcrumbs.
|
||||
*/
|
||||
showCurrentPage: boolean
|
||||
}
|
||||
@ -53,7 +54,11 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
|
||||
// computed index of folder name to its associated file data
|
||||
let folderIndex: Map<string, QuartzPluginData> | undefined
|
||||
|
||||
function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) {
|
||||
const Breadcrumbs: QuartzComponent = ({
|
||||
fileData,
|
||||
allFiles,
|
||||
displayClass,
|
||||
}: QuartzComponentProps) => {
|
||||
// Hide crumbs on root if enabled
|
||||
if (options.hideOnRoot && fileData.slug === "index") {
|
||||
return <></>
|
||||
@ -67,12 +72,9 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
|
||||
folderIndex = new Map()
|
||||
// construct the index for the first time
|
||||
for (const file of allFiles) {
|
||||
if (file.slug?.endsWith("index")) {
|
||||
const folderParts = file.filePath?.split("/")
|
||||
if (folderParts) {
|
||||
const folderName = folderParts[folderParts?.length - 2]
|
||||
folderIndex.set(folderName, file)
|
||||
}
|
||||
const folderParts = file.slug?.split("/")
|
||||
if (folderParts?.at(-1) === "index") {
|
||||
folderIndex.set(folderParts.slice(0, -1).join("/"), file)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -80,35 +82,48 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
|
||||
// Split slug into hierarchy/parts
|
||||
const slugParts = fileData.slug?.split("/")
|
||||
if (slugParts) {
|
||||
// is tag breadcrumb?
|
||||
const isTagPath = slugParts[0] === "tags"
|
||||
|
||||
// full path until current part
|
||||
let currentPath = ""
|
||||
|
||||
for (let i = 0; i < slugParts.length - 1; i++) {
|
||||
let curPathSegment = slugParts[i]
|
||||
|
||||
// Try to resolve frontmatter folder title
|
||||
const currentFile = folderIndex?.get(curPathSegment)
|
||||
const currentFile = folderIndex?.get(slugParts.slice(0, i + 1).join("/"))
|
||||
if (currentFile) {
|
||||
curPathSegment = currentFile.frontmatter!.title
|
||||
const title = currentFile.frontmatter!.title
|
||||
if (title !== "index") {
|
||||
curPathSegment = title
|
||||
}
|
||||
}
|
||||
|
||||
// Add current slug to full path
|
||||
currentPath += slugParts[i] + "/"
|
||||
currentPath = joinSegments(currentPath, slugParts[i])
|
||||
const includeTrailingSlash = !isTagPath || i < 1
|
||||
|
||||
// Format and add current crumb
|
||||
const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug)
|
||||
const crumb = formatCrumb(
|
||||
curPathSegment,
|
||||
fileData.slug!,
|
||||
(currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
|
||||
)
|
||||
crumbs.push(crumb)
|
||||
}
|
||||
|
||||
// Add current file to crumb (can directly use frontmatter title)
|
||||
if (options.showCurrentPage) {
|
||||
if (options.showCurrentPage && slugParts.at(-1) !== "index") {
|
||||
crumbs.push({
|
||||
displayName: fileData.frontmatter!.title,
|
||||
path: "",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
|
||||
<nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
|
||||
{crumbs.map((crumb, index) => (
|
||||
<div class="breadcrumb-element">
|
||||
<a href={crumb.path}>{crumb.displayName}</a>
|
||||
@ -119,5 +134,6 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
|
||||
)
|
||||
}
|
||||
Breadcrumbs.css = breadcrumbsStyle
|
||||
|
||||
return Breadcrumbs
|
||||
}) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -1,23 +1,48 @@
|
||||
import { formatDate, getDate } from "./Date"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import readingTime from "reading-time"
|
||||
import { classNames } from "../util/lang"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
export default (() => {
|
||||
function ContentMetadata({ cfg, fileData }: QuartzComponentProps) {
|
||||
interface ContentMetaOptions {
|
||||
/**
|
||||
* Whether to display reading time
|
||||
*/
|
||||
showReadingTime: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: ContentMetaOptions = {
|
||||
showReadingTime: true,
|
||||
}
|
||||
|
||||
export default ((opts?: Partial<ContentMetaOptions>) => {
|
||||
// Merge options with defaults
|
||||
const options: ContentMetaOptions = { ...defaultOptions, ...opts }
|
||||
|
||||
function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
|
||||
const text = fileData.text
|
||||
|
||||
if (text && fileData.frontmatter.title != "Home") {
|
||||
const segments: string[] = []
|
||||
const { text: timeTaken, words: _words } = readingTime(text)
|
||||
|
||||
if (fileData.dates) {
|
||||
const createdDate = formatDate(getDate(cfg, fileData)!)
|
||||
const modifiedDate = formatDate(fileData.dates.modified) // Assuming fileData contains a 'dates' object with 'modified' property
|
||||
const createdDate = formatDate(getDate(cfg, fileData)!, cfg.locale)
|
||||
const modifiedDate = formatDate(fileData.dates.modified, cfg.locale) // Assuming fileData contains a 'dates' object with 'modified' property
|
||||
|
||||
segments.push(`Created: ${createdDate}, Modified: ${modifiedDate}`)
|
||||
// segments.push(`Created: ${createdDate}, Modified: ${modifiedDate}`)
|
||||
segments.push(createdDate)
|
||||
}
|
||||
|
||||
// segments.push(timeTaken)
|
||||
return <div className="content-meta"><br />{segments.join(", ")}<br />{timeTaken}</div>
|
||||
// Display reading time if enabled
|
||||
if (options.showReadingTime) {
|
||||
const { minutes, words: _words } = readingTime(text)
|
||||
const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
|
||||
minutes: Math.ceil(minutes),
|
||||
})
|
||||
segments.push(displayedTime)
|
||||
}
|
||||
|
||||
return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
@ -30,4 +55,4 @@ export default (() => {
|
||||
}
|
||||
`
|
||||
return ContentMetadata
|
||||
}) satisfies QuartzComponentConstructor
|
||||
}) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -3,11 +3,13 @@
|
||||
// see: https://v8.dev/features/modules#defer
|
||||
import darkmodeScript from "./scripts/darkmode.inline"
|
||||
import styles from "./styles/darkmode.scss"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { i18n } from "../i18n"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
function Darkmode({ displayClass }: QuartzComponentProps) {
|
||||
const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
|
||||
return (
|
||||
<div class={`darkmode ${displayClass ?? ""}`}>
|
||||
<div class={classNames(displayClass, "darkmode")}>
|
||||
<input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
|
||||
<label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
|
||||
<svg
|
||||
@ -18,10 +20,10 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 35 35"
|
||||
style="enable-background:new 0 0 35 35;"
|
||||
style="enable-background:new 0 0 35 35"
|
||||
xmlSpace="preserve"
|
||||
>
|
||||
<title>Light mode</title>
|
||||
<title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
|
||||
<path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
@ -34,10 +36,10 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 100"
|
||||
style="enable-background='new 0 0 100 100'"
|
||||
style="enable-background:new 0 0 100 100"
|
||||
xmlSpace="preserve"
|
||||
>
|
||||
<title>Dark mode</title>
|
||||
<title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
|
||||
<path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571 C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23 c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369 c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65 c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
import { ValidLocale } from "../i18n"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
|
||||
interface Props {
|
||||
date: Date
|
||||
locale?: ValidLocale
|
||||
}
|
||||
|
||||
export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
|
||||
@ -16,14 +18,14 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
|
||||
return data.dates?.[cfg.defaultDateType]
|
||||
}
|
||||
|
||||
export function formatDate(d: Date): string {
|
||||
return d.toLocaleDateString("en-US", {
|
||||
export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
|
||||
return d.toLocaleDateString(locale, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
export function Date({ date }: Props) {
|
||||
return <>{formatDate(date)}</>
|
||||
export function Date({ date, locale }: Props) {
|
||||
return <>{formatDate(date, locale)}</>
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
|
||||
export default ((component?: QuartzComponent) => {
|
||||
if (component) {
|
||||
const Component = component
|
||||
function DesktopOnly(props: QuartzComponentProps) {
|
||||
const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
|
||||
return <Component displayClass="desktop-only" {...props} />
|
||||
}
|
||||
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import explorerStyle from "./styles/explorer.scss"
|
||||
|
||||
// @ts-ignore
|
||||
import script from "./scripts/explorer.inline"
|
||||
import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { classNames } from "../util/lang"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
// Options interface defined in `ExplorerNode` to avoid circular dependency
|
||||
const defaultOptions = {
|
||||
title: "Explorer",
|
||||
folderClickBehavior: "collapse",
|
||||
folderDefaultState: "collapsed",
|
||||
useSavedState: true,
|
||||
mapFn: (node) => {
|
||||
return node
|
||||
},
|
||||
sortFn: (a, b) => {
|
||||
// Sort order: folders first, then files. Sort folders and files alphabetically
|
||||
if ((!a.file && !b.file) || (a.file && b.file)) {
|
||||
@ -22,6 +26,7 @@ const defaultOptions = {
|
||||
sensitivity: "base",
|
||||
})
|
||||
}
|
||||
|
||||
if (a.file && !b.file) {
|
||||
return 1
|
||||
} else {
|
||||
@ -41,52 +46,44 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
let jsonTree: string
|
||||
|
||||
function constructFileTree(allFiles: QuartzPluginData[]) {
|
||||
if (!fileTree) {
|
||||
// Construct tree from allFiles
|
||||
fileTree = new FileNode("")
|
||||
allFiles.forEach((file) => fileTree.add(file, 1))
|
||||
if (fileTree) {
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* Keys of this object must match corresponding function name of `FileNode`,
|
||||
* while values must be the argument that will be passed to the function.
|
||||
*
|
||||
* e.g. entry for FileNode.sort: `sort: opts.sortFn` (value is sort function from options)
|
||||
*/
|
||||
const functions = {
|
||||
map: opts.mapFn,
|
||||
sort: opts.sortFn,
|
||||
filter: opts.filterFn,
|
||||
}
|
||||
// Construct tree from allFiles
|
||||
fileTree = new FileNode("")
|
||||
allFiles.forEach((file) => fileTree.add(file))
|
||||
|
||||
// Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
|
||||
if (opts.order) {
|
||||
// Order is important, use loop with index instead of order.map()
|
||||
for (let i = 0; i < opts.order.length; i++) {
|
||||
const functionName = opts.order[i]
|
||||
if (functions[functionName]) {
|
||||
// for every entry in order, call matching function in FileNode and pass matching argument
|
||||
// e.g. i = 0; functionName = "filter"
|
||||
// converted to: (if opts.filterFn) => fileTree.filter(opts.filterFn)
|
||||
|
||||
// @ts-ignore
|
||||
// typescript cant statically check these dynamic references, so manually make sure reference is valid and ignore warning
|
||||
fileTree[functionName].call(fileTree, functions[functionName])
|
||||
}
|
||||
// Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
|
||||
if (opts.order) {
|
||||
// Order is important, use loop with index instead of order.map()
|
||||
for (let i = 0; i < opts.order.length; i++) {
|
||||
const functionName = opts.order[i]
|
||||
if (functionName === "map") {
|
||||
fileTree.map(opts.mapFn)
|
||||
} else if (functionName === "sort") {
|
||||
fileTree.sort(opts.sortFn)
|
||||
} else if (functionName === "filter") {
|
||||
fileTree.filter(opts.filterFn)
|
||||
}
|
||||
}
|
||||
|
||||
// Get all folders of tree. Initialize with collapsed state
|
||||
const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
|
||||
|
||||
// Stringify to pass json tree as data attribute ([data-tree])
|
||||
jsonTree = JSON.stringify(folders)
|
||||
}
|
||||
|
||||
// Get all folders of tree. Initialize with collapsed state
|
||||
// Stringify to pass json tree as data attribute ([data-tree])
|
||||
const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
|
||||
jsonTree = JSON.stringify(folders)
|
||||
}
|
||||
|
||||
function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
|
||||
const Explorer: QuartzComponent = ({
|
||||
cfg,
|
||||
allFiles,
|
||||
displayClass,
|
||||
fileData,
|
||||
}: QuartzComponentProps) => {
|
||||
constructFileTree(allFiles)
|
||||
return (
|
||||
<div class={`explorer ${displayClass ?? ""}`}>
|
||||
<div class={classNames(displayClass, "explorer")}>
|
||||
<button
|
||||
type="button"
|
||||
id="explorer"
|
||||
@ -95,7 +92,7 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
data-savestate={opts.useSavedState}
|
||||
data-tree={jsonTree}
|
||||
>
|
||||
<h1>{opts.title}</h1>
|
||||
<h1>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h1>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
@ -120,6 +117,7 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Explorer.css = explorerStyle
|
||||
Explorer.afterDOMLoaded = script
|
||||
return Explorer
|
||||
|
||||
@ -1,18 +1,25 @@
|
||||
// @ts-ignore
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { resolveRelative } from "../util/path"
|
||||
import {
|
||||
joinSegments,
|
||||
resolveRelative,
|
||||
clone,
|
||||
simplifySlug,
|
||||
SimpleSlug,
|
||||
FilePath,
|
||||
} from "../util/path"
|
||||
|
||||
type OrderEntries = "sort" | "filter" | "map"
|
||||
|
||||
export interface Options {
|
||||
title: string
|
||||
title?: string
|
||||
folderDefaultState: "collapsed" | "open"
|
||||
folderClickBehavior: "collapse" | "link"
|
||||
useSavedState: boolean
|
||||
sortFn: (a: FileNode, b: FileNode) => number
|
||||
filterFn?: (node: FileNode) => boolean
|
||||
mapFn?: (node: FileNode) => void
|
||||
order?: OrderEntries[]
|
||||
filterFn: (node: FileNode) => boolean
|
||||
mapFn: (node: FileNode) => void
|
||||
order: OrderEntries[]
|
||||
}
|
||||
|
||||
type DataWrapper = {
|
||||
@ -25,59 +32,74 @@ export type FolderState = {
|
||||
collapsed: boolean
|
||||
}
|
||||
|
||||
function getPathSegment(fp: FilePath | undefined, idx: number): string | undefined {
|
||||
if (!fp) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
return fp.split("/").at(idx)
|
||||
}
|
||||
|
||||
// Structure to add all files into a tree
|
||||
export class FileNode {
|
||||
children: FileNode[]
|
||||
name: string
|
||||
children: Array<FileNode>
|
||||
name: string // this is the slug segment
|
||||
displayName: string
|
||||
file: QuartzPluginData | null
|
||||
depth: number
|
||||
|
||||
constructor(name: string, file?: QuartzPluginData, depth?: number) {
|
||||
constructor(slugSegment: string, displayName?: string, file?: QuartzPluginData, depth?: number) {
|
||||
this.children = []
|
||||
this.name = name
|
||||
this.displayName = name
|
||||
this.file = file ? structuredClone(file) : null
|
||||
this.name = slugSegment
|
||||
this.displayName = displayName ?? file?.frontmatter?.title ?? slugSegment
|
||||
this.file = file ? clone(file) : null
|
||||
this.depth = depth ?? 0
|
||||
}
|
||||
|
||||
private insert(file: DataWrapper) {
|
||||
if (file.path.length === 1) {
|
||||
if (file.path[0] !== "index.md") {
|
||||
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
|
||||
} else {
|
||||
const title = file.file.frontmatter?.title
|
||||
if (title && title !== "index" && file.path[0] === "index.md") {
|
||||
private insert(fileData: DataWrapper) {
|
||||
if (fileData.path.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const nextSegment = fileData.path[0]
|
||||
|
||||
// base case, insert here
|
||||
if (fileData.path.length === 1) {
|
||||
if (nextSegment === "") {
|
||||
// index case (we are the root and we just found index.md), set our data appropriately
|
||||
const title = fileData.file.frontmatter?.title
|
||||
if (title && title !== "index") {
|
||||
this.displayName = title
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const next = file.path[0]
|
||||
file.path = file.path.splice(1)
|
||||
for (const child of this.children) {
|
||||
if (child.name === next) {
|
||||
child.insert(file)
|
||||
return
|
||||
}
|
||||
} else {
|
||||
// direct child
|
||||
this.children.push(new FileNode(nextSegment, undefined, fileData.file, this.depth + 1))
|
||||
}
|
||||
|
||||
const newChild = new FileNode(next, undefined, this.depth + 1)
|
||||
newChild.insert(file)
|
||||
this.children.push(newChild)
|
||||
return
|
||||
}
|
||||
|
||||
// find the right child to insert into
|
||||
fileData.path = fileData.path.splice(1)
|
||||
const child = this.children.find((c) => c.name === nextSegment)
|
||||
if (child) {
|
||||
child.insert(fileData)
|
||||
return
|
||||
}
|
||||
|
||||
const newChild = new FileNode(
|
||||
nextSegment,
|
||||
getPathSegment(fileData.file.relativePath, this.depth),
|
||||
undefined,
|
||||
this.depth + 1,
|
||||
)
|
||||
newChild.insert(fileData)
|
||||
this.children.push(newChild)
|
||||
}
|
||||
|
||||
// Add new file to tree
|
||||
add(file: QuartzPluginData, splice: number = 0) {
|
||||
this.insert({ file, path: file.filePath!.split("/").splice(splice) })
|
||||
}
|
||||
|
||||
// Print tree structure (for debugging)
|
||||
print(depth: number = 0) {
|
||||
let folderChar = ""
|
||||
if (!this.file) folderChar = "|"
|
||||
console.log("-".repeat(depth), folderChar, this.name, this.depth)
|
||||
this.children.forEach((e) => e.print(depth + 1))
|
||||
add(file: QuartzPluginData) {
|
||||
this.insert({ file: file, path: simplifySlug(file.slug!).split("/") })
|
||||
}
|
||||
|
||||
/**
|
||||
@ -95,7 +117,6 @@ export class FileNode {
|
||||
*/
|
||||
map(mapFn: (node: FileNode) => void) {
|
||||
mapFn(this)
|
||||
|
||||
this.children.forEach((child) => child.map(mapFn))
|
||||
}
|
||||
|
||||
@ -110,16 +131,16 @@ export class FileNode {
|
||||
|
||||
const traverse = (node: FileNode, currentPath: string) => {
|
||||
if (!node.file) {
|
||||
const folderPath = currentPath + (currentPath ? "/" : "") + node.name
|
||||
const folderPath = joinSegments(currentPath, node.name)
|
||||
if (folderPath !== "") {
|
||||
folderPaths.push({ path: folderPath, collapsed })
|
||||
}
|
||||
|
||||
node.children.forEach((child) => traverse(child, folderPath))
|
||||
}
|
||||
}
|
||||
|
||||
traverse(this, "")
|
||||
|
||||
return folderPaths
|
||||
}
|
||||
|
||||
@ -147,14 +168,13 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
||||
const isDefaultOpen = opts.folderDefaultState === "open"
|
||||
|
||||
// Calculate current folderPath
|
||||
let pathOld = fullPath ? fullPath : ""
|
||||
let folderPath = ""
|
||||
if (node.name !== "") {
|
||||
folderPath = `${pathOld}/${node.name}`
|
||||
folderPath = joinSegments(fullPath ?? "", node.name)
|
||||
}
|
||||
|
||||
return (
|
||||
<li>
|
||||
<>
|
||||
{node.file ? (
|
||||
// Single file node
|
||||
<li key={node.file.slug}>
|
||||
@ -163,7 +183,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
||||
</a>
|
||||
</li>
|
||||
) : (
|
||||
<div>
|
||||
<li>
|
||||
{node.name !== "" && (
|
||||
// Node with entire folder
|
||||
// Render svg button + folder name, then children
|
||||
@ -185,12 +205,16 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
||||
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
|
||||
<div key={node.name} data-folderpath={folderPath}>
|
||||
{folderBehavior === "link" ? (
|
||||
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
|
||||
<a
|
||||
href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
|
||||
data-for={node.name}
|
||||
class="folder-title"
|
||||
>
|
||||
{node.displayName}
|
||||
</a>
|
||||
) : (
|
||||
<button class="folder-button">
|
||||
<p class="folder-title">{node.displayName}</p>
|
||||
<span class="folder-title">{node.displayName}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@ -217,8 +241,8 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import style from "./styles/footer.scss"
|
||||
import { version } from "../../package.json"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
interface Options {
|
||||
links: Record<string, string>
|
||||
}
|
||||
|
||||
export default ((opts?: Options) => {
|
||||
function Footer({ displayClass }: QuartzComponentProps) {
|
||||
const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
|
||||
const year = new Date().getFullYear()
|
||||
const links = opts?.links ?? []
|
||||
return (
|
||||
<footer class={`${displayClass ?? ""}`}>
|
||||
<hr />
|
||||
<p>
|
||||
Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
|
||||
{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]) => (
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
// @ts-ignore
|
||||
import script from "./scripts/graph.inline"
|
||||
import style from "./styles/graph.scss"
|
||||
import { i18n } from "../i18n"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
export interface D3Config {
|
||||
drag: boolean
|
||||
@ -15,6 +17,7 @@ export interface D3Config {
|
||||
opacityScale: number
|
||||
removeTags: string[]
|
||||
showTags: boolean
|
||||
focusOnHover?: boolean
|
||||
}
|
||||
|
||||
interface GraphOptions {
|
||||
@ -35,6 +38,7 @@ const defaultOptions: GraphOptions = {
|
||||
opacityScale: 1,
|
||||
showTags: true,
|
||||
removeTags: [],
|
||||
focusOnHover: false,
|
||||
},
|
||||
globalGraph: {
|
||||
drag: true,
|
||||
@ -48,16 +52,17 @@ const defaultOptions: GraphOptions = {
|
||||
opacityScale: 1,
|
||||
showTags: true,
|
||||
removeTags: [],
|
||||
focusOnHover: true,
|
||||
},
|
||||
}
|
||||
|
||||
export default ((opts?: GraphOptions) => {
|
||||
function Graph({ displayClass }: QuartzComponentProps) {
|
||||
const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
|
||||
const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
|
||||
const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
|
||||
return (
|
||||
<div class={`graph ${displayClass ?? ""}`}>
|
||||
<h3>Graph View</h3>
|
||||
<div class={classNames(displayClass, "graph")}>
|
||||
<h3>{i18n(cfg.locale).components.graph.title}</h3>
|
||||
<div class="graph-outer">
|
||||
<div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
|
||||
<svg
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
|
||||
import { i18n } from "../i18n"
|
||||
import { FullSlug, joinSegments, pathToRoot } from "../util/path"
|
||||
import { JSResourceToScriptElement } from "../util/resources"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
|
||||
export default (() => {
|
||||
function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
|
||||
const title = fileData.frontmatter?.title ?? "Untitled"
|
||||
const description = fileData.description?.trim() ?? "No description provided"
|
||||
const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
|
||||
const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
|
||||
const description =
|
||||
fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
|
||||
const { css, js } = externalResources
|
||||
|
||||
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
|
||||
@ -19,6 +21,12 @@ export default (() => {
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<meta charSet="utf-8" />
|
||||
{cfg.theme.cdnCaching && (
|
||||
<>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
</>
|
||||
)}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
@ -28,8 +36,6 @@ export default (() => {
|
||||
<link rel="icon" href={iconPath} />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="generator" content="Quartz" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
{css.map((href) => (
|
||||
<link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
|
||||
))}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
|
||||
function Header({ children }: QuartzComponentProps) {
|
||||
const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
|
||||
return children.length > 0 ? <header>{children}</header> : null
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
|
||||
export default ((component?: QuartzComponent) => {
|
||||
if (component) {
|
||||
const Component = component
|
||||
function MobileOnly(props: QuartzComponentProps) {
|
||||
const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
|
||||
return <Component displayClass="mobile-only" {...props} />
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FullSlug, resolveRelative } from "../util/path"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { Date, getDate } from "./Date"
|
||||
import { QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentProps } from "./types"
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
|
||||
export function byDateAndAlphabetical(
|
||||
@ -29,7 +29,7 @@ type Props = {
|
||||
limit?: number
|
||||
} & QuartzComponentProps
|
||||
|
||||
export function PageList({ cfg, fileData, allFiles, limit }: Props) {
|
||||
export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => {
|
||||
let list = allFiles.sort(byDateAndAlphabetical(cfg))
|
||||
if (limit) {
|
||||
list = list.slice(0, limit)
|
||||
@ -46,7 +46,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
|
||||
<div class="section">
|
||||
{page.dates && (
|
||||
<p class="meta">
|
||||
<Date date={getDate(cfg, page)!} />
|
||||
<Date date={getDate(cfg, page)!} locale={cfg.locale} />
|
||||
</p>
|
||||
)}
|
||||
<div class="desc">
|
||||
@ -63,7 +63,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
|
||||
class="internal tag-link"
|
||||
href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
|
||||
>
|
||||
#{tag}
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import { pathToRoot } from "../util/path"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { classNames } from "../util/lang"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
|
||||
const title = cfg?.pageTitle ?? "Untitled Quartz"
|
||||
const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
|
||||
const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
|
||||
const baseDir = pathToRoot(fileData.slug!)
|
||||
return (
|
||||
<h1 class={`page-title ${displayClass ?? ""}`}>
|
||||
<h1 class={classNames(displayClass, "page-title")}>
|
||||
<a href={baseDir}>{title}</a>
|
||||
</h1>
|
||||
)
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { byDateAndAlphabetical } from "./PageList"
|
||||
import style from "./styles/recentNotes.scss"
|
||||
import { Date, getDate } from "./Date"
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
import { i18n } from "../i18n"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
interface Options {
|
||||
title: string
|
||||
title?: string
|
||||
limit: number
|
||||
linkToMore: SimpleSlug | false
|
||||
filter: (f: QuartzPluginData) => boolean
|
||||
@ -15,7 +17,6 @@ interface Options {
|
||||
}
|
||||
|
||||
const defaultOptions = (cfg: GlobalConfiguration): Options => ({
|
||||
title: "Recent Notes",
|
||||
limit: 3,
|
||||
linkToMore: false,
|
||||
filter: () => true,
|
||||
@ -23,16 +24,21 @@ const defaultOptions = (cfg: GlobalConfiguration): Options => ({
|
||||
})
|
||||
|
||||
export default ((userOpts?: Partial<Options>) => {
|
||||
function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
|
||||
const RecentNotes: QuartzComponent = ({
|
||||
allFiles,
|
||||
fileData,
|
||||
displayClass,
|
||||
cfg,
|
||||
}: QuartzComponentProps) => {
|
||||
const opts = { ...defaultOptions(cfg), ...userOpts }
|
||||
const pages = allFiles.filter(opts.filter).sort(opts.sort)
|
||||
const remaining = Math.max(0, pages.length - opts.limit)
|
||||
return (
|
||||
<div class={`recent-notes ${displayClass ?? ""}`}>
|
||||
<h3>{opts.title}</h3>
|
||||
<div class={classNames(displayClass, "recent-notes")}>
|
||||
<h3>{opts.title ?? i18n(cfg.locale).components.recentNotes.title}</h3>
|
||||
<ul class="recent-ul">
|
||||
{pages.slice(0, opts.limit).map((page) => {
|
||||
const title = page.frontmatter?.title
|
||||
const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
|
||||
const tags = page.frontmatter?.tags ?? []
|
||||
|
||||
return (
|
||||
@ -47,7 +53,7 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
</div>
|
||||
{page.dates && (
|
||||
<p class="meta">
|
||||
<Date date={getDate(cfg, page)!} />
|
||||
<Date date={getDate(cfg, page)!} locale={cfg.locale} />
|
||||
</p>
|
||||
)}
|
||||
<ul class="tags">
|
||||
@ -57,7 +63,7 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
class="internal tag-link"
|
||||
href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
|
||||
>
|
||||
#{tag}
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
@ -69,7 +75,9 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
</ul>
|
||||
{opts.linkToMore && remaining > 0 && (
|
||||
<p>
|
||||
<a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
|
||||
<a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
|
||||
{i18n(cfg.locale).components.recentNotes.seeRemainingMore({ remaining })}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import style from "./styles/search.scss"
|
||||
// @ts-ignore
|
||||
import script from "./scripts/search.inline"
|
||||
import { classNames } from "../util/lang"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
export default (() => {
|
||||
function Search({ displayClass }: QuartzComponentProps) {
|
||||
export interface SearchOptions {
|
||||
enablePreview: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: SearchOptions = {
|
||||
enablePreview: true,
|
||||
}
|
||||
|
||||
export default ((userOpts?: Partial<SearchOptions>) => {
|
||||
const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
|
||||
return (
|
||||
<div class={`search ${displayClass ?? ""}`}>
|
||||
<div class={classNames(displayClass, "search")}>
|
||||
<div id="search-icon">
|
||||
<p>Search</p>
|
||||
<p>{i18n(cfg.locale).components.search.title}</p>
|
||||
<div></div>
|
||||
{/* <svg */}
|
||||
{/* tabIndex={0} */}
|
||||
@ -32,10 +44,10 @@ export default (() => {
|
||||
id="search-bar"
|
||||
name="search"
|
||||
type="text"
|
||||
aria-label="Search for something"
|
||||
placeholder="Search for something"
|
||||
aria-label={searchPlaceholder}
|
||||
placeholder={searchPlaceholder}
|
||||
/>
|
||||
<div id="results-container"></div>
|
||||
<div id="search-layout" data-preview={opts.enablePreview}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
function Spacer({ displayClass }: QuartzComponentProps) {
|
||||
return <div class={`spacer ${displayClass ?? ""}`}></div>
|
||||
return <div class={classNames(displayClass, "spacer")}></div>
|
||||
}
|
||||
|
||||
export default (() => Spacer) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import legacyStyle from "./styles/legacyToc.scss"
|
||||
import modernStyle from "./styles/toc.scss"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
// @ts-ignore
|
||||
import script from "./scripts/toc.inline"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
interface Options {
|
||||
layout: "modern" | "legacy"
|
||||
@ -13,15 +15,19 @@ const defaultOptions: Options = {
|
||||
layout: "modern",
|
||||
}
|
||||
|
||||
function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
|
||||
const TableOfContents: QuartzComponent = ({
|
||||
fileData,
|
||||
displayClass,
|
||||
cfg,
|
||||
}: QuartzComponentProps) => {
|
||||
if (!fileData.toc) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={`toc ${displayClass ?? ""}`}>
|
||||
<div class={classNames(displayClass, "toc")}>
|
||||
<button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
|
||||
<h3>Table of Contents</h3>
|
||||
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
@ -54,15 +60,14 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
|
||||
TableOfContents.css = modernStyle
|
||||
TableOfContents.afterDOMLoaded = script
|
||||
|
||||
function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
|
||||
const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
|
||||
if (!fileData.toc) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<details id="toc" open={!fileData.collapseToc}>
|
||||
<summary>
|
||||
<h3>Table of Contents</h3>
|
||||
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
|
||||
</summary>
|
||||
<ul>
|
||||
{fileData.toc.map((tocEntry) => (
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import { pathToRoot, slugTag } from "../util/path"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
import { classNames } from "../util/lang"
|
||||
|
||||
function TagList({ fileData, displayClass }: QuartzComponentProps) {
|
||||
const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
|
||||
const tags = fileData.frontmatter?.tags
|
||||
const baseDir = pathToRoot(fileData.slug!)
|
||||
if (tags && tags.length > 0) {
|
||||
return (
|
||||
<ul class={`tags ${displayClass ?? ""}`}>
|
||||
<ul class={classNames(displayClass, "tags")}>
|
||||
{tags.map((tag) => {
|
||||
const display = `#${tag}`
|
||||
const linkDest = baseDir + `/tags/${slugTag(tag)}`
|
||||
return (
|
||||
<li>
|
||||
<a href={linkDest} class="internal tag-link">
|
||||
{display}
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { QuartzComponentConstructor } from "../types"
|
||||
import { i18n } from "../../i18n"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
|
||||
function NotFound() {
|
||||
const NotFound: QuartzComponent = ({ cfg }: QuartzComponentProps) => {
|
||||
return (
|
||||
<article class="popover-hint">
|
||||
<h1>404</h1>
|
||||
<p>Either this page is private or doesn't exist.</p>
|
||||
<p>{i18n(cfg.locale).pages.error.notFound}</p>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { htmlToJsx } from "../../util/jsx"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
|
||||
function Content({ fileData, tree }: QuartzComponentProps) {
|
||||
const Content: QuartzComponent = ({ fileData, tree }: QuartzComponentProps) => {
|
||||
const content = htmlToJsx(fileData.filePath!, tree)
|
||||
return <article class="popover-hint">{content}</article>
|
||||
const classes: string[] = fileData.frontmatter?.cssclasses ?? []
|
||||
const classString = ["popover-hint", ...classes].join(" ")
|
||||
return <article class={classString}>{content}</article>
|
||||
}
|
||||
|
||||
export default (() => Content) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -1,47 +1,71 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
import path from "path"
|
||||
|
||||
import style from "../styles/listPage.scss"
|
||||
import { PageList } from "../PageList"
|
||||
import { _stripSlashes, simplifySlug } from "../../util/path"
|
||||
import { stripSlashes, simplifySlug } from "../../util/path"
|
||||
import { Root } from "hast"
|
||||
import { pluralize } from "../../util/lang"
|
||||
import { htmlToJsx } from "../../util/jsx"
|
||||
import { i18n } from "../../i18n"
|
||||
|
||||
function FolderContent(props: QuartzComponentProps) {
|
||||
const { tree, fileData, allFiles } = props
|
||||
const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
|
||||
const allPagesInFolder = allFiles.filter((file) => {
|
||||
const fileSlug = _stripSlashes(simplifySlug(file.slug!))
|
||||
const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
|
||||
const folderParts = folderSlug.split(path.posix.sep)
|
||||
const fileParts = fileSlug.split(path.posix.sep)
|
||||
const isDirectChild = fileParts.length === folderParts.length + 1
|
||||
return prefixed && isDirectChild
|
||||
})
|
||||
|
||||
const listProps = {
|
||||
...props,
|
||||
allFiles: allPagesInFolder,
|
||||
}
|
||||
|
||||
const content =
|
||||
(tree as Root).children.length === 0
|
||||
? fileData.description
|
||||
: htmlToJsx(fileData.filePath!, tree)
|
||||
|
||||
return (
|
||||
<div class="popover-hint">
|
||||
<article>
|
||||
<p>{content}</p>
|
||||
</article>
|
||||
<p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
interface FolderContentOptions {
|
||||
/**
|
||||
* Whether to display number of folders
|
||||
*/
|
||||
showFolderCount: boolean
|
||||
}
|
||||
|
||||
FolderContent.css = style + PageList.css
|
||||
export default (() => FolderContent) satisfies QuartzComponentConstructor
|
||||
const defaultOptions: FolderContentOptions = {
|
||||
showFolderCount: true,
|
||||
}
|
||||
|
||||
export default ((opts?: Partial<FolderContentOptions>) => {
|
||||
const options: FolderContentOptions = { ...defaultOptions, ...opts }
|
||||
|
||||
const FolderContent: QuartzComponent = (props: QuartzComponentProps) => {
|
||||
const { tree, fileData, allFiles, cfg } = props
|
||||
const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
|
||||
const allPagesInFolder = allFiles.filter((file) => {
|
||||
const fileSlug = stripSlashes(simplifySlug(file.slug!))
|
||||
const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
|
||||
const folderParts = folderSlug.split(path.posix.sep)
|
||||
const fileParts = fileSlug.split(path.posix.sep)
|
||||
const isDirectChild = fileParts.length === folderParts.length + 1
|
||||
return prefixed && isDirectChild
|
||||
})
|
||||
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
|
||||
const classes = ["popover-hint", ...cssClasses].join(" ")
|
||||
const listProps = {
|
||||
...props,
|
||||
allFiles: allPagesInFolder,
|
||||
}
|
||||
|
||||
const content =
|
||||
(tree as Root).children.length === 0
|
||||
? fileData.description
|
||||
: htmlToJsx(fileData.filePath!, tree)
|
||||
|
||||
return (
|
||||
<div class={classes}>
|
||||
<article>
|
||||
<p>{content}</p>
|
||||
</article>
|
||||
<div class="page-listing">
|
||||
{options.showFolderCount && (
|
||||
<p>
|
||||
{i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
|
||||
count: allPagesInFolder.length,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
FolderContent.css = style + PageList.css
|
||||
return FolderContent
|
||||
}) satisfies QuartzComponentConstructor
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
|
||||
import style from "../styles/listPage.scss"
|
||||
import { PageList } from "../PageList"
|
||||
import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
|
||||
import { QuartzPluginData } from "../../plugins/vfile"
|
||||
import { Root } from "hast"
|
||||
import { pluralize } from "../../util/lang"
|
||||
import { htmlToJsx } from "../../util/jsx"
|
||||
import { i18n } from "../../i18n"
|
||||
|
||||
const numPages = 10
|
||||
function TagContent(props: QuartzComponentProps) {
|
||||
const { tree, fileData, allFiles } = props
|
||||
const TagContent: QuartzComponent = (props: QuartzComponentProps) => {
|
||||
const { tree, fileData, allFiles, cfg } = props
|
||||
const slug = fileData.slug
|
||||
|
||||
if (!(slug?.startsWith("tags/") || slug === "tags")) {
|
||||
@ -26,20 +26,24 @@ function TagContent(props: QuartzComponentProps) {
|
||||
(tree as Root).children.length === 0
|
||||
? fileData.description
|
||||
: htmlToJsx(fileData.filePath!, tree)
|
||||
|
||||
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
|
||||
const classes = ["popover-hint", ...cssClasses].join(" ")
|
||||
if (tag === "/") {
|
||||
const tags = [...new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))]
|
||||
const tags = [
|
||||
...new Set(
|
||||
allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
|
||||
),
|
||||
].sort((a, b) => a.localeCompare(b))
|
||||
const tagItemMap: Map<string, QuartzPluginData[]> = new Map()
|
||||
for (const tag of tags) {
|
||||
tagItemMap.set(tag, allPagesWithTag(tag))
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="popover-hint">
|
||||
<div class={classes}>
|
||||
<article>
|
||||
<p>{content}</p>
|
||||
</article>
|
||||
<p>Found {tags.length} total tags.</p>
|
||||
<p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
|
||||
<div>
|
||||
{tags.map((tag) => {
|
||||
const pages = tagItemMap.get(tag)!
|
||||
@ -54,15 +58,24 @@ function TagContent(props: QuartzComponentProps) {
|
||||
<div>
|
||||
<h2>
|
||||
<a class="internal tag-link" href={`../tags/${tag}`}>
|
||||
#{tag}
|
||||
{tag}
|
||||
</a>
|
||||
</h2>
|
||||
{content && <p>{content}</p>}
|
||||
<p>
|
||||
{pluralize(pages.length, "item")} with this tag.{" "}
|
||||
{pages.length > numPages && `Showing first ${numPages}.`}
|
||||
</p>
|
||||
<PageList limit={numPages} {...listProps} />
|
||||
<div class="page-listing">
|
||||
<p>
|
||||
{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
|
||||
{pages.length > numPages && (
|
||||
<>
|
||||
{" "}
|
||||
<span>
|
||||
{i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
<PageList limit={numPages} {...listProps} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@ -77,11 +90,13 @@ function TagContent(props: QuartzComponentProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="popover-hint">
|
||||
<div class={classes}>
|
||||
<article>{content}</article>
|
||||
<p>{pluralize(pages.length, "item")} with this tag.</p>
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
<div class="page-listing">
|
||||
<p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -3,10 +3,11 @@ import { QuartzComponent, QuartzComponentProps } from "./types"
|
||||
import HeaderConstructor from "./Header"
|
||||
import BodyConstructor from "./Body"
|
||||
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
|
||||
import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
|
||||
import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
|
||||
import { visit } from "unist-util-visit"
|
||||
import { Root, Element, ElementContent } from "hast"
|
||||
import { QuartzPluginData } from "../plugins/vfile"
|
||||
import { GlobalConfiguration } from "../cfg"
|
||||
import { i18n } from "../i18n"
|
||||
|
||||
interface RenderComponents {
|
||||
head: QuartzComponent
|
||||
@ -18,12 +19,13 @@ interface RenderComponents {
|
||||
footer: QuartzComponent
|
||||
}
|
||||
|
||||
const headerRegex = new RegExp(/h[1-6]/)
|
||||
export function pageResources(
|
||||
baseDir: FullSlug | RelativeURL,
|
||||
staticResources: StaticResources,
|
||||
): StaticResources {
|
||||
const contentIndexPath = joinSegments(baseDir, "static/contentIndex.json")
|
||||
const contentIndexScript = `const fetchData = fetch(\`${contentIndexPath}\`).then(data => data.json())`
|
||||
const contentIndexScript = `const fetchData = fetch("${contentIndexPath}").then(data => data.json())`
|
||||
|
||||
return {
|
||||
css: [joinSegments(baseDir, "index.css"), ...staticResources.css],
|
||||
@ -50,37 +52,30 @@ export function pageResources(
|
||||
}
|
||||
}
|
||||
|
||||
let pageIndex: Map<FullSlug, QuartzPluginData> | undefined = undefined
|
||||
function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, QuartzPluginData> {
|
||||
if (!pageIndex) {
|
||||
pageIndex = new Map()
|
||||
for (const file of allFiles) {
|
||||
pageIndex.set(file.slug!, file)
|
||||
}
|
||||
}
|
||||
|
||||
return pageIndex
|
||||
}
|
||||
|
||||
export function renderPage(
|
||||
cfg: GlobalConfiguration,
|
||||
slug: FullSlug,
|
||||
componentData: QuartzComponentProps,
|
||||
components: RenderComponents,
|
||||
pageResources: StaticResources,
|
||||
): string {
|
||||
// make a deep copy of the tree so we don't remove the transclusion references
|
||||
// for the file cached in contentMap in build.ts
|
||||
const root = clone(componentData.tree) as Root
|
||||
|
||||
// process transcludes in componentData
|
||||
visit(componentData.tree as Root, "element", (node, _index, _parent) => {
|
||||
visit(root, "element", (node, _index, _parent) => {
|
||||
if (node.tagName === "blockquote") {
|
||||
const classNames = (node.properties?.className ?? []) as string[]
|
||||
if (classNames.includes("transclude")) {
|
||||
const inner = node.children[0] as Element
|
||||
const transcludeTarget = inner.properties?.["data-slug"] as FullSlug
|
||||
const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget)
|
||||
const transcludeTarget = inner.properties["data-slug"] as FullSlug
|
||||
const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
|
||||
if (!page) {
|
||||
return
|
||||
}
|
||||
|
||||
let blockRef = node.properties?.dataBlock as string | undefined
|
||||
let blockRef = node.properties.dataBlock as string | undefined
|
||||
if (blockRef?.startsWith("#^")) {
|
||||
// block transclude
|
||||
blockRef = blockRef.slice("#^".length)
|
||||
@ -90,6 +85,7 @@ export function renderPage(
|
||||
blockNode = {
|
||||
type: "element",
|
||||
tagName: "ul",
|
||||
properties: {},
|
||||
children: [blockNode],
|
||||
}
|
||||
}
|
||||
@ -99,8 +95,10 @@ export function renderPage(
|
||||
{
|
||||
type: "element",
|
||||
tagName: "a",
|
||||
properties: { href: inner.properties?.href, class: ["internal"] },
|
||||
children: [{ type: "text", value: `Link to original` }],
|
||||
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
||||
children: [
|
||||
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -108,18 +106,23 @@ export function renderPage(
|
||||
// header transclude
|
||||
blockRef = blockRef.slice(1)
|
||||
let startIdx = undefined
|
||||
let startDepth = undefined
|
||||
let endIdx = undefined
|
||||
for (const [i, el] of page.htmlAst.children.entries()) {
|
||||
if (el.type === "element" && el.tagName.match(/h[1-6]/)) {
|
||||
if (endIdx) {
|
||||
break
|
||||
}
|
||||
// skip non-headers
|
||||
if (!(el.type === "element" && el.tagName.match(headerRegex))) continue
|
||||
const depth = Number(el.tagName.substring(1))
|
||||
|
||||
if (startIdx !== undefined) {
|
||||
endIdx = i
|
||||
} else if (el.properties?.id === blockRef) {
|
||||
// lookin for our blockref
|
||||
if (startIdx === undefined || startDepth === undefined) {
|
||||
// skip until we find the blockref that matches
|
||||
if (el.properties?.id === blockRef) {
|
||||
startIdx = i
|
||||
startDepth = Number(el.tagName.substring(1))
|
||||
}
|
||||
} else if (depth <= startDepth) {
|
||||
// looking for new header that is same level or higher
|
||||
endIdx = i
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,8 +137,10 @@ export function renderPage(
|
||||
{
|
||||
type: "element",
|
||||
tagName: "a",
|
||||
properties: { href: inner.properties?.href, class: ["internal"] },
|
||||
children: [{ type: "text", value: `Link to original` }],
|
||||
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
||||
children: [
|
||||
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
||||
],
|
||||
},
|
||||
]
|
||||
} else if (page.htmlAst) {
|
||||
@ -144,8 +149,16 @@ export function renderPage(
|
||||
{
|
||||
type: "element",
|
||||
tagName: "h1",
|
||||
properties: {},
|
||||
children: [
|
||||
{ type: "text", value: page.frontmatter?.title ?? `Transclude of ${page.slug}` },
|
||||
{
|
||||
type: "text",
|
||||
value:
|
||||
page.frontmatter?.title ??
|
||||
i18n(cfg.locale).components.transcludes.transcludeOf({
|
||||
targetSlug: page.slug!,
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
...(page.htmlAst.children as ElementContent[]).map((child) =>
|
||||
@ -154,8 +167,10 @@ export function renderPage(
|
||||
{
|
||||
type: "element",
|
||||
tagName: "a",
|
||||
properties: { href: inner.properties?.href, class: ["internal"] },
|
||||
children: [{ type: "text", value: `Link to original` }],
|
||||
properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
|
||||
children: [
|
||||
{ type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -163,6 +178,9 @@ export function renderPage(
|
||||
}
|
||||
})
|
||||
|
||||
// set componentData.tree to the edited html that has transclusions rendered
|
||||
componentData.tree = root
|
||||
|
||||
const {
|
||||
head: Head,
|
||||
header,
|
||||
@ -191,8 +209,9 @@ export function renderPage(
|
||||
</div>
|
||||
)
|
||||
|
||||
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
|
||||
const doc = (
|
||||
<html>
|
||||
<html lang={lang}>
|
||||
<Head {...componentData} />
|
||||
<body data-slug={slug}>
|
||||
<div id="quartz-root" class="page">
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
function toggleCallout(this: HTMLElement) {
|
||||
const outerBlock = this.parentElement!
|
||||
outerBlock.classList.toggle(`is-collapsed`)
|
||||
const collapsed = outerBlock.classList.contains(`is-collapsed`)
|
||||
outerBlock.classList.toggle("is-collapsed")
|
||||
const collapsed = outerBlock.classList.contains("is-collapsed")
|
||||
const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
|
||||
outerBlock.style.maxHeight = height + `px`
|
||||
outerBlock.style.maxHeight = height + "px"
|
||||
|
||||
// walk and adjust height of all parents
|
||||
let current = outerBlock
|
||||
let parent = outerBlock.parentElement
|
||||
while (parent) {
|
||||
if (!parent.classList.contains(`callout`)) {
|
||||
if (!parent.classList.contains("callout")) {
|
||||
return
|
||||
}
|
||||
|
||||
const collapsed = parent.classList.contains(`is-collapsed`)
|
||||
const collapsed = parent.classList.contains("is-collapsed")
|
||||
const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
|
||||
parent.style.maxHeight = height + `px`
|
||||
parent.style.maxHeight = height + "px"
|
||||
|
||||
current = parent
|
||||
parent = parent.parentElement
|
||||
@ -30,15 +30,15 @@ function setupCallout() {
|
||||
const title = div.firstElementChild
|
||||
|
||||
if (title) {
|
||||
title.removeEventListener(`click`, toggleCallout)
|
||||
title.addEventListener(`click`, toggleCallout)
|
||||
title.addEventListener("click", toggleCallout)
|
||||
window.addCleanup(() => title.removeEventListener("click", toggleCallout))
|
||||
|
||||
const collapsed = div.classList.contains(`is-collapsed`)
|
||||
const collapsed = div.classList.contains("is-collapsed")
|
||||
const height = collapsed ? title.scrollHeight : div.scrollHeight
|
||||
div.style.maxHeight = height + `px`
|
||||
div.style.maxHeight = height + "px"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener(`nav`, setupCallout)
|
||||
window.addEventListener(`resize`, setupCallout)
|
||||
document.addEventListener("nav", setupCallout)
|
||||
window.addEventListener("resize", setupCallout)
|
||||
|
||||
23
quartz/components/scripts/checkbox.inline.ts
Normal file
23
quartz/components/scripts/checkbox.inline.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { getFullSlug } from "../../util/path"
|
||||
|
||||
const checkboxId = (index: number) => `${getFullSlug(window)}-checkbox-${index}`
|
||||
|
||||
document.addEventListener("nav", () => {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
"input.checkbox-toggle",
|
||||
) as NodeListOf<HTMLInputElement>
|
||||
checkboxes.forEach((el, index) => {
|
||||
const elId = checkboxId(index)
|
||||
|
||||
const switchState = (e: Event) => {
|
||||
const newCheckboxState = (e.target as HTMLInputElement)?.checked ? "true" : "false"
|
||||
localStorage.setItem(elId, newCheckboxState)
|
||||
}
|
||||
|
||||
el.addEventListener("change", switchState)
|
||||
window.addCleanup(() => el.removeEventListener("change", switchState))
|
||||
if (localStorage.getItem(elId) === "true") {
|
||||
el.checked = true
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -14,7 +14,7 @@ document.addEventListener("nav", () => {
|
||||
button.type = "button"
|
||||
button.innerHTML = svgCopy
|
||||
button.ariaLabel = "Copy source"
|
||||
button.addEventListener("click", () => {
|
||||
function onClick() {
|
||||
navigator.clipboard.writeText(source).then(
|
||||
() => {
|
||||
button.blur()
|
||||
@ -26,7 +26,9 @@ document.addEventListener("nav", () => {
|
||||
},
|
||||
(error) => console.error(error),
|
||||
)
|
||||
})
|
||||
}
|
||||
button.addEventListener("click", onClick)
|
||||
window.addCleanup(() => button.removeEventListener("click", onClick))
|
||||
els[i].prepend(button)
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,31 +2,39 @@ const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "l
|
||||
const currentTheme = localStorage.getItem("theme") ?? userPref
|
||||
document.documentElement.setAttribute("saved-theme", currentTheme)
|
||||
|
||||
const emitThemeChangeEvent = (theme: "light" | "dark") => {
|
||||
const event: CustomEventMap["themechange"] = new CustomEvent("themechange", {
|
||||
detail: { theme },
|
||||
})
|
||||
document.dispatchEvent(event)
|
||||
}
|
||||
|
||||
document.addEventListener("nav", () => {
|
||||
const switchTheme = (e: any) => {
|
||||
if (e.target.checked) {
|
||||
document.documentElement.setAttribute("saved-theme", "dark")
|
||||
localStorage.setItem("theme", "dark")
|
||||
} else {
|
||||
document.documentElement.setAttribute("saved-theme", "light")
|
||||
localStorage.setItem("theme", "light")
|
||||
}
|
||||
const switchTheme = (e: Event) => {
|
||||
const newTheme = (e.target as HTMLInputElement)?.checked ? "dark" : "light"
|
||||
document.documentElement.setAttribute("saved-theme", newTheme)
|
||||
localStorage.setItem("theme", newTheme)
|
||||
emitThemeChangeEvent(newTheme)
|
||||
}
|
||||
|
||||
const themeChange = (e: MediaQueryListEvent) => {
|
||||
const newTheme = e.matches ? "dark" : "light"
|
||||
document.documentElement.setAttribute("saved-theme", newTheme)
|
||||
localStorage.setItem("theme", newTheme)
|
||||
toggleSwitch.checked = e.matches
|
||||
emitThemeChangeEvent(newTheme)
|
||||
}
|
||||
|
||||
// Darkmode toggle
|
||||
const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
|
||||
toggleSwitch.removeEventListener("change", switchTheme)
|
||||
toggleSwitch.addEventListener("change", switchTheme)
|
||||
window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
|
||||
if (currentTheme === "dark") {
|
||||
toggleSwitch.checked = true
|
||||
}
|
||||
|
||||
// Listen for changes in prefers-color-scheme
|
||||
const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
|
||||
colorSchemeMediaQuery.addEventListener("change", (e) => {
|
||||
const newTheme = e.matches ? "dark" : "light"
|
||||
document.documentElement.setAttribute("saved-theme", newTheme)
|
||||
localStorage.setItem("theme", newTheme)
|
||||
toggleSwitch.checked = e.matches
|
||||
})
|
||||
colorSchemeMediaQuery.addEventListener("change", themeChange)
|
||||
window.addCleanup(() => colorSchemeMediaQuery.removeEventListener("change", themeChange))
|
||||
})
|
||||
|
||||
@ -1,135 +1,106 @@
|
||||
import { FolderState } from "../ExplorerNode"
|
||||
|
||||
// Current state of folders
|
||||
let explorerState: FolderState[]
|
||||
|
||||
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 explorer = document.getElementById("explorer-ul")
|
||||
const explorerUl = document.getElementById("explorer-ul")
|
||||
if (!explorerUl) return
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
explorer?.classList.add("no-background")
|
||||
explorerUl.classList.add("no-background")
|
||||
} else {
|
||||
explorer?.classList.remove("no-background")
|
||||
explorerUl.classList.remove("no-background")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function toggleExplorer(this: HTMLElement) {
|
||||
// Toggle collapsed state of entire explorer
|
||||
this.classList.toggle("collapsed")
|
||||
const content = this.nextElementSibling as HTMLElement
|
||||
const content = this.nextElementSibling as MaybeHTMLElement
|
||||
if (!content) return
|
||||
|
||||
content.classList.toggle("collapsed")
|
||||
content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
|
||||
}
|
||||
|
||||
function toggleFolder(evt: MouseEvent) {
|
||||
evt.stopPropagation()
|
||||
const target = evt.target as MaybeHTMLElement
|
||||
if (!target) return
|
||||
|
||||
// Element that was clicked
|
||||
const target = evt.target as HTMLElement
|
||||
|
||||
// Check if target was svg icon or button
|
||||
const isSvg = target.nodeName === "svg"
|
||||
const childFolderContainer = (
|
||||
isSvg
|
||||
? target.parentElement?.nextSibling
|
||||
: target.parentElement?.parentElement?.nextElementSibling
|
||||
) as MaybeHTMLElement
|
||||
const currentFolderParent = (
|
||||
isSvg ? target.nextElementSibling : target.parentElement
|
||||
) as MaybeHTMLElement
|
||||
if (!(childFolderContainer && currentFolderParent)) return
|
||||
|
||||
// corresponding <ul> element relative to clicked button/folder
|
||||
let childFolderContainer: HTMLElement
|
||||
|
||||
// <li> element of folder (stores folder-path dataset)
|
||||
let currentFolderParent: HTMLElement
|
||||
|
||||
// Get correct relative container and toggle collapsed class
|
||||
if (isSvg) {
|
||||
childFolderContainer = target.parentElement?.nextSibling as HTMLElement
|
||||
currentFolderParent = target.nextElementSibling as HTMLElement
|
||||
|
||||
childFolderContainer.classList.toggle("open")
|
||||
} else {
|
||||
childFolderContainer = target.parentElement?.parentElement?.nextElementSibling as HTMLElement
|
||||
currentFolderParent = target.parentElement as HTMLElement
|
||||
|
||||
childFolderContainer.classList.toggle("open")
|
||||
}
|
||||
if (!childFolderContainer) return
|
||||
|
||||
// Collapse folder container
|
||||
childFolderContainer.classList.toggle("open")
|
||||
const isCollapsed = childFolderContainer.classList.contains("open")
|
||||
setFolderState(childFolderContainer, !isCollapsed)
|
||||
|
||||
// Save folder state to localStorage
|
||||
const clickFolderPath = currentFolderParent.dataset.folderpath as string
|
||||
|
||||
// Remove leading "/"
|
||||
const fullFolderPath = clickFolderPath.substring(1)
|
||||
toggleCollapsedByPath(explorerState, fullFolderPath)
|
||||
|
||||
const stringifiedFileTree = JSON.stringify(explorerState)
|
||||
const fullFolderPath = currentFolderParent.dataset.folderpath as string
|
||||
toggleCollapsedByPath(currentExplorerState, fullFolderPath)
|
||||
const stringifiedFileTree = JSON.stringify(currentExplorerState)
|
||||
localStorage.setItem("fileTree", stringifiedFileTree)
|
||||
}
|
||||
|
||||
function setupExplorer() {
|
||||
// Set click handler for collapsing entire explorer
|
||||
const explorer = document.getElementById("explorer")
|
||||
if (!explorer) return
|
||||
|
||||
if (explorer.dataset.behavior === "collapse") {
|
||||
for (const item of document.getElementsByClassName(
|
||||
"folder-button",
|
||||
) as HTMLCollectionOf<HTMLElement>) {
|
||||
item.addEventListener("click", toggleFolder)
|
||||
window.addCleanup(() => item.removeEventListener("click", toggleFolder))
|
||||
}
|
||||
}
|
||||
|
||||
explorer.addEventListener("click", toggleExplorer)
|
||||
window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
|
||||
|
||||
// Set up click handlers for each folder (click handler on folder "icon")
|
||||
for (const item of document.getElementsByClassName(
|
||||
"folder-icon",
|
||||
) as HTMLCollectionOf<HTMLElement>) {
|
||||
item.addEventListener("click", toggleFolder)
|
||||
window.addCleanup(() => item.removeEventListener("click", toggleFolder))
|
||||
}
|
||||
|
||||
// Get folder state from local storage
|
||||
const storageTree = localStorage.getItem("fileTree")
|
||||
|
||||
// Convert to bool
|
||||
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 })
|
||||
}
|
||||
|
||||
if (explorer) {
|
||||
// Get config
|
||||
const collapseBehavior = explorer.dataset.behavior
|
||||
|
||||
// Add click handlers for all folders (click handler on folder "label")
|
||||
if (collapseBehavior === "collapse") {
|
||||
Array.prototype.forEach.call(
|
||||
document.getElementsByClassName("folder-button"),
|
||||
function (item) {
|
||||
item.removeEventListener("click", toggleFolder)
|
||||
item.addEventListener("click", toggleFolder)
|
||||
},
|
||||
)
|
||||
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)
|
||||
}
|
||||
|
||||
// Add click handler to main explorer
|
||||
explorer.removeEventListener("click", toggleExplorer)
|
||||
explorer.addEventListener("click", toggleExplorer)
|
||||
}
|
||||
|
||||
// Set up click handlers for each folder (click handler on folder "icon")
|
||||
Array.prototype.forEach.call(document.getElementsByClassName("folder-icon"), function (item) {
|
||||
item.removeEventListener("click", toggleFolder)
|
||||
item.addEventListener("click", toggleFolder)
|
||||
})
|
||||
|
||||
if (storageTree && useSavedFolderState) {
|
||||
// Get state from localStorage and set folder state
|
||||
explorerState = JSON.parse(storageTree)
|
||||
explorerState.map((folderUl) => {
|
||||
// grab <li> element for matching folder path
|
||||
const folderLi = document.querySelector(
|
||||
`[data-folderpath='/${folderUl.path}']`,
|
||||
) as HTMLElement
|
||||
|
||||
// Get corresponding content <ul> tag and set state
|
||||
if (folderLi) {
|
||||
const folderUL = folderLi.parentElement?.nextElementSibling
|
||||
if (folderUL) {
|
||||
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (explorer?.dataset.tree) {
|
||||
// If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
|
||||
explorerState = JSON.parse(explorer.dataset.tree)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", setupExplorer)
|
||||
document.addEventListener("nav", () => {
|
||||
setupExplorer()
|
||||
|
||||
observer.disconnect()
|
||||
|
||||
// select pseudo element at end of list
|
||||
@ -145,11 +116,7 @@ document.addEventListener("nav", () => {
|
||||
* @param collapsed if folder should be set to collapsed or not
|
||||
*/
|
||||
function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
|
||||
if (collapsed) {
|
||||
folderElement?.classList.remove("open")
|
||||
} else {
|
||||
folderElement?.classList.add("open")
|
||||
}
|
||||
return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user