Quartz sync: Jun 9, 2025, 6:45 PM

Author: codeyoma

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "makefile.configureOnOpen": false
+}

quartz.layout.ts

@@ -22,7 +22,6 @@ export const sharedPageComponents: SharedLayout = {
         repoId: 'R_kgDOOraRoA',
         category: 'General',
         categoryId: 'DIC_kwDOOraRoM4CqR8o',
-        // loading: 'lazy',
       }
     }),
     Component.ScrollProgress()

quartz/components/Comments.tsx

@@ -4,59 +4,59 @@ import { classNames } from "../util/lang"
 import script from "./scripts/comments.inline"
 
 type Options = {
-    provider: "giscus"
-    options: {
-        repo: `${string}/${string}`
-        repoId: string
-        category: string
-        categoryId: string
-        themeUrl?: string
-        lightTheme?: string
-        darkTheme?: string
-        mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
-        strict?: boolean
-        reactionsEnabled?: boolean
-        loading?: "lazy" | ""
-        inputPosition?: "top" | "bottom"
-    }
+  provider: "giscus"
+  options: {
+    repo: `${string}/${string}`
+    repoId: string
+    category: string
+    categoryId: string
+    themeUrl?: string
+    lightTheme?: string
+    darkTheme?: string
+    mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
+    strict?: boolean
+    reactionsEnabled?: boolean
+    inputPosition?: "top" | "bottom"
+    lang?: string
+  }
 }
 
 function boolToStringBool(b: boolean): string {
-    return b ? "1" : "0"
+  return b ? "1" : "0"
 }
 
 export default ((opts: Options) => {
-    const Comments: QuartzComponent = ({ displayClass, fileData, cfg }: QuartzComponentProps) => {
-        // check if comments should be displayed according to frontmatter
-        const disableComment: boolean =
-            typeof fileData.frontmatter?.comments !== "undefined" &&
-            (!fileData.frontmatter?.comments || fileData.frontmatter?.comments === "false")
-        if (disableComment) {
-            return <></>
-        }
-
-        return (
-            <div
-                class={classNames(displayClass, "giscus")}
-                data-repo={opts.options.repo}
-                data-repo-id={opts.options.repoId}
-                data-category={opts.options.category}
-                data-category-id={opts.options.categoryId}
-                data-mapping={opts.options.mapping ?? "url"}
-                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-loading={opts.options.loading ?? ""}
-                data-theme-url={
-                    opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
-                }
-            ></div>
-        )
+  const Comments: QuartzComponent = ({ displayClass, fileData, cfg }: QuartzComponentProps) => {
+    // check if comments should be displayed according to frontmatter
+    const disableComment: boolean =
+      typeof fileData.frontmatter?.comments !== "undefined" &&
+      (!fileData.frontmatter?.comments || fileData.frontmatter?.comments === "false")
+    if (disableComment) {
+      return <></>
     }
 
-    Comments.afterDOMLoaded = script
+    return (
+      <div
+        class={classNames(displayClass, "giscus")}
+        data-repo={opts.options.repo}
+        data-repo-id={opts.options.repoId}
+        data-category={opts.options.category}
+        data-category-id={opts.options.categoryId}
+        data-mapping={opts.options.mapping ?? "url"}
+        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`
+        }
+        data-lang={opts.options.lang ?? "en"}
+      ></div>
+    )
+  }
+
+  Comments.afterDOMLoaded = script
 
-    return Comments
+  return Comments
 }) satisfies QuartzComponentConstructor<Options>