fix(backlinks): Improve backlink perf and fix aliased backlinks

Backlink calculation is quadratic, similar to breadcrumbs before the
fix.

Apply a similar fix here.

Also added alias resolution, so this depends on `file.data.aliases`
from #1681, but that can be commented out easily if needed.

quartz/components/Backlinks.tsx

@@ -1,6 +1,6 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
-import { resolveRelative, simplifySlug } from "../util/path"
+import { FullSlug, resolveRelative, SimpleSlug, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
@@ -15,14 +15,44 @@ const defaultOptions: BacklinksOptions = {
 export default ((opts?: Partial<BacklinksOptions>) => {
   const options: BacklinksOptions = { ...defaultOptions, ...opts }
 
+  let backlinks: Map<SimpleSlug, Array<{ slug: FullSlug; title: string }>> | undefined
+
   const Backlinks: QuartzComponent = ({
     fileData,
     allFiles,
     displayClass,
     cfg,
   }: QuartzComponentProps) => {
-    const slug = simplifySlug(fileData.slug!)
+    if (!backlinks) {
-    const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
+      backlinks = new Map()
+
+      const aliasMap = new Map<SimpleSlug, SimpleSlug>()
+      for (const file of allFiles) {
+        for (const alias of file.aliases ?? []) {
+          aliasMap.set(simplifySlug(alias), simplifySlug(file.slug!))
+        }
+      }
+
+      for (const file of allFiles) {
+        const seen = new Set<SimpleSlug>()
+        for (let link of file.links ?? []) {
+          link = aliasMap.get(link) ?? link
+          // avoid aliased duplicates
+          if (seen.has(link)) {
+            continue
+          }
+          seen.add(link)
+          let ref = backlinks.get(link)
+          if (!ref) {
+            backlinks.set(link, (ref = []))
+          }
+          ref.push({ slug: file.slug!, title: file.frontmatter?.title! })
+        }
+      }
+    }
+
+    const backlinkFiles = backlinks.get(simplifySlug(fileData.slug!)) ?? []
+
     if (options.hideWhenEmpty && backlinkFiles.length == 0) {
       return null
     }
@@ -33,8 +63,8 @@ export default ((opts?: Partial<BacklinksOptions>) => {
           {backlinkFiles.length > 0 ? (
             backlinkFiles.map((f) => (
               <li>
-                <a href={resolveRelative(fileData.slug!, f.slug!)} class="internal">
+                <a href={resolveRelative(fileData.slug!, f.slug)} class="internal">
-                  {f.frontmatter?.title}
+                  {f.title}
                 </a>
               </li>
             ))

quartz/styles/base.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @use "./variables.scss" as *;
 @use "./syntax.scss";
 @use "./callouts.scss";
@@ -121,7 +123,7 @@ a {
 }
 
 .page {
-  max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
+  max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
   margin: 0 auto;
   & article {
     & > h1 {
@@ -151,24 +153,25 @@ a {
 
   & > #quartz-body {
     display: grid;
-    grid-template-columns: #{map-get($desktopGrid, templateColumns)};
+    grid-template-columns: #{map.get($desktopGrid, templateColumns)};
-    grid-template-rows: #{map-get($desktopGrid, templateRows)};
+    grid-template-rows: #{map.get($desktopGrid, templateRows)};
-    column-gap: #{map-get($desktopGrid, columnGap)};
+    column-gap: #{map.get($desktopGrid, columnGap)};
-    row-gap: #{map-get($desktopGrid, rowGap)};
+    row-gap: #{map.get($desktopGrid, rowGap)};
-    grid-template-areas: #{map-get($desktopGrid, templateAreas)};
+    grid-template-areas: #{map.get($desktopGrid, templateAreas)};
+
     @media all and ($tablet) {
-      grid-template-columns: #{map-get($tabletGrid, templateColumns)};
+      grid-template-columns: #{map.get($tabletGrid, templateColumns)};
-      grid-template-rows: #{map-get($tabletGrid, templateRows)};
+      grid-template-rows: #{map.get($tabletGrid, templateRows)};
-      column-gap: #{map-get($tabletGrid, columnGap)};
+      column-gap: #{map.get($tabletGrid, columnGap)};
-      row-gap: #{map-get($tabletGrid, rowGap)};
+      row-gap: #{map.get($tabletGrid, rowGap)};
-      grid-template-areas: #{map-get($tabletGrid, templateAreas)};
+      grid-template-areas: #{map.get($tabletGrid, templateAreas)};
     }
     @media all and ($mobile) {
-      grid-template-columns: #{map-get($mobileGrid, templateColumns)};
+      grid-template-columns: #{map.get($mobileGrid, templateColumns)};
-      grid-template-rows: #{map-get($mobileGrid, templateRows)};
+      grid-template-rows: #{map.get($mobileGrid, templateRows)};
-      column-gap: #{map-get($mobileGrid, columnGap)};
+      column-gap: #{map.get($mobileGrid, columnGap)};
-      row-gap: #{map-get($mobileGrid, rowGap)};
+      row-gap: #{map.get($mobileGrid, rowGap)};
-      grid-template-areas: #{map-get($mobileGrid, templateAreas)};
+      grid-template-areas: #{map.get($mobileGrid, templateAreas)};
     }
 
     @media all and not ($desktop) {

quartz/styles/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 /**
  * Layout breakpoints
  * $mobile: screen width below this value will use mobile styles
@@ -10,11 +12,11 @@ $breakpoints: (
   desktop: 1200px,
 );
 
-$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
+$mobile: "(max-width: #{map.get($breakpoints, mobile)})";
-$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
+$tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
-$desktop: "(min-width: #{map-get($breakpoints, desktop)})";
+$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
 
-$pageWidth: #{map-get($breakpoints, mobile)};
+$pageWidth: #{map.get($breakpoints, mobile)};
 $sidePanelWidth: 320px; //380px;
 $topSpacing: 6rem;
 $boldWeight: 700;