Quartz-67e1bee (#109)

* feat(comments): support custom giscus themes (#1526)

Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
Co-authored-by: Aaron Pham <contact@aarnphm.xyz>

* fix(grid): $desktop variable (#1511)

* Feat(filters): Support "true" as valid for draft and publish frontmatter values (b3a02909ba74fff08cd3675707d1f4d782a24e98)

* Merge pull request #1543 from saberzero1/draft-publish-string

feat(filters): support "true" as valid for frontmatter filters

* chore(deps): bump the production-dependencies group across 1 directory with 7 updates (#1540)

---------

Co-authored-by: Emile Bangma <github@emilebangma.com>
Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>
Co-authored-by: Aaron Pham <contact@aarnphm.xyz>
Co-authored-by: Emile Bangma <ewjbangma@hotmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 4 people

package-lock.json

@@ -50,7 +50,7 @@
     "globby": "^14.0.2",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^9.0.3",
-    "hast-util-to-jsx-runtime": "^2.3.0",
+    "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "^3.0.1",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
@@ -59,14 +59,14 @@
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "pixi.js": "^8.4.1",
-    "preact": "^10.24.2",
+    "pixi.js": "^8.5.1",
+    "preact": "^10.24.3",
     "preact-render-to-string": "^6.5.11",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-citation": "^2.1.2",
+    "rehype-citation": "^2.2.0",
     "rehype-katex": "^7.0.1",
     "rehype-mathjax": "^6.0.0",
     "rehype-pretty-code": "^0.14.0",
@@ -82,15 +82,15 @@
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
     "rimraf": "^6.0.1",
-    "serve-handler": "^6.1.5",
+    "serve-handler": "^6.1.6",
     "shiki": "^1.22.0",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "workerpool": "^9.1.3",
+    "workerpool": "^9.2.0",
     "ws": "^8.18.0",
     "yargs": "^17.7.2"
   },
@@ -99,7 +99,7 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.7.7",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.5.12",

package.json

@@ -10,6 +10,9 @@ type Options = {
     repoId: string
     category: string
     categoryId: string
+    themeUrl?: string
+    lightTheme?: string
+    darkTheme?: string
     mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict?: boolean
     reactionsEnabled?: boolean
@@ -34,6 +37,11 @@ export default ((opts: Options) => {
         data-strict={boolToStringBool(opts.options.strict ?? true)}
         data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
         data-input-position={opts.options.inputPosition ?? "bottom"}
+        data-light-theme={opts.options.lightTheme ?? "light"}
+        data-dark-theme={opts.options.darkTheme ?? "dark"}
+        data-theme-url={
+          opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
+        }
       ></div>
     )
   }

quartz/components/Comments.tsx

@@ -13,20 +13,44 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
     {
       giscus: {
         setConfig: {
-          theme: theme,
+          theme: getThemeUrl(getThemeName(theme)),
         },
       },
     },
     "https://giscus.app",
   )
 }
 
+const getThemeName = (theme: string) => {
+  if (theme !== "dark" && theme !== "light") {
+    return theme
+  }
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return theme
+  }
+  const darkGiscus = giscusContainer.dataset.darkTheme ?? "dark"
+  const lightGiscus = giscusContainer.dataset.lightTheme ?? "light"
+  return theme === "dark" ? darkGiscus : lightGiscus
+}
+
+const getThemeUrl = (theme: string) => {
+  const giscusContainer = document.querySelector(".giscus") as GiscusElement
+  if (!giscusContainer) {
+    return `https://giscus.app/themes/${theme}.css`
+  }
+  return `${giscusContainer.dataset.themeUrl ?? "https://giscus.app/themes"}/${theme}.css`
+}
+
 type GiscusElement = Omit<HTMLElement, "dataset"> & {
   dataset: DOMStringMap & {
     repo: `${string}/${string}`
     repoId: string
     category: string
     categoryId: string
+    themeUrl: string
+    lightTheme: string
+    darkTheme: string
     mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
     strict: string
     reactionsEnabled: string
@@ -57,7 +81,7 @@ document.addEventListener("nav", () => {
 
   const theme = document.documentElement.getAttribute("saved-theme")
   if (theme) {
-    giscusScript.setAttribute("data-theme", theme)
+    giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))
   }
 
   giscusContainer.appendChild(giscusScript)

quartz/components/scripts/comments.inline.ts

@@ -37,7 +37,7 @@
       display: none;
     }
     height: auto;
-    @media all and ($desktop) {
+    @media all and not ($desktop) {
       height: 250px;
     }
   }

quartz/components/styles/backlinks.scss

@@ -65,7 +65,7 @@
       height: 80vh;
       width: 80vw;
 
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         width: 90%;
       }
     }

quartz/components/styles/graph.scss

@@ -64,7 +64,7 @@
       margin-left: auto;
       margin-right: auto;
 
-      @media all and ($desktop) {
+      @media all and not ($desktop) {
         width: 90%;
       }
 

quartz/components/styles/search.scss

@@ -3,7 +3,8 @@ import { QuartzFilterPlugin } from "../types"
 export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
   name: "RemoveDrafts",
   shouldPublish(_ctx, [_tree, vfile]) {
-    const draftFlag: boolean = vfile.data?.frontmatter?.draft === true
+    const draftFlag: boolean =
+      vfile.data?.frontmatter?.draft === true || vfile.data?.frontmatter?.draft === "true"
     return !draftFlag
   },
 })

quartz/plugins/filters/draft.ts

@@ -3,6 +3,6 @@ import { QuartzFilterPlugin } from "../types"
 export const ExplicitPublish: QuartzFilterPlugin = () => ({
   name: "ExplicitPublish",
   shouldPublish(_ctx, [_tree, vfile]) {
-    return vfile.data?.frontmatter?.publish === true
+    return vfile.data?.frontmatter?.publish === true || vfile.data?.frontmatter?.publish === "true"
   },
 })

quartz/plugins/filters/explicit.ts

@@ -88,8 +88,8 @@ declare module "vfile" {
         tags: string[]
         aliases: string[]
         description: string
-        publish: boolean
-        draft: boolean
+        publish: boolean | string
+        draft: boolean | string
         lang: string
         enableToc: string
         cssclasses: string[]