run prettier
This commit is contained in:
parent
cefbca4753
commit
21cc6a5da9
@ -14,7 +14,7 @@ All plugins are defined as a function that takes in a single parameter for optio
|
|||||||
```ts
|
```ts
|
||||||
type OptionType = object | undefined
|
type OptionType = object | undefined
|
||||||
type QuartzPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzPluginInstance
|
type QuartzPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzPluginInstance
|
||||||
type QuartzPluginInstance =
|
type QuartzPluginInstance =
|
||||||
| QuartzTransformerPluginInstance
|
| QuartzTransformerPluginInstance
|
||||||
| QuartzFilterPluginInstance
|
| QuartzFilterPluginInstance
|
||||||
| QuartzEmitterPluginInstance
|
| QuartzEmitterPluginInstance
|
||||||
@ -22,14 +22,16 @@ type QuartzPluginInstance =
|
|||||||
|
|
||||||
The following sections will go into detail for what methods can be implemented for each plugin type. Before we do that, let's clarify a few more ambiguous types:
|
The following sections will go into detail for what methods can be implemented for each plugin type. Before we do that, let's clarify a few more ambiguous types:
|
||||||
|
|
||||||
- `BuildCtx` is defined in `quartz/ctx.ts`. It consists of
|
- `BuildCtx` is defined in `quartz/ctx.ts`. It consists of
|
||||||
- `argv`: The command line arguments passed to the Quartz [[build]] command
|
- `argv`: The command line arguments passed to the Quartz [[build]] command
|
||||||
- `cfg`: The full Quartz [[configuration]]
|
- `cfg`: The full Quartz [[configuration]]
|
||||||
- `allSlugs`: a list of all the valid content slugs (see [[paths]] for more information on what a `ServerSlug` is)
|
- `allSlugs`: a list of all the valid content slugs (see [[paths]] for more information on what a `ServerSlug` is)
|
||||||
- `StaticResources` is defined in `quartz/resources.tsx`. It consists of
|
- `StaticResources` is defined in `quartz/resources.tsx`. It consists of
|
||||||
- `css`: a list of URLs for stylesheets that should be loaded
|
- `css`: a list of URLs for stylesheets that should be loaded
|
||||||
- `js`: a list of scripts that should be loaded. A script is described with the `JSResource` type which is also defined in `quartz/resources.tsx`. It allows you to define a load time (either before or after the DOM has been loaded), whether it should be a module, and either the source URL or the inline content of the script.
|
- `js`: a list of scripts that should be loaded. A script is described with the `JSResource` type which is also defined in `quartz/resources.tsx`. It allows you to define a load time (either before or after the DOM has been loaded), whether it should be a module, and either the source URL or the inline content of the script.
|
||||||
|
|
||||||
## Transformers
|
## Transformers
|
||||||
|
|
||||||
Transformers **map** over content, taking a Markdown file and outputting modified content or adding metadata to the file itself.
|
Transformers **map** over content, taking a Markdown file and outputting modified content or adding metadata to the file itself.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@ -44,7 +46,7 @@ export type QuartzTransformerPluginInstance = {
|
|||||||
|
|
||||||
All transformer plugins must define at least a `name` field to register the plugin and a few optional functions that allow you to hook into various parts of transforming a single Markdown file.
|
All transformer plugins must define at least a `name` field to register the plugin and a few optional functions that allow you to hook into various parts of transforming a single Markdown file.
|
||||||
|
|
||||||
- `textTransform` performs a text-to-text transformation *before* a file is parsed into the [Markdown AST](https://github.com/syntax-tree/mdast).
|
- `textTransform` performs a text-to-text transformation _before_ a file is parsed into the [Markdown AST](https://github.com/syntax-tree/mdast).
|
||||||
- `markdownPlugins` defines a list of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md). `remark` is a tool that transforms Markdown to Markdown in a structured way.
|
- `markdownPlugins` defines a list of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md). `remark` is a tool that transforms Markdown to Markdown in a structured way.
|
||||||
- `htmlPlugins` defines a list of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md). Similar to how `remark` works, `rehype` is a tool that transforms HTML to HTML in a structured way.
|
- `htmlPlugins` defines a list of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md). Similar to how `remark` works, `rehype` is a tool that transforms HTML to HTML in a structured way.
|
||||||
- `externalResources` defines any external resources the plugin may need to load on the client-side for it to work properly.
|
- `externalResources` defines any external resources the plugin may need to load on the client-side for it to work properly.
|
||||||
@ -72,8 +74,8 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
|
|||||||
},
|
},
|
||||||
htmlPlugins() {
|
htmlPlugins() {
|
||||||
if (engine === "katex") {
|
if (engine === "katex") {
|
||||||
// if you need to pass options into a plugin, you
|
// if you need to pass options into a plugin, you
|
||||||
// can use a tuple of [plugin, options]
|
// can use a tuple of [plugin, options]
|
||||||
return [[rehypeKatex, { output: "html" }]]
|
return [[rehypeKatex, { output: "html" }]]
|
||||||
} else {
|
} else {
|
||||||
return [rehypeMathjax]
|
return [rehypeMathjax]
|
||||||
@ -82,9 +84,7 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
|
|||||||
externalResources() {
|
externalResources() {
|
||||||
if (engine === "katex") {
|
if (engine === "katex") {
|
||||||
return {
|
return {
|
||||||
css: [
|
css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"],
|
||||||
"https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
|
|
||||||
],
|
|
||||||
js: [
|
js: [
|
||||||
{
|
{
|
||||||
src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
|
src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
|
||||||
@ -108,16 +108,18 @@ export const AddWordCount: QuartzTransformerPlugin = () => {
|
|||||||
return {
|
return {
|
||||||
name: "AddWordCount",
|
name: "AddWordCount",
|
||||||
markdownPlugins() {
|
markdownPlugins() {
|
||||||
return [() => {
|
return [
|
||||||
return (tree, file) => {
|
() => {
|
||||||
// tree is an `mdast` root element
|
return (tree, file) => {
|
||||||
// file is a `vfile`
|
// tree is an `mdast` root element
|
||||||
const text = file.value
|
// file is a `vfile`
|
||||||
const words = text.split(" ").length
|
const text = file.value
|
||||||
file.data.wordcount = words
|
const words = text.split(" ").length
|
||||||
}
|
file.data.wordcount = words
|
||||||
}]
|
}
|
||||||
}
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -170,7 +172,9 @@ export const TextTransforms: QuartzTransformerPlugin = () => {
|
|||||||
All transformer plugins can be found under `quartz/plugins/transformers`. If you decide to write your own transformer plugin, don't forget to re-export it under `quartz/plugins/transformers/index.ts`
|
All transformer plugins can be found under `quartz/plugins/transformers`. If you decide to write your own transformer plugin, don't forget to re-export it under `quartz/plugins/transformers/index.ts`
|
||||||
|
|
||||||
A parting word: transformer plugins are quite complex so don't worry if you don't get them right away. Take a look at the built in transformers and see how they operate over content to get a better sense for how to accomplish what you are trying to do.
|
A parting word: transformer plugins are quite complex so don't worry if you don't get them right away. Take a look at the built in transformers and see how they operate over content to get a better sense for how to accomplish what you are trying to do.
|
||||||
|
|
||||||
## Filters
|
## Filters
|
||||||
|
|
||||||
Filters **filter** content, taking the output of all the transformers and determining what files to actually keep and what to discard.
|
Filters **filter** content, taking the output of all the transformers and determining what files to actually keep and what to discard.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@ -202,6 +206,7 @@ export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
|
|||||||
```
|
```
|
||||||
|
|
||||||
## Emitters
|
## Emitters
|
||||||
|
|
||||||
Emitters **reduce** over content, taking in a list of all the transformed and filtered content and creating output files.
|
Emitters **reduce** over content, taking in a list of all the transformed and filtered content and creating output files.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
@ -239,6 +244,7 @@ export type EmitCallback = (data: {
|
|||||||
This is a thin wrapper around writing to the appropriate output folder and ensuring that intermediate directories exist. If you choose to use the native Node `fs` APIs, ensure you emit to the `argv.output` folder as well.
|
This is a thin wrapper around writing to the appropriate output folder and ensuring that intermediate directories exist. If you choose to use the native Node `fs` APIs, ensure you emit to the `argv.output` folder as well.
|
||||||
|
|
||||||
If you are creating an emitter plugin that needs to render components, there are three more things to be aware of:
|
If you are creating an emitter plugin that needs to render components, there are three more things to be aware of:
|
||||||
|
|
||||||
- Your component should use `getQuartzComponents` to declare a list of `QuartzComponents` that it uses to construct the page. See the page on [[creating components]] for more information.
|
- Your component should use `getQuartzComponents` to declare a list of `QuartzComponents` that it uses to construct the page. See the page on [[creating components]] for more information.
|
||||||
- You can use the `renderPage` function defined in `quartz/components/renderPage.tsx` to render Quartz components into HTML.
|
- You can use the `renderPage` function defined in `quartz/components/renderPage.tsx` to render Quartz components into HTML.
|
||||||
- If you need to render an HTML AST to JSX, you can use the `toJsxRuntime` function from `hast-util-to-jsx-runtime` library. An example of this can be found in `quartz/components/pages/Content.tsx`.
|
- If you need to render an HTML AST to JSX, you can use the `toJsxRuntime` function from `hast-util-to-jsx-runtime` library. An example of this can be found in `quartz/components/pages/Content.tsx`.
|
||||||
@ -253,7 +259,7 @@ export const ContentPage: QuartzEmitterPlugin = () => {
|
|||||||
...defaultContentPageLayout,
|
...defaultContentPageLayout,
|
||||||
pageBody: Content(),
|
pageBody: Content(),
|
||||||
}
|
}
|
||||||
const { head, header, beforeBody, pageBody, left, right, footer} = layout
|
const { head, header, beforeBody, pageBody, left, right, footer } = layout
|
||||||
return {
|
return {
|
||||||
name: "ContentPage",
|
name: "ContentPage",
|
||||||
getQuartzComponents() {
|
getQuartzComponents() {
|
||||||
@ -293,4 +299,4 @@ export const ContentPage: QuartzEmitterPlugin = () => {
|
|||||||
Note that it takes in a `FullPageLayout` as the options. It's made by combining a `SharedLayout` and a `PageLayout` both of which are provided through the `quartz.layout.ts` file.
|
Note that it takes in a `FullPageLayout` as the options. It's made by combining a `SharedLayout` and a `PageLayout` both of which are provided through the `quartz.layout.ts` file.
|
||||||
|
|
||||||
> [!hint]
|
> [!hint]
|
||||||
> Look in `quartz/plugins` for more examples of plugins in Quartz as reference for your own plugins!
|
> Look in `quartz/plugins` for more examples of plugins in Quartz as reference for your own plugins!
|
||||||
|
@ -43,11 +43,13 @@ graph LR
|
|||||||
Server --"canonicalizeServer()"--> Canonical
|
Server --"canonicalizeServer()"--> Canonical
|
||||||
style Canonical stroke-width:4px
|
style Canonical stroke-width:4px
|
||||||
```
|
```
|
||||||
|
|
||||||
Here are the main types of slugs with a rough description of each type of path:
|
Here are the main types of slugs with a rough description of each type of path:
|
||||||
|
|
||||||
- `ClientSlug`: client-side slug, usually obtained through `window.location`. Contains the protocol (i.e. starts with `https://`)
|
- `ClientSlug`: client-side slug, usually obtained through `window.location`. Contains the protocol (i.e. starts with `https://`)
|
||||||
- `CanonicalSlug`: should be used whenever you need to refer to the location of a file/note. Shouldn't be a relative path and shouldn't have leading or trailing slashes `/` either. Also shouldn't have `/index` as an ending or a file extension.
|
- `CanonicalSlug`: should be used whenever you need to refer to the location of a file/note. Shouldn't be a relative path and shouldn't have leading or trailing slashes `/` either. Also shouldn't have `/index` as an ending or a file extension.
|
||||||
- `RelativeURL`: must start with `.` or `..` to indicate it's a relative URL. Shouldn't have `/index` as an ending or a file extension.
|
- `RelativeURL`: must start with `.` or `..` to indicate it's a relative URL. Shouldn't have `/index` as an ending or a file extension.
|
||||||
- `ServerSlug`: cannot be relative and may not have leading or trailing slashes.
|
- `ServerSlug`: cannot be relative and may not have leading or trailing slashes.
|
||||||
- `FilePath`: a real file path to a file on disk. Cannot be relative and must have a file extension.
|
- `FilePath`: a real file path to a file on disk. Cannot be relative and must have a file extension.
|
||||||
|
|
||||||
To get a clearer picture of how these relate to each other, take a look at the path tests in `quartz/path.test.ts`.
|
To get a clearer picture of how these relate to each other, take a look at the path tests in `quartz/path.test.ts`.
|
||||||
|
@ -6,7 +6,7 @@ draft: true
|
|||||||
|
|
||||||
- docs for making plugins
|
- docs for making plugins
|
||||||
- nested tags showing duplicate
|
- nested tags showing duplicate
|
||||||
- tag page markdown file for description not being rendered
|
- tag page markdown file for description not being rendered
|
||||||
- back button with anchors / popovers + spa is broken
|
- back button with anchors / popovers + spa is broken
|
||||||
- search should be fast for large repos
|
- search should be fast for large repos
|
||||||
- debounce cfg rebuild on large repos
|
- debounce cfg rebuild on large repos
|
||||||
|
@ -88,19 +88,23 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (opts?.enableSiteMap) {
|
if (opts?.enableSiteMap) {
|
||||||
emitted.push(await emit({
|
emitted.push(
|
||||||
content: generateSiteMap(cfg, linkIndex),
|
await emit({
|
||||||
slug: "sitemap" as ServerSlug,
|
content: generateSiteMap(cfg, linkIndex),
|
||||||
ext: ".xml",
|
slug: "sitemap" as ServerSlug,
|
||||||
}))
|
ext: ".xml",
|
||||||
|
}),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (opts?.enableRSS) {
|
if (opts?.enableRSS) {
|
||||||
emitted.push(await emit({
|
emitted.push(
|
||||||
content: generateRSSFeed(cfg, linkIndex),
|
await emit({
|
||||||
slug: "index" as ServerSlug,
|
content: generateRSSFeed(cfg, linkIndex),
|
||||||
ext: ".xml",
|
slug: "index" as ServerSlug,
|
||||||
}))
|
ext: ".xml",
|
||||||
|
}),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const fp = path.join("static", "contentIndex") as ServerSlug
|
const fp = path.join("static", "contentIndex") as ServerSlug
|
||||||
@ -115,11 +119,13 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
|
|||||||
}),
|
}),
|
||||||
)
|
)
|
||||||
|
|
||||||
emitted.push(await emit({
|
emitted.push(
|
||||||
content: JSON.stringify(simplifiedIndex),
|
await emit({
|
||||||
slug: fp,
|
content: JSON.stringify(simplifiedIndex),
|
||||||
ext: ".json",
|
slug: fp,
|
||||||
}))
|
ext: ".json",
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
return emitted
|
return emitted
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user