An article header
-Some content
-Example Component
- } - - YourComponent.css = ` - p.red-text { - color: red; - } - ` - - return YourComponent -}) satisfies QuartzComponentConstructor -``` - -Imported styles, however, can be from SCSS files: - -```tsx {1-2,9} title="quartz/components/YourComponent.tsx" -// assuming your stylesheet is in quartz/components/styles/YourComponent.scss -import styles from "./styles/YourComponent.scss" - -export default (() => { - function YourComponent() { - returnExample Component
- } - - YourComponent.css = styles - return YourComponent -}) satisfies QuartzComponentConstructor -``` - -> [!warning] -> Quartz does not use CSS modules so any styles you declare here apply _globally_. If you only want it to apply to your component, make sure you use specific class names and selectors. - -### Scripts and Interactivity - -What about interactivity? Suppose you want to add an-click handler for example. Like the `.css` property on the component, you can also declare `.beforeDOMLoaded` and `.afterDOMLoaded` properties that are strings that contain the script. - -```tsx title="quartz/components/YourComponent.tsx" -export default (() => { - function YourComponent() { - return - } - - YourComponent.beforeDOMLoaded = ` - console.log("hello from before the page loads!") - ` - - YourComponent.afterDOMLoaded = ` - document.getElementById('btn').onclick = () => { - alert('button clicked!') - } - ` - return YourComponent -}) satisfies QuartzComponentConstructor -``` - -> [!hint] -> For those coming from React, Quartz components are different from React components in that it only uses JSX for templating and layout. Hooks like `useEffect`, `useState`, etc. are not rendered and other properties that accept functions like `onClick` handlers will not work. Instead, do it using a regular JS script that modifies the DOM element directly. - -As the names suggest, the `.beforeDOMLoaded` scripts are executed _before_ the page is done loading so it doesn't have access to any elements on the page. This is mostly used to prefetch any critical data. - -The `.afterDOMLoaded` script executes once the page has been completely loaded. This is a good place to setup anything that should last for the duration of a site visit (e.g. getting something saved from local storage). - -If you need to create an `afterDOMLoaded` script that depends on _page specific_ elements that may change when navigating to a new page, you can listen for the `"nav"` event that gets fired whenever a page loads (which may happen on navigation if [[SPA Routing]] is enabled). - -```ts -document.addEventListener("nav", () => { - // do page specific logic here - // e.g. attach event listeners - const toggleSwitch = document.querySelector("#switch") as HTMLInputElement - toggleSwitch.addEventListener("change", switchTheme) - window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme)) -}) -``` - -You can also add the equivalent of a `beforeunload` event for [[SPA Routing]] via the `prenav` event. - -```ts -document.addEventListener("prenav", () => { - // executed after an SPA navigation is triggered but - // before the page is replaced - // one usage pattern is to store things in sessionStorage - // in the prenav and then conditionally load then in the consequent - // nav -}) -``` - -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 - -Of course, it isn't always practical (nor desired!) to write your code as a string literal in the component. - -Quartz supports importing component code through `.inline.ts` files. - -```tsx title="quartz/components/YourComponent.tsx" -// @ts-ignore: typescript doesn't know about our inline bundling system -// so we need to silence the error -import script from "./scripts/graph.inline" - -export default (() => { - function YourComponent() { - return - } - - YourComponent.afterDOMLoaded = script - return YourComponent -}) satisfies QuartzComponentConstructor -``` - -```ts title="quartz/components/scripts/graph.inline.ts" -// any imports here are bundled for the browser -import * as d3 from "d3" - -document.getElementById("btn").onclick = () => { - alert("button clicked!") -} -``` - -Additionally, like what is shown in the example above, you can import packages in `.inline.ts` files. This will be bundled by Quartz and included in the actual script. - -### Using a Component - -After creating your custom component, re-export it in `quartz/components/index.ts`: - -```ts title="quartz/components/index.ts" {4,10} -import ArticleTitle from "./ArticleTitle" -import Content from "./pages/Content" -import Darkmode from "./Darkmode" -import YourComponent from "./YourComponent" - -export { ArticleTitle, Content, Darkmode, YourComponent } -``` - -Then, you can use it like any other component in `quartz.layout.ts` via `Component.YourComponent()`. See the [[configuration#Layout|layout]] section for more details. - -As Quartz components are just functions that return React components, you can compositionally use them in other Quartz components. - -```tsx title="quartz/components/AnotherComponent.tsx" -import YourComponentConstructor from "./YourComponent" - -export default (() => { - const YourComponent = YourComponentConstructor() - - function AnotherComponent(props: QuartzComponentProps) { - return ( -
-
- )
- }
-
- return AnotherComponent
-}) satisfies QuartzComponentConstructor
-```
-
-> [!hint]
-> Look in `quartz/components` for more examples of components in Quartz as reference for your own components!
diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md
deleted file mode 100644
index f5cb19901..000000000
--- a/docs/advanced/making plugins.md
+++ /dev/null
@@ -1,318 +0,0 @@
----
-title: Making your own plugins
----
-
-> [!warning]
-> This part of the documentation will assume you have working knowledge in TypeScript and will include code snippets that describe the interface of what Quartz plugins should look like.
-
-Quartz's plugins are a series of transformations over content. This is illustrated in the diagram of the processing pipeline below:
-
-![[quartz transform pipeline.png]]
-
-All plugins are defined as a function that takes in a single parameter for options `type OptionType = object | undefined` and return an object that corresponds to the type of plugin it is.
-
-```ts
-type OptionType = object | undefined
-type QuartzPluginIt's nested!
-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
deleted file mode 100644
index a6d4d4e1b..000000000
--- a/docs/plugins/Favicon.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
deleted file mode 100644
index 45cfa1574..000000000
--- a/docs/plugins/FolderPage.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-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.
-
-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
-- Function name: `Plugin.FolderPage()`.
-- Source: [`quartz/plugins/emitters/folderPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/folderPage.tsx).
diff --git a/docs/plugins/Frontmatter.md b/docs/plugins/Frontmatter.md
deleted file mode 100644
index 9dfe53378..000000000
--- a/docs/plugins/Frontmatter.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-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.
-
-## 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
-- Function name: `Plugin.Frontmatter()`.
-- Source: [`quartz/plugins/transformers/frontmatter.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/frontmatter.ts).
diff --git a/docs/plugins/Latex.md b/docs/plugins/Latex.md
deleted file mode 100644
index eb77db229..000000000
--- a/docs/plugins/Latex.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-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/), `"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}"}`
-
-## 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).
diff --git a/docs/plugins/ObsidianFlavoredMarkdown.md b/docs/plugins/ObsidianFlavoredMarkdown.md
deleted file mode 100644
index 277c7720b..000000000
--- a/docs/plugins/ObsidianFlavoredMarkdown.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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`.
-- `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!
-
-## API
-
-- Category: Transformer
-- Function name: `Plugin.ObsidianFlavoredMarkdown()`.
-- 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
deleted file mode 100644
index 9d89477a2..000000000
--- a/docs/plugins/RoamFlavoredMarkdown.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-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
deleted file mode 100644
index 9556363fe..000000000
--- a/docs/plugins/TagPage.md
+++ /dev/null
@@ -1,22 +0,0 @@
----
-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.
-
-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
-- Function name: `Plugin.TagPage()`.
-- Source: [`quartz/plugins/emitters/tagPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/tagPage.tsx).
diff --git a/docs/setting up your GitHub repository.md b/docs/setting up your GitHub repository.md
deleted file mode 100644
index 2a753e834..000000000
--- a/docs/setting up your GitHub repository.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Setting up your GitHub repository
----
-
-First, make sure you have Quartz [[index#🪴 Get Started|cloned and setup locally]].
-
-Then, create a new repository on GitHub.com. Do **not** initialize the new repository with `README`, license, or `gitignore` files.
-
-![[github-init-repo-options.png]]
-
-At the top of your repository on GitHub.com's Quick Setup page, click the clipboard to copy the remote repository URL.
-
-![[github-quick-setup.png]]
-
-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. This is a helper command that will do the initial push of your content to your repository.
-
-```bash
-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
-> 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
diff --git a/docs/showcase.md b/docs/showcase.md
deleted file mode 100644
index 20fc3253b..000000000
--- a/docs/showcase.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: "Quartz Showcase"
----
-
-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/)
-- [Aaron Pham's Garden](https://aarnphm.xyz/)
-- [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)
-- [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/quartz/plugins/transformers/frontmatterrefs.ts b/quartz/plugins/transformers/frontmatterrefs.ts
index 85ae73a67..3a3d66119 100644
--- a/quartz/plugins/transformers/frontmatterrefs.ts
+++ b/quartz/plugins/transformers/frontmatterrefs.ts
@@ -13,17 +13,17 @@ const defaultOptions: Options = {
prefix: "=this.",
}
-// Parse a string into inline Markdown nodes
+// Convert Markdown hard-break syntax (two spaces + newline) into
- ![]({`"https://${cfg.baseUrl}/static/icon.jpeg"`})
-
-
-
-
- - {title} -
--
- {Li.map((item, index) => {
- if (item) {
- return
- {item} - } - })} -
- {description} -
-function preprocessHardBreaks(str: string): string { - // Replace two or more spaces followed by newline with
return str.replace(/ {2,}\r?\n/g, "
\n") } +// Parse a string as inline Markdown function parseInlineMarkdown(str: string) { const preprocessed = preprocessHardBreaks(str) const tree = unified().use(remarkParse).parse(preprocessed) as Parent - // Inline context: unwrap single paragraph + // Inline context: unwrap a single paragraph if (tree.children.length === 1 && tree.children[0].type === "paragraph") { return (tree.children[0] as Parent).children } @@ -31,6 +31,35 @@ function parseInlineMarkdown(str: string) { return tree.children } +// Extract leading and trailing whitespace from a text node +function splitWhitespace(value: string) { + const match = value.match(/^(\s*)([\s\S]*?)(\s*)$/) + return { + leading: match?.[1] ?? "", + core: match?.[2] ?? value, + trailing: match?.[3] ?? "", + } +} + +// Reattach whitespace around parsed nodes +function reattachWhitespace( + nodes: any[], + leading: string, + trailing: string, +) { + const result = [...nodes] + + if (leading) { + result.unshift({ type: "text", value: leading }) + } + + if (trailing) { + result.push({ type: "text", value: trailing }) + } + + return result +} + export const ReplaceDataview: QuartzTransformerPlugin