Merge f99f05dc3856076879667d7680584b7022cc8fa7 into fbc45548f7ee80715ec74d8c249c662a26f7feae

I was missing this feature and implemented it, not knowing that there
was #944 already ¯\_(ツ)_/¯

Looking at it now I think that my impl is a little better, and I'd love
to have it upstreamed.

Closes #820 and #944

docs/features/graph view.md

@@ -36,6 +36,7 @@ Component.Graph({
     opacityScale: 1, // how quickly do we fade out the labels when zooming out?
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: false, // whether to constrain the graph, similar to Obsidian
   },
   globalGraph: {
     drag: true,
@@ -49,6 +50,7 @@ Component.Graph({
     opacityScale: 1,
     removeTags: [], // what tags to remove from the graph
     showTags: true, // whether to show tags in the graph
+    enableRadial: true, // whether to constrain the graph, similar to Obsidian
   },
 })
 ```

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.

quartz/components/Graph.tsx

@@ -18,6 +18,7 @@ export interface D3Config {
   removeTags: string[]
   showTags: boolean
   focusOnHover?: boolean
+  enableRadial?: boolean
 }
 
 interface GraphOptions {
@@ -39,6 +40,7 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: false,
+    enableRadial: false,
   },
   globalGraph: {
     drag: true,
@@ -53,10 +55,11 @@ const defaultOptions: GraphOptions = {
     showTags: true,
     removeTags: [],
     focusOnHover: true,
+    enableRadial: true,
   },
 }
 
-export default ((opts?: GraphOptions) => {
+export default ((opts?: Partial<GraphOptions>) => {
   const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }

quartz/components/scripts/graph.inline.ts

@@ -8,6 +8,7 @@ import {
   forceCenter,
   forceLink,
   forceCollide,
+  forceRadial,
   zoomIdentity,
   select,
   drag,
@@ -87,6 +88,7 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
     removeTags,
     showTags,
     focusOnHover,
+    enableRadial,
   } = JSON.parse(graph.dataset["cfg"]!) as D3Config
 
   const data: Map<SimpleSlug, ContentDetails> = new Map(
@@ -161,15 +163,20 @@ async function renderGraph(container: string, fullSlug: FullSlug) {
       })),
   }
 
+  const width = graph.offsetWidth
+  const height = Math.max(graph.offsetHeight, 250)
+
   // we virtualize the simulation and use pixi to actually render it
+  // Calculate the radius of the container circle
+  const radius = Math.min(width, height) / 2 - 40 // 40px padding
   const simulation: Simulation<NodeData, LinkData> = forceSimulation<NodeData>(graphData.nodes)
     .force("charge", forceManyBody().strength(-100 * repelForce))
     .force("center", forceCenter().strength(centerForce))
     .force("link", forceLink(graphData.links).distance(linkDistance))
     .force("collide", forceCollide<NodeData>((n) => nodeRadius(n)).iterations(3))
 
-  const width = graph.offsetWidth
+  if (enableRadial)
-  const height = Math.max(graph.offsetHeight, 250)
+    simulation.force("radial", forceRadial(radius * 0.8, width / 2, height / 2).strength(0.3))
 
   // precompute style prop strings as pixi doesn't support css variables
   const cssVars = [

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,
+}
+
+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<Partial<Options>> = (userOpts) => {
@@ -107,17 +123,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
                     transformOptions,
                   )
 
-                  // url.resolve is considered legacy
+                  const full = getFullInternalLink(dest, curSlug)
-                  // 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
@@ -157,6 +163,31 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (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]
           }
         },