diff --git a/docs/plugins/CrawlLinks.md b/docs/plugins/CrawlLinks.md
index 47b7bdd77..5bc92a5c1 100644
--- a/docs/plugins/CrawlLinks.md
+++ b/docs/plugins/CrawlLinks.md
@@ -19,6 +19,7 @@ This plugin accepts the following configuration options:
- `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
- `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
- `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
+- `indexFrontmatterWikilinks`: If `true`, parses Obsidian-style wikilinks in the frontmatter and adds them to the graph (including things like backlinks) as if they were part of the note content. Defaults to `false`.
> [!warning]
> Removing this plugin is _not_ recommended and will likely break the page.
diff --git a/quartz/components/PageProperties.tsx b/quartz/components/PageProperties.tsx
new file mode 100644
index 000000000..523e48437
--- /dev/null
+++ b/quartz/components/PageProperties.tsx
@@ -0,0 +1,165 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+import { ComponentChildren, ComponentType } from "preact"
+import { externalLinkRegex, wikilinkRegex } from "../plugins/transformers/ofm"
+import style from "./styles/pageProperties.scss"
+import { pathToRoot, simplifySlug, slugTag, transformLink } from "../util/path"
+import { getFullInternalLink } from "../plugins/transformers/links"
+
+export type FieldComponent = ComponentType<
+ QuartzComponentProps & { fieldName: string; fieldValue: any }
+>
+
+interface PagePropertiesOptions {
+ fieldComponents: {
+ [name: string]: FieldComponent
+ }
+ defaultFieldComponent: FieldComponent
+}
+
+// this is ugly, we kind of ripped out what quartz does from ofm.ts
+// at least in my earlier commit we separated out the `getFullInternalLink` part
+// also hardcoded "shortest" transform strategy
+function renderInternalLink(
+ value: string,
+ rawFp: string,
+ rawHeader: string | undefined,
+ rawAlias: string | undefined,
+ props: QuartzComponentProps,
+): ComponentChildren {
+ const fp = rawFp?.trim() ?? ""
+ const anchor = rawHeader?.trim() ?? ""
+ const alias = rawAlias?.slice(1).trim()
+
+ const url = fp + anchor
+ const text = alias ?? fp
+
+ const href = transformLink(props.fileData.slug!, url, {
+ strategy: "shortest",
+ allSlugs: props.ctx.allSlugs,
+ })
+ const full = getFullInternalLink(href, simplifySlug(props.fileData.slug!))
+
+ return (
+
+ {text}
+
+ )
+}
+
+export const DefaultFieldComponent: FieldComponent = (props) => {
+ const { fieldValue } = props
+ if (fieldValue === null) {
+ return "null"
+ }
+ if (fieldValue === undefined) {
+ return null
+ }
+ if (typeof fieldValue === "string") {
+ if (fieldValue.match(externalLinkRegex)) {
+ return (
+
+ {fieldValue}
+
+ )
+ }
+ const [match] = [...fieldValue.matchAll(wikilinkRegex)]
+ if (match && match[0] === fieldValue && !fieldValue.startsWith("!")) {
+ return renderInternalLink(fieldValue, match[1], match[2], match[3], props)
+ }
+ return fieldValue
+ }
+ if (Array.isArray(fieldValue)) {
+ if (fieldValue.length === 0) {
+ return null
+ }
+ return (
+
+ {fieldValue.map((v) => (
+ -
+
+
+ ))}
+
+ )
+ }
+ if (typeof fieldValue === "object") {
+ return {JSON.stringify(fieldValue, null, 2)}
+ }
+ return fieldValue.toString?.() ?? null
+}
+
+export const TagFieldComponent: FieldComponent = ({ fieldValue, fileData }) => {
+ const tags = Array.isArray(fieldValue) ? fieldValue : [fieldValue]
+ const baseDir = pathToRoot(fileData.slug!)
+ return (
+
+ {tags.map((tag) => {
+ return (
+ -
+
+ {tag}
+
+
+ )
+ })}
+
+ )
+}
+
+// A sentinel value that hides a field
+export const HIDE = () => null
+
+const defaultOptions: PagePropertiesOptions = {
+ fieldComponents: {
+ title: HIDE,
+ date: HIDE,
+ cssclasses: HIDE,
+ tags: TagFieldComponent,
+ ["hide-props"]: HIDE,
+ },
+ defaultFieldComponent: DefaultFieldComponent,
+}
+
+export default ((opts?: Partial) => {
+ const fieldComponents = { ...defaultOptions.fieldComponents, ...opts?.fieldComponents }
+ const DefaultFieldComponent = opts?.defaultFieldComponent ?? defaultOptions.defaultFieldComponent
+
+ const PageProperties: QuartzComponent = (props: QuartzComponentProps) => {
+ if (!props.fileData.frontmatterRaw) {
+ return null
+ }
+
+ const hideRaw = props.fileData.frontmatter?.["hide-props"] ?? []
+ const hide = Array.isArray(hideRaw) ? hideRaw : [hideRaw]
+
+ const entries = Object.entries(props.fileData.frontmatterRaw).map(([name, value]) => {
+ // allow hiding through frontmatter
+ if (hide.includes(name)) {
+ return null
+ }
+ const FieldComponent = fieldComponents[name] ?? DefaultFieldComponent
+ // allow hiding through config
+ if (FieldComponent === HIDE) {
+ return null
+ }
+ return (
+ <>
+ {name}
+
+
+
+ >
+ )
+ })
+
+ // avoid the padding if there's no frontmatter
+ return entries.length !== 0 ? (
+ {entries}
+ ) : null
+ }
+
+ PageProperties.css = style
+
+ return PageProperties
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 5b197941c..d64fc61ce 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -11,6 +11,7 @@ import Spacer from "./Spacer"
import TableOfContents from "./TableOfContents"
import Explorer from "./Explorer"
import TagList from "./TagList"
+import PageProperties from "./PageProperties"
import Graph from "./Graph"
import Backlinks from "./Backlinks"
import Search from "./Search"
@@ -34,6 +35,7 @@ export {
TableOfContents,
Explorer,
TagList,
+ PageProperties,
Graph,
Backlinks,
Search,
diff --git a/quartz/components/styles/pageProperties.scss b/quartz/components/styles/pageProperties.scss
new file mode 100644
index 000000000..820e03300
--- /dev/null
+++ b/quartz/components/styles/pageProperties.scss
@@ -0,0 +1,42 @@
+.page-props {
+ display: grid;
+ gap: 4px 16px;
+ grid-template-columns: max-content;
+ color: var(--darkgray);
+
+ > dt {
+ font-weight: bold;
+ font-family: mono;
+ font-size: 0.8em;
+ align-self: center;
+ }
+
+ > dd {
+ margin: 0;
+ grid-column-start: 2;
+ }
+
+ .internal {
+ padding: 0 0.25rem;
+ }
+
+ .property-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.2rem;
+
+ > li {
+ line-height: initial;
+ display: flex;
+ }
+
+ > li:not(:last-child) {
+ &::after {
+ content: ",";
+ }
+ }
+ }
+}
diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts
index e00c700e0..63fdf56df 100644
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -57,6 +57,8 @@ export const FrontMatter: QuartzTransformerPlugin> = (userOpts)
},
})
+ ;(file.data as any).frontmatterRaw = structuredClone(data)
+
if (data.title != null && data.title.toString() !== "") {
data.title = data.title.toString()
} else {
@@ -115,5 +117,6 @@ declare module "vfile" {
socialImage: string
comments: boolean | string
}>
+ readonly frontmatterRaw: { readonly [key: string]: Readonly }
}
}
diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 3e8dbdede..28f975457 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -13,6 +13,7 @@ import path from "path"
import { visit } from "unist-util-visit"
import isAbsoluteUrl from "is-absolute-url"
import { Root } from "hast"
+import { wikilinkRegex } from "./ofm"
interface Options {
/** How to resolve Markdown paths */
@@ -22,6 +23,7 @@ interface Options {
openLinksInNewTab: boolean
lazyLoad: boolean
externalLinkIcon: boolean
+ indexFrontmatterWikilinks: boolean
}
const defaultOptions: Options = {
@@ -30,6 +32,20 @@ const defaultOptions: Options = {
openLinksInNewTab: false,
lazyLoad: false,
externalLinkIcon: true,
+ indexFrontmatterWikilinks: false,
+}
+
+export function getFullInternalLink(dest: RelativeURL, fileSlug: SimpleSlug): FullSlug {
+ // 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(fileSlug, 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
+ return decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
}
export const CrawlLinks: QuartzTransformerPlugin> = (userOpts) => {
@@ -107,17 +123,7 @@ export const CrawlLinks: QuartzTransformerPlugin> = (userOpts)
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 full = getFullInternalLink(dest, curSlug)
const simple = simplifySlug(full)
outgoing.add(simple)
node.properties["data-slug"] = full
@@ -157,6 +163,31 @@ export const CrawlLinks: QuartzTransformerPlugin> = (userOpts)
}
})
+ if (opts.indexFrontmatterWikilinks) {
+ const strings = Object.values(file.data.frontmatter ?? {})
+ .flatMap((vs) => (Array.isArray(vs) ? vs : [vs]))
+ .filter((v) => typeof v === "string")
+
+ for (const string of strings) {
+ // the regex is /g so we have to do this to get the captures
+ // exec doesn't work because it's stateful and so returns null every other time (very bad)
+ // we do all of that to reuse the wikilinkRegex from ofm
+ const [captures] = [...string.matchAll(wikilinkRegex)]
+ if (!captures || captures[0] != string || string.startsWith("!")) {
+ // not matched, or didn't match the whole string, or is the embed syntax for some reason,
+ // which doesn't make sense to support in frontmatter
+ continue
+ }
+ const [_, rawFp, rawHeader] = captures
+ const fp = rawFp?.trim() ?? ""
+ const anchor = rawHeader?.trim() ?? ""
+ const dest = transformLink(file.data.slug!, fp + anchor, transformOptions)
+ const full = getFullInternalLink(dest, curSlug)
+ const simple = simplifySlug(full)
+ outgoing.add(simple)
+ }
+ }
+
file.data.links = [...outgoing]
}
},