feat(giscus): expose language option for Comments component (#2012)

* add language support for Comment

* docs: let users know they can customize their language preference

docs/features/comments.md

@@ -45,6 +45,8 @@ afterBody: [
       category: 'Announcements',
       // from data-category-id
       categoryId: 'DIC_kwDOFxRnmM4B-Xg6',
+      // from data-lang
+      lang: 'en'
     }
   }),
 ],
@@ -90,6 +92,10 @@ type Options = {
     // where to put the comment input box relative to the comments
     // defaults to 'bottom'
     inputPosition?: "top" | "bottom"
+
+    // set your preference language here
+    // defaults to 'en'
+    lang?: string
   }
 }
 ```

quartz/components/Comments.tsx

@@ -17,6 +17,7 @@ type Options = {
     strict?: boolean
     reactionsEnabled?: boolean
     inputPosition?: "top" | "bottom"
+    lang?: string
   }
 }
 
@@ -50,6 +51,7 @@ export default ((opts: Options) => {
         data-theme-url={
           opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
         }
+        data-lang={opts.options.lang ?? "en"}
       ></div>
     )
   }

quartz/components/scripts/comments.inline.ts

@@ -55,6 +55,7 @@ type GiscusElement = Omit<HTMLElement, "dataset"> & {
     strict: string
     reactionsEnabled: string
     inputPosition: "top" | "bottom"
+    lang: string
   }
 }
 
@@ -78,7 +79,7 @@ document.addEventListener("nav", () => {
   giscusScript.setAttribute("data-strict", giscusContainer.dataset.strict)
   giscusScript.setAttribute("data-reactions-enabled", giscusContainer.dataset.reactionsEnabled)
   giscusScript.setAttribute("data-input-position", giscusContainer.dataset.inputPosition)
-
+  giscusScript.setAttribute("data-lang", giscusContainer.dataset.lang)
   const theme = document.documentElement.getAttribute("saved-theme")
   if (theme) {
     giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))