Giscus integration and post about it added

build.gradle.kts

@@ -55,15 +55,16 @@ kotlin {
                 implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
                 implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
                 implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom")
-                implementation(devNpm("bootstrap", libs.versions.npm.bootstrap.get()))
-                implementation(devNpm("yaml-loader", libs.versions.npm.loader.yaml.get()))
-                implementation(devNpm("css-loader", libs.versions.npm.loader.css.get()))
-                implementation(devNpm("sass-loader", libs.versions.npm.loader.sass.get()))
-                implementation(devNpm("sass", libs.versions.npm.sass.get()))
-                implementation(devNpm("mini-css-extract-plugin", libs.versions.npm.minicss.get()))
-                implementation(devNpm("share-buttons", libs.versions.npm.sharebuttons.get()))
-                implementation(devNpm("highlight.js", libs.versions.npm.highlightjs.get()))
-                implementation(devNpm("highlightjs-copy", libs.versions.npm.highlightjsCopyPlugin.get()))
+                implementation(npm("bootstrap", libs.versions.npm.bootstrap.get()))
+                implementation(npm("yaml-loader", libs.versions.npm.loader.yaml.get()))
+                implementation(npm("css-loader", libs.versions.npm.loader.css.get()))
+                implementation(npm("sass-loader", libs.versions.npm.loader.sass.get()))
+                implementation(npm("sass", libs.versions.npm.sass.get()))
+                implementation(npm("mini-css-extract-plugin", libs.versions.npm.minicss.get()))
+                implementation(npm("share-buttons", libs.versions.npm.sharebuttons.get()))
+                implementation(npm("highlight.js", libs.versions.npm.highlightjs.get()))
+                implementation(npm("highlightjs-copy", libs.versions.npm.highlightjsCopyPlugin.get()))
+                implementation(npm("@giscus/react", libs.versions.npm.giscus.get()))
             }
         }
     }

gradle/libs.versions.toml

@@ -15,6 +15,7 @@ npm-highlightjsCopyPlugin = "1.0.6"
 npm-loader-yaml = "0.8.1"
 npm-loader-css = "6.10.0"
 npm-loader-sass = "14.1.1"
+npm-giscus = "3.1.0"
 
 [libraries]
 kotlin-wrappers = { module = "org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom", version.ref = "kotlin-wrappers" }

kotlin-js-store/yarn.lock

@@ -12,6 +12,13 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@giscus/[email protected]":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@giscus/react/-/react-3.1.0.tgz#0ab77cc80d765989e87403ea7f50ba7a790a36c7"
+  integrity sha512-0TCO2TvL43+oOdyVVGHDItwxD1UMKP2ZYpT6gXmhFOqfAJtZxTzJ9hkn34iAF/b6YzyJ4Um89QIt9z/ajmAEeg==
+  dependencies:
+    giscus "^1.6.0"
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -94,6 +101,18 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
+"@lit-labs/ssr-dom-shim@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8"
+  integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==
+
+"@lit/reactive-element@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.4.tgz#8f2ed950a848016383894a26180ff06c56ae001b"
+  integrity sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.2.0"
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -274,6 +293,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/ws@^8.5.10":
   version "8.5.12"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
@@ -1347,6 +1371,13 @@ get-stream@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+giscus@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/giscus/-/giscus-1.6.0.tgz#96c592e01829707b3a0ba72c2636c07a28b5c19d"
+  integrity sha512-Zrsi8r4t1LVW950keaWcsURuZUQwUaMKjvJgTCY125vkW6OiEBkatE7ScJDbpqKHdZwb///7FVC21SE3iFK3PQ==
+  dependencies:
+    lit "^3.2.1"
+
 glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -1838,6 +1869,31 @@ launch-editor@^2.6.1:
     picocolors "^1.0.0"
     shell-quote "^1.8.1"
 
+lit-element@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.1.1.tgz#07905992815076e388cf6f1faffc7d6866c82007"
+  integrity sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.2.0"
+    "@lit/reactive-element" "^2.0.4"
+    lit-html "^3.2.0"
+
+lit-html@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.2.1.tgz#8fc49e3531ee5947e4d93e8a5aa642ab1649833b"
+  integrity sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-3.2.1.tgz#d6dd15eac20db3a098e81e2c85f70a751ff55592"
+  integrity sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==
+  dependencies:
+    "@lit/reactive-element" "^2.0.4"
+    lit-element "^4.1.0"
+    lit-html "^3.2.0"
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"

pages/posts/giscus-kotlin/content.md

@@ -0,0 +1,49 @@
+---
+title: "Giscus comments in KoltinJS"
+created: 2025-01-04
+---
+
+{toc.placeholder}
+
+## Intro
+
+In order to improve this blog, I decided to add comments section at the bottom of the posts.
+
+I remember I used Disqus plugin for the previous blog version in Jekyll.
+However, I encountered this [post](https://donw.io/post/github-comments/), aaaand
+it looks like Disqus is doing a lot of (not necessarily privacy-friendly 😅) stuff behind the curtain.
+
+I was looking for some alternative and found one recommendation on Redit which is
+**[Giscus](https://github.com/giscus/)**.
+
+I gave it a try, the whole integration went smoothly and was completed in less than an hour 😘.
+
+## Integration
+
+To integrate the Giscus I followed pretty useful instruction available [here](https://giscus.app/).
+
+What I did was as follows:
+
+1. Added [`giscus`](https://github.com/apps/giscus) app to the GitHub account.
+2. Turn on the "Discussion" feature in my `PrzemyslawSwiderski/PrzemyslawSwiderski.github.io` repository.
+3. Added `implementation(npm("@giscus/react", libs.versions.npm.giscus.get()))` dependency to `build.gradle.kts` with
+   the latest version defined in `libs.versions.toml`.
+4. Rebuilt the blog to install new package.
+5. Added `Giscus.kt` file with the new React component Kotlin mapping and definition.
+6. Added new `Giscus { ... }` element to a `SinglePost` existing component.
+7. Launched the React blog app.
+8. Enjoyed the new comments section being added 😊
+
+![Comments](giscus-test-comment.png)
+
+## Conclusions
+
+Implementation part was pretty easy and straightforward.
+The hardest bit for me was to include the external React component in KotlinJS, but I found some help on Stack 😉.
+
+To my surprise, Giscus offers the reactions feature out of the box.
+
+The cool thing is also that discussions can be managed at the repository "Discussion" tab level.
+
+The main drawback coming to my mind is that, the visitor must have the GitHub account to perform any
+modification action. However, since my blog is heavily technical one I hope it is not that huge issue.  

src/jsMain/kotlin/app/pages/Giscus.kt

@@ -0,0 +1,26 @@
+@file:JsModule("@giscus/react")
+@file:JsNonModule
+
+package app.pages
+
+import react.FC
+import react.Props
+
+@JsName("default")
+external val Giscus: FC<GiscusProps>
+
+external interface GiscusProps : Props {
+    var id: String
+    var host: String
+    var repo: String
+    var repoId: String
+    var category: String
+    var categoryId: String
+    var mapping: String
+    var theme: String
+    var reactionsEnabled: String
+    var emitMetadata: String
+    var inputPosition: String
+    var lang: String
+    var loading: String
+}

src/jsMain/kotlin/app/pages/InnerHtml.kt

@@ -1,6 +1,5 @@
 package app.pages
 
-import app.ShareButtons
 import app.model.MdMetadata
 import app.utils.withClasses
 import js.import.Module
@@ -11,7 +10,6 @@ import kotlinx.browser.window
 import react.FC
 import react.Props
 import react.dom.html.ReactHTML.div
-import react.dom.html.ReactHTML.hr
 import react.useEffect
 import react.useState
 
@@ -43,8 +41,6 @@ val InnerHtml = FC<InnerHtmlProps> { props ->
             __html = content.orEmpty()
         }
     }
-    hr {}
-    ShareButtons {}
 }
 
 private fun scrollToAnchor() {

src/jsMain/kotlin/app/pages/SinglePost.kt

@@ -1,5 +1,6 @@
 package app.pages
 
+import app.ShareButtons
 import app.model.MdMetadata
 import react.FC
 import react.Props
@@ -23,5 +24,23 @@ val SinglePost = FC<SinglePostProps> { props ->
         InnerHtml {
             data = props.data
         }
+        hr {}
+        ShareButtons {}
+        hr {}
+        Giscus {
+            id = "comments"
+            host = "blog.pswidersk.com"
+            repo = "PrzemyslawSwiderski/PrzemyslawSwiderski.github.io"
+            repoId = "MDEwOlJlcG9zaXRvcnk1MDYxNjEyNw=="
+            category = "General"
+            categoryId = "DIC_kwDOAwRXP84CltPW"
+            mapping = "pathname"
+            reactionsEnabled = "1"
+            emitMetadata = "0"
+            inputPosition = "bottom"
+            theme = "dark"
+            lang = "en"
+            loading = "lazy"
+        }
     }
 }