"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", em: "em", h2: "h2", img: "img", li: "li", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.div, { "data-callout": true, "data-callout-type": "warning", children: ["\n", _jsx(_components.div, { "data-callout-title": true, children: "Warning" }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsx(_components.p, { children: "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." }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Quartz's plugins are a series of transformations over content. This is illustrated in the diagram of the processing pipeline below:" }), "\n", _jsx(_components.img, { src: "https://quartz-obsidian-joullian404.flowershow.me/docs/images/quartz%20transform%20pipeline.png", alt: "quartz transform pipeline", className: "internal", "data-fs-resolved-file-path": "/docs/images/quartz transform pipeline.png" }), "\n", _jsxs(_components.p, { children: ["All plugins are defined as a function that takes in a single parameter for options ", _jsx(_components.code, { className: "language-auto", children: "type OptionType = object | undefined" }), " and return an object that corresponds to the type of plugin it is."] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "OptionType" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " object ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["QuartzPlugin", _jsx(_components.span, { className: "token operator", children: "<" }), "Options ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " OptionType ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "opts", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Options", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " QuartzPluginInstance\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "QuartzPluginInstance" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " QuartzTransformerPluginInstance\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " QuartzFilterPluginInstance\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " QuartzEmitterPluginInstance\n"] })] }) }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "BuildCtx" }), " is defined in ", _jsx(_components.code, { className: "language-auto", children: "quartz/ctx.ts" }), ". It consists of", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "argv" }), ": The command line arguments passed to the Quartz ", _jsx(_components.a, { href: "/docs/build", className: "internal", "data-fs-resolved-file-path": "/docs/build.md", children: "build" }), " command"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "cfg" }), ": The full Quartz ", _jsx(_components.a, { href: "/docs/configuration", className: "internal", "data-fs-resolved-file-path": "/docs/configuration.md", children: "configuration" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "allSlugs" }), ": a list of all the valid content slugs (see ", _jsx(_components.a, { href: "/docs/advanced/paths", className: "internal", "data-fs-resolved-file-path": "/docs/advanced/paths.md", children: "paths" }), " for more information on what a slug is)"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "StaticResources" }), " is defined in ", _jsx(_components.code, { className: "language-auto", children: "quartz/resources.tsx" }), ". It consists of", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "css" }), ": a list of CSS style definitions that should be loaded. A CSS style is described with the ", _jsx(_components.code, { className: "language-auto", children: "CSSResource" }), " type which is also defined in ", _jsx(_components.code, { className: "language-auto", children: "quartz/resources.tsx" }), ". It accepts either a source URL or the inline content of the stylesheet."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "js" }), ": a list of scripts that should be loaded. A script is described with the ", _jsx(_components.code, { className: "language-auto", children: "JSResource" }), " type which is also defined in ", _jsx(_components.code, { className: "language-auto", children: "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."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "additionalHead" }), ": a list of JSX elements or functions that return JSX elements to be added to the ", _jsx(_components.code, { className: "language-auto", children: "" }), " tag of the page. Functions receive the page's data as an argument and can conditionally render elements."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "transformers", children: [_jsx(_components.a, { className: "heading-link", href: "#transformers", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Transformers"] }), "\n", _jsxs(_components.p, { children: ["Transformers ", _jsx(_components.strong, { children: "map" }), " over content, taking a Markdown file and outputting modified content or adding metadata to the file itself."] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "QuartzTransformerPluginInstance" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" textTransform", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: "," }), " src", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" markdownPlugins", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " PluggableList\n"] }), _jsxs(_components.span, { className: "code-line", children: [" htmlPlugins", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " PluggableList\n"] }), _jsxs(_components.span, { className: "code-line", children: [" externalResources", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " Partial", _jsx(_components.span, { className: "token operator", children: "<" }), "StaticResources", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["All transformer plugins must define at least a ", _jsx(_components.code, { className: "language-auto", children: "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."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "textTransform" }), " performs a text-to-text transformation ", _jsx(_components.em, { children: "before" }), " a file is parsed into the ", _jsx(_components.a, { href: "https://github.com/syntax-tree/mdast", target: "_blank", rel: "noopener noreferrer", children: "Markdown AST" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "markdownPlugins" }), " defines a list of ", _jsx(_components.a, { href: "https://github.com/remarkjs/remark/blob/main/doc/plugins.md", target: "_blank", rel: "noopener noreferrer", children: "remark plugins" }), ". ", _jsx(_components.code, { className: "language-auto", children: "remark" }), " is a tool that transforms Markdown to Markdown in a structured way."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "htmlPlugins" }), " defines a list of ", _jsx(_components.a, { href: "https://github.com/rehypejs/rehype/blob/main/doc/plugins.md", target: "_blank", rel: "noopener noreferrer", children: "rehype plugins" }), ". Similar to how ", _jsx(_components.code, { className: "language-auto", children: "remark" }), " works, ", _jsx(_components.code, { className: "language-auto", children: "rehype" }), " is a tool that transforms HTML to HTML in a structured way."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "externalResources" }), " defines any external resources the plugin may need to load on the client-side for it to work properly."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Normally for both ", _jsx(_components.code, { className: "language-auto", children: "remark" }), " and ", _jsx(_components.code, { className: "language-auto", children: "rehype" }), ", you can find existing plugins that you can use to . If you'd like to create your own ", _jsx(_components.code, { className: "language-auto", children: "remark" }), " or ", _jsx(_components.code, { className: "language-auto", children: "rehype" }), " plugin, checkout the ", _jsx(_components.a, { href: "https://unifiedjs.com/learn/guide/create-a-plugin/", target: "_blank", rel: "noopener noreferrer", children: "guide to creating a plugin" }), " using ", _jsx(_components.code, { className: "language-auto", children: "unified" }), " (the underlying AST parser and transformer library)."] }), "\n", _jsxs(_components.p, { children: ["A good example of a transformer plugin that borrows from the ", _jsx(_components.code, { className: "language-auto", children: "remark" }), " and ", _jsx(_components.code, { className: "language-auto", children: "rehype" }), " ecosystems is the ", _jsx(_components.a, { href: "/docs/plugins/Latex", className: "internal", "data-fs-resolved-file-path": "/docs/plugins/Latex.md", children: "Latex" }), " plugin:"] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " remarkMath ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"remark-math\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " rehypeKatex ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"rehype-katex\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " rehypeMathjax ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"rehype-mathjax/svg\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " QuartzTransformerPlugin ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"../types\"" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Options" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" renderEngine", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"katex\"" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "\"mathjax\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " Latex", _jsx(_components.span, { className: "token operator", children: ":" }), " QuartzTransformerPlugin", _jsx(_components.span, { className: "token operator", children: "<" }), "Options", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "opts", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Options", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " engine ", _jsx(_components.span, { className: "token operator", children: "=" }), " opts", _jsx(_components.span, { className: "token operator", children: "?." }), "renderEngine ", _jsx(_components.span, { className: "token operator", children: "??" }), " ", _jsx(_components.span, { className: "token string", children: "\"katex\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"Latex\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "markdownPlugins" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "remarkMath", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "htmlPlugins" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "engine ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"katex\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// if you need to pass options into a plugin, you" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// can use a tuple of [plugin, options]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), "rehypeKatex", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " output", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"html\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "rehypeMathjax", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "externalResources" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "engine ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "\"katex\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" css", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// base css" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" js", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" src", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" loadTime", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"afterDOMReady\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" contentType", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"external\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Another common thing that transformer plugins will do is parse a file and add extra data for that file:" }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " AddWordCount", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "QuartzTransformerPlugin" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"AddWordCount\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "markdownPlugins" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " file", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// tree is an `mdast` root element" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// file is a `vfile`" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " text ", _jsx(_components.span, { className: "token operator", children: "=" }), " file", _jsx(_components.span, { className: "token punctuation", children: "." }), "value\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " words ", _jsx(_components.span, { className: "token operator", children: "=" }), " text", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "split" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\" \"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "length\n"] }), _jsxs(_components.span, { className: "code-line", children: [" file", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "." }), "wordcount ", _jsx(_components.span, { className: "token operator", children: "=" }), " words\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// tell typescript about our custom data fields we are adding" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// other plugins will then also be aware of this data field" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "declare" }), " ", _jsx(_components.span, { className: "token keyword", children: "module" }), " ", _jsx(_components.span, { className: "token string", children: "\"vfile\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "DataMap" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" wordcount", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Finally, you can also perform transformations over Markdown or HTML ASTs using the ", _jsx(_components.code, { className: "language-auto", children: "visit" }), " function from the ", _jsx(_components.code, { className: "language-auto", children: "unist-util-visit" }), " package or the ", _jsx(_components.code, { className: "language-auto", children: "findAndReplace" }), " function from the ", _jsx(_components.code, { className: "language-auto", children: "mdast-util-find-and-replace" }), " package."] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " TextTransforms", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "QuartzTransformerPlugin" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"TextTransforms\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "markdownPlugins" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " file", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// replace _text_ with the italics version" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "findAndReplace" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: ["_", _jsx(_components.span, { className: "token group punctuation", children: "(" }), _jsx(_components.span, { className: "token char-set class-name", children: "." }), _jsx(_components.span, { className: "token quantifier number", children: "+" }), _jsx(_components.span, { className: "token group punctuation", children: ")" }), "_"] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "_value", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token operator", children: "..." }), "capture", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// inner is the text inside of the () of the regex" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "inner", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " capture\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// return an mdast node" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://github.com/syntax-tree/mdast" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"emphasis\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'text'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token operator", children: ":" }), " inner ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// remove all links (replace with just the link content)" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// match by 'type' field on an mdast node" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://github.com/syntax-tree/mdast#link in this example" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "visit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"link\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "link", _jsx(_components.span, { className: "token operator", children: ":" }), " Link", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"paragraph\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " type", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'text'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token operator", children: ":" }), " link", _jsx(_components.span, { className: "token punctuation", children: "." }), "title ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["All transformer plugins can be found under ", _jsx(_components.code, { className: "language-auto", children: "quartz/plugins/transformers" }), ". If you decide to write your own transformer plugin, don't forget to re-export it under ", _jsx(_components.code, { className: "language-auto", children: "quartz/plugins/transformers/index.ts" })] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h2, { id: "filters", children: [_jsx(_components.a, { className: "heading-link", href: "#filters", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Filters"] }), "\n", _jsxs(_components.p, { children: ["Filters ", _jsx(_components.strong, { children: "filter" }), " content, taking the output of all the transformers and determining what files to actually keep and what to discard."] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["QuartzFilterPlugin", _jsx(_components.span, { className: "token operator", children: "<" }), "Options ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " OptionType ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" opts", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Options", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " QuartzFilterPluginInstance\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "QuartzFilterPluginInstance" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "shouldPublish" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: "," }), " content", _jsx(_components.span, { className: "token operator", children: ":" }), " ProcessedContent", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "boolean" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["A filter plugin must define a ", _jsx(_components.code, { className: "language-auto", children: "name" }), " field and a ", _jsx(_components.code, { className: "language-auto", children: "shouldPublish" }), " function that takes in a piece of content that has been processed by all the transformers and returns a ", _jsx(_components.code, { className: "language-auto", children: "true" }), " or ", _jsx(_components.code, { className: "language-auto", children: "false" }), " depending on whether it should be passed to the emitter plugins or not."] }), "\n", _jsx(_components.p, { children: "For example, here is the built-in plugin for removing drafts:" }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " QuartzFilterPlugin ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"../types\"" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " RemoveDrafts", _jsx(_components.span, { className: "token operator", children: ":" }), " QuartzFilterPlugin", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"RemoveDrafts\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "shouldPublish" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "_ctx", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "_tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " vfile", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// uses frontmatter parsed from transformers" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " draftFlag", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "boolean" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " vfile", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token operator", children: "?." }), "frontmatter", _jsx(_components.span, { className: "token operator", children: "?." }), "draft ", _jsx(_components.span, { className: "token operator", children: "??" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "!" }), "draftFlag\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }), "\n", _jsxs(_components.h2, { id: "emitters", children: [_jsx(_components.a, { className: "heading-link", href: "#emitters", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Emitters"] }), "\n", _jsxs(_components.p, { children: ["Emitters ", _jsx(_components.strong, { children: "reduce" }), " over content, taking in a list of all the transformed and filtered content and creating output files."] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["QuartzEmitterPlugin", _jsx(_components.span, { className: "token operator", children: "<" }), "Options ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " OptionType ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" opts", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Options", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " QuartzEmitterPluginInstance\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "QuartzEmitterPluginInstance" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "emit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ProcessedContent", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" resources", _jsx(_components.span, { className: "token operator", children: ":" }), " StaticResources", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), "FilePath", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " AsyncGenerator", _jsx(_components.span, { className: "token operator", children: "<" }), "FilePath", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" partialEmit", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ProcessedContent", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" resources", _jsx(_components.span, { className: "token operator", children: ":" }), " StaticResources", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" changeEvents", _jsx(_components.span, { className: "token operator", children: ":" }), " ChangeEvent", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), "FilePath", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " AsyncGenerator", _jsx(_components.span, { className: "token operator", children: "<" }), "FilePath", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "getQuartzComponents" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " QuartzComponent", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["An emitter plugin must define a ", _jsx(_components.code, { className: "language-auto", children: "name" }), " field, an ", _jsx(_components.code, { className: "language-auto", children: "emit" }), " function, and a ", _jsx(_components.code, { className: "language-auto", children: "getQuartzComponents" }), " function. It can optionally implement a ", _jsx(_components.code, { className: "language-auto", children: "partialEmit" }), " function for incremental builds."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "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."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "partialEmit" }), " is an optional function that enables incremental builds. It receives information about which files have changed (", _jsx(_components.code, { className: "language-auto", children: "changeEvents" }), ") and can selectively rebuild only the necessary files. This is useful for optimizing build times in development mode. If ", _jsx(_components.code, { className: "language-auto", children: "partialEmit" }), " is undefined, it will default to the ", _jsx(_components.code, { className: "language-auto", children: "emit" }), " function."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "getQuartzComponents" }), " declares which Quartz components the emitter uses to construct its pages."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Creating new files can be done via regular Node ", _jsx(_components.a, { href: "https://nodejs.org/api/fs.html", target: "_blank", rel: "noopener noreferrer", children: "fs module" }), " (i.e. ", _jsx(_components.code, { className: "language-auto", children: "fs.cp" }), " or ", _jsx(_components.code, { className: "language-auto", children: "fs.writeFile" }), ") or via the ", _jsx(_components.code, { className: "language-auto", children: "write" }), " function in ", _jsx(_components.code, { className: "language-auto", children: "quartz/plugins/emitters/helpers.ts" }), " if you are creating files that contain text. ", _jsx(_components.code, { className: "language-auto", children: "write" }), " has the following signature:"] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "WriteOptions" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// the build context" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ctx", _jsx(_components.span, { className: "token operator", children: ":" }), " BuildCtx\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// the name of the file to emit (not including the file extension)" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" slug", _jsx(_components.span, { className: "token operator", children: ":" }), " FullSlug\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// the file extension" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ext", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "." }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "\"\"" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// the file content to add" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), "FilePath", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { className: "language-auto", children: "fs" }), " APIs, ensure you emit to the ", _jsx(_components.code, { className: "language-auto", children: "argv.output" }), " folder as well."] }), "\n", _jsx(_components.p, { children: "If you are creating an emitter plugin that needs to render components, there are three more things to be aware of:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Your component should use ", _jsx(_components.code, { className: "language-auto", children: "getQuartzComponents" }), " to declare a list of ", _jsx(_components.code, { className: "language-auto", children: "QuartzComponents" }), " that it uses to construct the page. See the page on ", _jsx(_components.a, { href: "/docs/advanced/creating+components", className: "internal", "data-fs-resolved-file-path": "/docs/advanced/creating components.md", children: "creating components" }), " for more information."] }), "\n", _jsxs(_components.li, { children: ["You can use the ", _jsx(_components.code, { className: "language-auto", children: "renderPage" }), " function defined in ", _jsx(_components.code, { className: "language-auto", children: "quartz/components/renderPage.tsx" }), " to render Quartz components into HTML."] }), "\n", _jsxs(_components.li, { children: ["If you need to render an HTML AST to JSX, you can use the ", _jsx(_components.code, { className: "language-auto", children: "htmlToJsx" }), " function from ", _jsx(_components.code, { className: "language-auto", children: "quartz/util/jsx.ts" }), ". An example of this can be found in ", _jsx(_components.code, { className: "language-auto", children: "quartz/components/pages/Content.tsx" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "For example, the following is a simplified version of the content page plugin that renders every single page." }), "\n", _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ContentPage" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "QuartzEmitterPlugin" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// construct the layout" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " layout", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "FullPageLayout" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "sharedPageComponents", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "defaultContentPageLayout", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" pageBody", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "Content" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " head", _jsx(_components.span, { className: "token punctuation", children: "," }), " header", _jsx(_components.span, { className: "token punctuation", children: "," }), " beforeBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " pageBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " afterBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " left", _jsx(_components.span, { className: "token punctuation", children: "," }), " right", _jsx(_components.span, { className: "token punctuation", children: "," }), " footer ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " layout\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"ContentPage\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "getQuartzComponents" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "head", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "header", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "beforeBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " pageBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "afterBody", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "left", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "right", _jsx(_components.span, { className: "token punctuation", children: "," }), " footer", _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token function", children: "emit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ctx", _jsx(_components.span, { className: "token punctuation", children: "," }), " content", _jsx(_components.span, { className: "token punctuation", children: "," }), " resources", _jsx(_components.span, { className: "token punctuation", children: "," }), " emit", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token maybe-class-name", children: "FilePath" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " cfg ", _jsx(_components.span, { className: "token operator", children: "=" }), " ctx", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "cfg" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "configuration" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fps", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "FilePath" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " allFiles ", _jsx(_components.span, { className: "token operator", children: "=" }), " content", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "map" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "c", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " c", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "for" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "tree", _jsx(_components.span, { className: "token punctuation", children: "," }), " file", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token keyword", children: "of" }), " content", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " slug ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "canonicalizeServer" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "file", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "slug" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " externalResources ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "pageResources" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "slug", _jsx(_components.span, { className: "token punctuation", children: "," }), " file", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " resources", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " componentData", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "QuartzComponentProps" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" fileData", _jsx(_components.span, { className: "token operator", children: ":" }), " file", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" externalResources", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" cfg", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" tree", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" allFiles", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " content ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "renderPage" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "cfg", _jsx(_components.span, { className: "token punctuation", children: "," }), " slug", _jsx(_components.span, { className: "token punctuation", children: "," }), " componentData", _jsx(_components.span, { className: "token punctuation", children: "," }), " opts", _jsx(_components.span, { className: "token punctuation", children: "," }), " externalResources", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " fp ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "emit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" content", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" slug", _jsx(_components.span, { className: "token operator", children: ":" }), " file", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "data" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "slug" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ext", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\".html\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" fps", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "fp", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " fps\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Note that it takes in a ", _jsx(_components.code, { className: "language-auto", children: "FullPageLayout" }), " as the options. It's made by combining a ", _jsx(_components.code, { className: "language-auto", children: "SharedLayout" }), " and a ", _jsx(_components.code, { className: "language-auto", children: "PageLayout" }), " both of which are provided through the ", _jsx(_components.code, { className: "language-auto", children: "quartz.layout.ts" }), " file."] }), "\n", _jsxs(_components.div, { "data-callout": true, "data-callout-type": "hint", children: ["\n", _jsx(_components.div, { "data-callout-title": true, children: "Hint" }), "\n", _jsxs(_components.div, { "data-callout-body": true, children: ["\n", _jsxs(_components.p, { children: ["Look in ", _jsx(_components.code, { className: "language-auto", children: "quartz/plugins" }), " for more examples of plugins in Quartz as reference for your own plugins!"] }), "\n"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };