From e70312320f77e8ee362fd12c5dc5597cfb3cb1ae Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 13 Jan 2024 17:47:56 +0000
Subject: [PATCH] feat: improve default layout
---
quartz/plugins/transformers/ofm.ts | 72 +++++++++++++++++++++++++----------
1 files changed, 51 insertions(+), 21 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 9adeff4..be3344a 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph } from "mdast"
+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"
@@ -25,6 +25,7 @@
parseTags: boolean
parseBlockReferences: boolean
enableInHtmlEmbed: boolean
+ enableYouTubeEmbed: boolean
}
const defaultOptions: Options = {
@@ -36,6 +37,7 @@
parseTags: true,
parseBlockReferences: true,
enableInHtmlEmbed: false,
+ enableYouTubeEmbed: false,
}
const icons = {
@@ -105,6 +107,8 @@
return calloutMapping[callout] ?? "note"
}
+export const externalLinkRegex = /^https?:\/\//i
+
// !? -> optional embedding
// \[\[ -> open brace
// ([^\[\]\|\#]+) -> one or more non-special characters ([,],|, or #) (name)
@@ -123,8 +127,9 @@
// #(...) -> 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}\d])+(?:\/[-_\p{L}\d]+)*)/, "gu")
+const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")
+const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
userOpts,
@@ -158,13 +163,19 @@
}
src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
- const [rawFp, rawHeader, rawAlias] = 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}]]`
})
}
@@ -193,7 +204,7 @@
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)) {
+ if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
const dims = alias ?? ""
let [width, height] = dims.split("x", 2)
width ||= "auto"
@@ -423,25 +434,15 @@
})
}
- return plugins
- },
- htmlPlugins() {
- const plugins: PluggableList = [rehypeRaw]
-
if (opts.mermaid) {
plugins.push(() => {
- return (tree: HtmlRoot, _file) => {
- visit(tree, "element", (node) => {
- if (node.tagName === "pre") {
- const firstChild = node.children[0]
- if (firstChild && firstChild.type === "element" && firstChild.tagName === "code") {
- const code = firstChild
- const isMermaidBlock =
- (code.properties["className"] as Array<string>)?.[0] === "language-mermaid"
- if (isMermaidBlock) {
- node.children = code.children
- node.properties.className = ["mermaid"]
- }
+ return (tree: Root, _file) => {
+ visit(tree, "code", (node: Code) => {
+ if (node.lang === "mermaid") {
+ node.data = {
+ hProperties: {
+ className: ["mermaid"],
+ },
}
}
})
@@ -449,6 +450,11 @@
})
}
+ return plugins
+ },
+ htmlPlugins() {
+ const plugins: PluggableList = [rehypeRaw]
+
if (opts.parseBlockReferences) {
plugins.push(() => {
const inlineTagTypes = new Set(["p", "li"])
@@ -502,6 +508,30 @@
})
}
+ 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
+ if (videoId) {
+ node.tagName = "iframe"
+ node.properties = {
+ class: "external-embed",
+ allow: "fullscreen",
+ frameborder: 0,
+ width: "600px",
+ height: "350px",
+ src: `https://www.youtube.com/embed/${videoId}`,
+ }
+ }
+ }
+ })
+ }
+ })
+ }
+
return plugins
},
externalResources() {
--
Gitblit v1.10.0