Merge pull request #395 from melonbarCode/add-giscus-config

feat: add giscus config properties

Author: timlrx

components/comments/Giscus.js

@@ -17,15 +17,21 @@ const Giscus = ({ mapping }) => {
 
   const LoadComments = useCallback(() => {
     setEnabledLoadComments(false)
+
+    const { repo, repositoryId, category, categoryId, reactions, metadata, inputPosition, lang } =
+      siteMetadata?.comment?.giscusConfig
+
     const script = document.createElement('script')
     script.src = 'https://giscus.app/client.js'
-    script.setAttribute('data-repo', siteMetadata.comment.giscusConfig.repo)
-    script.setAttribute('data-repo-id', siteMetadata.comment.giscusConfig.repositoryId)
-    script.setAttribute('data-category', siteMetadata.comment.giscusConfig.category)
-    script.setAttribute('data-category-id', siteMetadata.comment.giscusConfig.categoryId)
+    script.setAttribute('data-repo', repo)
+    script.setAttribute('data-repo-id', repositoryId)
+    script.setAttribute('data-category', category)
+    script.setAttribute('data-category-id', categoryId)
     script.setAttribute('data-mapping', mapping)
-    script.setAttribute('data-reactions-enabled', siteMetadata.comment.giscusConfig.reactions)
-    script.setAttribute('data-emit-metadata', siteMetadata.comment.giscusConfig.metadata)
+    script.setAttribute('data-reactions-enabled', reactions)
+    script.setAttribute('data-emit-metadata', metadata)
+    script.setAttribute('data-input-position', inputPosition)
+    script.setAttribute('data-lang', lang)
     script.setAttribute('data-theme', commentsTheme)
     script.setAttribute('crossorigin', 'anonymous')
     script.async = true

data/siteMetadata.js

@@ -51,6 +51,10 @@ const siteMetadata = {
       // theme example: light, dark, dark_dimmed, dark_high_contrast
       // transparent_dark, preferred_color_scheme, custom
       theme: 'light',
+      // Place the comment box above the comments. options: bottom, top
+      inputPosition: 'bottom',
+      // Choose the language giscus will be displayed in. options: en, es, zh-CN, zh-TW, ko, ja etc
+      lang: 'en',
       // theme when dark mode
       darkTheme: 'transparent_dark',
       // If the theme option above is set to 'custom`