Merge branch 'jackyzha0:v4' into v4

2026-03-24 23:15:46 -05:00 · 2024-06-20 17:08:56 -04:00 · 2024-06-20 17:08:56 -04:00 · 40e9757838
commit 40e9757838
parent 50a8c248b4 3faf2ff6f5
14 changed files with 72 additions and 46 deletions
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@ -47,7 +47,7 @@ jobs:
        run: npx quartz build --bundleInfo

  publish-tag:
-    if: ${{ github.repository == 'jackyzha0/quartz' }}
+    if: ${{ github.repository == 'jackyzha0/quartz' && github.ref == 'refs/heads/v4' }}
    runs-on: ubuntu-latest
    permissions:
      contents: write
--- a/docs/advanced/creating
+++ b/docs/advanced/creating
@ -129,11 +129,11 @@ export default (() => {
    return <button id="btn">Click me</button>
  }

-  YourComponent.beforeDOM = `
+  YourComponent.beforeDOMLoaded = `
  console.log("hello from before the page loads!")
  `

-  YourComponent.afterDOM = `
+  YourComponent.afterDOMLoaded = `
  document.getElementById('btn').onclick = () => {
    alert('button clicked!')
  }
@ -180,7 +180,7 @@ export default (() => {
    return <button id="btn">Click me</button>
  }

-  YourComponent.afterDOM = script
+  YourComponent.afterDOMLoaded = script
  return YourComponent
 }) satisfies QuartzComponentConstructor
 ```
--- a/docs/configuration.md
+++ b/docs/configuration.md
@ -31,6 +31,7 @@ This part of the configuration concerns anything that can affect the whole site.
  - `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id' }` (managed) or `{ provider: 'goatcounter', websiteId: 'my-goatcounter-id', host: 'my-goatcounter-domain.com', scriptSrc: 'https://my-url.to/counter.js' }` (self-hosted) use [GoatCounter](https://goatcounter.com);
  - `{ provider: 'posthog', apiKey: '<your-posthog-project-apiKey>', host: '<your-posthog-host>' }`: use [Posthog](https://posthog.com/);
  - `{ provider: 'tinylytics', siteId: '<your-site-id>' }`: use [Tinylytics](https://tinylytics.app/);
+  - `{ provider: 'cabin' }` or `{ provider: 'cabin', host: 'https://cabin.example.com' }` (custom domain): use [Cabin](https://withcabin.com);
 - `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
  - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.
--- a/package-lock.json
+++ b/package-lock.json
@ -33,7 +33,7 @@
        "mdast-util-to-string": "^4.0.0",
        "micromorph": "^0.4.5",
        "preact": "^10.22.0",
-        "preact-render-to-string": "^6.5.4",
+        "preact-render-to-string": "^6.5.5",
        "pretty-bytes": "^6.1.1",
        "pretty-time": "^1.1.0",
        "reading-time": "^1.5.0",
@ -62,8 +62,8 @@
        "unified": "^11.0.4",
        "unist-util-visit": "^5.0.0",
        "vfile": "^6.0.1",
-        "workerpool": "^9.1.1",
-        "ws": "^8.17.0",
+        "workerpool": "^9.1.2",
+        "ws": "^8.17.1",
        "yargs": "^17.7.2"
      },
      "bin": {
@ -80,7 +80,7 @@
        "@types/ws": "^8.5.10",
        "@types/yargs": "^17.0.32",
        "esbuild": "^0.19.9",
-        "prettier": "^3.2.4",
+        "prettier": "^3.3.2",
        "tsx": "^4.11.2",
        "typescript": "^5.4.5"
      },
@ -4705,17 +4705,17 @@
      }
    },
    "node_modules/preact-render-to-string": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.4.tgz",
-      "integrity": "sha512-06s0E3cEMLoXQznmtJ/K/xbFs3uwo52Qpgf8lzbe+VbF/XzwJ0LxZGtVLZekhaEeC39+W1MEf05F4lUikzPnxA==",
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.5.tgz",
+      "integrity": "sha512-KiMFTKNTmT/ccE79BURR/r6XRc2I2TCTZ0MpeWqHW2XnllbeghXvwGsdAfF/MzMilUcTfODtSmMxgoRFL9TM5g==",
      "peerDependencies": {
        "preact": ">=10"
      }
    },
    "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
      "dev": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
@ -6723,9 +6723,9 @@
      "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
    },
    "node_modules/workerpool": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.1.1.tgz",
-      "integrity": "sha512-EFoFTSEo9m4V4wNrwzVRjxnf/E/oBpOzcI/R5CIugJhl9RsCiq525rszo4AtqcjQQoqFdu2E3H82AnbtpaQHvg=="
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.1.2.tgz",
+      "integrity": "sha512-5wZwyy5lcqrakQQcjaYQgVCbMR3djwIFWXuD2EGk/o/9bL3bd2kRGNwF74Bhcf1CIkAIwoOMG82EVnA5JmVVNw=="
    },
    "node_modules/wrap-ansi": {
      "version": "8.1.0",
@ -6809,9 +6809,9 @@
      }
    },
    "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
      "engines": {
        "node": ">=10.0.0"
      },
--- a/package.json
+++ b/package.json
@ -59,7 +59,7 @@
    "mdast-util-to-string": "^4.0.0",
    "micromorph": "^0.4.5",
    "preact": "^10.22.0",
-    "preact-render-to-string": "^6.5.4",
+    "preact-render-to-string": "^6.5.5",
    "pretty-bytes": "^6.1.1",
    "pretty-time": "^1.1.0",
    "reading-time": "^1.5.0",
@ -88,8 +88,8 @@
    "unified": "^11.0.4",
    "unist-util-visit": "^5.0.0",
    "vfile": "^6.0.1",
-    "workerpool": "^9.1.1",
-    "ws": "^8.17.0",
+    "workerpool": "^9.1.2",
+    "ws": "^8.17.1",
    "yargs": "^17.7.2"
  },
  "devDependencies": {
@ -103,7 +103,7 @@
    "@types/ws": "^8.5.10",
    "@types/yargs": "^17.0.32",
    "esbuild": "^0.19.9",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.2",
    "tsx": "^4.11.2",
    "typescript": "^5.4.5"
  }
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@ -34,6 +34,10 @@ export type Analytics =
      provider: "tinylytics"
      siteId: string
    }
+  | {
+      provider: "cabin"
+      host?: string
+    }

 export interface GlobalConfiguration {
  pageTitle: string
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@ -172,10 +172,8 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
  const isDefaultOpen = opts.folderDefaultState === "open"

  // Calculate current folderPath
-  let folderPath = ""
-  if (node.name !== "") {
-    folderPath = joinSegments(fullPath ?? "", node.name)
-  }
+  const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
+  const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"

  return (
    <>
@ -209,11 +207,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
              {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
              <div key={node.name} data-folderpath={folderPath}>
                {folderBehavior === "link" ? (
-                  <a
-                    href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
-                    data-for={node.name}
-                    class="folder-title"
-                  >
+                  <a href={href} data-for={node.name} class="folder-title">
                    {node.displayName}
                  </a>
                ) : (
--- a/quartz/components/styles/listPage.scss
+++ b/quartz/components/styles/listPage.scss
@ -11,7 +11,7 @@ li.section-li {

  & > .section {
    display: grid;
-    grid-template-columns: 6em 3fr 1fr;
+    grid-template-columns: fit-content(8em) 3fr 1fr;

    @media all and (max-width: $mobileBreakpoint) {
      & > .tags {
@ -24,8 +24,7 @@ li.section-li {
    }

    & > .meta {
-      margin: 0;
-      flex-basis: 6em;
+      margin: 0 1em 0 0;
      opacity: 0.6;
    }
  }
@ -33,7 +32,8 @@ li.section-li {

 // modifications in popover context
 .popover .section {
-  grid-template-columns: 6em 1fr !important;
+  grid-template-columns: fit-content(8em) 1fr !important;
+
  & > .tags {
    display: none;
  }
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@ -144,6 +144,14 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso
      tinylyticsScript.defer = true
      document.head.appendChild(tinylyticsScript)
    `)
+  } else if (cfg.analytics?.provider === "cabin") {
+    componentResources.afterDOMLoaded.push(`
+      const cabinScript = document.createElement("script")
+      cabinScript.src = "${cfg.analytics.host ?? "https://scripts.cabin.dev"}/cabin.js"
+      cabinScript.defer = true
+      cabinScript.async = true
+      document.head.appendChild(cabinScript)
+    `)
  }

  if (cfg.enableSPA) {
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@ -93,7 +93,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                }
                node.properties.className = classes

-                if (opts.openLinksInNewTab) {
+                if (isExternal && opts.openLinksInNewTab) {
                  node.properties.target = "_blank"
                }

--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@ -6,6 +6,7 @@ import { slug as slugAnchor } from "github-slugger"
 import rehypeRaw from "rehype-raw"
 import { SKIP, visit } from "unist-util-visit"
 import path from "path"
+import { splitAnchor } from "../../util/path"
 import { JSResource } from "../../util/resources"
 // @ts-ignore
 import calloutScript from "../../components/scripts/callout.inline.ts"
@ -199,10 +200,9 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
        src = src.replace(wikilinkRegex, (value, ...capture) => {
          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture

-          const fp = rawFp ?? ""
-          const anchor = rawHeader?.trim().replace(/^#+/, "")
+          const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
          const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
-          const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
+          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
          const embedDisplay = value.startsWith("!") ? "!" : ""

@ -414,8 +414,8 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                return
              }

-              // find first line
-              const firstChild = node.children[0]
+              // find first line and callout content
+              const [firstChild, ...calloutContent] = node.children
              if (firstChild.type !== "paragraph" || firstChild.children[0]?.type !== "text") {
                return
              }
@ -492,6 +492,21 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                    "data-callout-metadata": calloutMetaData,
                  },
                }
+
+                // Add callout-content class to callout body if it has one.
+                if (calloutContent.length > 0) {
+                  const contentData: BlockContent | DefinitionContent = {
+                    data: {
+                      hProperties: {
+                        className: "callout-content",
+                      },
+                      hName: "div",
+                    },
+                    type: "blockquote",
+                    children: [...calloutContent],
+                  }
+                  node.children = [node.children[0], contentData]
+                }
              }
            })
          }
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@ -481,6 +481,10 @@ video {
  flex: 1 1 auto;
 }

+div:has(> .overflow) {
+  position: relative;
+}
+
 ul.overflow,
 ol.overflow {
  max-height: 400;
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@ -10,7 +10,7 @@
  transition: max-height 0.3s ease;
  box-sizing: border-box;

-  & > *:nth-child(2) {
+  & > .callout-content > :first-child {
    margin-top: 0;
  }

--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,8 +13,8 @@
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
+    "jsxImportSource": "preact"
  },
  "include": ["**/*.ts", "**/*.tsx", "./package.json"],
-  "exclude": ["build/**/*.d.ts"],
+  "exclude": ["build/**/*.d.ts"]
 }