rizaldy/rizaldy.club
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deps: bump everything (closes #635) (#636)

Browse Source 
* deps: bump ws

* deps: bump lightningcss

* deps: workerpool

* deps: various types

* deps: chalk

* deps: globby

* deps: preact

* deps: tsx

* deps: @floating-ui/dom

* deps: esbuild

* deps: types + prettier

* deps: rimraf, typescript

* deps: remark/rehype/unified ecosystem

* format
This commit is contained in:
Jacky Zhao 2023-12-18 09:48:40 -08:00 committed by GitHub
parent 78b33fc2fb
commit ea6208c1f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 2329 additions and 1891 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3687
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

97
package.json
View File

@ -34,76 +34,77 @@
"quartz": "./quartz/bootstrap-cli.mjs" "quartz": "./quartz/bootstrap-cli.mjs"
}, },
"dependencies": { "dependencies": {
"@clack/prompts": "^0.6.3", "@clack/prompts": "^0.7.0",
"@floating-ui/dom": "^1.4.0", "@floating-ui/dom": "^1.5.3",
"@napi-rs/simple-git": "0.1.9", "@napi-rs/simple-git": "0.1.9",
"async-mutex": "^0.4.0", "async-mutex": "^0.4.0",
"chalk": "^4.1.2", "chalk": "^5.3.0",
"chokidar": "^3.5.3", "chokidar": "^3.5.3",
"cli-spinner": "^0.2.10", "cli-spinner": "^0.2.10",
"d3": "^7.8.5", "d3": "^7.8.5",
"esbuild-sass-plugin": "^2.12.0", "esbuild-sass-plugin": "^2.16.0",
"flexsearch": "0.7.21", "flexsearch": "0.7.21",
"github-slugger": "^2.0.0", "github-slugger": "^2.0.0",
"globby": "^13.1.4", "globby": "^14.0.0",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"hast-util-to-html": "^8.0.4", "hast-util-to-html": "^9.0.0",
"hast-util-to-jsx-runtime": "^1.2.0", "hast-util-to-jsx-runtime": "^2.3.0",
"hast-util-to-string": "^2.0.0", "hast-util-to-string": "^3.0.0",
"is-absolute-url": "^4.0.1", "is-absolute-url": "^4.0.1",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"lightningcss": "1.21.7", "lightningcss": "^1.22.1",
"mdast-util-find-and-replace": "^2.2.2", "mdast-util-find-and-replace": "^3.0.1",
"mdast-util-to-hast": "^12.3.0", "mdast-util-to-hast": "^13.0.2",
"mdast-util-to-string": "^3.2.0", "mdast-util-to-string": "^4.0.0",
"micromorph": "^0.4.5", "micromorph": "^0.4.5",
"plausible-tracker": "^0.3.8", "plausible-tracker": "^0.3.8",
"preact": "^10.14.1", "preact": "^10.19.3",
"preact-render-to-string": "^6.0.3", "preact-render-to-string": "^6.3.1",
"pretty-bytes": "^6.1.0", "pretty-bytes": "^6.1.1",
"pretty-time": "^1.1.0", "pretty-time": "^1.1.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"rehype-autolink-headings": "^6.1.1", "rehype-autolink-headings": "^7.1.0",
"rehype-katex": "^6.0.3", "rehype-katex": "^7.0.0",
"rehype-mathjax": "^4.0.3", "rehype-mathjax": "^5.0.0",
"rehype-pretty-code": "^0.10.0", "rehype-pretty-code": "^0.12.1",
"rehype-raw": "^6.1.1", "rehype-raw": "^7.0.0",
"rehype-slug": "^5.1.0", "rehype-slug": "^6.0.0",
"remark": "^14.0.2", "remark": "^15.0.1",
"remark-breaks": "^3.0.3", "remark-breaks": "^4.0.0",
"remark-frontmatter": "^4.0.1", "remark-frontmatter": "^5.0.0",
"remark-gfm": "^3.0.1", "remark-gfm": "^4.0.0",
"remark-math": "^5.1.1", "remark-math": "^6.0.0",
"remark-parse": "^10.0.1", "remark-parse": "^11.0.0",
"remark-rehype": "^10.1.0", "remark-rehype": "^11.0.0",
"remark-smartypants": "^2.0.0", "remark-smartypants": "^2.0.0",
"rimraf": "^5.0.1", "rimraf": "^5.0.5",
"serve-handler": "^6.1.5", "serve-handler": "^6.1.5",
"shikiji": "^0.8.7",
"source-map-support": "^0.5.21", "source-map-support": "^0.5.21",
"to-vfile": "^7.2.4", "to-vfile": "^8.0.0",
"toml": "^3.0.0", "toml": "^3.0.0",
"unified": "^10.1.2", "unified": "^11.0.4",
"unist-util-visit": "^4.1.2", "unist-util-visit": "^5.0.0",
"vfile": "^5.3.7", "vfile": "^6.0.1",
"workerpool": "^6.4.0", "workerpool": "^8.0.0",
"ws": "^8.13.0", "ws": "^8.15.1",
"yargs": "^17.7.2" "yargs": "^17.7.2"
}, },
"devDependencies": { "devDependencies": {
"@types/cli-spinner": "^0.2.1", "@types/cli-spinner": "^0.2.3",
"@types/d3": "^7.4.0", "@types/d3": "^7.4.3",
"@types/flexsearch": "^0.7.3", "@types/flexsearch": "^0.7.3",
"@types/hast": "^2.3.4", "@types/hast": "^3.0.3",
"@types/js-yaml": "^4.0.5", "@types/js-yaml": "^4.0.9",
"@types/node": "^20.1.2", "@types/node": "^20.1.2",
"@types/pretty-time": "^1.1.2", "@types/pretty-time": "^1.1.5",
"@types/source-map-support": "^0.5.6", "@types/source-map-support": "^0.5.10",
"@types/workerpool": "^6.4.0", "@types/workerpool": "^6.4.7",
"@types/ws": "^8.5.5", "@types/ws": "^8.5.10",
"@types/yargs": "^17.0.24", "@types/yargs": "^17.0.32",
"esbuild": "0.19.2", "esbuild": "^0.19.9",
"prettier": "^3.0.0", "prettier": "^3.1.1",
"tsx": "^3.12.7", "tsx": "^4.6.2",
"typescript": "^5.0.4" "typescript": "^5.3.3"
} }
} }

6
quartz/components/renderPage.tsx
View File

@ -74,13 +74,13 @@ export function renderPage(
const classNames = (node.properties?.className ?? []) as string[] const classNames = (node.properties?.className ?? []) as string[]
if (classNames.includes("transclude")) { if (classNames.includes("transclude")) {
const inner = node.children[0] as Element const inner = node.children[0] as Element
const transcludeTarget = inner.properties?.["data-slug"] as FullSlug const transcludeTarget = inner.properties["data-slug"] as FullSlug
const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget) const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget)
if (!page) { if (!page) {
return return
} }
let blockRef = node.properties?.dataBlock as string | undefined let blockRef = node.properties.dataBlock as string | undefined
if (blockRef?.startsWith("#^")) { if (blockRef?.startsWith("#^")) {
// block transclude // block transclude
blockRef = blockRef.slice("#^".length) blockRef = blockRef.slice("#^".length)
@ -90,6 +90,7 @@ export function renderPage(
blockNode = { blockNode = {
type: "element", type: "element",
tagName: "ul", tagName: "ul",
properties: {},
children: [blockNode], children: [blockNode],
} }
} }
@ -144,6 +145,7 @@ export function renderPage(
{ {
type: "element", type: "element",
tagName: "h1", tagName: "h1",
properties: {},
children: [ children: [
{ type: "text", value: page.frontmatter?.title ?? `Transclude of ${page.slug}` }, { type: "text", value: page.frontmatter?.title ?? `Transclude of ${page.slug}` },
], ],

2
quartz/components/styles/clipboard.scss
View File

@ -4,7 +4,7 @@
float: right; float: right;
right: 0; right: 0;
padding: 0.4rem; padding: 0.4rem;
margin: -0.2rem 0.3rem; margin: 0.3rem;
color: var(--gray); color: var(--gray);
border-color: var(--dark); border-color: var(--dark);
background-color: var(--light); background-color: var(--light);

2
quartz/components/types.ts
View File

@ -9,7 +9,7 @@ export type QuartzComponentProps = {
fileData: QuartzPluginData fileData: QuartzPluginData
cfg: GlobalConfiguration cfg: GlobalConfiguration
children: (QuartzComponent | JSX.Element)[] children: (QuartzComponent | JSX.Element)[]
tree: Node<QuartzPluginData> tree: Node
allFiles: QuartzPluginData[] allFiles: QuartzPluginData[]
displayClass?: "mobile-only" | "desktop-only" displayClass?: "mobile-only" | "desktop-only"
} & JSX.IntrinsicAttributes & { } & JSX.IntrinsicAttributes & {

4
quartz/plugins/transformers/frontmatter.ts
View File

@ -29,7 +29,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
[remarkFrontmatter, ["yaml", "toml"]], [remarkFrontmatter, ["yaml", "toml"]],
() => { () => {
return (_, file) => { return (_, file) => {
const { data } = matter(file.value, { const { data } = matter(Buffer.from(file.value), {
...opts, ...opts,
engines: { engines: {
yaml: (s) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object, yaml: (s) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object,
@ -57,7 +57,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
} }
// slug them all!! // slug them all!!
data.tags = [...new Set(data.tags?.map((tag: string) => slugTag(tag)))] ?? [] data.tags = [...new Set(data.tags?.map((tag: string) => slugTag(tag)))]
// fill in frontmatter // fill in frontmatter
file.data.frontmatter = data as QuartzPluginData["frontmatter"] file.data.frontmatter = data as QuartzPluginData["frontmatter"]

2
quartz/plugins/transformers/latex.ts
View File

@ -1,6 +1,6 @@
import remarkMath from "remark-math" import remarkMath from "remark-math"
import rehypeKatex from "rehype-katex" import rehypeKatex from "rehype-katex"
import rehypeMathjax from "rehype-mathjax/svg.js" import rehypeMathjax from "rehype-mathjax/svg"
import { QuartzTransformerPlugin } from "../types" import { QuartzTransformerPlugin } from "../types"
interface Options { interface Options {

324
quartz/plugins/transformers/ofm.ts
View File

@ -1,8 +1,7 @@
import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types" import { QuartzTransformerPlugin } from "../types"
import { Root, HTML, BlockContent, DefinitionContent, Code, Paragraph } from "mdast" import { Root, Html, BlockContent, DefinitionContent, Code, Paragraph } from "mdast"
import { Element, Literal, Root as HtmlRoot } from "hast" import { Element, Literal, Root as HtmlRoot } from "hast"
import { Replace, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace" import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
import { slug as slugAnchor } from "github-slugger" import { slug as slugAnchor } from "github-slugger"
import rehypeRaw from "rehype-raw" import rehypeRaw from "rehype-raw"
import { visit } from "unist-util-visit" import { visit } from "unist-util-visit"
@ -15,6 +14,7 @@ import { toHast } from "mdast-util-to-hast"
import { toHtml } from "hast-util-to-html" import { toHtml } from "hast-util-to-html"
import { PhrasingContent } from "mdast-util-find-and-replace/lib" import { PhrasingContent } from "mdast-util-find-and-replace/lib"
import { capitalize } from "../../util/lang" import { capitalize } from "../../util/lang"
import { PluggableList } from "unified"
export interface Options { export interface Options {
comments: boolean comments: boolean
@ -136,39 +136,15 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
return toHtml(hast, { allowDangerousHtml: true }) return toHtml(hast, { allowDangerousHtml: true })
} }
const findAndReplace = opts.enableInHtmlEmbed
? (tree: Root, regex: RegExp, replace?: Replace | null | undefined) => {
if (replace) {
visit(tree, "html", (node: HTML) => {
if (typeof replace === "string") {
node.value = node.value.replace(regex, replace)
} else {
node.value = node.value.replaceAll(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, regex, replace)
}
: mdastFindReplace
return { return {
name: "ObsidianFlavoredMarkdown", name: "ObsidianFlavoredMarkdown",
textTransform(_ctx, src) { textTransform(_ctx, src) {
// pre-transform blockquotes // pre-transform blockquotes
if (opts.callouts) { if (opts.callouts) {
src = src.toString() if (src instanceof Buffer) {
src = src.toString()
}
src = src.replaceAll(calloutLineRegex, (value) => { src = src.replaceAll(calloutLineRegex, (value) => {
// force newline after title of callout // force newline after title of callout
return value + "\n> " return value + "\n> "
@ -177,7 +153,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
// pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex) // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
if (opts.wikilinks) { if (opts.wikilinks) {
src = src.toString() if (src instanceof Buffer) {
src = src.toString()
}
src = src.replaceAll(wikilinkRegex, (value, ...capture) => { src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
const [rawFp, rawHeader, rawAlias] = capture const [rawFp, rawHeader, rawAlias] = capture
const fp = rawFp ?? "" const fp = rawFp ?? ""
@ -194,108 +173,172 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}, },
markdownPlugins() { markdownPlugins() {
const plugins: PluggableList = [] const plugins: PluggableList = []
if (opts.wikilinks) {
plugins.push(() => {
return (tree: Root, _file) => {
findAndReplace(tree, 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 // regex replacements
if (value.startsWith("!")) { plugins.push(() => {
const ext: string = path.extname(fp).toLowerCase() return (tree: Root, file) => {
const url = slugifyFilePath(fp as FilePath) const replacements: [RegExp, string | ReplaceFunction][] = []
if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) { const base = pathToRoot(file.data.slug!)
const dims = alias ?? ""
let [width, height] = dims.split("x", 2) if (opts.wikilinks) {
width ||= "auto" replacements.push([
height ||= "auto" wikilinkRegex,
return { (value: string, ...capture: string[]) => {
type: "image", let [rawFp, rawHeader, rawAlias] = capture
url, const fp = rawFp?.trim() ?? ""
data: { const anchor = rawHeader?.trim() ?? ""
hProperties: { const alias = rawAlias?.slice(1).trim()
width,
height, // 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"].includes(ext)) {
const dims = alias ?? ""
let [width, height] = dims.split("x", 2)
width ||= "auto"
height ||= "auto"
return {
type: "image",
url,
data: {
hProperties: {
width,
height,
},
}, },
}, }
} } else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) {
} else if ([".mp4", ".webm", ".ogv", ".mov", ".mkv"].includes(ext)) { return {
return { type: "html",
type: "html", value: `<video src="${url}" controls></video>`,
value: `<video src="${url}" controls></video>`, }
} } else if (
} else if ( [".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext)
[".mp3", ".webm", ".wav", ".m4a", ".ogg", ".3gp", ".flac"].includes(ext) ) {
) { return {
return { type: "html",
type: "html", value: `<audio src="${url}" controls></audio>`,
value: `<audio src="${url}" controls></audio>`, }
} } else if ([".pdf"].includes(ext)) {
} else if ([".pdf"].includes(ext)) { return {
return { type: "html",
type: "html", value: `<iframe src="${url}"></iframe>`,
value: `<iframe src="${url}"></iframe>`, }
} } else if (ext === "") {
} else if (ext === "") { const block = anchor
const block = anchor return {
return { type: "html",
type: "html", data: { hProperties: { transclude: true } },
data: { hProperties: { transclude: true } }, value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${
value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${ url + anchor
url + anchor }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
}" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`, }
} }
// otherwise, fall through to regular link
} }
// otherwise, fall through to regular link // internal link
} const url = fp + anchor
return {
type: "link",
url,
children: [
{
type: "text",
value: alias ?? fp,
},
],
}
},
])
}
// internal link if (opts.highlight) {
const url = fp + anchor replacements.push([
return { highlightRegex,
type: "link", (_value: string, ...capture: string[]) => {
url, const [inner] = capture
children: [ return {
{ type: "html",
type: "text", value: `<span class="text-highlight">${inner}</span>`,
value: alias ?? fp, }
},
])
}
if (opts.comments) {
replacements.push([
commentRegex,
(_value: string, ..._capture: string[]) => {
return {
type: "text",
value: "",
}
},
])
}
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 && !file.data.frontmatter.tags.includes(tag)) {
file.data.frontmatter.tags.push(tag)
}
return {
type: "link",
url: base + `/tags/${tag}`,
data: {
hProperties: {
className: ["tag-link"],
},
}, },
], children: [
} {
}) type: "text",
value: `#${tag}`,
},
],
}
},
])
} }
})
}
if (opts.highlight) { if (opts.enableInHtmlEmbed) {
plugins.push(() => { visit(tree, "html", (node: Html) => {
return (tree: Root, _file) => { for (const [regex, replace] of replacements) {
findAndReplace(tree, highlightRegex, (_value: string, ...capture: string[]) => { if (typeof replace === "string") {
const [inner] = capture node.value = node.value.replace(regex, replace)
return { } else {
type: "html", node.value = node.value.replaceAll(regex, (substring: string, ...args) => {
value: `<span class="text-highlight">${inner}</span>`, 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
}
})
}
} }
}) })
} }
})
}
if (opts.comments) { mdastFindReplace(tree, replacements)
plugins.push(() => { }
return (tree: Root, _file) => { })
findAndReplace(tree, commentRegex, (_value: string, ..._capture: string[]) => {
return {
type: "text",
value: "",
}
})
}
})
}
if (opts.callouts) { if (opts.callouts) {
plugins.push(() => { plugins.push(() => {
@ -336,7 +379,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg>` </svg>`
const titleHtml: HTML = { const titleHtml: Html = {
type: "html", type: "html",
value: `<div value: `<div
class="callout-title" class="callout-title"
@ -396,45 +439,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}) })
} }
if (opts.parseTags) {
plugins.push(() => {
return (tree: Root, file) => {
const base = pathToRoot(file.data.slug!)
findAndReplace(tree, 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 && !file.data.frontmatter.tags.includes(tag)) {
file.data.frontmatter.tags.push(tag)
}
return {
type: "link",
url: base + `/tags/${tag}`,
data: {
hProperties: {
className: ["tag-link"],
},
},
children: [
{
type: "text",
value: `#${tag}`,
},
],
}
})
}
})
}
return plugins return plugins
}, },
htmlPlugins() { htmlPlugins() {
const plugins = [rehypeRaw] const plugins: PluggableList = [rehypeRaw]
if (opts.parseBlockReferences) { if (opts.parseBlockReferences) {
plugins.push(() => { plugins.push(() => {
const inlineTagTypes = new Set(["p", "li"]) const inlineTagTypes = new Set(["p", "li"])

6
quartz/plugins/transformers/syntax.ts
View File

@ -8,7 +8,11 @@ export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
[ [
rehypePrettyCode, rehypePrettyCode,
{ {
theme: "css-variables", keepBackground: false,
theme: {
dark: "github-dark",
light: "github-light",
},
} satisfies Partial<CodeOptions>, } satisfies Partial<CodeOptions>,
], ],
] ]

2
quartz/plugins/vfile.ts
View File

@ -2,7 +2,7 @@ import { Node, Parent } from "hast"
import { Data, VFile } from "vfile" import { Data, VFile } from "vfile"
export type QuartzPluginData = Data export type QuartzPluginData = Data
export type ProcessedContent = [Node<QuartzPluginData>, VFile] export type ProcessedContent = [Node, VFile]
export function defaultProcessedContent(vfileData: Partial<QuartzPluginData>): ProcessedContent { export function defaultProcessedContent(vfileData: Partial<QuartzPluginData>): ProcessedContent {
const root: Parent = { type: "root", children: [] } const root: Parent = { type: "root", children: [] }

36
quartz/processors/parse.ts
View File

@ -14,27 +14,25 @@ import { QuartzLogger } from "../util/log"
import { trace } from "../util/trace" import { trace } from "../util/trace"
import { BuildCtx } from "../util/ctx" import { BuildCtx } from "../util/ctx"
export type QuartzProcessor = Processor<MDRoot, HTMLRoot, void> export type QuartzProcessor = Processor<MDRoot, MDRoot, HTMLRoot>
export function createProcessor(ctx: BuildCtx): QuartzProcessor { export function createProcessor(ctx: BuildCtx): QuartzProcessor {
const transformers = ctx.cfg.plugins.transformers const transformers = ctx.cfg.plugins.transformers
// base Markdown -> MD AST return (
let processor = unified().use(remarkParse) unified()
// base Markdown -> MD AST
// MD AST -> MD AST transforms .use(remarkParse)
for (const plugin of transformers.filter((p) => p.markdownPlugins)) { // MD AST -> MD AST transforms
processor = processor.use(plugin.markdownPlugins!(ctx)) .use(
} transformers
.filter((p) => p.markdownPlugins)
// MD AST -> HTML AST .flatMap((plugin) => plugin.markdownPlugins!(ctx)),
processor = processor.use(remarkRehype, { allowDangerousHtml: true }) )
// MD AST -> HTML AST
// HTML AST -> HTML AST transforms .use(remarkRehype, { allowDangerousHtml: true })
for (const plugin of transformers.filter((p) => p.htmlPlugins)) { // HTML AST -> HTML AST transforms
processor = processor.use(plugin.htmlPlugins!(ctx)) .use(transformers.filter((p) => p.htmlPlugins).flatMap((plugin) => plugin.htmlPlugins!(ctx)))
} )
return processor
} }
function* chunks<T>(arr: T[], n: number) { function* chunks<T>(arr: T[], n: number) {
@ -89,7 +87,7 @@ export function createFileParser(ctx: BuildCtx, fps: FilePath[]) {
// Text -> Text transforms // Text -> Text transforms
for (const plugin of cfg.plugins.transformers.filter((p) => p.textTransform)) { for (const plugin of cfg.plugins.transformers.filter((p) => p.textTransform)) {
file.value = plugin.textTransform!(ctx, file.value) file.value = plugin.textTransform!(ctx, file.value.toString())
} }
// base data properties that plugins may use // base data properties that plugins may use

9
quartz/styles/base.scss
View File

@ -304,11 +304,13 @@ h6 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
div[data-rehype-pretty-code-fragment] { figure[data-rehype-pretty-code-figure] {
margin: 0;
position: relative;
line-height: 1.6rem; line-height: 1.6rem;
position: relative; position: relative;
& > div[data-rehype-pretty-code-title] { & > [data-rehype-pretty-code-title] {
font-family: var(--codeFont); font-family: var(--codeFont);
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
@ -320,7 +322,7 @@ div[data-rehype-pretty-code-fragment] {
} }
& > pre { & > pre {
padding: 0.5rem 0; padding: 0;
} }
} }
@ -342,6 +344,7 @@ pre {
counter-reset: line; counter-reset: line;
counter-increment: line 0; counter-increment: line 0;
display: grid; display: grid;
padding: 0.5rem 0;
& [data-highlighted-chars] { & [data-highlighted-chars] {
background-color: var(--highlight); background-color: var(--highlight);

40
quartz/styles/syntax.scss
View File

@ -1,29 +1,17 @@
// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-light.json code[data-theme*=" "] {
:root { color: var(--shiki-light);
--shiki-color-text: #24292e; background-color: var(--shiki-light-bg);
--shiki-color-background: #f8f8f8;
--shiki-token-constant: #005cc5;
--shiki-token-string: #032f62;
--shiki-token-comment: #6a737d;
--shiki-token-keyword: #d73a49;
--shiki-token-parameter: #24292e;
--shiki-token-function: #24292e;
--shiki-token-string-expression: #22863a;
--shiki-token-punctuation: #24292e;
--shiki-token-link: #24292e;
} }
// npx convert-sh-theme https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/themes/github-dark.json code[data-theme*=" "] span {
[saved-theme="dark"] { color: var(--shiki-light);
--shiki-color-text: #e1e4e8 !important; }
--shiki-color-background: #24292e !important;
--shiki-token-constant: #79b8ff !important; [saved-theme="dark"] code[data-theme*=" "] {
--shiki-token-string: #9ecbff !important; color: var(--shiki-dark);
--shiki-token-comment: #6a737d !important; background-color: var(--shiki-dark-bg);
--shiki-token-keyword: #f97583 !important; }
--shiki-token-parameter: #e1e4e8 !important;
--shiki-token-function: #e1e4e8 !important; [saved-theme="dark"] code[data-theme*=" "] span {
--shiki-token-string-expression: #85e89d !important; color: var(--shiki-dark);
--shiki-token-punctuation: #e1e4e8 !important;
--shiki-token-link: #e1e4e8 !important;
} }

3
quartz/util/jsx.tsx
View File

@ -1,5 +1,4 @@
import { Components, Jsx, toJsxRuntime } from "hast-util-to-jsx-runtime" import { Components, Jsx, toJsxRuntime } from "hast-util-to-jsx-runtime"
import { QuartzPluginData } from "../plugins/vfile"
import { Node, Root } from "hast" import { Node, Root } from "hast"
import { Fragment, jsx, jsxs } from "preact/jsx-runtime" import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
import { trace } from "./trace" import { trace } from "./trace"
@ -13,7 +12,7 @@ const customComponents: Components = {
), ),
} }
export function htmlToJsx(fp: FilePath, tree: Node<QuartzPluginData>) { export function htmlToJsx(fp: FilePath, tree: Node) {
try { try {
return toJsxRuntime(tree as Root, { return toJsxRuntime(tree as Root, {
Fragment, Fragment,