diff --git a/docs/features/backlinks.md b/docs/features/backlinks.md index f558f4a5d..6862720e1 100644 --- a/docs/features/backlinks.md +++ b/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` diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx index aa412a2e0..e99055e31 100644 --- a/quartz/components/Backlinks.tsx +++ b/quartz/components/Backlinks.tsx @@ -4,33 +4,49 @@ import { resolveRelative, simplifySlug } from "../util/path" import { i18n } from "../i18n" import { classNames } from "../util/lang" -const Backlinks: QuartzComponent = ({ - fileData, - allFiles, - displayClass, - cfg, -}: QuartzComponentProps) => { - const slug = simplifySlug(fileData.slug!) - const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) - return ( -
-

{i18n(cfg.locale).components.backlinks.title}

- -
- ) +interface BacklinksOptions { + hideWhenEmpty: boolean } -Backlinks.css = style -export default (() => Backlinks) satisfies QuartzComponentConstructor +const defaultOptions: BacklinksOptions = { + hideWhenEmpty: true, +} + +export default ((opts?: Partial) => { + const options: BacklinksOptions = { ...defaultOptions, ...opts } + + const Backlinks: QuartzComponent = ({ + fileData, + allFiles, + displayClass, + cfg, + }: QuartzComponentProps) => { + const slug = simplifySlug(fileData.slug!) + const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug)) + if (options.hideWhenEmpty && backlinkFiles.length == 0) { + return null + } + return ( +
+

{i18n(cfg.locale).components.backlinks.title}

+ +
+ ) + } + + Backlinks.css = style + + return Backlinks +}) satisfies QuartzComponentConstructor diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx index 5b9fbe282..c703b6524 100644 --- a/quartz/components/pages/TagContent.tsx +++ b/quartz/components/pages/TagContent.tsx @@ -110,7 +110,7 @@ export default ((opts?: Partial) => { return (
-
{content}
+
{content}

{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 49f438205..b01af0e85 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/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) }) diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts index 1790bcabc..df48f0403 100644 --- a/quartz/components/scripts/spa.inline.ts +++ b/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 } diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index d0a16c651..c1db8bad5 100644 --- a/quartz/components/scripts/util.ts +++ b/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 = // + +export async function fetchCanonical(url: URL): Promise { + 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 +} diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx index 066d4ec26..d82a537db 100644 --- a/quartz/plugins/emitters/tagPage.tsx +++ b/quartz/plugins/emitters/tagPage.tsx @@ -105,6 +105,9 @@ export const TagPage: QuartzEmitterPlugin> = (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}` + } } } } diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 00893d5b1..e46c383ad 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -607,4 +607,15 @@ iframe.pdf { height: 100%; width: 100%; border-radius: 5px; -} \ No newline at end of file +} + +.navigation-progress { + position: fixed; + top: 0; + left: 0; + width: 0; + height: 3px; + background: var(--secondary); + transition: width 0.2s ease; + z-index: 9999; +}