Cool Header!
+} +``` + +> [!example]- Local fonts +> +> For cases where you use a local fonts under `static` folder, make sure to set the correct `@font-face` in `custom.scss` +> +> ```scss title="custom.scss" +> @font-face { +> font-family: "Newsreader"; +> font-style: normal; +> font-weight: normal; +> font-display: swap; +> src: url("/static/Newsreader.woff2") format("woff2"); +> } +> ``` +> +> Then in `quartz/util/og.tsx`, you can load the Satori fonts like so: +> +> ```tsx title="quartz/util/og.tsx" +> import { joinSegments, QUARTZ } from "../path" +> import fs from "fs" +> import path from "path" +> +> const newsreaderFontPath = joinSegments(QUARTZ, "static", "Newsreader.woff2") +> export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: FontSpecification) { +> // ... rest of implementation remains same +> const fonts: SatoriOptions["fonts"] = [ +> ...headerFontData.map((data, idx) => ({ +> name: headerFontName, +> data, +> weight: headerWeights[idx], +> style: "normal" as const, +> })), +> ...bodyFontData.map((data, idx) => ({ +> name: bodyFontName, +> data, +> weight: bodyWeights[idx], +> style: "normal" as const, +> })), +> { +> name: "Newsreader", +> data: await fs.promises.readFile(path.resolve(newsreaderFontPath)), +> weight: 400, +> style: "normal" as const, +> }, +> ] +> +> return fonts +> } +> ``` +> +> This font then can be used with your custom structure. + +## Examples + +Here are some example image components you can use as a starting point: + +### Basic Example + +This example will generate images that look as follows: + +| Light | Dark | +| ------------------------------------------ | ----------------------------------------- | +| ![[custom-social-image-preview-light.png]] | ![[custom-social-image-preview-dark.png]] | + +```tsx +import { SatoriOptions } from "satori/wasm" +import { GlobalConfiguration } from "../cfg" +import { SocialImageOptions, UserOpts } from "./imageHelper" +import { QuartzPluginData } from "../plugins/vfile" + +export const customImage: SocialImageOptions["imageStructure"] = ( + cfg: GlobalConfiguration, + userOpts: UserOpts, + title: string, + description: string, + fonts: SatoriOptions["fonts"], + fileData: QuartzPluginData, +) => { + // How many characters are allowed before switching to smaller font + const fontBreakPoint = 22 + const useSmallerFont = title.length > fontBreakPoint + + const { colorScheme } = userOpts + return ( +
+
+ )
+}
+```
+
+### Advanced Example
+
+The following example includes a customized social image with a custom background and formatted date:
+
+```typescript title="custom-og.tsx"
+export const og: SocialImageOptions["Component"] = (
+ cfg: GlobalConfiguration,
+ fileData: QuartzPluginData,
+ { colorScheme }: Options,
+ title: string,
+ description: string,
+ fonts: SatoriOptions["fonts"],
+) => {
+ let created: string | undefined
+ let reading: string | undefined
+ if (fileData.dates) {
+ created = formatDate(getDate(cfg, fileData)!, cfg.locale)
+ }
+ const { minutes, text: _timeTaken, words: _words } = readingTime(fileData.text!)
+ reading = i18n(cfg.locale).components.contentMeta.readingTime({
+ minutes: Math.ceil(minutes),
+ })
+
+ const Li = [created, reading]
+
+ return (
+
+
+
+ + {title} +
++ {description} +
+
+
+
+ )
+}
+```
diff --git a/docs/plugins/Favicon.md b/docs/plugins/Favicon.md
new file mode 100644
index 0000000..a6d4d4e
--- /dev/null
+++ b/docs/plugins/Favicon.md
@@ -0,0 +1,19 @@
+---
+title: Favicon
+tags:
+ - plugin/emitter
+---
+
+This plugin emits a `favicon.ico` into the `public` folder. It creates the favicon from `icon.png` located in the `quartz/static` folder.
+The plugin resizes `icon.png` to 48x48px to make it as small as possible.
+
+> [!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.Favicon()`.
+- Source: [`quartz/plugins/emitters/favicon.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/favicon.ts).
diff --git a/docs/plugins/FolderPage.md b/docs/plugins/FolderPage.md
index ead8e75..45cfa15 100644
--- a/docs/plugins/FolderPage.md
+++ b/docs/plugins/FolderPage.md
@@ -11,10 +11,12 @@ 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`).
+This plugin accepts the following configuration options:
+
+- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
+
## API
- Category: Emitter
diff --git a/docs/plugins/Frontmatter.md b/docs/plugins/Frontmatter.md
index 879d087..9dfe533 100644
--- a/docs/plugins/Frontmatter.md
+++ b/docs/plugins/Frontmatter.md
@@ -17,6 +17,54 @@ This plugin accepts the following configuration options:
> [!warning]
> This plugin must not be removed, otherwise Quartz will break.
+## List
+
+Quartz supports the following frontmatter:
+
+- title
+ - `title`
+- description
+ - `description`
+- permalink
+ - `permalink`
+- comments
+ - `comments`
+- lang
+ - `lang`
+- publish
+ - `publish`
+- draft
+ - `draft`
+- enableToc
+ - `enableToc`
+- tags
+ - `tags`
+ - `tag`
+- aliases
+ - `aliases`
+ - `alias`
+- cssclasses
+ - `cssclasses`
+ - `cssclass`
+- socialDescription
+ - `socialDescription`
+- socialImage
+ - `socialImage`
+ - `image`
+ - `cover`
+- created
+ - `created`
+ - `date`
+- modified
+ - `modified`
+ - `lastmod`
+ - `updated`
+ - `last-modified`
+- published
+ - `published`
+ - `publishDate`
+ - `date`
+
## API
- Category: Transformer
diff --git a/docs/plugins/Latex.md b/docs/plugins/Latex.md
index ac43678..9ef37ff 100644
--- a/docs/plugins/Latex.md
+++ b/docs/plugins/Latex.md
@@ -11,7 +11,12 @@ This plugin adds LaTeX support to Quartz. See [[features/Latex|Latex]] for more
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.
+- `renderEngine`: the engine to use to render LaTeX equations. Can be `"katex"` for [KaTeX](https://katex.org/), `"mathjax"` for [MathJax](https://www.mathjax.org/) [SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html), or `"typst"` for [Typst](https://typst.app/) (a new way to compose LaTeX equation). Defaults to KaTeX.
+- `customMacros`: custom macros for all LaTeX blocks. It takes the form of a key-value pair where the key is a new command name and the value is the expansion of the macro. For example: `{"\\R": "\\mathbb{R}"}`
+
+> [!note] Typst support
+>
+> Currently, typst doesn't support inline-math
## API
diff --git a/docs/plugins/ObsidianFlavoredMarkdown.md b/docs/plugins/ObsidianFlavoredMarkdown.md
index 30d1f71..277c772 100644
--- a/docs/plugins/ObsidianFlavoredMarkdown.md
+++ b/docs/plugins/ObsidianFlavoredMarkdown.md
@@ -23,6 +23,7 @@ This plugin accepts the following configuration options:
- `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`.
+- `disableBrokenWikilinks`: If `true`, replaces links to non-existent notes with a dimmed, disabled link. Defaults to `false`.
> [!warning]
> Don't remove this plugin if you're using [[Obsidian compatibility|Obsidian]] to author the content!
@@ -31,4 +32,4 @@ This plugin accepts the following configuration options:
- Category: Transformer
- Function name: `Plugin.ObsidianFlavoredMarkdown()`.
-- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).
+- Source: [`quartz/plugins/transformers/ofm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/ofm.ts)
diff --git a/docs/plugins/RoamFlavoredMarkdown.md b/docs/plugins/RoamFlavoredMarkdown.md
new file mode 100644
index 0000000..9d89477
--- /dev/null
+++ b/docs/plugins/RoamFlavoredMarkdown.md
@@ -0,0 +1,26 @@
+---
+title: RoamFlavoredMarkdown
+tags:
+ - plugin/transformer
+---
+
+This plugin provides support for [Roam Research](https://roamresearch.com) compatibility. See [[Roam Research Compatibility]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `orComponent`: If `true` (default), converts Roam `{{ or:ONE|TWO|THREE }}` shortcodes into HTML Dropdown options.
+- `TODOComponent`: If `true` (default), converts Roam `{{[[TODO]]}}` shortcodes into HTML check boxes.
+- `DONEComponent`: If `true` (default), converts Roam `{{[[DONE]]}}` shortcodes into checked HTML check boxes.
+- `videoComponent`: If `true` (default), converts Roam `{{[[video]]:URL}}` shortcodes into embeded HTML video.
+- `audioComponent`: If `true` (default), converts Roam `{{[[audio]]:URL}}` shortcodes into embeded HTML audio.
+- `pdfComponent`: If `true` (default), converts Roam `{{[[pdf]]:URL}}` shortcodes into embeded HTML PDF viewer.
+- `blockquoteComponent`: If `true` (default), converts Roam `{{[[>]]}}` shortcodes into Quartz blockquotes.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.RoamFlavoredMarkdown()`.
+- Source: [`quartz/plugins/transformers/roam.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/roam.ts).
diff --git a/docs/plugins/TagPage.md b/docs/plugins/TagPage.md
index 9c704b3..9556363 100644
--- a/docs/plugins/TagPage.md
+++ b/docs/plugins/TagPage.md
@@ -9,10 +9,12 @@ This plugin emits dedicated pages for each tag used in the content. See [[folder
> [!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`).
+This plugin accepts the following configuration options:
+
+- `sort`: A function of type `(f1: QuartzPluginData, f2: QuartzPluginData) => number{:ts}` used to sort entries. Defaults to sorting by date and tie-breaking on lexographical order.
+
## API
- Category: Emitter
diff --git a/docs/setting up your GitHub repository.md b/docs/setting up your GitHub repository.md
index 43a556d..2a753e8 100644
--- a/docs/setting up your GitHub repository.md
+++ b/docs/setting up your GitHub repository.md
@@ -34,6 +34,13 @@ 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.
+> [!warning]- `fatal: The remote end hung up unexpectedly`
+> It might be due to Git's default buffer size. You can fix it by increasing the buffer with this command:
+>
+> ```bash
+> git config http.postBuffer 524288000
+> ```
+
In future updates, you can simply run `npx quartz sync` every time you want to push updates to your repository.
> [!hint] Flags and options
diff --git a/docs/showcase.md b/docs/showcase.md
index 9cff3a5..20fc325 100644
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -6,28 +6,18 @@ 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/)
-- [Socratica Toolbox](https://toolbox.socratica.info/)
-- [oldwinter の数字花园](https://garden.oldwinter.top/)
- [Aaron Pham's Garden](https://aarnphm.xyz/)
-- [The Quantum Garden](https://quantumgardener.blog/)
-- [Abhijeet's Math Wiki](https://abhmul.github.io/quartz/Math-Wiki/)
-- [Matt Dunn's Second Brain](https://mattdunn.info/)
-- [Pelayo Arbues' Notes](https://pelayoarbues.github.io/)
-- [Vince Imbat's Talahardin](https://vinceimbat.com/)
-- [🧠🌳 Chad's Mind Garden](https://www.chadly.net/)
-- [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)
-- [🥷🏻🌳🍃 Computer Science & Thinkering Garden](https://notes.yxy.ninja)
+- [The Pond](https://turntrout.com/welcome)
+- [Eilleen's Everything Notebook](https://quartz.eilleeenz.com/)
+- [Morrowind Modding Wiki](https://morrowind-modding.github.io/)
+- [Stanford CME 302 Numerical Linear Algebra](https://ericdarve.github.io/NLA/)
+- [Socratica Toolbox](https://toolbox.socratica.info/)
- [A Pattern Language - Christopher Alexander (Architecture)](https://patternlanguage.cc/)
+- [Sideny's 3D Artist's Handbook](https://sidney-eliot.github.io/3d-artists-handbook/)
+- [Brandon Boswell's Garden](https://brandonkboswell.com)
+- [Data Engineering Vault: A Second Brain Knowledge Network](https://vault.ssp.sh/)
+- [🪴Aster's notebook](https://notes.asterhu.com)
- [Gatekeeper Wiki](https://www.gatekeeper.wiki)
-
-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)!
+- [Ellie's Notes](https://ellie.wtf)
+- [Eledah's Crystalline](https://blog.eledah.ir/)
+- [🌓 Projects & Privacy - FOSS, tech, law](https://be-far.com)
diff --git a/globals.d.ts b/globals.d.ts
index ee13005..6cf30f8 100644
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -4,6 +4,10 @@ export declare global {
type: K,
listener: (this: Document, ev: CustomEventMap[K]) => void,
): void
+ removeEventListener
+ ![]({`"https://${cfg.baseUrl}/static/icon.jpeg"`})
+
+
+
+
+ + {title} +
+-
+ {Li.map((item, index) => {
+ if (item) {
+ return
- {item} + } + })} +
+ {description} +
+
-
- )
+interface BacklinksOptions {
+ hideWhenEmpty: boolean
}
-Backlinks.css = style
-export default (() => Backlinks) satisfies QuartzComponentConstructor
+const defaultOptions: BacklinksOptions = {
+ hideWhenEmpty: true,
+}
+
+export default ((opts?: Partial{i18n(cfg.locale).components.backlinks.title}
--
- {backlinkFiles.length > 0 ? (
- backlinkFiles.map((f) => (
-
- - - {f.frontmatter?.title} - - - )) - ) : ( -
- {i18n(cfg.locale).components.backlinks.noBacklinksFound} - )} -
+
+ {backlinkFiles.length > 0 ? (
+ backlinkFiles.map((f) => (
+
+
+ {f.frontmatter?.title}
+
+
+ ))
+ ) : (
+ {i18n(cfg.locale).components.backlinks.noBacklinksFound}
+ )}
+
+
+ )
+ }
+
+ Backlinks.css = style
+ Backlinks.afterDOMLoaded = overflowListAfterDOMLoaded
+
+ return Backlinks
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index 9ccfb9a..5144a31 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -1,8 +1,8 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
-import { QuartzPluginData } from "../plugins/vfile"
+import { FullSlug, SimpleSlug, resolveRelative, simplifySlug } from "../util/path"
import { classNames } from "../util/lang"
+import { trieFromAllFiles } from "../util/ctx"
type CrumbData = {
displayName: string
@@ -22,10 +22,6 @@ interface BreadcrumbOptions {
* Whether to look up frontmatter title for folders (could cause performance problems with big vaults)
*/
resolveFrontmatterTitle: boolean
- /**
- * Whether to display breadcrumbs on root `index.md`
- */
- hideOnRoot: boolean
/**
* Whether to display the current page in the breadcrumbs.
*/
@@ -36,7 +32,6 @@ const defaultOptions: BreadcrumbOptions = {
spacerSymbol: "❯",
rootName: "Home",
resolveFrontmatterTitle: true,
- hideOnRoot: true,
showCurrentPage: true,
}
@@ -48,78 +43,37 @@ function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: Simpl
}
export default ((opts?: Partial{i18n(cfg.locale).components.backlinks.title}
+- {segmentsElements} + {segments}
) } else { diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx index 8ed7c99..afc23d7 100644 --- a/quartz/components/Darkmode.tsx +++ b/quartz/components/Darkmode.tsx @@ -1,6 +1,4 @@ -// @ts-ignore: this is safe, we don't want to actually make darkmode.inline.ts a module as -// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads -// see: https://v8.dev/features/modules#defer +// @ts-ignore import darkmodeScript from "./scripts/darkmode.inline" import styles from "./styles/darkmode.scss" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" @@ -9,41 +7,38 @@ import { classNames } from "../util/lang" const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { return ( -
-
-
-
-
+
)
}
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 26b5964..0a92cc4 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
}
export function Date({ date, locale }: Props) {
- return <>{formatDate(date, locale)}
+ return
}
diff --git a/quartz/components/DesktopOnly.tsx b/quartz/components/DesktopOnly.tsx
index fe2a27f..ee80137 100644
--- a/quartz/components/DesktopOnly.tsx
+++ b/quartz/components/DesktopOnly.tsx
@@ -1,18 +1,14 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-export default ((component?: QuartzComponent) => {
- if (component) {
- const Component = component
- const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
- return
+
+
-
)
}
- Explorer.css = explorerStyle
- Explorer.afterDOMLoaded = script
+ Explorer.css = style
+ Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
return Explorer
}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
deleted file mode 100644
index 2968a03..0000000
--- a/quartz/components/ExplorerNode.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-// @ts-ignore
-import { QuartzPluginData } from "../plugins/vfile"
-import {
- joinSegments,
- resolveRelative,
- clone,
- simplifySlug,
- SimpleSlug,
- FilePath,
-} from "../util/path"
-
-type OrderEntries = "sort" | "filter" | "map"
-
-export interface Options {
- 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[]
-}
-
-type DataWrapper = {
- file: QuartzPluginData
- path: string[]
-}
-
-export type FolderState = {
- path: string
- 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: Array
- name: string // this is the slug segment
- displayName: string
- file: QuartzPluginData | null
- depth: number
-
- constructor(slugSegment: string, displayName?: string, file?: QuartzPluginData, depth?: number) {
- this.children = []
- this.name = slugSegment
- this.displayName = displayName ?? file?.frontmatter?.title ?? slugSegment
- this.file = file ? clone(file) : null
- this.depth = depth ?? 0
- }
-
- 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 {
- // direct child
- this.children.push(new FileNode(nextSegment, undefined, fileData.file, this.depth + 1))
- }
-
- 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) {
- this.insert({ file: file, path: simplifySlug(file.slug!).split("/") })
- }
-
- /**
- * Filter FileNode tree. Behaves similar to `Array.prototype.filter()`, but modifies tree in place
- * @param filterFn function to filter tree with
- */
- filter(filterFn: (node: FileNode) => boolean) {
- this.children = this.children.filter(filterFn)
- this.children.forEach((child) => child.filter(filterFn))
- }
-
- /**
- * Filter FileNode tree. Behaves similar to `Array.prototype.map()`, but modifies tree in place
- * @param mapFn function to use for mapping over tree
- */
- map(mapFn: (node: FileNode) => void) {
- mapFn(this)
- this.children.forEach((child) => child.map(mapFn))
- }
-
- /**
- * Get folder representation with state of tree.
- * Intended to only be called on root node before changes to the tree are made
- * @param collapsed default state of folders (collapsed by default or not)
- * @returns array containing folder state for tree
- */
- getFolderPaths(collapsed: boolean): FolderState[] {
- const folderPaths: FolderState[] = []
-
- const traverse = (node: FileNode, currentPath: string) => {
- if (!node.file) {
- const folderPath = joinSegments(currentPath, node.name)
- if (folderPath !== "") {
- folderPaths.push({ path: folderPath, collapsed })
- }
-
- node.children.forEach((child) => traverse(child, folderPath))
- }
- }
-
- traverse(this, "")
- return folderPaths
- }
-
- // Sort order: folders first, then files. Sort folders and files alphabetically
- /**
- * Sorts tree according to sort/compare function
- * @param sortFn compare function used for `.sort()`, also used recursively for children
- */
- sort(sortFn: (a: FileNode, b: FileNode) => number) {
- this.children = this.children.sort(sortFn)
- this.children.forEach((e) => e.sort(sortFn))
- }
-}
-
-type ExplorerNodeProps = {
- node: FileNode
- opts: Options
- fileData: QuartzPluginData
- fullPath?: string
-}
-
-export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodeProps) {
- // Get options
- const folderBehavior = opts.folderClickBehavior
- const isDefaultOpen = opts.folderDefaultState === "open"
-
- // Calculate current folderPath
- let folderPath = ""
- if (node.name !== "") {
- folderPath = joinSegments(fullPath ?? "", node.name)
- }
-
- return (
- <>
- {node.file ? (
- // Single file node
-
-
- {node.displayName}
-
-
- ) : (
-
- {node.name !== "" && (
- // Node with entire folder
- // Render svg button + folder name, then children
-
- )}
-
- )
-}
diff --git a/quartz/components/Flex.tsx b/quartz/components/Flex.tsx
new file mode 100644
index 0000000..70d2149
--- /dev/null
+++ b/quartz/components/Flex.tsx
@@ -0,0 +1,59 @@
+import { concatenateResources } from "../util/resources"
+import { classNames } from "../util/lang"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+type FlexConfig = {
+ components: {
+ Component: QuartzComponent
+ grow?: boolean
+ shrink?: boolean
+ basis?: string
+ order?: number
+ align?: "start" | "end" | "center" | "stretch"
+ justify?: "start" | "end" | "center" | "between" | "around"
+ }[]
+ direction?: "row" | "row-reverse" | "column" | "column-reverse"
+ wrap?: "nowrap" | "wrap" | "wrap-reverse"
+ gap?: string
+}
+
+export default ((config: FlexConfig) => {
+ const Flex: QuartzComponent = (props: QuartzComponentProps) => {
+ const direction = config.direction ?? "row"
+ const wrap = config.wrap ?? "nowrap"
+ const gap = config.gap ?? "1rem"
+
+ return (
+
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index 076c378..cff28cb 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -13,7 +13,6 @@ export default ((opts?: Options) => {
const links = opts?.links ?? []
return (
-
- {/* render tag if folderBehavior is "link", otherwise render
- )}
- {/* Recursively render children of folder */}
-
-
- -
- {node.children.map((childNode, i) => (
-
+ {config.components.map((c) => {
+ const grow = c.grow ? 1 : 0
+ const shrink = (c.shrink ?? true) ? 1 : 0
+ const basis = c.basis ?? "auto"
+ const order = c.order ?? 0
+ const align = c.align ?? "center"
+ const justify = c.justify ?? "center"
+
+ return (
+
+ )
+ }
+
+ Flex.afterDOMLoaded = concatenateResources(
+ ...config.components.map((c) => c.Component.afterDOMLoaded),
+ )
+ Flex.beforeDOMLoaded = concatenateResources(
+ ...config.components.map((c) => c.Component.beforeDOMLoaded),
+ )
+ Flex.css = concatenateResources(...config.components.map((c) => c.Component.css))
+ return Flex
+}) satisfies QuartzComponentConstructor
+
+ )
+ })}
+