collapsible toc

This commit is contained in:
Jacky Zhao 2023-06-17 12:07:40 -07:00
parent 917d5791ac
commit 6d5491fdcb
14 changed files with 176 additions and 114 deletions
quartz/plugins

View file

@ -28,7 +28,7 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
return {
name: "ContentPage",
getQuartzComponents() {
return [opts.head, Header, ...opts.header, ...opts.body]
return [opts.head, Header, Body, ...opts.header, ...opts.body, ...opts.left, ...opts.right, ...opts.footer]
},
async emit(_contentDir, cfg, content, resources, emit): Promise<string[]> {
const fps: string[] = []

View file

@ -33,10 +33,6 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
afterDOMLoaded: []
}
if (cfg.enableSPA) {
componentResources.afterDOMLoaded.push(spaRouterScript)
}
for (const component of allComponents) {
const { css, beforeDOMLoaded, afterDOMLoaded } = component
if (css) {
@ -50,6 +46,15 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
}
}
if (cfg.enableSPA) {
componentResources.afterDOMLoaded.push(spaRouterScript)
} else {
componentResources.afterDOMLoaded.push(`
const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
document.dispatchEvent(event)`
)
}
emit({
slug: "index",
ext: ".css",

View file

@ -14,18 +14,20 @@ export const Katex: QuartzTransformerPlugin = () => ({
}]
]
},
externalResources: {
css: [
// base css
"https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
],
js: [
{
// fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
loadTime: "afterDOMReady",
contentType: 'external'
}
]
externalResources() {
return {
css: [
// base css
"https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
],
js: [
{
// fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
loadTime: "afterDOMReady",
contentType: 'external'
}
]
}
}
})

View file

@ -6,6 +6,7 @@ import { slugify } from "../../path"
import rehypeRaw from "rehype-raw"
import { visit } from "unist-util-visit"
import path from "path"
import { JSResource } from "../../resources"
export interface Options {
highlight: boolean
@ -235,6 +236,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
node.children.splice(0, 1, ...blockquoteContent)
// add properties to base blockquote
// TODO: add the js to actually support collapsing callout
node.data = {
hProperties: {
...(node.data?.hProperties ?? {}),
@ -270,16 +272,19 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
htmlPlugins() {
return [rehypeRaw]
},
externalResources: {
js: [{
externalResources() {
const mermaidScript: JSResource = {
script: `
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
`,
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
`,
loadTime: 'afterDOMReady',
moduleType: 'module',
contentType: 'inline'
}]
}
return {
js: opts.mermaid ? [mermaidScript] : []
}
}
}
}

View file

@ -16,7 +16,7 @@ export type QuartzTransformerPluginInstance = {
name: string
markdownPlugins(): PluggableList
htmlPlugins(): PluggableList
externalResources?: Partial<StaticResources>
externalResources?(): Partial<StaticResources>
}
export type QuartzFilterPlugin<Options extends OptionType = undefined> = (opts?: Options) => QuartzFilterPluginInstance