Squashed commit of the following:

commit 7164857 Author: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Date: Fri Mar 15 21:17:42 2024 -0400 chore(ofm): remove unused (jackyzha0#999) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> commit 4702402 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri Mar 15 18:29:14 2024 -0400 chore(deps-dev): bump @types/node from 20.11.24 to 20.11.25 (jackyzha0#990) Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.24 to 20.11.25. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit b98e4be Author: Mara-Li <lili.simonetti@outlook.fr> Date: Fri Mar 15 23:28:31 2024 +0100 feat(i18n): Add French translation for reading time (jackyzha0#998) Signed-off-by: Mara-Li <lili.simonetti@outlook.fr> commit 8be51a0 Author: catcodeme <1020082805@qq.com> Date: Fri Mar 15 14:25:01 2024 +0800 fix: wikiLink in table (jackyzha0#993) * fix: wikiLink in table - update regexp to make '\' to group in alias - handle alias using block_id * style: format with prettier * style: add comment for block_ref(without alias) in table --------- Co-authored-by: hulinjiang <hulinjiang@58.com> commit 92cc23d Author: Linus Sehn <37184648+linozen@users.noreply.github.com> Date: Wed Mar 13 08:59:37 2024 +0100 feat(plugin): citations (jackyzha0#984) * feat: add rehype-citations * feat: add citations transformer plugin * feat: add rehype-rewrite * feat: add csl option and add no-popover to citation links * revert: add rehype-rewrite 04b2692 'feat: add rehype-rewrite' * feat: use existing package for html manipulation * fix: remove `console.log()` commit 097abc3 Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 11 13:41:48 2024 -0700 chore(deps): bump async-mutex from 0.4.1 to 0.5.0 (jackyzha0#991) Bumps [async-mutex](https://github.com/DirtyHairy/async-mutex) from 0.4.1 to 0.5.0. - [Changelog](https://github.com/DirtyHairy/async-mutex/blob/master/CHANGELOG.md) - [Commits](DirtyHairy/async-mutex@v0.4.1...v0.5.0) --- updated-dependencies: - dependency-name: async-mutex dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit a00324d Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon Mar 11 13:41:41 2024 -0700 chore(deps-dev): bump typescript from 5.3.3 to 5.4.2 (jackyzha0#989) Bumps [typescript](https://github.com/Microsoft/TypeScript) from 5.3.3 to 5.4.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.3.3...v5.4.2) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> commit 9fff6d7 Author: Mara-Li <lili.simonetti@outlook.fr> Date: Mon Mar 11 17:46:53 2024 +0100 fix: spelling error (jackyzha0#987) I really don't know why I translated this like that into "pas trouvé", and it bugged me a lot. I finally fixed it… Signed-off-by: Mara-Li <lili.simonetti@outlook.fr> commit 0f5a9d7 Author: Matt Vogel <mainmoniker@googlemail.com> Date: Sun Mar 10 12:57:10 2024 -0400 feat: separated content meta (jackyzha0#929) to allow for CSS styling commit b4236e5 Author: kabirgh <15871468+kabirgh@users.noreply.github.com> Date: Sun Mar 10 00:42:23 2024 +0000 feat(perf:fast-rebuilds): Stop mutating resources param in ComponentResources emitter (jackyzha0#977) * Stop mutating resources param in ComponentResources emitter * Add done rebuilding log for fast rebuilds * Move google font loading to Head component * Simplify code and fix comment commit 6e0c102 Author: Emile Bangma <ewjbangma@hotmail.com> Date: Sun Mar 10 01:14:31 2024 +0100 fix(transclusion): prevent duplicate transclusion if multiple transclusions are present. (jackyzha0#982) commit 94a5469 Author: Emile Bangma <ewjbangma@hotmail.com> Date: Sat Mar 9 17:59:55 2024 +0100 fix(resources): Use full path to font when cdnCache is false (jackyzha0#976) commit 2e9a0c2 Author: Emile Bangma <ewjbangma@hotmail.com> Date: Sat Mar 9 17:43:40 2024 +0100 fix(description): first sentence no longer repeats until max length (jackyzha0#981) commit b30a200 Author: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Date: Fri Mar 8 12:14:22 2024 -0500 fix(i18n): make sure to use correct fileData for manual localization (jackyzha0#975) Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> commit 6d59aa8 Author: Emile Bangma <ewjbangma@hotmail.com> Date: Fri Mar 8 10:04:44 2024 +0100 fix(description): counts characters instead of words (jackyzha0#972) * fix(description): make sure description counts characters instead of words * ref: removed duplicate ternary
benschlegel · Aug 1, 2024 · e4496c3 · e4496c3
1 parent 1313d9b
commit e4496c3
Show file tree

Hide file tree

Showing 17 changed files with 413 additions and 188 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@clack/prompts": "^0.7.0",
     "@floating-ui/dom": "^1.6.3",
     "@napi-rs/simple-git": "0.1.16",
-    "async-mutex": "^0.4.1",
+    "async-mutex": "^0.5.0",
     "chalk": "^5.3.0",
     "chokidar": "^3.6.0",
     "cli-spinner": "^0.2.10",
@@ -63,6 +63,7 @@
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-citation": "^2.0.0",
     "rehype-katex": "^7.0.0",
     "rehype-mathjax": "^6.0.0",
     "rehype-pretty-code": "^0.13.0",
@@ -97,14 +98,14 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.11.25",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.5.10",
     "@types/yargs": "^17.0.32",
     "esbuild": "^0.19.9",
     "prettier": "^3.2.4",
     "tsx": "^4.7.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   }
 }
diff --git a/quartz.config.ts b/quartz.config.ts
@@ -20,6 +20,7 @@ const config: QuartzConfig = {
     defaultDateType: "created",
     generateSocialImages: false,
     theme: {
+      fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
         header: "Schibsted Grotesk",
@@ -73,7 +74,7 @@ const config: QuartzConfig = {
     filters: [Plugin.RemoveDrafts()],
     emitters: [
       Plugin.AliasRedirects(),
-      Plugin.ComponentResources({ fontOrigin: "googleFonts" }),
+      Plugin.ComponentResources(),
       Plugin.ContentPage(),
       Plugin.FolderPage(),
       Plugin.TagPage(),

diff --git a/quartz/build.ts b/quartz/build.ts
@@ -309,6 +309,8 @@ async function partialRebuildFromEntrypoint(
   }
   await rimraf([...destinationsToDelete])
 
+  console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
+
   toRemove.clear()
   release()
   clientRefresh()

diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
@@ -3,16 +3,20 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
+import { JSX } from "preact"
+import style from "./styles/contentMeta.scss"
 
 interface ContentMetaOptions {
   /**
    * Whether to display reading time
    */
   showReadingTime: boolean
+  showComma: boolean
 }
 
 const defaultOptions: ContentMetaOptions = {
   showReadingTime: true,
+  showComma: true,
 }
 
 export default ((opts?: Partial<ContentMetaOptions>) => {
@@ -23,7 +27,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
     const text = fileData.text
 
     if (text) {
-      const segments: string[] = []
+      const segments: (string | JSX.Element)[] = []
 
       if (fileData.dates) {
         segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
@@ -38,17 +42,19 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
         segments.push(displayedTime)
       }
 
-      return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
+      const segmentsElements = segments.map((segment) => <span>{segment}</span>)
+
+      return (
+        <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}>
+          {segmentsElements}
+        </p>
+      )
     } else {
       return null
     }
   }
 
-  ContentMetadata.css = `
-  .content-meta {
-    margin-top: 0;
-    color: var(--gray);
-  }
-  `
+  ContentMetadata.css = style
+
   return ContentMetadata
 }) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
@@ -1,6 +1,7 @@
 import { i18n } from "../i18n"
 import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
+import { googleFontHref } from "../util/theme"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import satori, { SatoriOptions } from "satori"
 import fs from "fs"
@@ -150,10 +151,11 @@ export default (() => {
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
-        {cfg.theme.cdnCaching && (
+        {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
           <>
             <link rel="preconnect" href="https://fonts.googleapis.com" />
             <link rel="preconnect" href="https://fonts.gstatic.com" />
+            <link rel="stylesheet" href={googleFontHref(cfg.theme)} />
           </>
         )}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -118,11 +118,12 @@ export function renderPage(
               // skip until we find the blockref that matches
               if (el.properties?.id === blockRef) {
                 startIdx = i
-                startDepth = Number(el.tagName.substring(1))
+                startDepth = depth
               }
             } else if (depth <= startDepth) {
               // looking for new header that is same level or higher
               endIdx = i
+              break
             }
           }
 
@@ -209,7 +210,7 @@ export function renderPage(
     </div>
   )
 
-  const lang = componentData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
+  const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
     <html lang={lang}>
       <Head {...componentData} />

diff --git a/quartz/components/styles/contentMeta.scss b/quartz/components/styles/contentMeta.scss
@@ -0,0 +1,14 @@
+.content-meta {
+  margin-top: 0;
+  color: var(--gray);
+
+  &[show-comma="true"] {
+    > span:not(:last-child) {
+      margin-right: 8px;
+
+      &::after {
+        content: ",";
+      }
+    }
+  }
+}
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
@@ -54,7 +54,7 @@ export default {
       title: "Table des Matières",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} min read`,
+      readingTime: ({ minutes }) => `${minutes} min de lecture`,
     },
   },
   pages: {
@@ -63,7 +63,7 @@ export default {
       lastFewNotes: ({ count }) => `Les dernières ${count} notes`,
     },
     error: {
-      title: "Pas trouvé",
+      title: "Introuvable",
       notFound: "Cette page est soit privée, soit elle n'existe pas.",
     },
     folderContent: {

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
@@ -8,7 +8,6 @@ import popoverScript from "../../components/scripts/popover.inline"
 import styles from "../../styles/custom.scss"
 import popoverStyle from "../../components/styles/popover.scss"
 import { BuildCtx } from "../../util/ctx"
-import { StaticResources } from "../../util/resources"
 import { QuartzComponent } from "../../components/types"
 import { googleFontHref, joinStyles } from "../../util/theme"
 import { Features, transform } from "lightningcss"
@@ -69,13 +68,8 @@ async function joinScripts(scripts: string[]): Promise<string> {
   return res.code
 }
 
-function addGlobalPageResources(
-  ctx: BuildCtx,
-  staticResources: StaticResources,
-  componentResources: ComponentResources,
-) {
+function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentResources) {
   const cfg = ctx.cfg.configuration
-  const reloadScript = ctx.argv.serve
 
   // popovers
   if (cfg.enablePopovers) {
@@ -85,12 +79,12 @@ function addGlobalPageResources(
 
   if (cfg.analytics?.provider === "google") {
     const tagId = cfg.analytics.tagId
-    staticResources.js.push({
-      src: `https://www.googletagmanager.com/gtag/js?id=${tagId}`,
-      contentType: "external",
-      loadTime: "afterDOMReady",
-    })
     componentResources.afterDOMLoaded.push(`
+      const gtagScript = document.createElement("script")
+      gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}"
+      gtagScript.async = true
+      document.head.appendChild(gtagScript)
+
       window.dataLayer = window.dataLayer || [];
       function gtag() { dataLayer.push(arguments); }
       gtag("js", new Date());
@@ -147,115 +141,72 @@ function addGlobalPageResources(
       document.dispatchEvent(event)
     `)
   }
-
-  let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
-
-  if (ctx.argv.remoteDevHost) {
-    wsUrl = `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
-  }
-
-  if (reloadScript) {
-    staticResources.js.push({
-      loadTime: "afterDOMReady",
-      contentType: "inline",
-      script: `
-          const socket = new WebSocket('${wsUrl}')
-          // reload(true) ensures resources like images and scripts are fetched again in firefox
-          socket.addEventListener('message', () => document.location.reload(true))
-        `,
-    })
-  }
-}
-
-interface Options {
-  fontOrigin: "googleFonts" | "local"
-}
-
-const defaultOptions: Options = {
-  fontOrigin: "googleFonts",
 }
 
-export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<Options>) => {
-  const { fontOrigin } = { ...defaultOptions, ...opts }
+// This emitter should not update the `resources` parameter. If it does, partial
+// rebuilds may not work as expected.
+export const ComponentResources: QuartzEmitterPlugin = () => {
   return {
     name: "ComponentResources",
     getQuartzComponents() {
       return []
     },
-    async getDependencyGraph(ctx, content, _resources) {
-      // This emitter adds static resources to the `resources` parameter. One
-      // important resource this emitter adds is the code to start a websocket
-      // connection and listen to rebuild messages, which triggers a page reload.
-      // The resources parameter with the reload logic is later used by the
-      // ContentPage emitter while creating the final html page. In order for
-      // the reload logic to be included, and so for partial rebuilds to work,
-      // we need to run this emitter for all markdown files.
-      const graph = new DepGraph<FilePath>()
-
-      for (const [_tree, file] of content) {
-        const sourcePath = file.data.filePath!
-        const slug = file.data.slug!
-        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
-      }
-
-      return graph
+    async getDependencyGraph(_ctx, _content, _resources) {
+      return new DepGraph<FilePath>()
     },
-    async emit(ctx, _content, resources): Promise<FilePath[]> {
+    async emit(ctx, _content, _resources): Promise<FilePath[]> {
       const promises: Promise<FilePath>[] = []
       const cfg = ctx.cfg.configuration
       // component specific scripts and styles
       const componentResources = getComponentResources(ctx)
       let googleFontsStyleSheet = ""
-      if (fontOrigin === "local") {
+      if (cfg.theme.fontOrigin === "local") {
         // let the user do it themselves in css
-      } else if (fontOrigin === "googleFonts") {
-        if (cfg.theme.cdnCaching) {
-          resources.css.push(googleFontHref(cfg.theme))
-        } else {
-          let match
-
-          const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
-
-          googleFontsStyleSheet = await (
-            await fetch(googleFontHref(ctx.cfg.configuration.theme))
-          ).text()
-
-          while ((match = fontSourceRegex.exec(googleFontsStyleSheet)) !== null) {
-            // match[0] is the `url(path)`, match[1] is the `path`
-            const url = match[1]
-            // the static name of this file.
-            const [filename, ext] = url.split("/").pop()!.split(".")
-
-            googleFontsStyleSheet = googleFontsStyleSheet.replace(
-              url,
-              `/static/fonts/${filename}.ttf`,
-            )
-
-            promises.push(
-              fetch(url)
-                .then((res) => {
-                  if (!res.ok) {
-                    throw new Error(`Failed to fetch font`)
-                  }
-                  return res.arrayBuffer()
-                })
-                .then((buf) =>
-                  write({
-                    ctx,
-                    slug: joinSegments("static", "fonts", filename) as FullSlug,
-                    ext: `.${ext}`,
-                    content: Buffer.from(buf),
-                  }),
-                ),
-            )
-          }
+      } else if (cfg.theme.fontOrigin === "googleFonts" && !cfg.theme.cdnCaching) {
+        // when cdnCaching is true, we link to google fonts in Head.tsx
+        let match
+
+        const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
+
+        googleFontsStyleSheet = await (
+          await fetch(googleFontHref(ctx.cfg.configuration.theme))
+        ).text()
+
+        while ((match = fontSourceRegex.exec(googleFontsStyleSheet)) !== null) {
+          // match[0] is the `url(path)`, match[1] is the `path`
+          const url = match[1]
+          // the static name of this file.
+          const [filename, ext] = url.split("/").pop()!.split(".")
+
+          googleFontsStyleSheet = googleFontsStyleSheet.replace(
+            url,
+            `https://${cfg.baseUrl}/static/fonts/${filename}.ttf`,
+          )
+
+          promises.push(
+            fetch(url)
+              .then((res) => {
+                if (!res.ok) {
+                  throw new Error(`Failed to fetch font`)
+                }
+                return res.arrayBuffer()
+              })
+              .then((buf) =>
+                write({
+                  ctx,
+                  slug: joinSegments("static", "fonts", filename) as FullSlug,
+                  ext: `.${ext}`,
+                  content: Buffer.from(buf),
+                }),
+              ),
+          )
         }
       }
 
       // important that this goes *after* component scripts
       // as the "nav" event gets triggered here and we should make sure
       // that everyone else had the chance to register a listener for it
-      addGlobalPageResources(ctx, resources, componentResources)
+      addGlobalPageResources(ctx, componentResources)
 
       const stylesheet = joinStyles(
         ctx.cfg.configuration.theme,