Initial commit
This commit is contained in:
GitHub
68
quartz/plugins/emitters/404.tsx
Normal file
68
quartz/plugins/emitters/404.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import { QuartzComponentProps } from "../../components/types"
|
||||
import BodyConstructor from "../../components/Body"
|
||||
import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import { FilePath, FullSlug } from "../../util/path"
|
||||
import { sharedPageComponents } from "../../../quartz.layout"
|
||||
import { NotFound } from "../../components"
|
||||
import { defaultProcessedContent } from "../vfile"
|
||||
import { write } from "./helpers"
|
||||
import { i18n } from "../../i18n"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export const NotFoundPage: QuartzEmitterPlugin = () => {
|
||||
const opts: FullPageLayout = {
|
||||
...sharedPageComponents,
|
||||
pageBody: NotFound(),
|
||||
beforeBody: [],
|
||||
left: [],
|
||||
right: [],
|
||||
}
|
||||
|
||||
const { head: Head, pageBody, footer: Footer } = opts
|
||||
const Body = BodyConstructor()
|
||||
|
||||
return {
|
||||
name: "404Page",
|
||||
getQuartzComponents() {
|
||||
return [Head, Body, pageBody, Footer]
|
||||
},
|
||||
async getDependencyGraph(_ctx, _content, _resources) {
|
||||
return new DepGraph<FilePath>()
|
||||
},
|
||||
async emit(ctx, _content, resources): Promise<FilePath[]> {
|
||||
const cfg = ctx.cfg.configuration
|
||||
const slug = "404" as FullSlug
|
||||
|
||||
const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
|
||||
const path = url.pathname as FullSlug
|
||||
const externalResources = pageResources(path, resources)
|
||||
const notFound = i18n(cfg.locale).pages.error.title
|
||||
const [tree, vfile] = defaultProcessedContent({
|
||||
slug,
|
||||
text: notFound,
|
||||
description: notFound,
|
||||
frontmatter: { title: notFound, tags: [] },
|
||||
})
|
||||
const componentData: QuartzComponentProps = {
|
||||
ctx,
|
||||
fileData: vfile.data,
|
||||
externalResources,
|
||||
cfg,
|
||||
children: [],
|
||||
tree,
|
||||
allFiles: [],
|
||||
}
|
||||
|
||||
return [
|
||||
await write({
|
||||
ctx,
|
||||
content: renderPage(cfg, slug, componentData, opts, externalResources),
|
||||
slug,
|
||||
ext: ".html",
|
||||
}),
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
81
quartz/plugins/emitters/aliases.ts
Normal file
81
quartz/plugins/emitters/aliases.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import { FilePath, FullSlug, joinSegments, resolveRelative, simplifySlug } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import path from "path"
|
||||
import { write } from "./helpers"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export const AliasRedirects: QuartzEmitterPlugin = () => ({
|
||||
name: "AliasRedirects",
|
||||
getQuartzComponents() {
|
||||
return []
|
||||
},
|
||||
async getDependencyGraph(ctx, content, _resources) {
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
const { argv } = ctx
|
||||
for (const [_tree, file] of content) {
|
||||
const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
|
||||
const aliases = file.data.frontmatter?.aliases ?? []
|
||||
const slugs = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
|
||||
const permalink = file.data.frontmatter?.permalink
|
||||
if (typeof permalink === "string") {
|
||||
slugs.push(permalink as FullSlug)
|
||||
}
|
||||
|
||||
for (let slug of slugs) {
|
||||
// fix any slugs that have trailing slash
|
||||
if (slug.endsWith("/")) {
|
||||
slug = joinSegments(slug, "index") as FullSlug
|
||||
}
|
||||
|
||||
graph.addEdge(file.data.filePath!, joinSegments(argv.output, slug + ".html") as FilePath)
|
||||
}
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit(ctx, content, _resources): Promise<FilePath[]> {
|
||||
const { argv } = ctx
|
||||
const fps: FilePath[] = []
|
||||
|
||||
for (const [_tree, file] of content) {
|
||||
const ogSlug = simplifySlug(file.data.slug!)
|
||||
const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
|
||||
const aliases = file.data.frontmatter?.aliases ?? []
|
||||
const slugs: FullSlug[] = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
|
||||
const permalink = file.data.frontmatter?.permalink
|
||||
if (typeof permalink === "string") {
|
||||
slugs.push(permalink as FullSlug)
|
||||
}
|
||||
|
||||
for (let slug of slugs) {
|
||||
// fix any slugs that have trailing slash
|
||||
if (slug.endsWith("/")) {
|
||||
slug = joinSegments(slug, "index") as FullSlug
|
||||
}
|
||||
|
||||
const redirUrl = resolveRelative(slug, file.data.slug!)
|
||||
const fp = await write({
|
||||
ctx,
|
||||
content: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<title>${ogSlug}</title>
|
||||
<link rel="canonical" href="${redirUrl}">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="refresh" content="0; url=${redirUrl}">
|
||||
</head>
|
||||
</html>
|
||||
`,
|
||||
slug,
|
||||
ext: ".html",
|
||||
})
|
||||
|
||||
fps.push(fp)
|
||||
}
|
||||
}
|
||||
return fps
|
||||
},
|
||||
})
|
||||
58
quartz/plugins/emitters/assets.ts
Normal file
58
quartz/plugins/emitters/assets.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { FilePath, joinSegments, slugifyFilePath } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import path from "path"
|
||||
import fs from "fs"
|
||||
import { glob } from "../../util/glob"
|
||||
import DepGraph from "../../depgraph"
|
||||
import { Argv } from "../../util/ctx"
|
||||
import { QuartzConfig } from "../../cfg"
|
||||
|
||||
const filesToCopy = async (argv: Argv, cfg: QuartzConfig) => {
|
||||
// glob all non MD files in content folder and copy it over
|
||||
return await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
|
||||
}
|
||||
|
||||
export const Assets: QuartzEmitterPlugin = () => {
|
||||
return {
|
||||
name: "Assets",
|
||||
getQuartzComponents() {
|
||||
return []
|
||||
},
|
||||
async getDependencyGraph(ctx, _content, _resources) {
|
||||
const { argv, cfg } = ctx
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
const fps = await filesToCopy(argv, cfg)
|
||||
|
||||
for (const fp of fps) {
|
||||
const ext = path.extname(fp)
|
||||
const src = joinSegments(argv.directory, fp) as FilePath
|
||||
const name = (slugifyFilePath(fp as FilePath, true) + ext) as FilePath
|
||||
|
||||
const dest = joinSegments(argv.output, name) as FilePath
|
||||
|
||||
graph.addEdge(src, dest)
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
|
||||
const assetsPath = argv.output
|
||||
const fps = await filesToCopy(argv, cfg)
|
||||
const res: FilePath[] = []
|
||||
for (const fp of fps) {
|
||||
const ext = path.extname(fp)
|
||||
const src = joinSegments(argv.directory, fp) as FilePath
|
||||
const name = (slugifyFilePath(fp as FilePath, true) + ext) as FilePath
|
||||
|
||||
const dest = joinSegments(assetsPath, name) as FilePath
|
||||
const dir = path.dirname(dest) as FilePath
|
||||
await fs.promises.mkdir(dir, { recursive: true }) // ensure dir exists
|
||||
await fs.promises.copyFile(src, dest)
|
||||
res.push(dest)
|
||||
}
|
||||
|
||||
return res
|
||||
},
|
||||
}
|
||||
}
|
||||
33
quartz/plugins/emitters/cname.ts
Normal file
33
quartz/plugins/emitters/cname.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { FilePath, joinSegments } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import fs from "fs"
|
||||
import chalk from "chalk"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export function extractDomainFromBaseUrl(baseUrl: string) {
|
||||
const url = new URL(`https://${baseUrl}`)
|
||||
return url.hostname
|
||||
}
|
||||
|
||||
export const CNAME: QuartzEmitterPlugin = () => ({
|
||||
name: "CNAME",
|
||||
getQuartzComponents() {
|
||||
return []
|
||||
},
|
||||
async getDependencyGraph(_ctx, _content, _resources) {
|
||||
return new DepGraph<FilePath>()
|
||||
},
|
||||
async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
|
||||
if (!cfg.configuration.baseUrl) {
|
||||
console.warn(chalk.yellow("CNAME emitter requires `baseUrl` to be set in your configuration"))
|
||||
return []
|
||||
}
|
||||
const path = joinSegments(argv.output, "CNAME")
|
||||
const content = extractDomainFromBaseUrl(cfg.configuration.baseUrl)
|
||||
if (!content) {
|
||||
return []
|
||||
}
|
||||
fs.writeFileSync(path, content)
|
||||
return [path] as FilePath[]
|
||||
},
|
||||
})
|
||||
273
quartz/plugins/emitters/componentResources.ts
Normal file
273
quartz/plugins/emitters/componentResources.ts
Normal file
@ -0,0 +1,273 @@
|
||||
import { FilePath, FullSlug, joinSegments } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
|
||||
// @ts-ignore
|
||||
import spaRouterScript from "../../components/scripts/spa.inline"
|
||||
// @ts-ignore
|
||||
import popoverScript from "../../components/scripts/popover.inline"
|
||||
import styles from "../../styles/custom.scss"
|
||||
import popoverStyle from "../../components/styles/popover.scss"
|
||||
import { BuildCtx } from "../../util/ctx"
|
||||
import { QuartzComponent } from "../../components/types"
|
||||
import { googleFontHref, joinStyles } from "../../util/theme"
|
||||
import { Features, transform } from "lightningcss"
|
||||
import { transform as transpile } from "esbuild"
|
||||
import { write } from "./helpers"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
type ComponentResources = {
|
||||
css: string[]
|
||||
beforeDOMLoaded: string[]
|
||||
afterDOMLoaded: string[]
|
||||
}
|
||||
|
||||
function getComponentResources(ctx: BuildCtx): ComponentResources {
|
||||
const allComponents: Set<QuartzComponent> = new Set()
|
||||
for (const emitter of ctx.cfg.plugins.emitters) {
|
||||
const components = emitter.getQuartzComponents(ctx)
|
||||
for (const component of components) {
|
||||
allComponents.add(component)
|
||||
}
|
||||
}
|
||||
|
||||
const componentResources = {
|
||||
css: new Set<string>(),
|
||||
beforeDOMLoaded: new Set<string>(),
|
||||
afterDOMLoaded: new Set<string>(),
|
||||
}
|
||||
|
||||
for (const component of allComponents) {
|
||||
const { css, beforeDOMLoaded, afterDOMLoaded } = component
|
||||
if (css) {
|
||||
componentResources.css.add(css)
|
||||
}
|
||||
if (beforeDOMLoaded) {
|
||||
componentResources.beforeDOMLoaded.add(beforeDOMLoaded)
|
||||
}
|
||||
if (afterDOMLoaded) {
|
||||
componentResources.afterDOMLoaded.add(afterDOMLoaded)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
css: [...componentResources.css],
|
||||
beforeDOMLoaded: [...componentResources.beforeDOMLoaded],
|
||||
afterDOMLoaded: [...componentResources.afterDOMLoaded],
|
||||
}
|
||||
}
|
||||
|
||||
async function joinScripts(scripts: string[]): Promise<string> {
|
||||
// wrap with iife to prevent scope collision
|
||||
const script = scripts.map((script) => `(function () {${script}})();`).join("\n")
|
||||
|
||||
// minify with esbuild
|
||||
const res = await transpile(script, {
|
||||
minify: true,
|
||||
})
|
||||
|
||||
return res.code
|
||||
}
|
||||
|
||||
function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentResources) {
|
||||
const cfg = ctx.cfg.configuration
|
||||
|
||||
// popovers
|
||||
if (cfg.enablePopovers) {
|
||||
componentResources.afterDOMLoaded.push(popoverScript)
|
||||
componentResources.css.push(popoverStyle)
|
||||
}
|
||||
|
||||
if (cfg.analytics?.provider === "google") {
|
||||
const tagId = cfg.analytics.tagId
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const gtagScript = document.createElement("script")
|
||||
gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}"
|
||||
gtagScript.async = true
|
||||
document.head.appendChild(gtagScript)
|
||||
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag("js", new Date());
|
||||
gtag("config", "${tagId}", { send_page_view: false });
|
||||
|
||||
document.addEventListener("nav", () => {
|
||||
gtag("event", "page_view", {
|
||||
page_title: document.title,
|
||||
page_location: location.href,
|
||||
});
|
||||
});`)
|
||||
} else if (cfg.analytics?.provider === "plausible") {
|
||||
const plausibleHost = cfg.analytics.host ?? "https://plausible.io"
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const plausibleScript = document.createElement("script")
|
||||
plausibleScript.src = "${plausibleHost}/js/script.manual.js"
|
||||
plausibleScript.setAttribute("data-domain", location.hostname)
|
||||
plausibleScript.defer = true
|
||||
document.head.appendChild(plausibleScript)
|
||||
|
||||
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
|
||||
|
||||
document.addEventListener("nav", () => {
|
||||
plausible("pageview")
|
||||
})
|
||||
`)
|
||||
} else if (cfg.analytics?.provider === "umami") {
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const umamiScript = document.createElement("script")
|
||||
umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js"
|
||||
umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
|
||||
umamiScript.async = true
|
||||
|
||||
document.head.appendChild(umamiScript)
|
||||
`)
|
||||
} else if (cfg.analytics?.provider === "goatcounter") {
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const goatcounterScript = document.createElement("script")
|
||||
goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"
|
||||
goatcounterScript.async = true
|
||||
goatcounterScript.setAttribute("data-goatcounter",
|
||||
"https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
|
||||
document.head.appendChild(goatcounterScript)
|
||||
`)
|
||||
} else if (cfg.analytics?.provider === "posthog") {
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const posthogScript = document.createElement("script")
|
||||
posthogScript.innerHTML= \`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
|
||||
posthog.init('${cfg.analytics.apiKey}',{api_host:'${cfg.analytics.host ?? "https://app.posthog.com"}'})\`
|
||||
document.head.appendChild(posthogScript)
|
||||
`)
|
||||
} else if (cfg.analytics?.provider === "tinylytics") {
|
||||
const siteId = cfg.analytics.siteId
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
const tinylyticsScript = document.createElement("script")
|
||||
tinylyticsScript.src = "https://tinylytics.app/embed/${siteId}.js"
|
||||
tinylyticsScript.defer = true
|
||||
document.head.appendChild(tinylyticsScript)
|
||||
`)
|
||||
}
|
||||
|
||||
if (cfg.enableSPA) {
|
||||
componentResources.afterDOMLoaded.push(spaRouterScript)
|
||||
} else {
|
||||
componentResources.afterDOMLoaded.push(`
|
||||
window.spaNavigate = (url, _) => window.location.assign(url)
|
||||
window.addCleanup = () => {}
|
||||
const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
|
||||
document.dispatchEvent(event)
|
||||
`)
|
||||
}
|
||||
}
|
||||
|
||||
// This emitter should not update the `resources` parameter. If it does, partial
|
||||
// rebuilds may not work as expected.
|
||||
export const ComponentResources: QuartzEmitterPlugin = () => {
|
||||
return {
|
||||
name: "ComponentResources",
|
||||
getQuartzComponents() {
|
||||
return []
|
||||
},
|
||||
async getDependencyGraph(_ctx, _content, _resources) {
|
||||
return new DepGraph<FilePath>()
|
||||
},
|
||||
async emit(ctx, _content, _resources): Promise<FilePath[]> {
|
||||
const promises: Promise<FilePath>[] = []
|
||||
const cfg = ctx.cfg.configuration
|
||||
// component specific scripts and styles
|
||||
const componentResources = getComponentResources(ctx)
|
||||
let googleFontsStyleSheet = ""
|
||||
if (cfg.theme.fontOrigin === "local") {
|
||||
// let the user do it themselves in css
|
||||
} else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
|
||||
// when cdnCaching is true, we link to google fonts in Head.tsx
|
||||
let match
|
||||
|
||||
const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
|
||||
|
||||
googleFontsStyleSheet = await (
|
||||
await fetch(googleFontHref(ctx.cfg.configuration.theme))
|
||||
).text()
|
||||
|
||||
while ((match = fontSourceRegex.exec(googleFontsStyleSheet)) !== null) {
|
||||
// match[0] is the `url(path)`, match[1] is the `path`
|
||||
const url = match[1]
|
||||
// the static name of this file.
|
||||
const [filename, ext] = url.split("/").pop()!.split(".")
|
||||
|
||||
googleFontsStyleSheet = googleFontsStyleSheet.replace(
|
||||
url,
|
||||
`https://${cfg.baseUrl}/static/fonts/${filename}.ttf`,
|
||||
)
|
||||
|
||||
promises.push(
|
||||
fetch(url)
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch font`)
|
||||
}
|
||||
return res.arrayBuffer()
|
||||
})
|
||||
.then((buf) =>
|
||||
write({
|
||||
ctx,
|
||||
slug: joinSegments("static", "fonts", filename) as FullSlug,
|
||||
ext: `.${ext}`,
|
||||
content: Buffer.from(buf),
|
||||
}),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// important that this goes *after* component scripts
|
||||
// as the "nav" event gets triggered here and we should make sure
|
||||
// that everyone else had the chance to register a listener for it
|
||||
addGlobalPageResources(ctx, componentResources)
|
||||
|
||||
const stylesheet = joinStyles(
|
||||
ctx.cfg.configuration.theme,
|
||||
googleFontsStyleSheet,
|
||||
...componentResources.css,
|
||||
styles,
|
||||
)
|
||||
const [prescript, postscript] = await Promise.all([
|
||||
joinScripts(componentResources.beforeDOMLoaded),
|
||||
joinScripts(componentResources.afterDOMLoaded),
|
||||
])
|
||||
|
||||
promises.push(
|
||||
write({
|
||||
ctx,
|
||||
slug: "index" as FullSlug,
|
||||
ext: ".css",
|
||||
content: transform({
|
||||
filename: "index.css",
|
||||
code: Buffer.from(stylesheet),
|
||||
minify: true,
|
||||
targets: {
|
||||
safari: (15 << 16) | (6 << 8), // 15.6
|
||||
ios_saf: (15 << 16) | (6 << 8), // 15.6
|
||||
edge: 115 << 16,
|
||||
firefox: 102 << 16,
|
||||
chrome: 109 << 16,
|
||||
},
|
||||
include: Features.MediaQueries,
|
||||
}).code.toString(),
|
||||
}),
|
||||
write({
|
||||
ctx,
|
||||
slug: "prescript" as FullSlug,
|
||||
ext: ".js",
|
||||
content: prescript,
|
||||
}),
|
||||
write({
|
||||
ctx,
|
||||
slug: "postscript" as FullSlug,
|
||||
ext: ".js",
|
||||
content: postscript,
|
||||
}),
|
||||
)
|
||||
|
||||
return await Promise.all(promises)
|
||||
},
|
||||
}
|
||||
}
|
||||
185
quartz/plugins/emitters/contentIndex.ts
Normal file
185
quartz/plugins/emitters/contentIndex.ts
Normal file
@ -0,0 +1,185 @@
|
||||
import { Root } from "hast"
|
||||
import { GlobalConfiguration } from "../../cfg"
|
||||
import { getDate } from "../../components/Date"
|
||||
import { escapeHTML } from "../../util/escape"
|
||||
import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import { toHtml } from "hast-util-to-html"
|
||||
import { write } from "./helpers"
|
||||
import { i18n } from "../../i18n"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export type ContentIndex = Map<FullSlug, ContentDetails>
|
||||
export type ContentDetails = {
|
||||
title: string
|
||||
links: SimpleSlug[]
|
||||
tags: string[]
|
||||
content: string
|
||||
richContent?: string
|
||||
date?: Date
|
||||
description?: string
|
||||
}
|
||||
|
||||
interface Options {
|
||||
enableSiteMap: boolean
|
||||
enableRSS: boolean
|
||||
rssLimit?: number
|
||||
rssFullHtml: boolean
|
||||
includeEmptyFiles: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
enableSiteMap: true,
|
||||
enableRSS: true,
|
||||
rssLimit: 10,
|
||||
rssFullHtml: false,
|
||||
includeEmptyFiles: true,
|
||||
}
|
||||
|
||||
function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
|
||||
const base = cfg.baseUrl ?? ""
|
||||
const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<url>
|
||||
<loc>https://${joinSegments(base, encodeURI(slug))}</loc>
|
||||
${content.date && `<lastmod>${content.date.toISOString()}</lastmod>`}
|
||||
</url>`
|
||||
const urls = Array.from(idx)
|
||||
.map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
|
||||
.join("")
|
||||
return `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">${urls}</urlset>`
|
||||
}
|
||||
|
||||
function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: number): string {
|
||||
const base = cfg.baseUrl ?? ""
|
||||
|
||||
const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<item>
|
||||
<title>${escapeHTML(content.title)}</title>
|
||||
<link>https://${joinSegments(base, encodeURI(slug))}</link>
|
||||
<guid>https://${joinSegments(base, encodeURI(slug))}</guid>
|
||||
<description>${content.richContent ?? content.description}</description>
|
||||
<pubDate>${content.date?.toUTCString()}</pubDate>
|
||||
</item>`
|
||||
|
||||
const items = Array.from(idx)
|
||||
.sort(([_, f1], [__, f2]) => {
|
||||
if (f1.date && f2.date) {
|
||||
return f2.date.getTime() - f1.date.getTime()
|
||||
} else if (f1.date && !f2.date) {
|
||||
return -1
|
||||
} else if (!f1.date && f2.date) {
|
||||
return 1
|
||||
}
|
||||
|
||||
return f1.title.localeCompare(f2.title)
|
||||
})
|
||||
.map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
|
||||
.slice(0, limit ?? idx.size)
|
||||
.join("")
|
||||
|
||||
return `<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<rss version="2.0">
|
||||
<channel>
|
||||
<title>${escapeHTML(cfg.pageTitle)}</title>
|
||||
<link>https://${base}</link>
|
||||
<description>${!!limit ? i18n(cfg.locale).pages.rss.lastFewNotes({ count: limit }) : i18n(cfg.locale).pages.rss.recentNotes} on ${escapeHTML(
|
||||
cfg.pageTitle,
|
||||
)}</description>
|
||||
<generator>Quartz -- quartz.jzhao.xyz</generator>
|
||||
${items}
|
||||
</channel>
|
||||
</rss>`
|
||||
}
|
||||
|
||||
export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
|
||||
opts = { ...defaultOptions, ...opts }
|
||||
return {
|
||||
name: "ContentIndex",
|
||||
async getDependencyGraph(ctx, content, _resources) {
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
for (const [_tree, file] of content) {
|
||||
const sourcePath = file.data.filePath!
|
||||
|
||||
graph.addEdge(
|
||||
sourcePath,
|
||||
joinSegments(ctx.argv.output, "static/contentIndex.json") as FilePath,
|
||||
)
|
||||
if (opts?.enableSiteMap) {
|
||||
graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "sitemap.xml") as FilePath)
|
||||
}
|
||||
if (opts?.enableRSS) {
|
||||
graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "index.xml") as FilePath)
|
||||
}
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit(ctx, content, _resources) {
|
||||
const cfg = ctx.cfg.configuration
|
||||
const emitted: FilePath[] = []
|
||||
const linkIndex: ContentIndex = new Map()
|
||||
for (const [tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
const date = getDate(ctx.cfg.configuration, file.data) ?? new Date()
|
||||
if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
|
||||
linkIndex.set(slug, {
|
||||
title: file.data.frontmatter?.title!,
|
||||
links: file.data.links ?? [],
|
||||
tags: file.data.frontmatter?.tags ?? [],
|
||||
content: file.data.text ?? "",
|
||||
richContent: opts?.rssFullHtml
|
||||
? escapeHTML(toHtml(tree as Root, { allowDangerousHtml: true }))
|
||||
: undefined,
|
||||
date: date,
|
||||
description: file.data.description ?? "",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (opts?.enableSiteMap) {
|
||||
emitted.push(
|
||||
await write({
|
||||
ctx,
|
||||
content: generateSiteMap(cfg, linkIndex),
|
||||
slug: "sitemap" as FullSlug,
|
||||
ext: ".xml",
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
if (opts?.enableRSS) {
|
||||
emitted.push(
|
||||
await write({
|
||||
ctx,
|
||||
content: generateRSSFeed(cfg, linkIndex, opts.rssLimit),
|
||||
slug: "index" as FullSlug,
|
||||
ext: ".xml",
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
const fp = joinSegments("static", "contentIndex") as FullSlug
|
||||
const simplifiedIndex = Object.fromEntries(
|
||||
Array.from(linkIndex).map(([slug, content]) => {
|
||||
// remove description and from content index as nothing downstream
|
||||
// actually uses it. we only keep it in the index as we need it
|
||||
// for the RSS feed
|
||||
delete content.description
|
||||
delete content.date
|
||||
return [slug, content]
|
||||
}),
|
||||
)
|
||||
|
||||
emitted.push(
|
||||
await write({
|
||||
ctx,
|
||||
content: JSON.stringify(simplifiedIndex),
|
||||
slug: fp,
|
||||
ext: ".json",
|
||||
}),
|
||||
)
|
||||
|
||||
return emitted
|
||||
},
|
||||
getQuartzComponents: () => [],
|
||||
}
|
||||
}
|
||||
131
quartz/plugins/emitters/contentPage.tsx
Normal file
131
quartz/plugins/emitters/contentPage.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import path from "path"
|
||||
import { visit } from "unist-util-visit"
|
||||
import { Root } from "hast"
|
||||
import { VFile } from "vfile"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import { QuartzComponentProps } from "../../components/types"
|
||||
import HeaderConstructor from "../../components/Header"
|
||||
import BodyConstructor from "../../components/Body"
|
||||
import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import { Argv } from "../../util/ctx"
|
||||
import { FilePath, isRelativeURL, joinSegments, pathToRoot } from "../../util/path"
|
||||
import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
|
||||
import { Content } from "../../components"
|
||||
import chalk from "chalk"
|
||||
import { write } from "./helpers"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
// get all the dependencies for the markdown file
|
||||
// eg. images, scripts, stylesheets, transclusions
|
||||
const parseDependencies = (argv: Argv, hast: Root, file: VFile): string[] => {
|
||||
const dependencies: string[] = []
|
||||
|
||||
visit(hast, "element", (elem): void => {
|
||||
let ref: string | null = null
|
||||
|
||||
if (
|
||||
["script", "img", "audio", "video", "source", "iframe"].includes(elem.tagName) &&
|
||||
elem?.properties?.src
|
||||
) {
|
||||
ref = elem.properties.src.toString()
|
||||
} else if (["a", "link"].includes(elem.tagName) && elem?.properties?.href) {
|
||||
// transclusions will create a tags with relative hrefs
|
||||
ref = elem.properties.href.toString()
|
||||
}
|
||||
|
||||
// if it is a relative url, its a local file and we need to add
|
||||
// it to the dependency graph. otherwise, ignore
|
||||
if (ref === null || !isRelativeURL(ref)) {
|
||||
return
|
||||
}
|
||||
|
||||
let fp = path.join(file.data.filePath!, path.relative(argv.directory, ref)).replace(/\\/g, "/")
|
||||
// markdown files have the .md extension stripped in hrefs, add it back here
|
||||
if (!fp.split("/").pop()?.includes(".")) {
|
||||
fp += ".md"
|
||||
}
|
||||
dependencies.push(fp)
|
||||
})
|
||||
|
||||
return dependencies
|
||||
}
|
||||
|
||||
export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
|
||||
const opts: FullPageLayout = {
|
||||
...sharedPageComponents,
|
||||
...defaultContentPageLayout,
|
||||
pageBody: Content(),
|
||||
...userOpts,
|
||||
}
|
||||
|
||||
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
|
||||
const Header = HeaderConstructor()
|
||||
const Body = BodyConstructor()
|
||||
|
||||
return {
|
||||
name: "ContentPage",
|
||||
getQuartzComponents() {
|
||||
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
|
||||
},
|
||||
async getDependencyGraph(ctx, content, _resources) {
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
for (const [tree, file] of content) {
|
||||
const sourcePath = file.data.filePath!
|
||||
const slug = file.data.slug!
|
||||
graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
|
||||
|
||||
parseDependencies(ctx.argv, tree as Root, file).forEach((dep) => {
|
||||
graph.addEdge(dep as FilePath, sourcePath)
|
||||
})
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit(ctx, content, resources): Promise<FilePath[]> {
|
||||
const cfg = ctx.cfg.configuration
|
||||
const fps: FilePath[] = []
|
||||
const allFiles = content.map((c) => c[1].data)
|
||||
|
||||
let containsIndex = false
|
||||
for (const [tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
if (slug === "index") {
|
||||
containsIndex = true
|
||||
}
|
||||
|
||||
const externalResources = pageResources(pathToRoot(slug), resources)
|
||||
const componentData: QuartzComponentProps = {
|
||||
ctx,
|
||||
fileData: file.data,
|
||||
externalResources,
|
||||
cfg,
|
||||
children: [],
|
||||
tree,
|
||||
allFiles,
|
||||
}
|
||||
|
||||
const content = renderPage(cfg, slug, componentData, opts, externalResources)
|
||||
const fp = await write({
|
||||
ctx,
|
||||
content,
|
||||
slug,
|
||||
ext: ".html",
|
||||
})
|
||||
|
||||
fps.push(fp)
|
||||
}
|
||||
|
||||
if (!containsIndex && !ctx.argv.fastRebuild) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
`\nWarning: you seem to be missing an \`index.md\` home page file at the root of your \`${ctx.argv.directory}\` folder. This may cause errors when deploying.`,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
return fps
|
||||
},
|
||||
}
|
||||
}
|
||||
120
quartz/plugins/emitters/folderPage.tsx
Normal file
120
quartz/plugins/emitters/folderPage.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import { QuartzComponentProps } from "../../components/types"
|
||||
import HeaderConstructor from "../../components/Header"
|
||||
import BodyConstructor from "../../components/Body"
|
||||
import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { ProcessedContent, defaultProcessedContent } from "../vfile"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import path from "path"
|
||||
import {
|
||||
FilePath,
|
||||
FullSlug,
|
||||
SimpleSlug,
|
||||
stripSlashes,
|
||||
joinSegments,
|
||||
pathToRoot,
|
||||
simplifySlug,
|
||||
} from "../../util/path"
|
||||
import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
|
||||
import { FolderContent } from "../../components"
|
||||
import { write } from "./helpers"
|
||||
import { i18n } from "../../i18n"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
|
||||
const opts: FullPageLayout = {
|
||||
...sharedPageComponents,
|
||||
...defaultListPageLayout,
|
||||
pageBody: FolderContent(),
|
||||
...userOpts,
|
||||
}
|
||||
|
||||
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
|
||||
const Header = HeaderConstructor()
|
||||
const Body = BodyConstructor()
|
||||
|
||||
return {
|
||||
name: "FolderPage",
|
||||
getQuartzComponents() {
|
||||
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
|
||||
},
|
||||
async getDependencyGraph(_ctx, content, _resources) {
|
||||
// Example graph:
|
||||
// nested/file.md --> nested/index.html
|
||||
// nested/file2.md ------^
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
content.map(([_tree, vfile]) => {
|
||||
const slug = vfile.data.slug
|
||||
const folderName = path.dirname(slug ?? "") as SimpleSlug
|
||||
if (slug && folderName !== "." && folderName !== "tags") {
|
||||
graph.addEdge(vfile.data.filePath!, joinSegments(folderName, "index.html") as FilePath)
|
||||
}
|
||||
})
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit(ctx, content, resources): Promise<FilePath[]> {
|
||||
const fps: FilePath[] = []
|
||||
const allFiles = content.map((c) => c[1].data)
|
||||
const cfg = ctx.cfg.configuration
|
||||
|
||||
const folders: Set<SimpleSlug> = new Set(
|
||||
allFiles.flatMap((data) => {
|
||||
const slug = data.slug
|
||||
const folderName = path.dirname(slug ?? "") as SimpleSlug
|
||||
if (slug && folderName !== "." && folderName !== "tags") {
|
||||
return [folderName]
|
||||
}
|
||||
return []
|
||||
}),
|
||||
)
|
||||
|
||||
const folderDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
|
||||
[...folders].map((folder) => [
|
||||
folder,
|
||||
defaultProcessedContent({
|
||||
slug: joinSegments(folder, "index") as FullSlug,
|
||||
frontmatter: {
|
||||
title: `${i18n(cfg.locale).pages.folderContent.folder}: ${folder}`,
|
||||
tags: [],
|
||||
},
|
||||
}),
|
||||
]),
|
||||
)
|
||||
|
||||
for (const [tree, file] of content) {
|
||||
const slug = stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
|
||||
if (folders.has(slug)) {
|
||||
folderDescriptions[slug] = [tree, file]
|
||||
}
|
||||
}
|
||||
|
||||
for (const folder of folders) {
|
||||
const slug = joinSegments(folder, "index") as FullSlug
|
||||
const externalResources = pageResources(pathToRoot(slug), resources)
|
||||
const [tree, file] = folderDescriptions[folder]
|
||||
const componentData: QuartzComponentProps = {
|
||||
ctx,
|
||||
fileData: file.data,
|
||||
externalResources,
|
||||
cfg,
|
||||
children: [],
|
||||
tree,
|
||||
allFiles,
|
||||
}
|
||||
|
||||
const content = renderPage(cfg, slug, componentData, opts, externalResources)
|
||||
const fp = await write({
|
||||
ctx,
|
||||
content,
|
||||
slug,
|
||||
ext: ".html",
|
||||
})
|
||||
|
||||
fps.push(fp)
|
||||
}
|
||||
return fps
|
||||
},
|
||||
}
|
||||
}
|
||||
19
quartz/plugins/emitters/helpers.ts
Normal file
19
quartz/plugins/emitters/helpers.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import path from "path"
|
||||
import fs from "fs"
|
||||
import { BuildCtx } from "../../util/ctx"
|
||||
import { FilePath, FullSlug, joinSegments } from "../../util/path"
|
||||
|
||||
type WriteOptions = {
|
||||
ctx: BuildCtx
|
||||
slug: FullSlug
|
||||
ext: `.${string}` | ""
|
||||
content: string | Buffer
|
||||
}
|
||||
|
||||
export const write = async ({ ctx, slug, ext, content }: WriteOptions): Promise<FilePath> => {
|
||||
const pathToPage = joinSegments(ctx.argv.output, slug + ext) as FilePath
|
||||
const dir = path.dirname(pathToPage)
|
||||
await fs.promises.mkdir(dir, { recursive: true })
|
||||
await fs.promises.writeFile(pathToPage, content)
|
||||
return pathToPage
|
||||
}
|
||||
10
quartz/plugins/emitters/index.ts
Normal file
10
quartz/plugins/emitters/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export { ContentPage } from "./contentPage"
|
||||
export { TagPage } from "./tagPage"
|
||||
export { FolderPage } from "./folderPage"
|
||||
export { ContentIndex } from "./contentIndex"
|
||||
export { AliasRedirects } from "./aliases"
|
||||
export { Assets } from "./assets"
|
||||
export { Static } from "./static"
|
||||
export { ComponentResources } from "./componentResources"
|
||||
export { NotFoundPage } from "./404"
|
||||
export { CNAME } from "./cname"
|
||||
35
quartz/plugins/emitters/static.ts
Normal file
35
quartz/plugins/emitters/static.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { FilePath, QUARTZ, joinSegments } from "../../util/path"
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import fs from "fs"
|
||||
import { glob } from "../../util/glob"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export const Static: QuartzEmitterPlugin = () => ({
|
||||
name: "Static",
|
||||
getQuartzComponents() {
|
||||
return []
|
||||
},
|
||||
async getDependencyGraph({ argv, cfg }, _content, _resources) {
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
const staticPath = joinSegments(QUARTZ, "static")
|
||||
const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
|
||||
for (const fp of fps) {
|
||||
graph.addEdge(
|
||||
joinSegments("static", fp) as FilePath,
|
||||
joinSegments(argv.output, "static", fp) as FilePath,
|
||||
)
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
|
||||
const staticPath = joinSegments(QUARTZ, "static")
|
||||
const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
|
||||
await fs.promises.cp(staticPath, joinSegments(argv.output, "static"), {
|
||||
recursive: true,
|
||||
dereference: true,
|
||||
})
|
||||
return fps.map((fp) => joinSegments(argv.output, "static", fp)) as FilePath[]
|
||||
},
|
||||
})
|
||||
124
quartz/plugins/emitters/tagPage.tsx
Normal file
124
quartz/plugins/emitters/tagPage.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
import { QuartzEmitterPlugin } from "../types"
|
||||
import { QuartzComponentProps } from "../../components/types"
|
||||
import HeaderConstructor from "../../components/Header"
|
||||
import BodyConstructor from "../../components/Body"
|
||||
import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { ProcessedContent, defaultProcessedContent } from "../vfile"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import {
|
||||
FilePath,
|
||||
FullSlug,
|
||||
getAllSegmentPrefixes,
|
||||
joinSegments,
|
||||
pathToRoot,
|
||||
} from "../../util/path"
|
||||
import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
|
||||
import { TagContent } from "../../components"
|
||||
import { write } from "./helpers"
|
||||
import { i18n } from "../../i18n"
|
||||
import DepGraph from "../../depgraph"
|
||||
|
||||
export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
|
||||
const opts: FullPageLayout = {
|
||||
...sharedPageComponents,
|
||||
...defaultListPageLayout,
|
||||
pageBody: TagContent(),
|
||||
...userOpts,
|
||||
}
|
||||
|
||||
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
|
||||
const Header = HeaderConstructor()
|
||||
const Body = BodyConstructor()
|
||||
|
||||
return {
|
||||
name: "TagPage",
|
||||
getQuartzComponents() {
|
||||
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
|
||||
},
|
||||
async getDependencyGraph(ctx, content, _resources) {
|
||||
const graph = new DepGraph<FilePath>()
|
||||
|
||||
for (const [_tree, file] of content) {
|
||||
const sourcePath = file.data.filePath!
|
||||
const tags = (file.data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes)
|
||||
// if the file has at least one tag, it is used in the tag index page
|
||||
if (tags.length > 0) {
|
||||
tags.push("index")
|
||||
}
|
||||
|
||||
for (const tag of tags) {
|
||||
graph.addEdge(
|
||||
sourcePath,
|
||||
joinSegments(ctx.argv.output, "tags", tag + ".html") as FilePath,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return graph
|
||||
},
|
||||
async emit(ctx, content, resources): Promise<FilePath[]> {
|
||||
const fps: FilePath[] = []
|
||||
const allFiles = content.map((c) => c[1].data)
|
||||
const cfg = ctx.cfg.configuration
|
||||
|
||||
const tags: Set<string> = new Set(
|
||||
allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
|
||||
)
|
||||
|
||||
// add base tag
|
||||
tags.add("index")
|
||||
|
||||
const tagDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
|
||||
[...tags].map((tag) => {
|
||||
const title =
|
||||
tag === "index"
|
||||
? i18n(cfg.locale).pages.tagContent.tagIndex
|
||||
: `${i18n(cfg.locale).pages.tagContent.tag}: ${tag}`
|
||||
return [
|
||||
tag,
|
||||
defaultProcessedContent({
|
||||
slug: joinSegments("tags", tag) as FullSlug,
|
||||
frontmatter: { title, tags: [] },
|
||||
}),
|
||||
]
|
||||
}),
|
||||
)
|
||||
|
||||
for (const [tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
if (slug.startsWith("tags/")) {
|
||||
const tag = slug.slice("tags/".length)
|
||||
if (tags.has(tag)) {
|
||||
tagDescriptions[tag] = [tree, file]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const tag of tags) {
|
||||
const slug = joinSegments("tags", tag) as FullSlug
|
||||
const externalResources = pageResources(pathToRoot(slug), resources)
|
||||
const [tree, file] = tagDescriptions[tag]
|
||||
const componentData: QuartzComponentProps = {
|
||||
ctx,
|
||||
fileData: file.data,
|
||||
externalResources,
|
||||
cfg,
|
||||
children: [],
|
||||
tree,
|
||||
allFiles,
|
||||
}
|
||||
|
||||
const content = renderPage(cfg, slug, componentData, opts, externalResources)
|
||||
const fp = await write({
|
||||
ctx,
|
||||
content,
|
||||
slug: file.data.slug!,
|
||||
ext: ".html",
|
||||
})
|
||||
|
||||
fps.push(fp)
|
||||
}
|
||||
return fps
|
||||
},
|
||||
}
|
||||
}
|
||||
9
quartz/plugins/filters/draft.ts
Normal file
9
quartz/plugins/filters/draft.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { QuartzFilterPlugin } from "../types"
|
||||
|
||||
export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
|
||||
name: "RemoveDrafts",
|
||||
shouldPublish(_ctx, [_tree, vfile]) {
|
||||
const draftFlag: boolean = vfile.data?.frontmatter?.draft ?? false
|
||||
return !draftFlag
|
||||
},
|
||||
})
|
||||
8
quartz/plugins/filters/explicit.ts
Normal file
8
quartz/plugins/filters/explicit.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { QuartzFilterPlugin } from "../types"
|
||||
|
||||
export const ExplicitPublish: QuartzFilterPlugin = () => ({
|
||||
name: "ExplicitPublish",
|
||||
shouldPublish(_ctx, [_tree, vfile]) {
|
||||
return vfile.data?.frontmatter?.publish ?? false
|
||||
},
|
||||
})
|
||||
2
quartz/plugins/filters/index.ts
Normal file
2
quartz/plugins/filters/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { RemoveDrafts } from "./draft"
|
||||
export { ExplicitPublish } from "./explicit"
|
||||
52
quartz/plugins/index.ts
Normal file
52
quartz/plugins/index.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import { StaticResources } from "../util/resources"
|
||||
import { FilePath, FullSlug } from "../util/path"
|
||||
import { BuildCtx } from "../util/ctx"
|
||||
|
||||
export function getStaticResourcesFromPlugins(ctx: BuildCtx) {
|
||||
const staticResources: StaticResources = {
|
||||
css: [],
|
||||
js: [],
|
||||
}
|
||||
|
||||
for (const transformer of ctx.cfg.plugins.transformers) {
|
||||
const res = transformer.externalResources ? transformer.externalResources(ctx) : {}
|
||||
if (res?.js) {
|
||||
staticResources.js.push(...res.js)
|
||||
}
|
||||
if (res?.css) {
|
||||
staticResources.css.push(...res.css)
|
||||
}
|
||||
}
|
||||
|
||||
// if serving locally, listen for rebuilds and reload the page
|
||||
if (ctx.argv.serve) {
|
||||
const wsUrl = ctx.argv.remoteDevHost
|
||||
? `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
|
||||
: `ws://localhost:${ctx.argv.wsPort}`
|
||||
|
||||
staticResources.js.push({
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "inline",
|
||||
script: `
|
||||
const socket = new WebSocket('${wsUrl}')
|
||||
// reload(true) ensures resources like images and scripts are fetched again in firefox
|
||||
socket.addEventListener('message', () => document.location.reload(true))
|
||||
`,
|
||||
})
|
||||
}
|
||||
|
||||
return staticResources
|
||||
}
|
||||
|
||||
export * from "./transformers"
|
||||
export * from "./filters"
|
||||
export * from "./emitters"
|
||||
|
||||
declare module "vfile" {
|
||||
// inserted in processors.ts
|
||||
interface DataMap {
|
||||
slug: FullSlug
|
||||
filePath: FilePath
|
||||
relativePath: FilePath
|
||||
}
|
||||
}
|
||||
52
quartz/plugins/transformers/citations.ts
Normal file
52
quartz/plugins/transformers/citations.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import rehypeCitation from "rehype-citation"
|
||||
import { PluggableList } from "unified"
|
||||
import { visit } from "unist-util-visit"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
|
||||
export interface Options {
|
||||
bibliographyFile: string
|
||||
suppressBibliography: boolean
|
||||
linkCitations: boolean
|
||||
csl: string
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
bibliographyFile: "./bibliography.bib",
|
||||
suppressBibliography: false,
|
||||
linkCitations: false,
|
||||
csl: "apa",
|
||||
}
|
||||
|
||||
export const Citations: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "Citations",
|
||||
htmlPlugins() {
|
||||
const plugins: PluggableList = []
|
||||
|
||||
// Add rehype-citation to the list of plugins
|
||||
plugins.push([
|
||||
rehypeCitation,
|
||||
{
|
||||
bibliography: opts.bibliographyFile,
|
||||
suppressBibliography: opts.suppressBibliography,
|
||||
linkCitations: opts.linkCitations,
|
||||
},
|
||||
])
|
||||
|
||||
// Transform the HTML of the citattions; add data-no-popover property to the citation links
|
||||
// using https://github.com/syntax-tree/unist-util-visit as they're just anochor links
|
||||
plugins.push(() => {
|
||||
return (tree, _file) => {
|
||||
visit(tree, "element", (node, index, parent) => {
|
||||
if (node.tagName === "a" && node.properties?.href?.startsWith("#bib")) {
|
||||
node.properties["data-no-popover"] = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return plugins
|
||||
},
|
||||
}
|
||||
}
|
||||
82
quartz/plugins/transformers/description.ts
Normal file
82
quartz/plugins/transformers/description.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import { Root as HTMLRoot } from "hast"
|
||||
import { toString } from "hast-util-to-string"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import { escapeHTML } from "../../util/escape"
|
||||
|
||||
export interface Options {
|
||||
descriptionLength: number
|
||||
replaceExternalLinks: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
descriptionLength: 150,
|
||||
replaceExternalLinks: true,
|
||||
}
|
||||
|
||||
const urlRegex = new RegExp(
|
||||
/(https?:\/\/)?(?<domain>([\da-z\.-]+)\.([a-z\.]{2,6})(:\d+)?)(?<path>[\/\w\.-]*)(\?[\/\w\.=&;-]*)?/,
|
||||
"g",
|
||||
)
|
||||
|
||||
export const Description: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "Description",
|
||||
htmlPlugins() {
|
||||
return [
|
||||
() => {
|
||||
return async (tree: HTMLRoot, file) => {
|
||||
let frontMatterDescription = file.data.frontmatter?.description
|
||||
let text = escapeHTML(toString(tree))
|
||||
|
||||
if (opts.replaceExternalLinks) {
|
||||
frontMatterDescription = frontMatterDescription?.replace(
|
||||
urlRegex,
|
||||
"$<domain>" + "$<path>",
|
||||
)
|
||||
text = text.replace(urlRegex, "$<domain>" + "$<path>")
|
||||
}
|
||||
|
||||
const desc = frontMatterDescription ?? text
|
||||
const sentences = desc.replace(/\s+/g, " ").split(/\.\s/)
|
||||
const finalDesc: string[] = []
|
||||
const len = opts.descriptionLength
|
||||
let sentenceIdx = 0
|
||||
let currentDescriptionLength = 0
|
||||
|
||||
if (sentences[0] !== undefined && sentences[0].length >= len) {
|
||||
const firstSentence = sentences[0].split(" ")
|
||||
while (currentDescriptionLength < len) {
|
||||
const sentence = firstSentence[sentenceIdx]
|
||||
if (!sentence) break
|
||||
finalDesc.push(sentence)
|
||||
currentDescriptionLength += sentence.length
|
||||
sentenceIdx++
|
||||
}
|
||||
finalDesc.push("...")
|
||||
} else {
|
||||
while (currentDescriptionLength < len) {
|
||||
const sentence = sentences[sentenceIdx]
|
||||
if (!sentence) break
|
||||
const currentSentence = sentence.endsWith(".") ? sentence : sentence + "."
|
||||
finalDesc.push(currentSentence)
|
||||
currentDescriptionLength += currentSentence.length
|
||||
sentenceIdx++
|
||||
}
|
||||
}
|
||||
|
||||
file.data.description = finalDesc.join(" ")
|
||||
file.data.text = text
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
description: string
|
||||
text: string
|
||||
}
|
||||
}
|
||||
98
quartz/plugins/transformers/frontmatter.ts
Normal file
98
quartz/plugins/transformers/frontmatter.ts
Normal file
@ -0,0 +1,98 @@
|
||||
import matter from "gray-matter"
|
||||
import remarkFrontmatter from "remark-frontmatter"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import yaml from "js-yaml"
|
||||
import toml from "toml"
|
||||
import { slugTag } from "../../util/path"
|
||||
import { QuartzPluginData } from "../vfile"
|
||||
import { i18n } from "../../i18n"
|
||||
|
||||
export interface Options {
|
||||
delimiters: string | [string, string]
|
||||
language: "yaml" | "toml"
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
delimiters: "---",
|
||||
language: "yaml",
|
||||
}
|
||||
|
||||
function coalesceAliases(data: { [key: string]: any }, aliases: string[]) {
|
||||
for (const alias of aliases) {
|
||||
if (data[alias] !== undefined && data[alias] !== null) return data[alias]
|
||||
}
|
||||
}
|
||||
|
||||
function coerceToArray(input: string | string[]): string[] | undefined {
|
||||
if (input === undefined || input === null) return undefined
|
||||
|
||||
// coerce to array
|
||||
if (!Array.isArray(input)) {
|
||||
input = input
|
||||
.toString()
|
||||
.split(",")
|
||||
.map((tag: string) => tag.trim())
|
||||
}
|
||||
|
||||
// remove all non-strings
|
||||
return input
|
||||
.filter((tag: unknown) => typeof tag === "string" || typeof tag === "number")
|
||||
.map((tag: string | number) => tag.toString())
|
||||
}
|
||||
|
||||
export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "FrontMatter",
|
||||
markdownPlugins({ cfg }) {
|
||||
return [
|
||||
[remarkFrontmatter, ["yaml", "toml"]],
|
||||
() => {
|
||||
return (_, file) => {
|
||||
const { data } = matter(Buffer.from(file.value), {
|
||||
...opts,
|
||||
engines: {
|
||||
yaml: (s) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object,
|
||||
toml: (s) => toml.parse(s) as object,
|
||||
},
|
||||
})
|
||||
|
||||
if (data.title != null && data.title.toString() !== "") {
|
||||
data.title = data.title.toString()
|
||||
} else {
|
||||
data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
|
||||
}
|
||||
|
||||
const tags = coerceToArray(coalesceAliases(data, ["tags", "tag"]))
|
||||
if (tags) data.tags = [...new Set(tags.map((tag: string) => slugTag(tag)))]
|
||||
|
||||
const aliases = coerceToArray(coalesceAliases(data, ["aliases", "alias"]))
|
||||
if (aliases) data.aliases = aliases
|
||||
const cssclasses = coerceToArray(coalesceAliases(data, ["cssclasses", "cssclass"]))
|
||||
if (cssclasses) data.cssclasses = cssclasses
|
||||
|
||||
// fill in frontmatter
|
||||
file.data.frontmatter = data as QuartzPluginData["frontmatter"]
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
frontmatter: { [key: string]: unknown } & {
|
||||
title: string
|
||||
} & Partial<{
|
||||
tags: string[]
|
||||
aliases: string[]
|
||||
description: string
|
||||
publish: boolean
|
||||
draft: boolean
|
||||
lang: string
|
||||
enableToc: string
|
||||
cssclasses: string[]
|
||||
}>
|
||||
}
|
||||
}
|
||||
80
quartz/plugins/transformers/gfm.ts
Normal file
80
quartz/plugins/transformers/gfm.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import remarkGfm from "remark-gfm"
|
||||
import smartypants from "remark-smartypants"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import rehypeSlug from "rehype-slug"
|
||||
import rehypeAutolinkHeadings from "rehype-autolink-headings"
|
||||
|
||||
export interface Options {
|
||||
enableSmartyPants: boolean
|
||||
linkHeadings: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
enableSmartyPants: true,
|
||||
linkHeadings: true,
|
||||
}
|
||||
|
||||
export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
|
||||
userOpts,
|
||||
) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "GitHubFlavoredMarkdown",
|
||||
markdownPlugins() {
|
||||
return opts.enableSmartyPants ? [remarkGfm, smartypants] : [remarkGfm]
|
||||
},
|
||||
htmlPlugins() {
|
||||
if (opts.linkHeadings) {
|
||||
return [
|
||||
rehypeSlug,
|
||||
[
|
||||
rehypeAutolinkHeadings,
|
||||
{
|
||||
behavior: "append",
|
||||
properties: {
|
||||
role: "anchor",
|
||||
ariaHidden: true,
|
||||
tabIndex: -1,
|
||||
"data-no-popover": true,
|
||||
},
|
||||
content: {
|
||||
type: "element",
|
||||
tagName: "svg",
|
||||
properties: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
"stroke-width": "2",
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element",
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
type: "element",
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
12
quartz/plugins/transformers/index.ts
Normal file
12
quartz/plugins/transformers/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export { FrontMatter } from "./frontmatter"
|
||||
export { GitHubFlavoredMarkdown } from "./gfm"
|
||||
export { Citations } from "./citations"
|
||||
export { CreatedModifiedDate } from "./lastmod"
|
||||
export { Latex } from "./latex"
|
||||
export { Description } from "./description"
|
||||
export { CrawlLinks } from "./links"
|
||||
export { ObsidianFlavoredMarkdown } from "./ofm"
|
||||
export { OxHugoFlavouredMarkdown } from "./oxhugofm"
|
||||
export { SyntaxHighlighting } from "./syntax"
|
||||
export { TableOfContents } from "./toc"
|
||||
export { HardLineBreaks } from "./linebreaks"
|
||||
99
quartz/plugins/transformers/lastmod.ts
Normal file
99
quartz/plugins/transformers/lastmod.ts
Normal file
@ -0,0 +1,99 @@
|
||||
import fs from "fs"
|
||||
import path from "path"
|
||||
import { Repository } from "@napi-rs/simple-git"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import chalk from "chalk"
|
||||
|
||||
export interface Options {
|
||||
priority: ("frontmatter" | "git" | "filesystem")[]
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
priority: ["frontmatter", "git", "filesystem"],
|
||||
}
|
||||
|
||||
function coerceDate(fp: string, d: any): Date {
|
||||
const dt = new Date(d)
|
||||
const invalidDate = isNaN(dt.getTime()) || dt.getTime() === 0
|
||||
if (invalidDate && d !== undefined) {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
`\nWarning: found invalid date "${d}" in \`${fp}\`. Supported formats: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format`,
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
return invalidDate ? new Date() : dt
|
||||
}
|
||||
|
||||
type MaybeDate = undefined | string | number
|
||||
export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | undefined> = (
|
||||
userOpts,
|
||||
) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "CreatedModifiedDate",
|
||||
markdownPlugins() {
|
||||
return [
|
||||
() => {
|
||||
let repo: Repository | undefined = undefined
|
||||
return async (_tree, file) => {
|
||||
let created: MaybeDate = undefined
|
||||
let modified: MaybeDate = undefined
|
||||
let published: MaybeDate = undefined
|
||||
|
||||
const fp = file.data.filePath!
|
||||
const fullFp = path.isAbsolute(fp) ? fp : path.posix.join(file.cwd, fp)
|
||||
for (const source of opts.priority) {
|
||||
if (source === "filesystem") {
|
||||
const st = await fs.promises.stat(fullFp)
|
||||
created ||= st.birthtimeMs
|
||||
modified ||= st.mtimeMs
|
||||
} else if (source === "frontmatter" && file.data.frontmatter) {
|
||||
created ||= file.data.frontmatter.date as MaybeDate
|
||||
modified ||= file.data.frontmatter.lastmod as MaybeDate
|
||||
modified ||= file.data.frontmatter.updated as MaybeDate
|
||||
modified ||= file.data.frontmatter["last-modified"] as MaybeDate
|
||||
published ||= file.data.frontmatter.publishDate as MaybeDate
|
||||
} else if (source === "git") {
|
||||
if (!repo) {
|
||||
// Get a reference to the main git repo.
|
||||
// It's either the same as the workdir,
|
||||
// or 1+ level higher in case of a submodule/subtree setup
|
||||
repo = Repository.discover(file.cwd)
|
||||
}
|
||||
|
||||
try {
|
||||
modified ||= await repo.getFileLatestModifiedDateAsync(file.data.filePath!)
|
||||
} catch {
|
||||
console.log(
|
||||
chalk.yellow(
|
||||
`\nWarning: ${file.data
|
||||
.filePath!} isn't yet tracked by git, last modification date is not available for this file`,
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
file.data.dates = {
|
||||
created: coerceDate(fp, created),
|
||||
modified: coerceDate(fp, modified),
|
||||
published: coerceDate(fp, published),
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
dates: {
|
||||
created: Date
|
||||
modified: Date
|
||||
published: Date
|
||||
}
|
||||
}
|
||||
}
|
||||
45
quartz/plugins/transformers/latex.ts
Normal file
45
quartz/plugins/transformers/latex.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import remarkMath from "remark-math"
|
||||
import rehypeKatex from "rehype-katex"
|
||||
import rehypeMathjax from "rehype-mathjax/svg"
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
|
||||
interface Options {
|
||||
renderEngine: "katex" | "mathjax"
|
||||
}
|
||||
|
||||
export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
|
||||
const engine = opts?.renderEngine ?? "katex"
|
||||
return {
|
||||
name: "Latex",
|
||||
markdownPlugins() {
|
||||
return [remarkMath]
|
||||
},
|
||||
htmlPlugins() {
|
||||
if (engine === "katex") {
|
||||
return [[rehypeKatex, { output: "html" }]]
|
||||
} else {
|
||||
return [rehypeMathjax]
|
||||
}
|
||||
},
|
||||
externalResources() {
|
||||
if (engine === "katex") {
|
||||
return {
|
||||
css: [
|
||||
// base css
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
|
||||
],
|
||||
js: [
|
||||
{
|
||||
// fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
|
||||
src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "external",
|
||||
},
|
||||
],
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
11
quartz/plugins/transformers/linebreaks.ts
Normal file
11
quartz/plugins/transformers/linebreaks.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import remarkBreaks from "remark-breaks"
|
||||
|
||||
export const HardLineBreaks: QuartzTransformerPlugin = () => {
|
||||
return {
|
||||
name: "HardLineBreaks",
|
||||
markdownPlugins() {
|
||||
return [remarkBreaks]
|
||||
},
|
||||
}
|
||||
}
|
||||
171
quartz/plugins/transformers/links.ts
Normal file
171
quartz/plugins/transformers/links.ts
Normal file
@ -0,0 +1,171 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import {
|
||||
FullSlug,
|
||||
RelativeURL,
|
||||
SimpleSlug,
|
||||
TransformOptions,
|
||||
stripSlashes,
|
||||
simplifySlug,
|
||||
splitAnchor,
|
||||
transformLink,
|
||||
joinSegments,
|
||||
} from "../../util/path"
|
||||
import path from "path"
|
||||
import { visit } from "unist-util-visit"
|
||||
import isAbsoluteUrl from "is-absolute-url"
|
||||
import { Root } from "hast"
|
||||
|
||||
interface Options {
|
||||
/** How to resolve Markdown paths */
|
||||
markdownLinkResolution: TransformOptions["strategy"]
|
||||
/** Strips folders from a link so that it looks nice */
|
||||
prettyLinks: boolean
|
||||
openLinksInNewTab: boolean
|
||||
lazyLoad: boolean
|
||||
externalLinkIcon: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
markdownLinkResolution: "absolute",
|
||||
prettyLinks: true,
|
||||
openLinksInNewTab: false,
|
||||
lazyLoad: false,
|
||||
externalLinkIcon: true,
|
||||
}
|
||||
|
||||
export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "LinkProcessing",
|
||||
htmlPlugins(ctx) {
|
||||
return [
|
||||
() => {
|
||||
return (tree: Root, file) => {
|
||||
const curSlug = simplifySlug(file.data.slug!)
|
||||
const outgoing: Set<SimpleSlug> = new Set()
|
||||
|
||||
const transformOptions: TransformOptions = {
|
||||
strategy: opts.markdownLinkResolution,
|
||||
allSlugs: ctx.allSlugs,
|
||||
}
|
||||
|
||||
visit(tree, "element", (node, _index, _parent) => {
|
||||
// rewrite all links
|
||||
if (
|
||||
node.tagName === "a" &&
|
||||
node.properties &&
|
||||
typeof node.properties.href === "string"
|
||||
) {
|
||||
let dest = node.properties.href as RelativeURL
|
||||
const classes = (node.properties.className ?? []) as string[]
|
||||
const isExternal = isAbsoluteUrl(dest)
|
||||
classes.push(isExternal ? "external" : "internal")
|
||||
|
||||
if (isExternal && opts.externalLinkIcon) {
|
||||
node.children.push({
|
||||
type: "element",
|
||||
tagName: "svg",
|
||||
properties: {
|
||||
class: "external-icon",
|
||||
viewBox: "0 0 512 512",
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "element",
|
||||
tagName: "path",
|
||||
properties: {
|
||||
d: "M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z",
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// Check if the link has alias text
|
||||
if (
|
||||
node.children.length === 1 &&
|
||||
node.children[0].type === "text" &&
|
||||
node.children[0].value !== dest
|
||||
) {
|
||||
// Add the 'alias' class if the text content is not the same as the href
|
||||
classes.push("alias")
|
||||
}
|
||||
node.properties.className = classes
|
||||
|
||||
if (opts.openLinksInNewTab) {
|
||||
node.properties.target = "_blank"
|
||||
}
|
||||
|
||||
// don't process external links or intra-document anchors
|
||||
const isInternal = !(isAbsoluteUrl(dest) || dest.startsWith("#"))
|
||||
if (isInternal) {
|
||||
dest = node.properties.href = transformLink(
|
||||
file.data.slug!,
|
||||
dest,
|
||||
transformOptions,
|
||||
)
|
||||
|
||||
// url.resolve is considered legacy
|
||||
// WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
|
||||
const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true))
|
||||
const canonicalDest = url.pathname
|
||||
let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
|
||||
if (destCanonical.endsWith("/")) {
|
||||
destCanonical += "index"
|
||||
}
|
||||
|
||||
// need to decodeURIComponent here as WHATWG URL percent-encodes everything
|
||||
const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
|
||||
const simple = simplifySlug(full)
|
||||
outgoing.add(simple)
|
||||
node.properties["data-slug"] = full
|
||||
}
|
||||
|
||||
// rewrite link internals if prettylinks is on
|
||||
if (
|
||||
opts.prettyLinks &&
|
||||
isInternal &&
|
||||
node.children.length === 1 &&
|
||||
node.children[0].type === "text" &&
|
||||
!node.children[0].value.startsWith("#")
|
||||
) {
|
||||
node.children[0].value = path.basename(node.children[0].value)
|
||||
}
|
||||
}
|
||||
|
||||
// transform all other resources that may use links
|
||||
if (
|
||||
["img", "video", "audio", "iframe"].includes(node.tagName) &&
|
||||
node.properties &&
|
||||
typeof node.properties.src === "string"
|
||||
) {
|
||||
if (opts.lazyLoad) {
|
||||
node.properties.loading = "lazy"
|
||||
}
|
||||
|
||||
if (!isAbsoluteUrl(node.properties.src)) {
|
||||
let dest = node.properties.src as RelativeURL
|
||||
dest = node.properties.src = transformLink(
|
||||
file.data.slug!,
|
||||
dest,
|
||||
transformOptions,
|
||||
)
|
||||
node.properties.src = dest
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
file.data.links = [...outgoing]
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
links: SimpleSlug[]
|
||||
}
|
||||
}
|
||||
713
quartz/plugins/transformers/ofm.ts
Normal file
713
quartz/plugins/transformers/ofm.ts
Normal file
@ -0,0 +1,713 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
|
||||
import { Element, Literal, Root as HtmlRoot } from "hast"
|
||||
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
|
||||
import { slug as slugAnchor } from "github-slugger"
|
||||
import rehypeRaw from "rehype-raw"
|
||||
import { SKIP, visit } from "unist-util-visit"
|
||||
import path from "path"
|
||||
import { JSResource } from "../../util/resources"
|
||||
// @ts-ignore
|
||||
import calloutScript from "../../components/scripts/callout.inline.ts"
|
||||
// @ts-ignore
|
||||
import checkboxScript from "../../components/scripts/checkbox.inline.ts"
|
||||
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
|
||||
import { toHast } from "mdast-util-to-hast"
|
||||
import { toHtml } from "hast-util-to-html"
|
||||
import { PhrasingContent } from "mdast-util-find-and-replace/lib"
|
||||
import { capitalize } from "../../util/lang"
|
||||
import { PluggableList } from "unified"
|
||||
|
||||
export interface Options {
|
||||
comments: boolean
|
||||
highlight: boolean
|
||||
wikilinks: boolean
|
||||
callouts: boolean
|
||||
mermaid: boolean
|
||||
parseTags: boolean
|
||||
parseArrows: boolean
|
||||
parseBlockReferences: boolean
|
||||
enableInHtmlEmbed: boolean
|
||||
enableYouTubeEmbed: boolean
|
||||
enableVideoEmbed: boolean
|
||||
enableCheckbox: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
comments: true,
|
||||
highlight: true,
|
||||
wikilinks: true,
|
||||
callouts: true,
|
||||
mermaid: true,
|
||||
parseTags: true,
|
||||
parseArrows: true,
|
||||
parseBlockReferences: true,
|
||||
enableInHtmlEmbed: false,
|
||||
enableYouTubeEmbed: true,
|
||||
enableVideoEmbed: true,
|
||||
enableCheckbox: false,
|
||||
}
|
||||
|
||||
const calloutMapping = {
|
||||
note: "note",
|
||||
abstract: "abstract",
|
||||
summary: "abstract",
|
||||
tldr: "abstract",
|
||||
info: "info",
|
||||
todo: "todo",
|
||||
tip: "tip",
|
||||
hint: "tip",
|
||||
important: "tip",
|
||||
success: "success",
|
||||
check: "success",
|
||||
done: "success",
|
||||
question: "question",
|
||||
help: "question",
|
||||
faq: "question",
|
||||
warning: "warning",
|
||||
attention: "warning",
|
||||
caution: "warning",
|
||||
failure: "failure",
|
||||
missing: "failure",
|
||||
fail: "failure",
|
||||
danger: "danger",
|
||||
error: "danger",
|
||||
bug: "bug",
|
||||
example: "example",
|
||||
quote: "quote",
|
||||
cite: "quote",
|
||||
} as const
|
||||
|
||||
const arrowMapping: Record<string, string> = {
|
||||
"->": "→",
|
||||
"-->": "⇒",
|
||||
"=>": "⇒",
|
||||
"==>": "⇒",
|
||||
"<-": "←",
|
||||
"<--": "⇐",
|
||||
"<=": "⇐",
|
||||
"<==": "⇐",
|
||||
}
|
||||
|
||||
function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
|
||||
const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
|
||||
// if callout is not recognized, make it a custom one
|
||||
return calloutMapping[normalizedCallout] ?? calloutName
|
||||
}
|
||||
|
||||
export const externalLinkRegex = /^https?:\/\//i
|
||||
|
||||
export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/, "g")
|
||||
|
||||
// !? -> optional embedding
|
||||
// \[\[ -> open brace
|
||||
// ([^\[\]\|\#]+) -> one or more non-special characters ([,],|, or #) (name)
|
||||
// (#[^\[\]\|\#]+)? -> # then one or more non-special characters (heading link)
|
||||
// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
|
||||
export const wikilinkRegex = new RegExp(
|
||||
/!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/,
|
||||
"g",
|
||||
)
|
||||
|
||||
// ^\|([^\n])+\|\n(\|) -> matches the header row
|
||||
// ( ?:?-{3,}:? ?\|)+ -> matches the header row separator
|
||||
// (\|([^\n])+\|\n)+ -> matches the body rows
|
||||
export const tableRegex = new RegExp(
|
||||
/^\|([^\n])+\|\n(\|)( ?:?-{3,}:? ?\|)+\n(\|([^\n])+\|\n?)+/,
|
||||
"gm",
|
||||
)
|
||||
|
||||
// matches any wikilink, only used for escaping wikilinks inside tables
|
||||
export const tableWikilinkRegex = new RegExp(/(!?\[\[[^\]]*?\]\])/, "g")
|
||||
|
||||
const highlightRegex = new RegExp(/==([^=]+)==/, "g")
|
||||
const commentRegex = new RegExp(/%%[\s\S]*?%%/, "g")
|
||||
// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
|
||||
const calloutRegex = new RegExp(/^\[\!(\w+)\|?(.+?)?\]([+-]?)/)
|
||||
const calloutLineRegex = new RegExp(/^> *\[\!\w+\|?.*?\][+-]?.*$/, "gm")
|
||||
// (?:^| ) -> non-capturing group, tag should start be separated by a space or be the start of the line
|
||||
// #(...) -> capturing group, tag itself must start with #
|
||||
// (?:[-_\p{L}\d\p{Z}])+ -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
|
||||
// (?:\/[-_\p{L}\d\p{Z}]+)*) -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
|
||||
const tagRegex = new RegExp(
|
||||
/(?:^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/,
|
||||
"gu",
|
||||
)
|
||||
const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
|
||||
const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
|
||||
const ytPlaylistLinkRegex = /[?&]list=([^#?&]*)/
|
||||
const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)
|
||||
const wikilinkImageEmbedRegex = new RegExp(
|
||||
/^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/,
|
||||
)
|
||||
|
||||
export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
|
||||
userOpts,
|
||||
) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
|
||||
const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
|
||||
const hast = toHast(ast, { allowDangerousHtml: true })!
|
||||
return toHtml(hast, { allowDangerousHtml: true })
|
||||
}
|
||||
|
||||
return {
|
||||
name: "ObsidianFlavoredMarkdown",
|
||||
textTransform(_ctx, src) {
|
||||
// do comments at text level
|
||||
if (opts.comments) {
|
||||
if (src instanceof Buffer) {
|
||||
src = src.toString()
|
||||
}
|
||||
|
||||
src = src.replace(commentRegex, "")
|
||||
}
|
||||
|
||||
// pre-transform blockquotes
|
||||
if (opts.callouts) {
|
||||
if (src instanceof Buffer) {
|
||||
src = src.toString()
|
||||
}
|
||||
|
||||
src = src.replace(calloutLineRegex, (value) => {
|
||||
// force newline after title of callout
|
||||
return value + "\n> "
|
||||
})
|
||||
}
|
||||
|
||||
// pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
|
||||
if (opts.wikilinks) {
|
||||
if (src instanceof Buffer) {
|
||||
src = src.toString()
|
||||
}
|
||||
|
||||
// replace all wikilinks inside a table first
|
||||
src = src.replace(tableRegex, (value) => {
|
||||
// escape all aliases and headers in wikilinks inside a table
|
||||
return value.replace(tableWikilinkRegex, (value, ...capture) => {
|
||||
const [raw]: (string | undefined)[] = capture
|
||||
let escaped = raw ?? ""
|
||||
escaped = escaped.replace("#", "\\#")
|
||||
// escape pipe characters if they are not already escaped
|
||||
escaped = escaped.replace(/((^|[^\\])(\\\\)*)\|/g, "$1\\|")
|
||||
|
||||
return escaped
|
||||
})
|
||||
})
|
||||
|
||||
// replace all other wikilinks
|
||||
src = src.replace(wikilinkRegex, (value, ...capture) => {
|
||||
const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
|
||||
|
||||
const fp = rawFp ?? ""
|
||||
const anchor = rawHeader?.trim().replace(/^#+/, "")
|
||||
const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
|
||||
const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
|
||||
const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
|
||||
const embedDisplay = value.startsWith("!") ? "!" : ""
|
||||
|
||||
if (rawFp?.match(externalLinkRegex)) {
|
||||
return `${embedDisplay}[${displayAlias.replace(/^\|/, "")}](${rawFp})`
|
||||
}
|
||||
|
||||
return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
|
||||
})
|
||||
}
|
||||
|
||||
return src
|
||||
},
|
||||
markdownPlugins(_ctx) {
|
||||
const plugins: PluggableList = []
|
||||
|
||||
// regex replacements
|
||||
plugins.push(() => {
|
||||
return (tree: Root, file) => {
|
||||
const replacements: [RegExp, string | ReplaceFunction][] = []
|
||||
const base = pathToRoot(file.data.slug!)
|
||||
|
||||
if (opts.wikilinks) {
|
||||
replacements.push([
|
||||
wikilinkRegex,
|
||||
(value: string, ...capture: string[]) => {
|
||||
let [rawFp, rawHeader, rawAlias] = capture
|
||||
const fp = rawFp?.trim() ?? ""
|
||||
const anchor = rawHeader?.trim() ?? ""
|
||||
const alias = rawAlias?.slice(1).trim()
|
||||
|
||||
// embed cases
|
||||
if (value.startsWith("!")) {
|
||||
const ext: string = path.extname(fp).toLowerCase()
|
||||
const url = slugifyFilePath(fp as FilePath)
|
||||
if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
|
||||
const match = wikilinkImageEmbedRegex.exec(alias ?? "")
|
||||
const alt = match?.groups?.alt ?? ""
|
||||
const width = match?.groups?.width ?? "auto"
|
||||
const height = match?.groups?.height ?? "auto"
|
||||
return {
|
||||
type: "image",
|
||||
url,
|
||||
data: {
|
||||
hProperties: {
|
||||
width,
|
||||
height,
|
||||
alt,
|
||||
},
|
||||
},
|
||||
}
|
||||
} else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
|
||||
return {
|
||||
type: "html",
|
||||
value: `<video src="${url}" controls></video>`,
|
||||
}
|
||||
} else if (
|
||||
[".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
|
||||
) {
|
||||
return {
|
||||
type: "html",
|
||||
value: `<audio src="${url}" controls></audio>`,
|
||||
}
|
||||
} else if ([".pdf"].includes(ext)) {
|
||||
return {
|
||||
type: "html",
|
||||
value: `<iframe src="${url}"></iframe>`,
|
||||
}
|
||||
} else {
|
||||
const block = anchor
|
||||
return {
|
||||
type: "html",
|
||||
data: { hProperties: { transclude: true } },
|
||||
value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${
|
||||
url + anchor
|
||||
}" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
|
||||
}
|
||||
}
|
||||
|
||||
// otherwise, fall through to regular link
|
||||
}
|
||||
|
||||
// internal link
|
||||
const url = fp + anchor
|
||||
return {
|
||||
type: "link",
|
||||
url,
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
value: alias ?? fp,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
if (opts.highlight) {
|
||||
replacements.push([
|
||||
highlightRegex,
|
||||
(_value: string, ...capture: string[]) => {
|
||||
const [inner] = capture
|
||||
return {
|
||||
type: "html",
|
||||
value: `<span class="text-highlight">${inner}</span>`,
|
||||
}
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
if (opts.parseArrows) {
|
||||
replacements.push([
|
||||
arrowRegex,
|
||||
(value: string, ..._capture: string[]) => {
|
||||
const maybeArrow = arrowMapping[value]
|
||||
if (maybeArrow === undefined) return SKIP
|
||||
return {
|
||||
type: "html",
|
||||
value: `<span>${maybeArrow}</span>`,
|
||||
}
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
if (opts.parseTags) {
|
||||
replacements.push([
|
||||
tagRegex,
|
||||
(_value: string, tag: string) => {
|
||||
// Check if the tag only includes numbers
|
||||
if (/^\d+$/.test(tag)) {
|
||||
return false
|
||||
}
|
||||
|
||||
tag = slugTag(tag)
|
||||
if (file.data.frontmatter) {
|
||||
const noteTags = file.data.frontmatter.tags ?? []
|
||||
file.data.frontmatter.tags = [...new Set([...noteTags, tag])]
|
||||
}
|
||||
|
||||
return {
|
||||
type: "link",
|
||||
url: base + `/tags/${tag}`,
|
||||
data: {
|
||||
hProperties: {
|
||||
className: ["tag-link"],
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
value: tag,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
if (opts.enableInHtmlEmbed) {
|
||||
visit(tree, "html", (node: Html) => {
|
||||
for (const [regex, replace] of replacements) {
|
||||
if (typeof replace === "string") {
|
||||
node.value = node.value.replace(regex, replace)
|
||||
} else {
|
||||
node.value = node.value.replace(regex, (substring: string, ...args) => {
|
||||
const replaceValue = replace(substring, ...args)
|
||||
if (typeof replaceValue === "string") {
|
||||
return replaceValue
|
||||
} else if (Array.isArray(replaceValue)) {
|
||||
return replaceValue.map(mdastToHtml).join("")
|
||||
} else if (typeof replaceValue === "object" && replaceValue !== null) {
|
||||
return mdastToHtml(replaceValue)
|
||||
} else {
|
||||
return substring
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
mdastFindReplace(tree, replacements)
|
||||
}
|
||||
})
|
||||
|
||||
if (opts.enableVideoEmbed) {
|
||||
plugins.push(() => {
|
||||
return (tree: Root, _file) => {
|
||||
visit(tree, "image", (node, index, parent) => {
|
||||
if (parent && index != undefined && videoExtensionRegex.test(node.url)) {
|
||||
const newNode: Html = {
|
||||
type: "html",
|
||||
value: `<video controls src="${node.url}"></video>`,
|
||||
}
|
||||
|
||||
parent.children.splice(index, 1, newNode)
|
||||
return SKIP
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.callouts) {
|
||||
plugins.push(() => {
|
||||
return (tree: Root, _file) => {
|
||||
visit(tree, "blockquote", (node) => {
|
||||
if (node.children.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// find first line
|
||||
const firstChild = node.children[0]
|
||||
if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
|
||||
return
|
||||
}
|
||||
|
||||
const text = firstChild.children[0].value
|
||||
const restOfTitle = firstChild.children.slice(1)
|
||||
const [firstLine, ...remainingLines] = text.split("\n")
|
||||
const remainingText = remainingLines.join("\n")
|
||||
|
||||
const match = firstLine.match(calloutRegex)
|
||||
if (match && match.input) {
|
||||
const [calloutDirective, typeString, calloutMetaData, collapseChar] = match
|
||||
const calloutType = canonicalizeCallout(typeString.toLowerCase())
|
||||
const collapse = collapseChar === "+" || collapseChar === "-"
|
||||
const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
|
||||
const titleContent = match.input.slice(calloutDirective.length).trim()
|
||||
const useDefaultTitle = titleContent === "" && restOfTitle.length === 0
|
||||
const titleNode: Paragraph = {
|
||||
type: "paragraph",
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
value: useDefaultTitle ? capitalize(typeString) : titleContent + " ",
|
||||
},
|
||||
...restOfTitle,
|
||||
],
|
||||
}
|
||||
const title = mdastToHtml(titleNode)
|
||||
|
||||
const toggleIcon = `<div class="fold-callout-icon"></div>`
|
||||
|
||||
const titleHtml: Html = {
|
||||
type: "html",
|
||||
value: `<div
|
||||
class="callout-title"
|
||||
>
|
||||
<div class="callout-icon"></div>
|
||||
<div class="callout-title-inner">${title}</div>
|
||||
${collapse ? toggleIcon : ""}
|
||||
</div>`,
|
||||
}
|
||||
|
||||
const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleHtml]
|
||||
if (remainingText.length > 0) {
|
||||
blockquoteContent.push({
|
||||
type: "paragraph",
|
||||
children: [
|
||||
{
|
||||
type: "text",
|
||||
value: remainingText,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
// replace first line of blockquote with title and rest of the paragraph text
|
||||
node.children.splice(0, 1, ...blockquoteContent)
|
||||
|
||||
const classNames = ["callout", calloutType]
|
||||
if (collapse) {
|
||||
classNames.push("is-collapsible")
|
||||
}
|
||||
if (defaultState === "collapsed") {
|
||||
classNames.push("is-collapsed")
|
||||
}
|
||||
|
||||
// add properties to base blockquote
|
||||
node.data = {
|
||||
hProperties: {
|
||||
...(node.data?.hProperties ?? {}),
|
||||
className: classNames.join(" "),
|
||||
"data-callout": calloutType,
|
||||
"data-callout-fold": collapse,
|
||||
"data-callout-metadata": calloutMetaData,
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.mermaid) {
|
||||
plugins.push(() => {
|
||||
return (tree: Root, _file) => {
|
||||
visit(tree, "code", (node: Code) => {
|
||||
if (node.lang === "mermaid") {
|
||||
node.data = {
|
||||
hProperties: {
|
||||
className: ["mermaid"],
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return plugins
|
||||
},
|
||||
htmlPlugins() {
|
||||
const plugins: PluggableList = [rehypeRaw]
|
||||
|
||||
if (opts.parseBlockReferences) {
|
||||
plugins.push(() => {
|
||||
const inlineTagTypes = new Set(["p", "li"])
|
||||
const blockTagTypes = new Set(["blockquote"])
|
||||
return (tree: HtmlRoot, file) => {
|
||||
file.data.blocks = {}
|
||||
|
||||
visit(tree, "element", (node, index, parent) => {
|
||||
if (blockTagTypes.has(node.tagName)) {
|
||||
const nextChild = parent?.children.at(index! + 2) as Element
|
||||
if (nextChild && nextChild.tagName === "p") {
|
||||
const text = nextChild.children.at(0) as Literal
|
||||
if (text && text.value && text.type === "text") {
|
||||
const matches = text.value.match(blockReferenceRegex)
|
||||
if (matches && matches.length >= 1) {
|
||||
parent!.children.splice(index! + 2, 1)
|
||||
const block = matches[0].slice(1)
|
||||
|
||||
if (!Object.keys(file.data.blocks!).includes(block)) {
|
||||
node.properties = {
|
||||
...node.properties,
|
||||
id: block,
|
||||
}
|
||||
file.data.blocks![block] = node
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (inlineTagTypes.has(node.tagName)) {
|
||||
const last = node.children.at(-1) as Literal
|
||||
if (last && last.value && typeof last.value === "string") {
|
||||
const matches = last.value.match(blockReferenceRegex)
|
||||
if (matches && matches.length >= 1) {
|
||||
last.value = last.value.slice(0, -matches[0].length)
|
||||
const block = matches[0].slice(1)
|
||||
|
||||
if (last.value === "") {
|
||||
// this is an inline block ref but the actual block
|
||||
// is the previous element above it
|
||||
let idx = (index ?? 1) - 1
|
||||
while (idx >= 0) {
|
||||
const element = parent?.children.at(idx)
|
||||
if (!element) break
|
||||
if (element.type !== "element") {
|
||||
idx -= 1
|
||||
} else {
|
||||
if (!Object.keys(file.data.blocks!).includes(block)) {
|
||||
element.properties = {
|
||||
...element.properties,
|
||||
id: block,
|
||||
}
|
||||
file.data.blocks![block] = element
|
||||
}
|
||||
return
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// normal paragraph transclude
|
||||
if (!Object.keys(file.data.blocks!).includes(block)) {
|
||||
node.properties = {
|
||||
...node.properties,
|
||||
id: block,
|
||||
}
|
||||
file.data.blocks![block] = node
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
file.data.htmlAst = tree
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.enableYouTubeEmbed) {
|
||||
plugins.push(() => {
|
||||
return (tree: HtmlRoot) => {
|
||||
visit(tree, "element", (node) => {
|
||||
if (node.tagName === "img" && typeof node.properties.src === "string") {
|
||||
const match = node.properties.src.match(ytLinkRegex)
|
||||
const videoId = match && match[2].length == 11 ? match[2] : null
|
||||
const playlistId = node.properties.src.match(ytPlaylistLinkRegex)?.[1]
|
||||
if (videoId) {
|
||||
// YouTube video (with optional playlist)
|
||||
node.tagName = "iframe"
|
||||
node.properties = {
|
||||
class: "external-embed",
|
||||
allow: "fullscreen",
|
||||
frameborder: 0,
|
||||
width: "600px",
|
||||
height: "350px",
|
||||
src: playlistId
|
||||
? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
|
||||
: `https://www.youtube.com/embed/${videoId}`,
|
||||
}
|
||||
} else if (playlistId) {
|
||||
// YouTube playlist only.
|
||||
node.tagName = "iframe"
|
||||
node.properties = {
|
||||
class: "external-embed",
|
||||
allow: "fullscreen",
|
||||
frameborder: 0,
|
||||
width: "600px",
|
||||
height: "350px",
|
||||
src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.enableCheckbox) {
|
||||
plugins.push(() => {
|
||||
return (tree: HtmlRoot, _file) => {
|
||||
visit(tree, "element", (node) => {
|
||||
if (node.tagName === "input" && node.properties.type === "checkbox") {
|
||||
const isChecked = node.properties?.checked ?? false
|
||||
node.properties = {
|
||||
type: "checkbox",
|
||||
disabled: false,
|
||||
checked: isChecked,
|
||||
class: "checkbox-toggle",
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return plugins
|
||||
},
|
||||
externalResources() {
|
||||
const js: JSResource[] = []
|
||||
|
||||
if (opts.enableCheckbox) {
|
||||
js.push({
|
||||
script: checkboxScript,
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "inline",
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.callouts) {
|
||||
js.push({
|
||||
script: calloutScript,
|
||||
loadTime: "afterDOMReady",
|
||||
contentType: "inline",
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.mermaid) {
|
||||
js.push({
|
||||
script: `
|
||||
let mermaidImport = undefined
|
||||
document.addEventListener('nav', async () => {
|
||||
if (document.querySelector("code.mermaid")) {
|
||||
mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
|
||||
const mermaid = mermaidImport.default
|
||||
const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
securityLevel: 'loose',
|
||||
theme: darkMode ? 'dark' : 'default'
|
||||
})
|
||||
|
||||
await mermaid.run({
|
||||
querySelector: '.mermaid'
|
||||
})
|
||||
}
|
||||
});
|
||||
`,
|
||||
loadTime: "afterDOMReady",
|
||||
moduleType: "module",
|
||||
contentType: "inline",
|
||||
})
|
||||
}
|
||||
|
||||
return { js }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
blocks: Record<string, Element>
|
||||
htmlAst: HtmlRoot
|
||||
}
|
||||
}
|
||||
108
quartz/plugins/transformers/oxhugofm.ts
Normal file
108
quartz/plugins/transformers/oxhugofm.ts
Normal file
@ -0,0 +1,108 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
|
||||
export interface Options {
|
||||
/** Replace {{ relref }} with quartz wikilinks []() */
|
||||
wikilinks: boolean
|
||||
/** Remove pre-defined anchor (see https://ox-hugo.scripter.co/doc/anchors/) */
|
||||
removePredefinedAnchor: boolean
|
||||
/** Remove hugo shortcode syntax */
|
||||
removeHugoShortcode: boolean
|
||||
/** Replace <figure/> with ![]() */
|
||||
replaceFigureWithMdImg: boolean
|
||||
|
||||
/** Replace org latex fragments with $ and $$ */
|
||||
replaceOrgLatex: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
wikilinks: true,
|
||||
removePredefinedAnchor: true,
|
||||
removeHugoShortcode: true,
|
||||
replaceFigureWithMdImg: true,
|
||||
replaceOrgLatex: true,
|
||||
}
|
||||
|
||||
const relrefRegex = new RegExp(/\[([^\]]+)\]\(\{\{< relref "([^"]+)" >\}\}\)/, "g")
|
||||
const predefinedHeadingIdRegex = new RegExp(/(.*) {#(?:.*)}/, "g")
|
||||
const hugoShortcodeRegex = new RegExp(/{{(.*)}}/, "g")
|
||||
const figureTagRegex = new RegExp(/< ?figure src="(.*)" ?>/, "g")
|
||||
// \\\\\( -> matches \\(
|
||||
// (.+?) -> Lazy match for capturing the equation
|
||||
// \\\\\) -> matches \\)
|
||||
const inlineLatexRegex = new RegExp(/\\\\\((.+?)\\\\\)/, "g")
|
||||
// (?:\\begin{equation}|\\\\\(|\\\\\[) -> start of equation
|
||||
// ([\s\S]*?) -> Matches the block equation
|
||||
// (?:\\\\\]|\\\\\)|\\end{equation}) -> end of equation
|
||||
const blockLatexRegex = new RegExp(
|
||||
/(?:\\begin{equation}|\\\\\(|\\\\\[)([\s\S]*?)(?:\\\\\]|\\\\\)|\\end{equation})/,
|
||||
"g",
|
||||
)
|
||||
// \$\$[\s\S]*?\$\$ -> Matches block equations
|
||||
// \$.*?\$ -> Matches inline equations
|
||||
const quartzLatexRegex = new RegExp(/\$\$[\s\S]*?\$\$|\$.*?\$/, "g")
|
||||
|
||||
/**
|
||||
* ox-hugo is an org exporter backend that exports org files to hugo-compatible
|
||||
* markdown in an opinionated way. This plugin adds some tweaks to the generated
|
||||
* markdown to make it compatible with quartz but the list of changes applied it
|
||||
* is not exhaustive.
|
||||
* */
|
||||
export const OxHugoFlavouredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
|
||||
userOpts,
|
||||
) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "OxHugoFlavouredMarkdown",
|
||||
textTransform(_ctx, src) {
|
||||
if (opts.wikilinks) {
|
||||
src = src.toString()
|
||||
src = src.replaceAll(relrefRegex, (value, ...capture) => {
|
||||
const [text, link] = capture
|
||||
return `[${text}](${link})`
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.removePredefinedAnchor) {
|
||||
src = src.toString()
|
||||
src = src.replaceAll(predefinedHeadingIdRegex, (value, ...capture) => {
|
||||
const [headingText] = capture
|
||||
return headingText
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.removeHugoShortcode) {
|
||||
src = src.toString()
|
||||
src = src.replaceAll(hugoShortcodeRegex, (value, ...capture) => {
|
||||
const [scContent] = capture
|
||||
return scContent
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.replaceFigureWithMdImg) {
|
||||
src = src.toString()
|
||||
src = src.replaceAll(figureTagRegex, (value, ...capture) => {
|
||||
const [src] = capture
|
||||
return ``
|
||||
})
|
||||
}
|
||||
|
||||
if (opts.replaceOrgLatex) {
|
||||
src = src.toString()
|
||||
src = src.replaceAll(inlineLatexRegex, (value, ...capture) => {
|
||||
const [eqn] = capture
|
||||
return `$${eqn}$`
|
||||
})
|
||||
src = src.replaceAll(blockLatexRegex, (value, ...capture) => {
|
||||
const [eqn] = capture
|
||||
return `$$${eqn}$$`
|
||||
})
|
||||
|
||||
// ox-hugo escapes _ as \_
|
||||
src = src.replaceAll(quartzLatexRegex, (value) => {
|
||||
return value.replaceAll("\\_", "_")
|
||||
})
|
||||
}
|
||||
return src
|
||||
},
|
||||
}
|
||||
}
|
||||
33
quartz/plugins/transformers/syntax.ts
Normal file
33
quartz/plugins/transformers/syntax.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"
|
||||
|
||||
interface Theme extends Record<string, CodeTheme> {
|
||||
light: CodeTheme
|
||||
dark: CodeTheme
|
||||
}
|
||||
|
||||
interface Options {
|
||||
theme?: Theme
|
||||
keepBackground?: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
theme: {
|
||||
light: "github-light",
|
||||
dark: "github-dark",
|
||||
},
|
||||
keepBackground: false,
|
||||
}
|
||||
|
||||
export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
|
||||
userOpts?: Partial<Options>,
|
||||
) => {
|
||||
const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }
|
||||
|
||||
return {
|
||||
name: "SyntaxHighlighting",
|
||||
htmlPlugins() {
|
||||
return [[rehypePrettyCode, opts]]
|
||||
},
|
||||
}
|
||||
}
|
||||
75
quartz/plugins/transformers/toc.ts
Normal file
75
quartz/plugins/transformers/toc.ts
Normal file
@ -0,0 +1,75 @@
|
||||
import { QuartzTransformerPlugin } from "../types"
|
||||
import { Root } from "mdast"
|
||||
import { visit } from "unist-util-visit"
|
||||
import { toString } from "mdast-util-to-string"
|
||||
import Slugger from "github-slugger"
|
||||
|
||||
export interface Options {
|
||||
maxDepth: 1 | 2 | 3 | 4 | 5 | 6
|
||||
minEntries: number
|
||||
showByDefault: boolean
|
||||
collapseByDefault: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
maxDepth: 3,
|
||||
minEntries: 1,
|
||||
showByDefault: true,
|
||||
collapseByDefault: false,
|
||||
}
|
||||
|
||||
interface TocEntry {
|
||||
depth: number
|
||||
text: string
|
||||
slug: string // this is just the anchor (#some-slug), not the canonical slug
|
||||
}
|
||||
|
||||
const slugAnchor = new Slugger()
|
||||
export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
|
||||
userOpts,
|
||||
) => {
|
||||
const opts = { ...defaultOptions, ...userOpts }
|
||||
return {
|
||||
name: "TableOfContents",
|
||||
markdownPlugins() {
|
||||
return [
|
||||
() => {
|
||||
return async (tree: Root, file) => {
|
||||
const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
|
||||
if (display) {
|
||||
slugAnchor.reset()
|
||||
const toc: TocEntry[] = []
|
||||
let highestDepth: number = opts.maxDepth
|
||||
visit(tree, "heading", (node) => {
|
||||
if (node.depth <= opts.maxDepth) {
|
||||
const text = toString(node)
|
||||
highestDepth = Math.min(highestDepth, node.depth)
|
||||
toc.push({
|
||||
depth: node.depth,
|
||||
text,
|
||||
slug: slugAnchor.slug(text),
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (toc.length > 0 && toc.length > opts.minEntries) {
|
||||
file.data.toc = toc.map((entry) => ({
|
||||
...entry,
|
||||
depth: entry.depth - highestDepth,
|
||||
}))
|
||||
file.data.collapseToc = opts.collapseByDefault
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
declare module "vfile" {
|
||||
interface DataMap {
|
||||
toc: TocEntry[]
|
||||
collapseToc: boolean
|
||||
}
|
||||
}
|
||||
47
quartz/plugins/types.ts
Normal file
47
quartz/plugins/types.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { PluggableList } from "unified"
|
||||
import { StaticResources } from "../util/resources"
|
||||
import { ProcessedContent } from "./vfile"
|
||||
import { QuartzComponent } from "../components/types"
|
||||
import { FilePath } from "../util/path"
|
||||
import { BuildCtx } from "../util/ctx"
|
||||
import DepGraph from "../depgraph"
|
||||
|
||||
export interface PluginTypes {
|
||||
transformers: QuartzTransformerPluginInstance[]
|
||||
filters: QuartzFilterPluginInstance[]
|
||||
emitters: QuartzEmitterPluginInstance[]
|
||||
}
|
||||
|
||||
type OptionType = object | undefined
|
||||
export type QuartzTransformerPlugin<Options extends OptionType = undefined> = (
|
||||
opts?: Options,
|
||||
) => QuartzTransformerPluginInstance
|
||||
export type QuartzTransformerPluginInstance = {
|
||||
name: string
|
||||
textTransform?: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
|
||||
markdownPlugins?: (ctx: BuildCtx) => PluggableList
|
||||
htmlPlugins?: (ctx: BuildCtx) => PluggableList
|
||||
externalResources?: (ctx: BuildCtx) => Partial<StaticResources>
|
||||
}
|
||||
|
||||
export type QuartzFilterPlugin<Options extends OptionType = undefined> = (
|
||||
opts?: Options,
|
||||
) => QuartzFilterPluginInstance
|
||||
export type QuartzFilterPluginInstance = {
|
||||
name: string
|
||||
shouldPublish(ctx: BuildCtx, content: ProcessedContent): boolean
|
||||
}
|
||||
|
||||
export type QuartzEmitterPlugin<Options extends OptionType = undefined> = (
|
||||
opts?: Options,
|
||||
) => QuartzEmitterPluginInstance
|
||||
export type QuartzEmitterPluginInstance = {
|
||||
name: string
|
||||
emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
|
||||
getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
|
||||
getDependencyGraph?(
|
||||
ctx: BuildCtx,
|
||||
content: ProcessedContent[],
|
||||
resources: StaticResources,
|
||||
): Promise<DepGraph<FilePath>>
|
||||
}
|
||||
12
quartz/plugins/vfile.ts
Normal file
12
quartz/plugins/vfile.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Node, Parent } from "hast"
|
||||
import { Data, VFile } from "vfile"
|
||||
|
||||
export type QuartzPluginData = Data
|
||||
export type ProcessedContent = [Node, VFile]
|
||||
|
||||
export function defaultProcessedContent(vfileData: Partial<QuartzPluginData>): ProcessedContent {
|
||||
const root: Parent = { type: "root", children: [] }
|
||||
const vfile = new VFile("")
|
||||
vfile.data = vfileData
|
||||
return [root, vfile]
|
||||
}
|
||||
Reference in New Issue
Block a user