Quartz sync: May 18, 2025, 11:04 AM

Author: codeyoma

quartz.layout.ts

@@ -13,6 +13,7 @@ export const sharedPageComponents: SharedLayout = {
                 repoId: 'R_kgDOOraRoA',
                 category: 'General',
                 categoryId: 'DIC_kwDOOraRoM4CqR8o',
+                // loading: 'lazy',
             }
         }),
     ],
@@ -21,7 +22,6 @@ export const sharedPageComponents: SharedLayout = {
             "Blog source": "https://github.com/codeyoma/codeyoma.github.io",
             GitHub: "https://github.com/codeyoma",
             LinkedIn: "https://www.linkedin.com/in/codeyoma",
-            // "Discord Community": "https://discord.gg/cRFFHYye7t",
         },
     }),
 }

quartz/components/Comments.tsx

@@ -4,57 +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
-    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
+        loading?: "lazy" | ""
+        inputPosition?: "top" | "bottom"
+    }
 }
 
 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-theme-url={
-          opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
+    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 <></>
         }
-      ></div>
-    )
-  }
 
-  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-loading={opts.options.loading ?? ""}
+                data-theme-url={
+                    opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
+                }
+            ></div>
+        )
+    }
+
+    Comments.afterDOMLoaded = script
 
-  return Comments
+    return Comments
 }) satisfies QuartzComponentConstructor<Options>