tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

finish path refactoring, add sourcemap + better trace support

Browse Source
This commit is contained in:
Jacky Zhao
2023-07-15 23:02:12 -07:00
parent a14136ea28
commit 245388735b
36 changed files with 331 additions and 1170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
quartz/plugins/emitters/aliases.ts
View File

@@ -1,4 +1,4 @@
import { CanonicalSlug, FilePath, ServerSlug, relativeToRoot } from "../../path"
import { CanonicalSlug, FilePath, ServerSlug, canonicalizeServer, resolveRelative } from "../../path"
import { QuartzEmitterPlugin } from "../types"
import path from 'path'
@@ -11,7 +11,7 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
const fps: FilePath[] = []
for (const [_tree, file] of content) {
const ogSlug = file.data.slug!
const ogSlug = canonicalizeServer(file.data.slug!)
const dir = path.relative(contentFolder, file.dirname ?? contentFolder)
let aliases: CanonicalSlug[] = []
@@ -22,12 +22,10 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
}
for (const alias of aliases) {
const slug = (alias.startsWith("/")
? alias
: path.posix.join(dir, alias)) as ServerSlug
const slug = path.posix.join(dir, alias) as ServerSlug
const fp = slug + ".html" as FilePath
const redirUrl = relativeToRoot(slug, ogSlug)
const redirUrl = resolveRelative(canonicalizeServer(slug), ogSlug)
await emit({
content: `
<!DOCTYPE html>

18
quartz/plugins/emitters/contentIndex.ts
View File

@@ -1,5 +1,5 @@
import { GlobalConfiguration } from "../../cfg"
import { CanonicalSlug, ClientSlug } from "../../path"
import { CanonicalSlug, ClientSlug, FilePath, ServerSlug, canonicalizeServer } from "../../path"
import { QuartzEmitterPlugin } from "../types"
import path from "path"
@@ -65,10 +65,10 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
return {
name: "ContentIndex",
async emit(_contentDir, cfg, content, _resources, emit) {
const emitted: string[] = []
const emitted: FilePath[] = []
const linkIndex: ContentIndex = new Map()
for (const [_tree, file] of content) {
const slug = file.data.slug!
const slug = canonicalizeServer(file.data.slug!)
const date = file.data.dates?.modified ?? new Date()
if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
linkIndex.set(slug, {
@@ -85,22 +85,22 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
if (opts?.enableSiteMap) {
await emit({
content: generateSiteMap(cfg, linkIndex),
slug: "sitemap",
slug: "sitemap" as ServerSlug,
ext: ".xml"
})
emitted.push("sitemap.xml")
emitted.push("sitemap.xml" as FilePath)
}
if (opts?.enableRSS) {
await emit({
content: generateRSSFeed(cfg, linkIndex),
slug: "index",
slug: "index" as ServerSlug,
ext: ".xml"
})
emitted.push("index.xml")
emitted.push("index.xml" as FilePath)
}
const fp = path.join("static", "contentIndex")
const fp = path.join("static", "contentIndex") as ServerSlug
const simplifiedIndex = Object.fromEntries(
Array.from(linkIndex).map(([slug, content]) => {
// remove description and from content index as nothing downstream
@@ -117,7 +117,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
slug: fp,
ext: ".json",
})
emitted.push(`${fp}.json`)
emitted.push(`${fp}.json` as FilePath)
return emitted
},

4
quartz/plugins/emitters/contentPage.tsx
View File

@@ -4,7 +4,7 @@ import HeaderConstructor from "../../components/Header"
import BodyConstructor from "../../components/Body"
import { pageResources, renderPage } from "../../components/renderPage"
import { FullPageLayout } from "../../cfg"
import { FilePath } from "../../path"
import { FilePath, canonicalizeServer } from "../../path"
export const ContentPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
if (!opts) {
@@ -24,7 +24,7 @@ export const ContentPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
const fps: FilePath[] = []
const allFiles = content.map(c => c[1].data)
for (const [tree, file] of content) {
const slug = file.data.slug!
const slug = canonicalizeServer(file.data.slug!)
const externalResources = pageResources(slug, resources)
const componentData: QuartzComponentProps = {
fileData: file.data,

24
quartz/plugins/emitters/folderPage.tsx
View File

@@ -6,7 +6,7 @@ import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg"
import path from "path"
import { FilePath, toServerSlug } from "../../path"
import { CanonicalSlug, FilePath, ServerSlug, canonicalizeServer, joinSegments } from "../../path"
export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
if (!opts) {
@@ -23,28 +23,34 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
return [Head, Header, Body, ...header, ...beforeBody, Content, ...left, ...right, Footer]
},
async emit(_contentDir, cfg, content, resources, emit): Promise<FilePath[]> {
const fps: string[] = []
const fps: FilePath[] = []
const allFiles = content.map(c => c[1].data)
const folders: Set<string> = new Set(allFiles.flatMap(data => data.slug ? [path.dirname(data.slug)] : []))
const folders: Set<CanonicalSlug> = new Set(allFiles.flatMap(data => {
const slug = data.slug
const folderName = path.dirname(slug ?? "") as CanonicalSlug
if (slug && folderName !== ".") {
return [folderName]
}
return []
}))
// remove special prefixes
folders.delete(".")
folders.delete("tags")
folders.delete("tags" as CanonicalSlug)
const folderDescriptions: Record<string, ProcessedContent> = Object.fromEntries([...folders].map(folder => ([
folder, defaultProcessedContent({ slug: folder, frontmatter: { title: `Folder: ${folder}`, tags: [] } })
folder, defaultProcessedContent({ slug: joinSegments(folder, "index") as ServerSlug, frontmatter: { title: `Folder: ${folder}`, tags: [] } })
])))
for (const [tree, file] of content) {
const slug = toServerSlug(file.data.slug!)
const slug = canonicalizeServer(file.data.slug!)
if (folders.has(slug)) {
folderDescriptions[slug] = [tree, file]
}
}
for (const folder of folders) {
const slug = folder
const slug = folder
const externalResources = pageResources(slug, resources)
const [tree, file] = folderDescriptions[folder]
const componentData: QuartzComponentProps = {
@@ -63,7 +69,7 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
externalResources
)
const fp = file.data.slug + ".html"
const fp = file.data.slug! + ".html" as FilePath
await emit({
content,
slug: file.data.slug!,

6
quartz/plugins/emitters/tagPage.tsx
View File

@@ -5,7 +5,7 @@ import BodyConstructor from "../../components/Body"
import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg"
import { FilePath, ServerSlug, toServerSlug } from "../../path"
import { CanonicalSlug, FilePath, ServerSlug } from "../../path"
export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
if (!opts) {
@@ -31,7 +31,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
])))
for (const [tree, file] of content) {
const slug = toServerSlug(file.data.slug!)
const slug = file.data.slug!
if (slug.startsWith("tags/")) {
const tag = slug.slice("tags/".length)
if (tags.has(tag)) {
@@ -41,7 +41,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
}
for (const tag of tags) {
const slug = `tags/${tag}`
const slug = `tags/${tag}` as CanonicalSlug
const externalResources = pageResources(slug, resources)
const [tree, file] = tagDescriptions[tag]
const componentData: QuartzComponentProps = {

6
quartz/plugins/index.ts
View File

@@ -55,17 +55,17 @@ function joinScripts(scripts: string[]): string {
export async function emitComponentResources(cfg: GlobalConfiguration, res: ComponentResources, emit: EmitCallback): Promise<FilePath[]> {
const fps = await Promise.all([
emit({
slug: "index",
slug: "index" as ServerSlug,
ext: ".css",
content: joinStyles(cfg.theme, styles, ...res.css)
}),
emit({
slug: "prescript",
slug: "prescript" as ServerSlug,
ext: ".js",
content: joinScripts(res.beforeDOMLoaded)
}),
emit({
slug: "postscript",
slug: "postscript" as ServerSlug,
ext: ".js",
content: joinScripts(res.afterDOMLoaded)
})

49
quartz/plugins/transformers/links.ts
View File

@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types"
import { CanonicalSlug, transformInternalLink } from "../../path"
import { CanonicalSlug, RelativeURL, canonicalizeServer, joinSegments, pathToRoot, resolveRelative, splitAnchor, transformInternalLink } from "../../path"
import path from "path"
import { visit } from 'unist-util-visit'
import isAbsoluteUrl from "is-absolute-url"
@@ -9,15 +9,11 @@ interface Options {
markdownLinkResolution: 'absolute' | 'relative' | 'shortest'
/** Strips folders from a link so that it looks nice */
prettyLinks: boolean
indexAnchorLinks: boolean
indexExternalLinks: boolean
}
const defaultOptions: Options = {
markdownLinkResolution: 'absolute',
prettyLinks: true,
indexAnchorLinks: false,
indexExternalLinks: false,
}
export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
@@ -27,32 +23,34 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
htmlPlugins() {
return [() => {
return (tree, file) => {
const curSlug = file.data.slug!
const transformLink = (target: string) => {
const targetSlug = transformInternalLink(target)
if (opts.markdownLinkResolution === 'relative' && !path.isAbsolute(targetSlug)) {
return './' + relative(curSlug, targetSlug)
const curSlug = canonicalizeServer(file.data.slug!)
const transformLink = (target: string): RelativeURL => {
const targetSlug = transformInternalLink(target).slice("./".length)
let [targetCanonical, targetAnchor] = splitAnchor(targetSlug)
if (opts.markdownLinkResolution === 'relative') {
return targetSlug as RelativeURL
} else if (opts.markdownLinkResolution === 'shortest') {
// https://forum.obsidian.md/t/settings-new-link-format-what-is-shortest-path-when-possible/6748/5
const allSlugs = file.data.allSlugs!
// if the file name is unique, then it's just the filename
const matchingFileNames = allSlugs.filter(slug => {
const parts = toServerSlug(slug).split(path.posix.sep)
const parts = slug.split(path.posix.sep)
const fileName = parts.at(-1)
return targetSlug === fileName
return targetCanonical === fileName
})
if (matchingFileNames.length === 1) {
const targetSlug = toServerSlug(matchingFileNames[0])
return './' + relativeToRoot(curSlug, targetSlug)
const targetSlug = canonicalizeServer(matchingFileNames[0])
return resolveRelative(curSlug, targetSlug) + targetAnchor as RelativeURL
}
// if it's not unique, then it's the absolute path from the vault root
// (fall-through case)
}
// treat as absolute
return './' + relativeToRoot(curSlug, targetSlug)
return joinSegments(pathToRoot(curSlug), targetSlug) as RelativeURL
}
const outgoing: Set<CanonicalSlug> = new Set()
@@ -63,26 +61,15 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
node.properties &&
typeof node.properties.href === 'string'
) {
let dest = node.properties.href
let dest = node.properties.href as RelativeURL
node.properties.className = isAbsoluteUrl(dest) ? "external" : "internal"
// don't process external links or intra-document anchors
if (!(isAbsoluteUrl(dest) || dest.startsWith("#"))) {
node.properties.href = transformLink(dest)
}
dest = node.properties.href
if (dest.startsWith(".")) {
const normalizedPath = path.normalize(path.join(curSlug, dest))
outgoing.add(trimPathSuffix(normalizedPath))
} else if (dest.startsWith("#")) {
if (opts.indexAnchorLinks) {
outgoing.add(dest)
}
} else {
if (opts.indexExternalLinks) {
outgoing.add(dest)
}
dest = node.properties.href = transformLink(dest)
const canonicalDest = path.normalize(joinSegments(curSlug, dest))
const [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
outgoing.add(destCanonical as CanonicalSlug)
}
// rewrite link internals if prettylinks is on

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

@@ -2,7 +2,6 @@ import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types"
import { Root, HTML, BlockContent, DefinitionContent, Code } from 'mdast'
import { findAndReplace } from "mdast-util-find-and-replace"
import { slugify } from "../../path"
import { slug as slugAnchor } from 'github-slugger'
import rehypeRaw from "rehype-raw"
import { visit } from "unist-util-visit"
@@ -10,6 +9,7 @@ import path from "path"
import { JSResource } from "../../resources"
// @ts-ignore
import calloutScript from "../../components/scripts/callout.inline.ts"
import { FilePath, slugifyFilePath, transformInternalLink } from "../../path"
export interface Options {
comments: boolean
@@ -139,14 +139,15 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
plugins.push(() => {
return (tree: Root, _file) => {
findAndReplace(tree, wikilinkRegex, (value: string, ...capture: string[]) => {
const [fp, rawHeader, rawAlias] = capture
let [fp, rawHeader, rawAlias] = capture
fp = fp.trim()
const anchor = rawHeader?.trim() ?? ""
const alias = rawAlias?.slice(1).trim()
// embed cases
if (value.startsWith("!")) {
const ext = path.extname(fp).toLowerCase()
const url = slugify(fp.trim()) + ext
const ext: string | undefined = path.extname(fp).toLowerCase()
const url = slugifyFilePath(fp as FilePath) + ext
if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
const dims = alias ?? ""
let [width, height] = dims.split("x", 2)
@@ -176,12 +177,15 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
type: 'html',
value: `<iframe src="${url}"></iframe>`
}
} else {
// TODO: this is the node embed case
}
// otherwise, fall through to regular link
}
// internal link
const url = slugify(fp.trim() + anchor)
// const url = transformInternalLink(fp + anchor)
const url = fp + anchor
return {
type: 'link',
url,

3
quartz/plugins/transformers/toc.ts
View File

@@ -3,7 +3,6 @@ import { Root } from "mdast"
import { visit } from "unist-util-visit"
import { toString } from "mdast-util-to-string"
import { slug as slugAnchor } from 'github-slugger'
import { CanonicalSlug } from "../../path"
export interface Options {
maxDepth: 1 | 2 | 3 | 4 | 5 | 6,
@@ -20,7 +19,7 @@ const defaultOptions: Options = {
interface TocEntry {
depth: number,
text: string,
slug: CanonicalSlug
slug: string // this is just the anchor (#some-slug), not the canonical slug
}
export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {