Merge branch 'v4' into develop

docs/features/backlinks.md

@@ -9,6 +9,7 @@ A backlink for a note is a link from another note to that note. Links in the bac
 ## Customization
 
 - Removing backlinks: delete all usages of `Component.Backlinks()` from `quartz.layout.ts`.
+- Hide when empty: hide `Backlinks` if given page doesn't contain any backlinks (default to `true`). To disable this, use `Component.Backlinks({ hideWhenEmpty: false })`.
 - Component: `quartz/components/Backlinks.tsx`
 - Style: `quartz/components/styles/backlinks.scss`
 - Script: `quartz/components/scripts/search.inline.ts`

quartz/components/Backlinks.tsx

@@ -4,14 +4,28 @@ import { resolveRelative, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-const Backlinks: QuartzComponent = ({
+interface BacklinksOptions {
+  hideWhenEmpty: boolean
+}
+
+const defaultOptions: BacklinksOptions = {
+  hideWhenEmpty: true,
+}
+
+export default ((opts?: Partial<BacklinksOptions>) => {
+  const options: BacklinksOptions = { ...defaultOptions, ...opts }
+
+  const Backlinks: QuartzComponent = ({
     fileData,
     allFiles,
     displayClass,
     cfg,
-}: QuartzComponentProps) => {
+  }: QuartzComponentProps) => {
     const slug = simplifySlug(fileData.slug!)
     const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
+    if (options.hideWhenEmpty && backlinkFiles.length == 0) {
+      return null
+    }
     return (
       <div class={classNames(displayClass, "backlinks")}>
         <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
@@ -30,7 +44,9 @@ const Backlinks: QuartzComponent = ({
         </ul>
       </div>
     )
-}
+  }
 
-Backlinks.css = style
+  Backlinks.css = style
-export default (() => Backlinks) satisfies QuartzComponentConstructor
+
+  return Backlinks
+}) satisfies QuartzComponentConstructor

quartz/components/pages/TagContent.tsx

@@ -110,7 +110,7 @@ export default ((opts?: Partial<TagContentOptions>) => {
 
       return (
         <div class={classes}>
-          <article>{content}</article>
+          <article class="popover-hint">{content}</article>
           <div class="page-listing">
             <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
             <div>

quartz/components/scripts/popover.inline.ts

@@ -1,5 +1,6 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
 import { normalizeRelativeURLs } from "../../util/path"
+import { fetchCanonical } from "./util"
 
 const p = new DOMParser()
 async function mouseEnterHandler(
@@ -37,7 +38,7 @@ async function mouseEnterHandler(
   targetUrl.hash = ""
   targetUrl.search = ""
 
-  const response = await fetch(`${targetUrl}`).catch((err) => {
+  const response = await fetchCanonical(targetUrl).catch((err) => {
     console.error(err)
   })
 

quartz/components/scripts/spa.inline.ts

@@ -1,5 +1,6 @@
 import micromorph from "micromorph"
 import { FullSlug, RelativeURL, getFullSlug, normalizeRelativeURLs } from "../../util/path"
+import { fetchCanonical } from "./util"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -42,10 +43,24 @@ function notifyNav(url: FullSlug) {
 const cleanupFns: Set<(...args: any[]) => void> = new Set()
 window.addCleanup = (fn) => cleanupFns.add(fn)
 
+function startLoading() {
+  const loadingBar = document.createElement("div")
+  loadingBar.className = "navigation-progress"
+  loadingBar.style.width = "0"
+  if (!document.body.contains(loadingBar)) {
+    document.body.appendChild(loadingBar)
+  }
+
+  setTimeout(() => {
+    loadingBar.style.width = "80%"
+  }, 100)
+}
+
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
+  startLoading()
   p = p || new DOMParser()
-  const contents = await fetch(`${url}`)
+  const contents = await fetchCanonical(url)
     .then((res) => {
       const contentType = res.headers.get("content-type")
       if (contentType?.startsWith("text/html")) {
@@ -104,6 +119,7 @@ async function navigate(url: URL, isBack: boolean = false) {
   if (!isBack) {
     history.pushState({}, "", url)
   }
+
   notifyNav(getFullSlug(window))
   delete announcer.dataset.persist
 }

quartz/components/scripts/util.ts

@@ -24,3 +24,22 @@ export function removeAllChildren(node: HTMLElement) {
     node.removeChild(node.firstChild)
   }
 }
+
+// AliasRedirect emits HTML redirects which also have the link[rel="canonical"]
+// containing the URL it's redirecting to.
+// Extracting it here with regex is _probably_ faster than parsing the entire HTML
+// with a DOMParser effectively twice (here and later in the SPA code), even if
+// way less robust - we only care about our own generated redirects after all.
+const canonicalRegex = /<link rel="canonical" href="([^"]*)">/
+
+export async function fetchCanonical(url: URL): Promise<Response> {
+  const res = await fetch(`${url}`)
+  if (!res.headers.get("content-type")?.startsWith("text/html")) {
+    return res
+  }
+  // reading the body can only be done once, so we need to clone the response
+  // to allow the caller to read it if it's was not a redirect
+  const text = await res.clone().text()
+  const [_, redirect] = text.match(canonicalRegex) ?? []
+  return redirect ? fetch(redirect) : res
+}

quartz/plugins/emitters/tagPage.tsx

@@ -105,6 +105,9 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
           const tag = slug.slice("tags/".length)
           if (tags.has(tag)) {
             tagDescriptions[tag] = [tree, file]
+            if (file.data.frontmatter?.title === tag) {
+              file.data.frontmatter.title = `${i18n(cfg.locale).pages.tagContent.tag}: ${tag}`
+            }
           }
         }
       }

quartz/styles/base.scss

@@ -608,3 +608,14 @@ iframe.pdf {
   width: 100%;
   border-radius: 5px;
 }
+
+.navigation-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: var(--secondary);
+  transition: width 0.2s ease;
+  z-index: 9999;
+}