From 3c170b132c28e5a101efeedcef101950e1ee6301 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Thu, 21 Dec 2023 21:10:59 +0100
Subject: [PATCH 01/30] feat: init docusaurus-commenting-system plugin

---
 packages/docusaurus-commenting-system/README.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/docusaurus-commenting-system/README.md

diff --git a/packages/docusaurus-commenting-system/README.md b/packages/docusaurus-commenting-system/README.md
new file mode 100644
index 00000000..d848cf00
--- /dev/null
+++ b/packages/docusaurus-commenting-system/README.md
@@ -0,0 +1 @@
+# Docusaurus docs commenting system plugin

From 5bf34377dd9b9c247ce7bfaaba34818f08111cfe Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Thu, 21 Dec 2023 21:13:58 +0100
Subject: [PATCH 02/30] feat(commenting system plugin): add config files

---
 .../tsconfig.client.json                      | 17 +++++++++++++++++
 .../tsconfig.json                             | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/tsconfig.client.json
 create mode 100644 packages/docusaurus-commenting-system/tsconfig.json

diff --git a/packages/docusaurus-commenting-system/tsconfig.client.json b/packages/docusaurus-commenting-system/tsconfig.client.json
new file mode 100644
index 00000000..837fc3f4
--- /dev/null
+++ b/packages/docusaurus-commenting-system/tsconfig.client.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo-client",
+    "rootDir": "src",
+    "outDir": "lib",
+    "module": "CommonJS",
+    "target": "esnext",
+    "jsx": "react",
+    "lib": ["DOM"]
+  },
+  "include": ["src/client", "src/*.d.ts"],
+  "exclude": ["**/__tests__/**"]
+}
diff --git a/packages/docusaurus-commenting-system/tsconfig.json b/packages/docusaurus-commenting-system/tsconfig.json
new file mode 100644
index 00000000..b1fa7fbe
--- /dev/null
+++ b/packages/docusaurus-commenting-system/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "references": [
+    {
+      "path": "./tsconfig.client.json"
+    }
+  ],
+  "compilerOptions": {
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib",
+    "jsx": "react",
+    "lib": ["DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["**/__tests__/**"]
+}

From f0857296f722ebf01bc5e40169c9f0b2007286a1 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Thu, 21 Dec 2023 21:14:20 +0100
Subject: [PATCH 03/30] feat(commenting system plugin): add package.json

---
 .../docusaurus-commenting-system/package.json | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/package.json

diff --git a/packages/docusaurus-commenting-system/package.json b/packages/docusaurus-commenting-system/package.json
new file mode 100644
index 00000000..cccdb31e
--- /dev/null
+++ b/packages/docusaurus-commenting-system/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@acid-info/docusaurus-commenting-system",
+  "version": "1.0.0-alpha",
+  "description": "Docusaurus docs commenting system plugin",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acid-info/logos-docusaurus-plugins.git",
+    "directory": "packages/docusaurus-commenting-system"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "watch": "tsc --build --watch",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "@acid-info/lsd-react": "^0.1.0-beta.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "license": "MIT"
+}

From 54492c8f2b6042f3009a6c5646a1d9cf0ca98270 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 01:06:30 +0100
Subject: [PATCH 04/30] feat(commenting system plugin): add sass files handling

---
 .../docusaurus-commenting-system/package.json |  9 ++++-
 .../scripts/copy-scss.js                      | 37 +++++++++++++++++++
 .../src/deps.d.ts                             |  1 +
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 packages/docusaurus-commenting-system/scripts/copy-scss.js
 create mode 100644 packages/docusaurus-commenting-system/src/deps.d.ts

diff --git a/packages/docusaurus-commenting-system/package.json b/packages/docusaurus-commenting-system/package.json
index cccdb31e..9e0a4837 100644
--- a/packages/docusaurus-commenting-system/package.json
+++ b/packages/docusaurus-commenting-system/package.json
@@ -9,7 +9,7 @@
     "directory": "packages/docusaurus-commenting-system"
   },
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build && node scripts/copy-scss.js",
     "watch": "tsc --build --watch",
     "prepublishOnly": "yarn build"
   },
@@ -18,5 +18,12 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "devDependencies": {
+    "copyfiles": "^2.4.1",
+    "css-loader": "^6.8.1",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3"
+  },
   "license": "MIT"
 }
diff --git a/packages/docusaurus-commenting-system/scripts/copy-scss.js b/packages/docusaurus-commenting-system/scripts/copy-scss.js
new file mode 100644
index 00000000..328a92f6
--- /dev/null
+++ b/packages/docusaurus-commenting-system/scripts/copy-scss.js
@@ -0,0 +1,37 @@
+const fs = require('fs')
+const path = require('path')
+const copyfiles = require('copyfiles')
+
+function copySCSS(srcDir, destDir) {
+  fs.readdir(srcDir, { withFileTypes: true }, (err, entries) => {
+    if (err) {
+      console.error(err)
+      return
+    }
+
+    entries.forEach((entry) => {
+      const srcPath = path.join(srcDir, entry.name)
+      const destPath = path.join(destDir, entry.name)
+
+      if (entry.isDirectory()) {
+        // Recursive call for directories
+        copySCSS(srcPath, destPath)
+      } else if (path.extname(entry.name) === '.scss') {
+        // Copying .scss files
+        copyfiles([srcPath, path.dirname(destPath)], { up: true }, (err) => {
+          if (err) console.error(err)
+        })
+      }
+    })
+  })
+}
+
+const srcClientPath = path.join(__dirname, '../src/client')
+const libClientPath = path.join(__dirname, '../lib/client')
+
+// Ensure the destination directory exists
+if (!fs.existsSync(libClientPath)) {
+  fs.mkdirSync(libClientPath, { recursive: true })
+}
+
+copySCSS(srcClientPath, libClientPath)
diff --git a/packages/docusaurus-commenting-system/src/deps.d.ts b/packages/docusaurus-commenting-system/src/deps.d.ts
new file mode 100644
index 00000000..99508d56
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/deps.d.ts
@@ -0,0 +1 @@
+declare module '*.scss'

From e65f024b9e2b8b2c14648f2986e889b89e6aa875 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:35:08 +0100
Subject: [PATCH 05/30] feat(commenting system plugin): add plugin index file

---
 packages/docusaurus-commenting-system/src/index.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/index.ts

diff --git a/packages/docusaurus-commenting-system/src/index.ts b/packages/docusaurus-commenting-system/src/index.ts
new file mode 100644
index 00000000..a54c5c1d
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/index.ts
@@ -0,0 +1,10 @@
+import path from 'path'
+
+export default function docusaurusCommentingSystemPlugin(context, options) {
+  return {
+    name: 'docusaurus-commenting-system',
+    clientModules() {
+      return [path.resolve(__dirname, './client')]
+    },
+  }
+}

From e2237c53b86bb38a17dc9001b06b8d116df931ac Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:36:30 +0100
Subject: [PATCH 06/30] feat(commenting system UI): add Comment component

---
 .../components/Comment/Comment.module.scss      |  4 ++++
 .../src/client/components/Comment/Comment.tsx   | 17 +++++++++++++++++
 .../src/client/components/Comment/index.ts      |  1 +
 3 files changed, 22 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/Comment/index.ts

diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
new file mode 100644
index 00000000..23318e4b
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
@@ -0,0 +1,4 @@
+.username {
+  font-weight: bold;
+  margin-bottom: 0.3rem;
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
new file mode 100644
index 00000000..ef16d5b2
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CardBody } from '@acid-info/lsd-react'
+import styles from './Comment.module.scss'
+
+export type CommentProps = {
+  username: string
+  comment: string
+}
+
+export const Comment: React.FC<CommentProps> = ({ username, comment }) => {
+  return (
+    <CardBody>
+      <div className={styles.username}>{username}</div>
+      <div>{comment}</div>
+    </CardBody>
+  )
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/index.ts b/packages/docusaurus-commenting-system/src/client/components/Comment/index.ts
new file mode 100644
index 00000000..85a5c820
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/index.ts
@@ -0,0 +1 @@
+export * from './Comment'

From f15fca28804dd2745dff57e2682e009a37cac4bd Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:38:05 +0100
Subject: [PATCH 07/30] feat(commenting system UI): add WriteComment component

---
 .../WriteComment/WriteComment.module.scss     | 11 +++++++
 .../components/WriteComment/WriteComment.tsx  | 31 +++++++++++++++++++
 .../client/components/WriteComment/index.ts   |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
 create mode 100644 packages/docusaurus-commenting-system/src/client/components/WriteComment/index.ts

diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
new file mode 100644
index 00000000..f7c227b3
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
@@ -0,0 +1,11 @@
+.textarea {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+
+.actionContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
new file mode 100644
index 00000000..38688300
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { CardBody, Button } from '@acid-info/lsd-react'
+import styles from './WriteComment.module.scss'
+
+export type WriteCommentProps = {
+  handleSend: () => void
+  handleSignIn: () => void
+  isSignedIn?: boolean
+}
+
+export const WriteComment: React.FC<WriteCommentProps> = ({
+  handleSend,
+  handleSignIn,
+  isSignedIn = false,
+}) => {
+  return (
+    <CardBody>
+      <textarea
+        className={styles.textarea}
+        placeholder={isSignedIn ? 'Write a comment...' : 'Sign in to comment'}
+        disabled={!isSignedIn}
+        rows={3}
+      />
+      <div className={styles.actionContainer}>
+        <Button size="small" onClick={isSignedIn ? handleSend : handleSignIn}>
+          {isSignedIn ? 'Send' : 'Sign In'}
+        </Button>
+      </div>
+    </CardBody>
+  )
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/index.ts b/packages/docusaurus-commenting-system/src/client/components/WriteComment/index.ts
new file mode 100644
index 00000000..5fbece63
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/index.ts
@@ -0,0 +1 @@
+export * from './WriteComment'

From 6d66b3d2e8fe04b06652b98839411f7b1eb328dc Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:43:43 +0100
Subject: [PATCH 08/30] feat(commenting system UI): add CommentingSection
 container (commenting section full layout)

---
 .../CommentingSection.module.scss             |  6 ++
 .../CommentingSection/CommentingSection.tsx   | 61 +++++++++++++++++++
 .../containers/CommentingSection/index.ts     |  1 +
 3 files changed, 68 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
 create mode 100644 packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
 create mode 100644 packages/docusaurus-commenting-system/src/client/containers/CommentingSection/index.ts

diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
new file mode 100644
index 00000000..526c125e
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
@@ -0,0 +1,6 @@
+.commentsContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  margin-top: 3rem;
+}
diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
new file mode 100644
index 00000000..9751be1f
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { Comment } from '../../components/Comment'
+import { WriteComment } from '../../components/WriteComment'
+import styles from './CommentingSection.module.scss'
+
+type CommentData = {
+  id: number
+  username: string
+  comment: string
+  date: string
+}
+
+export const CommentingSection: React.FC = () => {
+  const location = useLocation() // location.pathname
+  const [commentsList, setCommentsList] = useState<CommentData[]>([])
+
+  useEffect(() => {
+    setCommentsList([
+      {
+        id: 1,
+        username: 'John Doe',
+        comment:
+          "This is a comment\nAnother line. Trying to make it longer. I have no idea what to write here. I'm just trying to make it longer.",
+        date: '2021-09-01',
+      },
+      {
+        id: 2,
+        username: 'Jane Doe',
+        comment: 'This is another comment',
+        date: '2021-09-02',
+      },
+    ])
+  }, [])
+
+  return (
+    <div>
+      <WriteComment
+        handleSend={() => console.log('Send')}
+        handleSignIn={() => console.log('Sign In')}
+        isSignedIn={true}
+      />
+      {commentsList.length && (
+        <>
+          <div className={styles.commentsContainer}>
+            <span>{`${commentsList.length} comment${
+              commentsList.length !== 1 && 's'
+            }`}</span>
+            {commentsList.map((comment) => (
+              <Comment
+                key={comment.id}
+                username={comment.username}
+                comment={comment.comment}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/index.ts b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/index.ts
new file mode 100644
index 00000000..282d356d
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/index.ts
@@ -0,0 +1 @@
+export * from './CommentingSection'

From 72c1203bb783650ae5e79e9ec3ec1302eb5b4678 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:44:25 +0100
Subject: [PATCH 09/30] feat(commenting system UI): add client index file

---
 .../src/client/index.ts                       |  2 +
 yarn.lock                                     | 74 +++++++++++++++++--
 2 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 packages/docusaurus-commenting-system/src/client/index.ts

diff --git a/packages/docusaurus-commenting-system/src/client/index.ts b/packages/docusaurus-commenting-system/src/client/index.ts
new file mode 100644
index 00000000..fdbd057f
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/index.ts
@@ -0,0 +1,2 @@
+import { CommentingSection } from './containers/CommentingSection'
+export { CommentingSection }
diff --git a/yarn.lock b/yarn.lock
index 90bacdd9..28c9af67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6247,6 +6247,19 @@ copy-webpack-plugin@^11.0.0:
     schema-utils "^4.0.0"
     serialize-javascript "^6.0.0"
 
+copyfiles@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.4.1.tgz#d2dcff60aaad1015f09d0b66e7f0f1c5cd3c5da5"
+  integrity sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^1.0.4"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    untildify "^4.0.0"
+    yargs "^16.1.0"
+
 core-js-compat@^3.30.1, core-js-compat@^3.30.2:
   version "3.30.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.2.tgz#83f136e375babdb8c80ad3c22d67c69098c1dd8b"
@@ -6397,7 +6410,7 @@ css-in-js-utils@^3.1.0:
   dependencies:
     hyphenate-style-name "^1.0.3"
 
-css-loader@^6.7.1:
+css-loader@^6.7.1, css-loader@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.8.1.tgz#0f8f52699f60f5e679eab4ec0fcd68b8e8a50a88"
   integrity sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==
@@ -9057,7 +9070,7 @@ glob@^10.3.10:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.0.0, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -9929,7 +9942,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -12260,7 +12273,7 @@ minimatch@3.0.5:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@3.1.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@3.1.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -12705,6 +12718,14 @@ node-releases@^2.0.13:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
   integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  integrity sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 non-layered-tidy-tree-layout@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
@@ -14909,6 +14930,16 @@ readable-stream@^4.1.0:
     events "^3.3.0"
     process "^0.11.10"
 
+readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdir-enhanced@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/readdir-enhanced/-/readdir-enhanced-1.5.2.tgz#61463048690ac6a455b75b62fa78a88f8dc85e53"
@@ -15581,6 +15612,13 @@ sass-loader@^10.1.1:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
+sass-loader@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
+  integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
+  dependencies:
+    neo-async "^2.6.2"
+
 sass@^1.55.0:
   version "1.62.1"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.62.1.tgz#caa8d6bf098935bc92fc73fa169fb3790cacd029"
@@ -15590,6 +15628,15 @@ sass@^1.55.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.69.5:
+  version "1.69.5"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.5.tgz#23e18d1c757a35f2e52cc81871060b9ad653dfde"
+  integrity sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 satori@^0.10.1:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/satori/-/satori-0.10.1.tgz#41d4f86acd5b67ab00580766ea7a09523850b2f3"
@@ -16478,6 +16525,11 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -16594,6 +16646,11 @@ strong-log-transformer@2.1.0, strong-log-transformer@^2.1.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
+style-loader@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.3.tgz#bba8daac19930169c0c9c96706749a597ae3acff"
+  integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
+
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -16895,7 +16952,7 @@ through2-filter@^3.0.0:
     through2 "~2.0.0"
     xtend "~4.0.0"
 
-through2@^2.0.0, through2@^2.0.3, through2@~2.0.0:
+through2@^2.0.0, through2@^2.0.1, through2@^2.0.3, through2@~2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -17673,6 +17730,11 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
 unzipper@^0.10.14:
   version "0.10.14"
   resolved "https://registry.yarnpkg.com/unzipper/-/unzipper-0.10.14.tgz#d2b33c977714da0fbc0f82774ad35470a7c962b1"
@@ -18543,7 +18605,7 @@ yargs-parser@^5.0.1:
     camelcase "^3.0.0"
     object.assign "^4.1.0"
 
-yargs@16.2.0, yargs@^16.2.0:
+yargs@16.2.0, yargs@^16.1.0, yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==

From f413a0a3322ccb63935bff10c3cdfc3a2dc0ca80 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:45:11 +0100
Subject: [PATCH 10/30] feat: add commenting system plugin to the docusaurus
 playground

---
 packages/docusaurus-playground/docusaurus.config.js | 1 +
 packages/docusaurus-playground/package.json         | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index ea30ecb6..451a8bde 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -76,6 +76,7 @@ const config = {
         hostnames: ['localhost', 'waku.org'],
       },
     ],
+    ['@acid-info/docusaurus-commenting-system', {}],
   ],
 
   themeConfig:
diff --git a/packages/docusaurus-playground/package.json b/packages/docusaurus-playground/package.json
index bb1c7bf0..92b73413 100644
--- a/packages/docusaurus-playground/package.json
+++ b/packages/docusaurus-playground/package.json
@@ -15,6 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@acid-info/docusaurus-commenting-system": "^1.0.0-alpha",
     "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.7",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",

From cfc5ac6c860ba2bae71ba40b127a05f0d907f835 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:45:42 +0100
Subject: [PATCH 11/30] feat: add commenting system test code to the playground

---
 packages/docusaurus-playground/docs/community.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx
index 3714293e..a8ec48b2 100644
--- a/packages/docusaurus-playground/docs/community.mdx
+++ b/packages/docusaurus-playground/docs/community.mdx
@@ -3,6 +3,7 @@ title: Join the community
 ---
 
 import { SocialCard, Grid, Box } from '@site/src/components/mdx'
+import { CommentingSection } from '@acid-info/docusaurus-commenting-system/lib/client/'
 
 # Join the community
 
@@ -51,3 +52,7 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
   </Grid>
 </Box>
+
+# Comments test
+
+<CommentingSection />

From 326fce518bd102114fe2e8d43868b91e25c2e215 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Fri, 22 Dec 2023 19:52:11 +0100
Subject: [PATCH 12/30] style(CommentingSection): reduce top margin

---
 .../containers/CommentingSection/CommentingSection.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
index 526c125e..396530c3 100644
--- a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.module.scss
@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
-  margin-top: 3rem;
+  margin-top: 2rem;
 }

From 59bcf54034c67d555ef0b7d17ca205271ef95d3e Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 02:47:19 +0100
Subject: [PATCH 13/30] feat(commenting system): add input handling logic to
 WriteComment component

---
 .../components/WriteComment/WriteComment.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
index 38688300..d79d511e 100644
--- a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { CardBody, Button } from '@acid-info/lsd-react'
 import styles from './WriteComment.module.scss'
 
 export type WriteCommentProps = {
-  handleSend: () => void
+  handleSend: (comment: string) => void
   handleSignIn: () => void
   isSignedIn?: boolean
 }
@@ -13,6 +13,16 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
   handleSignIn,
   isSignedIn = false,
 }) => {
+  const [comment, setComment] = useState('')
+
+  const onSendClick = () => {
+    const commentToSend = comment.trim()
+    if (commentToSend) {
+      handleSend(commentToSend)
+      setComment('')
+    }
+  }
+
   return (
     <CardBody>
       <textarea
@@ -20,9 +30,15 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
         placeholder={isSignedIn ? 'Write a comment...' : 'Sign in to comment'}
         disabled={!isSignedIn}
         rows={3}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
       />
       <div className={styles.actionContainer}>
-        <Button size="small" onClick={isSignedIn ? handleSend : handleSignIn}>
+        <Button
+          size="small"
+          onClick={isSignedIn ? onSendClick : handleSignIn}
+          disabled={isSignedIn && comment.length === 0}
+        >
           {isSignedIn ? 'Send' : 'Sign In'}
         </Button>
       </div>

From 500fe88fc4cc59c9a39098641f984f78f86f6601 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 02:50:13 +0100
Subject: [PATCH 14/30] feat(commenting system): add authentication functions

---
 .../docusaurus-commenting-system/package.json |  1 +
 .../src/server/auth.ts                        | 27 ++++++++
 yarn.lock                                     | 66 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/server/auth.ts

diff --git a/packages/docusaurus-commenting-system/package.json b/packages/docusaurus-commenting-system/package.json
index 9e0a4837..e86ba9e6 100644
--- a/packages/docusaurus-commenting-system/package.json
+++ b/packages/docusaurus-commenting-system/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@acid-info/lsd-react": "^0.1.0-beta.1",
+    "@supabase/supabase-js": "^2.39.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/packages/docusaurus-commenting-system/src/server/auth.ts b/packages/docusaurus-commenting-system/src/server/auth.ts
new file mode 100644
index 00000000..b69993b2
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/server/auth.ts
@@ -0,0 +1,27 @@
+import { supabase } from '../client/containers/CommentingSystem'
+import { User } from '@supabase/supabase-js'
+
+export const signInWithGitHub = async (
+  redirectUrl?: string,
+): Promise<boolean> => {
+  const { error } = await supabase.auth.signInWithOAuth({
+    provider: 'github',
+    options: {
+      redirectTo: redirectUrl || undefined,
+    },
+  })
+
+  if (error) {
+    console.error('Error signing in', error)
+    return false
+  }
+
+  return true
+}
+
+export const getUserData = async (): Promise<User | null> => {
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+  return user
+}
diff --git a/yarn.lock b/yarn.lock
index 28c9af67..bedd52b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3290,6 +3290,62 @@
     p-map "^4.0.0"
     webpack-sources "^3.2.2"
 
+"@supabase/functions-js@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.1.5.tgz#ed1b85f499dfda21d40fe39b86ab923117cb572b"
+  integrity sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/gotrue-js@^2.60.0":
+  version "2.62.0"
+  resolved "https://registry.yarnpkg.com/@supabase/gotrue-js/-/gotrue-js-2.62.0.tgz#c6522e357f3ce38ab32522b82ee818a4f627664c"
+  integrity sha512-4eBuZNXGOk7ewqJuHPYMnk8clCtEx6Hfnu6yHLjZlx7w18TqcojcTRUBZagErtpgwwdfzUwKbquexhbrpH/ysw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/node-fetch@^2.6.14":
+  version "2.6.15"
+  resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c"
+  integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+"@supabase/postgrest-js@^1.8.6":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.9.0.tgz#00dddbe8119f1ec2179057e563bb54f28e6e31e3"
+  integrity sha512-axP6cU69jDrLbfihJKQ6vU27tklD0gzb9idkMN363MtTXeJVt5DQNT3JnJ58JVNBdL74hgm26rAsFNvHk+tnSw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/realtime-js@^2.8.4":
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.9.1.tgz#c2648a16e15d22c6e8ad0b7a547714224ca89219"
+  integrity sha512-OxmY2qj+y6+KI4ifTL92j5+WYP+u5/PdThlYxVb0GMcMiMHfA7yIku9yaQNC5/oRdIvhuRpTMG/8/R40eB+8pA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+    "@types/phoenix" "^1.5.4"
+    ws "^8.14.2"
+
+"@supabase/storage-js@^2.5.4":
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.5.5.tgz#2958e2a2cec8440e605bb53bd36649288c4dfa01"
+  integrity sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/supabase-js@^2.39.1":
+  version "2.39.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.39.1.tgz#add43d5f6491f8dc2a1aa82662195a0524d79d50"
+  integrity sha512-nz0aQPButJWjChX+bLXqvhHutfiOuiJwzibyJs0uhFrQ6JRDZZsl9+nX2jgyox2v2V+e4PEwbn/eaEOFVUr8iA==
+  dependencies:
+    "@supabase/functions-js" "^2.1.5"
+    "@supabase/gotrue-js" "^2.60.0"
+    "@supabase/node-fetch" "^2.6.14"
+    "@supabase/postgrest-js" "^1.8.6"
+    "@supabase/realtime-js" "^2.8.4"
+    "@supabase/storage-js" "^2.5.4"
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
@@ -3752,6 +3808,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
   integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
 
+"@types/phoenix@^1.5.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.4.tgz#cceac93a827555473ad38057d1df7d06eef1ed71"
+  integrity sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA==
+
 "@types/prettier@^1.19.0":
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
@@ -18517,6 +18578,11 @@ ws@^8.13.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
+ws@^8.14.2:
+  version "8.15.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.15.1.tgz#271ba33a45ca0cc477940f7f200cd7fba7ee1997"
+  integrity sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==
+
 xdg-basedir@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"

From bcc3205834214969d3da5de919d15a93e17844ce Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 02:51:13 +0100
Subject: [PATCH 15/30] fix(commenting system): ts server files not being built

---
 packages/docusaurus-commenting-system/tsconfig.client.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docusaurus-commenting-system/tsconfig.client.json b/packages/docusaurus-commenting-system/tsconfig.client.json
index 837fc3f4..4b20e085 100644
--- a/packages/docusaurus-commenting-system/tsconfig.client.json
+++ b/packages/docusaurus-commenting-system/tsconfig.client.json
@@ -12,6 +12,6 @@
     "jsx": "react",
     "lib": ["DOM"]
   },
-  "include": ["src/client", "src/*.d.ts"],
+  "include": ["src/client", "src/server", "src/*.d.ts"],
   "exclude": ["**/__tests__/**"]
 }

From af05eef916254a105fd060ba02d3f7612ebc9120 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 02:52:18 +0100
Subject: [PATCH 16/30] feat(commenting system): add comments functions

---
 .../src/server/comments.ts                    | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 packages/docusaurus-commenting-system/src/server/comments.ts

diff --git a/packages/docusaurus-commenting-system/src/server/comments.ts b/packages/docusaurus-commenting-system/src/server/comments.ts
new file mode 100644
index 00000000..0bec9c8b
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/server/comments.ts
@@ -0,0 +1,79 @@
+import { supabase } from '../client/containers/CommentingSystem'
+
+export type Comment = {
+  id: number
+  created_at: string
+  author_id: string
+  text: string
+  page_path: string
+}
+
+export type CommentWithProfile = Comment & {
+  profiles: {
+    user_name: string
+  }
+}
+
+export const postOneComment = async (
+  text: string,
+  pagePath: string,
+): Promise<Comment[] | null> => {
+  const { data, error } = await supabase
+    .from('comments')
+    .insert([{ text: text, page_path: pagePath }])
+    .select()
+
+  if (error) {
+    console.log('Error posting comment:', error)
+    return null
+  }
+
+  return data as Comment[]
+}
+
+// typescript considers that the query returns an array of profiles objects rather than a single object
+// to bypass this problem, we use the any type
+// todo: look for a better solution
+export const fetchComments = async (pagePath: string): Promise<any> => {
+  const { data, error } = await supabase
+    .from('comments')
+    .select(
+      `
+      id,
+      created_at,
+      text,
+      page_path,
+      author_id,
+      profiles ( user_name )
+    `,
+    )
+    .eq('page_path', pagePath)
+    .order('created_at', { ascending: false })
+
+  if (error) {
+    console.error('Error fetching comments:', error)
+    return []
+  }
+  return data || []
+}
+
+export const fetchOneComment = async (
+  commentId: string,
+): Promise<CommentWithProfile | null> => {
+  const { data: newComment, error } = await supabase
+    .from('comments')
+    .select(
+      `
+      *,
+      profiles (user_name)
+    `,
+    )
+    .eq('id', commentId)
+    .maybeSingle()
+
+  if (error) {
+    console.error('Error fetching comment:', error)
+    return null
+  }
+  return newComment
+}

From 2020adcd689cae82dfd9624249b2b8e226bb31ed Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:27:54 +0100
Subject: [PATCH 17/30] feat(commenting system): add comments subscibre
 function

---
 .../src/server/comments.ts                    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/docusaurus-commenting-system/src/server/comments.ts b/packages/docusaurus-commenting-system/src/server/comments.ts
index 0bec9c8b..89d05f7b 100644
--- a/packages/docusaurus-commenting-system/src/server/comments.ts
+++ b/packages/docusaurus-commenting-system/src/server/comments.ts
@@ -77,3 +77,25 @@ export const fetchOneComment = async (
   }
   return newComment
 }
+
+export const subscribeToCommentsInsert = (
+  callback: (payload: any) => void,
+): (() => void) => {
+  const channel = supabase
+    .channel('custom-all-channel')
+    .on(
+      'postgres_changes',
+      {
+        event: 'INSERT',
+        schema: 'public',
+        table: 'comments',
+        filter: `page_path=eq.${location.pathname}`,
+      },
+      async (payload) => callback(payload),
+    )
+    .subscribe()
+
+  return () => {
+    supabase.removeChannel(channel)
+  }
+}

From 351a502bd5378905040a1452513dacd923dbba07 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:31:29 +0100
Subject: [PATCH 18/30] feat(commenting system): add comments handling logic to
 CommentingSection container

---
 .../CommentingSection/CommentingSection.tsx   | 94 +++++++++++++++----
 1 file changed, 74 insertions(+), 20 deletions(-)

diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
index 9751be1f..6b311e42 100644
--- a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
@@ -2,6 +2,14 @@ import React, { useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Comment } from '../../components/Comment'
 import { WriteComment } from '../../components/WriteComment'
+import { signInWithGitHub, getUserData } from '../../../server/auth'
+import {
+  postOneComment,
+  fetchComments,
+  fetchOneComment,
+  subscribeToCommentsInsert,
+  type CommentWithProfile,
+} from '../../../server/comments'
 import styles from './CommentingSection.module.scss'
 
 type CommentData = {
@@ -12,35 +20,81 @@ type CommentData = {
 }
 
 export const CommentingSection: React.FC = () => {
-  const location = useLocation() // location.pathname
+  const location = useLocation()
+  const [isSignedIn, setIsSignedIn] = useState<boolean>(false)
   const [commentsList, setCommentsList] = useState<CommentData[]>([])
 
+  const checkUserSignedIn = async () => {
+    const data = await getUserData()
+    if (data) {
+      setIsSignedIn(true)
+    } else {
+      setIsSignedIn(false)
+    }
+  }
+
+  const fetchCommentsList = async () => {
+    const data = await fetchComments(location.pathname)
+    setCommentsList(
+      data.map((commentFromDB: CommentWithProfile) => ({
+        id: commentFromDB.id,
+        username: commentFromDB.profiles.user_name,
+        comment: commentFromDB.text,
+        date: commentFromDB.created_at,
+      })),
+    )
+  }
+
+  const subscribeToNewComments = () => {
+    const unsubscibe = subscribeToCommentsInsert(async (payload) => {
+      const newCommentId = payload?.new?.id
+      if (!newCommentId) return
+
+      const newComment = await fetchOneComment(newCommentId)
+      if (!newComment) return
+
+      setCommentsList((prev) => [
+        {
+          id: newComment.id,
+          username: newComment.profiles.user_name,
+          comment: newComment.text,
+          date: newComment.created_at,
+        },
+        ...prev,
+      ])
+    })
+
+    return unsubscibe
+  }
+
+  const handleSignIn = async () => {
+    await signInWithGitHub(window.location.href)
+  }
+
+  const handleSend = async (commentText: string) => {
+    await postOneComment(commentText, location.pathname)
+  }
+
   useEffect(() => {
-    setCommentsList([
-      {
-        id: 1,
-        username: 'John Doe',
-        comment:
-          "This is a comment\nAnother line. Trying to make it longer. I have no idea what to write here. I'm just trying to make it longer.",
-        date: '2021-09-01',
-      },
-      {
-        id: 2,
-        username: 'Jane Doe',
-        comment: 'This is another comment',
-        date: '2021-09-02',
-      },
-    ])
+    // check if user is signed in
+    checkUserSignedIn()
+    // fetch all comments on first load
+    fetchCommentsList()
+    // subscribe to new comments
+    const unsubscibe = subscribeToNewComments()
+    return () => {
+      unsubscibe()
+    }
   }, [])
 
   return (
     <div>
       <WriteComment
-        handleSend={() => console.log('Send')}
-        handleSignIn={() => console.log('Sign In')}
-        isSignedIn={true}
+        handleSend={(text) => handleSend(text)}
+        handleSignIn={handleSignIn}
+        isSignedIn={isSignedIn}
       />
-      {commentsList.length && (
+      {commentsList.length > 0 && (
         <>
           <div className={styles.commentsContainer}>
             <span>{`${commentsList.length} comment${

From a2e503a1812d90e9bc8a2ab2f2abf0eee8aaaf31 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:33:42 +0100
Subject: [PATCH 19/30] feat(commenting system): add user's Supabase
 credentials handling

---
 .../docusaurus-commenting-system/package.json |  1 +
 .../CommentingSystem/CommentingSystem.tsx     | 11 +++
 .../containers/CommentingSystem/index.ts      |  1 +
 .../src/client/index.ts                       |  4 +-
 .../docusaurus-commenting-system/src/index.ts | 28 ++++++-
 .../src/supabase.d.ts                         |  8 ++
 .../tsconfig.client.json                      |  2 +-
 yarn.lock                                     | 81 +++++++++++++++++++
 8 files changed, 130 insertions(+), 6 deletions(-)
 create mode 100644 packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/CommentingSystem.tsx
 create mode 100644 packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/index.ts
 create mode 100644 packages/docusaurus-commenting-system/src/supabase.d.ts

diff --git a/packages/docusaurus-commenting-system/package.json b/packages/docusaurus-commenting-system/package.json
index e86ba9e6..9d751acc 100644
--- a/packages/docusaurus-commenting-system/package.json
+++ b/packages/docusaurus-commenting-system/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@acid-info/lsd-react": "^0.1.0-beta.1",
+    "@docusaurus/types": "^3.0.1",
     "@supabase/supabase-js": "^2.39.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/CommentingSystem.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/CommentingSystem.tsx
new file mode 100644
index 00000000..ff9cbfac
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/CommentingSystem.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { createClient } from '@supabase/supabase-js'
+import { CommentingSection } from '../CommentingSection'
+
+const supabaseUrl = window.SUPABASE_URL
+const supabaseAnonKey = window.SUPABASE_ANON_KEY
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+
+export const CommentingSystem: React.FC = () => {
+  return <CommentingSection />
+}
diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/index.ts b/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/index.ts
new file mode 100644
index 00000000..e7e425c0
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSystem/index.ts
@@ -0,0 +1 @@
+export * from './CommentingSystem'
diff --git a/packages/docusaurus-commenting-system/src/client/index.ts b/packages/docusaurus-commenting-system/src/client/index.ts
index fdbd057f..e265be40 100644
--- a/packages/docusaurus-commenting-system/src/client/index.ts
+++ b/packages/docusaurus-commenting-system/src/client/index.ts
@@ -1,2 +1,2 @@
-import { CommentingSection } from './containers/CommentingSection'
-export { CommentingSection }
+import { CommentingSystem } from './containers/CommentingSystem'
+export { CommentingSystem }
diff --git a/packages/docusaurus-commenting-system/src/index.ts b/packages/docusaurus-commenting-system/src/index.ts
index a54c5c1d..1a458c9e 100644
--- a/packages/docusaurus-commenting-system/src/index.ts
+++ b/packages/docusaurus-commenting-system/src/index.ts
@@ -1,10 +1,32 @@
+import type { LoadContext, Plugin } from '@docusaurus/types'
 import path from 'path'
 
-export default function docusaurusCommentingSystemPlugin(context, options) {
+export type PluginOptions = {
+  supabaseUrl: string
+  supabaseAnonKey: string
+}
+
+export default function docusaurusCommentingSystemPlugin(
+  context: LoadContext,
+  options: PluginOptions,
+): Plugin<any> {
+  const { supabaseUrl, supabaseAnonKey } = options
+
   return {
     name: 'docusaurus-commenting-system',
-    clientModules() {
-      return [path.resolve(__dirname, './client')]
+    getClientModules: () => [path.resolve(__dirname, './client')],
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: 'script',
+            innerHTML: `
+              window.SUPABASE_URL = "${supabaseUrl}";
+              window.SUPABASE_ANON_KEY = "${supabaseAnonKey}";
+            `,
+          },
+        ],
+      }
     },
   }
 }
diff --git a/packages/docusaurus-commenting-system/src/supabase.d.ts b/packages/docusaurus-commenting-system/src/supabase.d.ts
new file mode 100644
index 00000000..41b2e13a
--- /dev/null
+++ b/packages/docusaurus-commenting-system/src/supabase.d.ts
@@ -0,0 +1,8 @@
+declare global {
+  interface Window {
+    SUPABASE_URL: string
+    SUPABASE_ANON_KEY: string
+  }
+}
+
+export {}
diff --git a/packages/docusaurus-commenting-system/tsconfig.client.json b/packages/docusaurus-commenting-system/tsconfig.client.json
index 4b20e085..06484b2c 100644
--- a/packages/docusaurus-commenting-system/tsconfig.client.json
+++ b/packages/docusaurus-commenting-system/tsconfig.client.json
@@ -12,6 +12,6 @@
     "jsx": "react",
     "lib": ["DOM"]
   },
-  "include": ["src/client", "src/server", "src/*.d.ts"],
+  "include": ["src/**/*", "src/client", "src/server", "src/*.d.ts"],
   "exclude": ["**/__tests__/**"]
 }
diff --git a/yarn.lock b/yarn.lock
index bedd52b2..91c65b59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1978,6 +1978,20 @@
     webpack "^5.73.0"
     webpack-merge "^5.8.0"
 
+"@docusaurus/types@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@docusaurus/types/-/types-3.0.1.tgz#4fe306aa10ef7c97dbc07588864f6676a40f3b6f"
+  integrity sha512-plyX2iU1tcUsF46uQ01pAd4JhexR7n0iiQ5MSnBFX6M6NSJgDYdru/i1/YNPKOnQHBoXGLHv0dNT6OAlDWNjrg==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+    commander "^5.1.0"
+    joi "^17.9.2"
+    react-helmet-async "^1.3.0"
+    utility-types "^3.10.0"
+    webpack "^5.88.1"
+    webpack-merge "^5.9.0"
+
 "@docusaurus/utils-common@2.4.1", "@docusaurus/utils-common@^2.0.0-rc.1", "@docusaurus/utils-common@^2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@docusaurus/utils-common/-/utils-common-2.4.1.tgz#7f72e873e49bd5179588869cc3ab7449a56aae63"
@@ -7546,6 +7560,14 @@ enhanced-resolve@^5.14.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.15.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enquirer@^2.3.4, enquirer@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -11236,6 +11258,17 @@ joi@^17.6.0:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
+joi@^17.9.2:
+  version "17.11.0"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.11.0.tgz#aa9da753578ec7720e6f0ca2c7046996ed04fc1a"
+  integrity sha512-NgB+lZLNoqISVy1rZocE9PZI36bL/77ie924Ri43yEvi9GUUMPeyVIr8KdFTMUlby1p0PBYMk9spIxEUQYqrJQ==
+  dependencies:
+    "@hapi/hoek" "^9.0.0"
+    "@hapi/topo" "^5.0.0"
+    "@sideway/address" "^4.1.3"
+    "@sideway/formula" "^3.0.1"
+    "@sideway/pinpoint" "^2.0.0"
+
 jpjs@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jpjs/-/jpjs-1.2.1.tgz#f343833de8838a5beba1f42d5a219be0114c44b7"
@@ -15761,6 +15794,15 @@ schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.1.2:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 schema-utils@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.1.tgz#eb2d042df8b01f4b5c276a2dfd41ba0faab72e8d"
@@ -18269,6 +18311,15 @@ webpack-merge@^5.8.0:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
+webpack-merge@^5.9.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
+  integrity sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==
+  dependencies:
+    clone-deep "^4.0.1"
+    flat "^5.0.2"
+    wildcard "^2.0.0"
+
 webpack-sources@^3.2.2, webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
@@ -18304,6 +18355,36 @@ webpack@^5.73.0:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
+webpack@^5.88.1:
+  version "5.89.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.89.0.tgz#56b8bf9a34356e93a6625770006490bf3a7f32dc"
+  integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.9.0"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.15.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.7"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 webpackbar@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/webpackbar/-/webpackbar-5.0.2.tgz#d3dd466211c73852741dfc842b7556dcbc2b0570"

From adda3991d2f15bce42fd4c717cecf7f7da397023 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:41:33 +0100
Subject: [PATCH 20/30] feat(commenting system): add Supabase credentials to
 docusaurus playground

---
 packages/docusaurus-playground/docusaurus.config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index 451a8bde..3ca3275e 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -76,7 +76,13 @@ const config = {
         hostnames: ['localhost', 'waku.org'],
       },
     ],
-    ['@acid-info/docusaurus-commenting-system', {}],
+    [
+      '@acid-info/docusaurus-commenting-system',
+      {
+        supabaseUrl: process.env.SUPABASE_URL,
+        supabaseAnonKey: process.env.SUPABASE_ANON_KEY,
+      },
+    ],
   ],
 
   themeConfig:

From 4122ff609676913c44958278f19cb12d1654fd77 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:42:33 +0100
Subject: [PATCH 21/30] fix(docusaurus playground): fix commenting system
 import

---
 packages/docusaurus-playground/docs/community.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx
index a8ec48b2..076094b8 100644
--- a/packages/docusaurus-playground/docs/community.mdx
+++ b/packages/docusaurus-playground/docs/community.mdx
@@ -3,7 +3,7 @@ title: Join the community
 ---
 
 import { SocialCard, Grid, Box } from '@site/src/components/mdx'
-import { CommentingSection } from '@acid-info/docusaurus-commenting-system/lib/client/'
+import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
 
 # Join the community
 
@@ -55,4 +55,4 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
 
 # Comments test
 
-<CommentingSection />
+<CommentingSystem />

From 4f9388ada0c8c4492b6d957a8669b7f0c2737b0e Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 04:43:03 +0100
Subject: [PATCH 22/30] feat(docusaurus playground): add new commenting system
 test

---
 packages/docusaurus-playground/docs/powered-by-waku.mdx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/docusaurus-playground/docs/powered-by-waku.mdx b/packages/docusaurus-playground/docs/powered-by-waku.mdx
index cea98e89..2764cad8 100644
--- a/packages/docusaurus-playground/docs/powered-by-waku.mdx
+++ b/packages/docusaurus-playground/docs/powered-by-waku.mdx
@@ -5,6 +5,7 @@ title: Powered by Waku
 Leap into the future with Waku! Revolutionise communication, collaboration, and connectivity. Join us and create something extraordinary!
 
 import { AppCard, Grid } from '@site/src/components/mdx'
+import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
 
 <Grid xs={{ cols: 1, wrap: true, gap: '0 1rem' }} lg={{ cols: 2 }}>
   <Grid.Item xs={1}>
@@ -44,3 +45,5 @@ import { AppCard, Grid } from '@site/src/components/mdx'
     />
   </Grid.Item>
 </Grid>
+
+<CommentingSystem />

From fac62cb3f7face5744da006a81afceca38460dc3 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 05:36:54 +0100
Subject: [PATCH 23/30] feat(docusaurus playground): add theme swizzle to test
 commenting system

---
 packages/docusaurus-playground/docs/community.mdx   |  5 -----
 .../docusaurus-playground/docs/powered-by-waku.mdx  |  3 ---
 .../src/theme/DocItem/Content/index.js              | 13 +++++++++++++
 3 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 packages/docusaurus-playground/src/theme/DocItem/Content/index.js

diff --git a/packages/docusaurus-playground/docs/community.mdx b/packages/docusaurus-playground/docs/community.mdx
index 076094b8..3714293e 100644
--- a/packages/docusaurus-playground/docs/community.mdx
+++ b/packages/docusaurus-playground/docs/community.mdx
@@ -3,7 +3,6 @@ title: Join the community
 ---
 
 import { SocialCard, Grid, Box } from '@site/src/components/mdx'
-import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
 
 # Join the community
 
@@ -52,7 +51,3 @@ Welcome to the Waku community! Whether you are interested in building with Waku,
     </Grid.Item>
   </Grid>
 </Box>
-
-# Comments test
-
-<CommentingSystem />
diff --git a/packages/docusaurus-playground/docs/powered-by-waku.mdx b/packages/docusaurus-playground/docs/powered-by-waku.mdx
index 2764cad8..cea98e89 100644
--- a/packages/docusaurus-playground/docs/powered-by-waku.mdx
+++ b/packages/docusaurus-playground/docs/powered-by-waku.mdx
@@ -5,7 +5,6 @@ title: Powered by Waku
 Leap into the future with Waku! Revolutionise communication, collaboration, and connectivity. Join us and create something extraordinary!
 
 import { AppCard, Grid } from '@site/src/components/mdx'
-import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
 
 <Grid xs={{ cols: 1, wrap: true, gap: '0 1rem' }} lg={{ cols: 2 }}>
   <Grid.Item xs={1}>
@@ -45,5 +44,3 @@ import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/cl
     />
   </Grid.Item>
 </Grid>
-
-<CommentingSystem />
diff --git a/packages/docusaurus-playground/src/theme/DocItem/Content/index.js b/packages/docusaurus-playground/src/theme/DocItem/Content/index.js
new file mode 100644
index 00000000..dfc6f20c
--- /dev/null
+++ b/packages/docusaurus-playground/src/theme/DocItem/Content/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Content from '@theme-original/DocItem/Content'
+import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
+
+export default function ContentWrapper(props) {
+  return (
+    <>
+      <Content {...props} />
+      <div style={{ marginTop: '4rem' }} />
+      <CommentingSystem />
+    </>
+  )
+}

From 530ea17cf6794955109c1b3e15bf23f9ff1afff8 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 05:51:10 +0100
Subject: [PATCH 24/30] fix(commenting system): trailing slash bug when
 fetching comments

---
 .../CommentingSection/CommentingSection.tsx           | 11 +++++++++--
 .../src/server/comments.ts                            |  9 +++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
index 6b311e42..7eac2929 100644
--- a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
@@ -24,6 +24,13 @@ export const CommentingSection: React.FC = () => {
   const [isSignedIn, setIsSignedIn] = useState<boolean>(false)
   const [commentsList, setCommentsList] = useState<CommentData[]>([])
 
+  const getFormattedPath = (): string => {
+    const path = location.pathname
+    // Remove trailing slash if it exists
+    const formattedPagePath = path.endsWith('/') ? path.slice(0, -1) : path
+    return formattedPagePath
+  }
+
   const checkUserSignedIn = async () => {
     const data = await getUserData()
     if (data) {
@@ -34,7 +41,7 @@ export const CommentingSection: React.FC = () => {
   }
 
   const fetchCommentsList = async () => {
-    const data = await fetchComments(location.pathname)
+    const data = await fetchComments(getFormattedPath())
     setCommentsList(
       data.map((commentFromDB: CommentWithProfile) => ({
         id: commentFromDB.id,
@@ -62,7 +69,7 @@ export const CommentingSection: React.FC = () => {
         },
         ...prev,
       ])
-    })
+    }, getFormattedPath())
 
     return unsubscibe
   }
diff --git a/packages/docusaurus-commenting-system/src/server/comments.ts b/packages/docusaurus-commenting-system/src/server/comments.ts
index 89d05f7b..27514bab 100644
--- a/packages/docusaurus-commenting-system/src/server/comments.ts
+++ b/packages/docusaurus-commenting-system/src/server/comments.ts
@@ -18,9 +18,13 @@ export const postOneComment = async (
   text: string,
   pagePath: string,
 ): Promise<Comment[] | null> => {
+  // Remove trailing slash if it exists
+  const formattedPagePath = pagePath.endsWith('/')
+    ? pagePath.slice(0, -1)
+    : pagePath
   const { data, error } = await supabase
     .from('comments')
-    .insert([{ text: text, page_path: pagePath }])
+    .insert([{ text: text, page_path: formattedPagePath }])
     .select()
 
   if (error) {
@@ -80,6 +84,7 @@ export const fetchOneComment = async (
 
 export const subscribeToCommentsInsert = (
   callback: (payload: any) => void,
+  path: string,
 ): (() => void) => {
   const channel = supabase
     .channel('custom-all-channel')
@@ -89,7 +94,7 @@ export const subscribeToCommentsInsert = (
         event: 'INSERT',
         schema: 'public',
         table: 'comments',
-        filter: `page_path=eq.${location.pathname}`,
+        filter: `page_path=eq.${path}`,
       },
       async (payload) => callback(payload),
     )

From 0a442f74e358f35795c51ded23488f1fa1535641 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 06:25:23 +0100
Subject: [PATCH 25/30] feat(commenting system UI): small UI enhancement on
 WriteComment component

---
 .../WriteComment/WriteComment.module.scss     | 25 +++++++++++++++++++
 .../components/WriteComment/WriteComment.tsx  |  6 +++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
index f7c227b3..93e8269e 100644
--- a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.module.scss
@@ -2,6 +2,10 @@
   width: 100%;
   min-width: 100%;
   max-width: 100%;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .actionContainer {
@@ -9,3 +13,24 @@
   justify-content: flex-end;
   margin-top: 0.5rem;
 }
+
+.githubBtnLabel {
+  display: flex;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    display: flex;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+      no-repeat;
+  }
+
+  html[data-theme='dark'] &::before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+      no-repeat;
+  }
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
index d79d511e..5b95f33a 100644
--- a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
@@ -29,7 +29,7 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
         className={styles.textarea}
         placeholder={isSignedIn ? 'Write a comment...' : 'Sign in to comment'}
         disabled={!isSignedIn}
-        rows={3}
+        rows={4}
         value={comment}
         onChange={(e) => setComment(e.target.value)}
       />
@@ -39,7 +39,9 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
           onClick={isSignedIn ? onSendClick : handleSignIn}
           disabled={isSignedIn && comment.length === 0}
         >
-          {isSignedIn ? 'Send' : 'Sign In'}
+          <span className={!isSignedIn && styles.githubBtnLabel}>
+            {isSignedIn ? 'Send' : 'Sign In with GitHub'}
+          </span>
         </Button>
       </div>
     </CardBody>

From cd5ecdf456f9f553cd54f04634cc3bf9a512b524 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 06:31:50 +0100
Subject: [PATCH 26/30] feat(commenting system UI): block multi lines on
 WriteComment component's textarea

---
 .../src/client/components/WriteComment/WriteComment.tsx    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
index 5b95f33a..03d5569a 100644
--- a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
@@ -23,6 +23,12 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
     }
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+    }
+  }
+
   return (
     <CardBody>
       <textarea
@@ -32,6 +38,7 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
         rows={4}
         value={comment}
         onChange={(e) => setComment(e.target.value)}
+        onKeyDown={handleKeyDown}
       />
       <div className={styles.actionContainer}>
         <Button

From da39df432aefb17e27e01563ad6b49f42f5e3429 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Sun, 24 Dec 2023 17:35:24 +0100
Subject: [PATCH 27/30] docs(commenting system): add plugin docs

---
 .../docusaurus-commenting-system/README.md    | 118 +++++++++++++++++-
 1 file changed, 117 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-commenting-system/README.md b/packages/docusaurus-commenting-system/README.md
index d848cf00..c9a1ea58 100644
--- a/packages/docusaurus-commenting-system/README.md
+++ b/packages/docusaurus-commenting-system/README.md
@@ -1 +1,117 @@
-# Docusaurus docs commenting system plugin
+# Docusaurus commenting system plugin
+
+The Docusaurus Commenting System plugin allows to add a realtime commenting system to your Docusaurus project. It uses Supabase as a backend and GitHub as an authentication provider.
+
+## Installation
+
+### Supabase setup
+
+1. Create a Supabase project.
+2. Activate the GitHub authentication provider (Authentification > Providers).
+3. In the SQL Editor, run the following queries:
+
+   - To create the `profiles` table:
+
+   ```sql
+   create table
+     public.profiles (
+       id uuid not null,
+       user_name text null,
+       constraint profiles_pkey primary key (id),
+       constraint profiles_id_fkey foreign key (id) references auth.users (id) on delete cascade
+     ) tablespace pg_default;
+   ```
+
+   - To create the `comments` table:
+
+   ```sql
+   create table
+     public.comments (
+       id bigint generated by default as identity,
+       created_at timestamp without time zone not null default now(),
+       text text not null,
+       page_path text not null,
+       author_id uuid not null default auth.uid (),
+       constraint comment_pkey primary key (id),
+       constraint comment_id_key unique (id),
+       constraint comments_author_id_fkey foreign key (author_id) references profiles (id)
+     ) tablespace pg_default;
+   ```
+
+   - To create a function and a trigger to automatically fill the `profiles` table when a new user authenticates with GitHub for the first time:
+
+   ```sql
+   -- inserts a row into public.profiles
+   create function public.handle_new_user()
+   returns trigger
+   language plpgsql
+   security definer set search_path = public
+   as $$
+   begin
+     insert into public.profiles (id, user_name)
+     values (new.id, new.raw_user_meta_data ->> 'user_name');
+     return new;
+   end;
+
+
+   $$;
+
+   -- trigger the function every time a user is created
+   create trigger on_auth_user_created
+     after insert on auth.users
+     for each row execute procedure public.handle_new_user();
+
+   ```
+
+4. Activate Realtime on the `comments` table.
+5. Go to Database > Schema Visualizer and make sure that your database schema looks like this:
+   ![Supabase database schema](https://iili.io/JRKk0v9.png)
+6. Please consider adding RLS (Row Level Security) policies to your tables. You should allow only authenticated users to INSERT on the `comments` table and you can add public read access to the `profiles` and `comments` tables.
+
+### Docusaurus setup
+
+1. Add the plugin to your Docusaurus project: `yarn add @acid-info/docusaurus-commenting-system`.
+2. Add the plugin to your `docusaurus.config.js` file:
+
+```js
+const config = {
+  // other config fields...,
+  plugins: [
+    // other plugins...,
+    [
+      '@acid-info/docusaurus-commenting-system',
+      {
+        supabaseUrl: process.env.SUPABASE_URL,
+        supabaseAnonKey: process.env.SUPABASE_ANON_KEY,
+      },
+    ],
+  ],
+}
+```
+
+3. Create a `.env` file at the root of your project and add the following environment variables. They are your Supabase Project URL and Supabase Public API Key, never put a secret key here.
+
+```
+SUPABASE_URL=https://example.supabase.co
+SUPABASE_ANON_KEY=example.anon.key
+```
+
+4. Add the `CommentingSystem` component to your pages. Here is an example in a mdx docs page:
+
+```mdx
+## // docs/example.mdx
+
+## title: Example
+
+import { CommentingSystem } from '@acid-info/docusaurus-commenting-system/lib/client/'
+
+# Example doc page
+
+This is an example doc page with the commenting system at the bottom of it.
+
+# Comments section
+
+<CommentingSystem />
+```
+
+`N.B.:` The commenting section is unique to each individual page URL. This means that the comments you see on one page are specific to that page only and are not shared or displayed on other pages. Each page has its own separate set of comments.

From c511ba8beef196b48ee24834542ced1aeb0761bc Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Mon, 25 Dec 2023 18:41:32 +0100
Subject: [PATCH 28/30] fix(commenting system): CommentingSection component UI
 displaying false when there is only 1 comment displayed

---
 .../client/containers/CommentingSection/CommentingSection.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
index 7eac2929..0d40bb41 100644
--- a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
@@ -105,7 +105,7 @@ export const CommentingSection: React.FC = () => {
         <>
           <div className={styles.commentsContainer}>
             <span>{`${commentsList.length} comment${
-              commentsList.length !== 1 && 's'
+              commentsList.length > 1 ? 's' : ''
             }`}</span>
             {commentsList.map((comment) => (
               <Comment

From 46f90de845b014b2c20bfc706a92c59e0e69a20b Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Mon, 25 Dec 2023 19:13:14 +0100
Subject: [PATCH 29/30] feat(commenting system): add date display to Comment
 component

---
 packages/docusaurus-commenting-system/package.json |  1 +
 .../client/components/Comment/Comment.module.scss  | 14 ++++++++++++--
 .../src/client/components/Comment/Comment.tsx      | 12 ++++++++++--
 .../CommentingSection/CommentingSection.tsx        | 11 +++++++++--
 yarn.lock                                          |  5 +++++
 5 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-commenting-system/package.json b/packages/docusaurus-commenting-system/package.json
index 9d751acc..a8ddd26e 100644
--- a/packages/docusaurus-commenting-system/package.json
+++ b/packages/docusaurus-commenting-system/package.json
@@ -17,6 +17,7 @@
     "@acid-info/lsd-react": "^0.1.0-beta.1",
     "@docusaurus/types": "^3.0.1",
     "@supabase/supabase-js": "^2.39.1",
+    "date-fns": "^3.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
index 23318e4b..a2cc6e6a 100644
--- a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
@@ -1,4 +1,14 @@
-.username {
-  font-weight: bold;
+.commentHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 0.3rem;
+
+  .username {
+    font-weight: bold;
+  }
+
+  .date {
+    font-weight: lighter;
+  }
 }
diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
index ef16d5b2..07930c4c 100644
--- a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
@@ -5,12 +5,20 @@ import styles from './Comment.module.scss'
 export type CommentProps = {
   username: string
   comment: string
+  date: string
 }
 
-export const Comment: React.FC<CommentProps> = ({ username, comment }) => {
+export const Comment: React.FC<CommentProps> = ({
+  username,
+  comment,
+  date,
+}) => {
   return (
     <CardBody>
-      <div className={styles.username}>{username}</div>
+      <div className={styles.commentHeader}>
+        <span className={styles.username}>{username}</span>
+        <span className={styles.date}>{date}</span>
+      </div>
       <div>{comment}</div>
     </CardBody>
   )
diff --git a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
index 0d40bb41..2d1e3e13 100644
--- a/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
+++ b/packages/docusaurus-commenting-system/src/client/containers/CommentingSection/CommentingSection.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
+import { parseISO, format } from 'date-fns'
 import { Comment } from '../../components/Comment'
 import { WriteComment } from '../../components/WriteComment'
 import { signInWithGitHub, getUserData } from '../../../server/auth'
@@ -24,6 +25,11 @@ export const CommentingSection: React.FC = () => {
   const [isSignedIn, setIsSignedIn] = useState<boolean>(false)
   const [commentsList, setCommentsList] = useState<CommentData[]>([])
 
+  const convertDateFormat = (inputDate: string): string => {
+    const date = parseISO(inputDate)
+    return format(date, 'MMM d, yyyy')
+  }
+
   const getFormattedPath = (): string => {
     const path = location.pathname
     // Remove trailing slash if it exists
@@ -47,7 +53,7 @@ export const CommentingSection: React.FC = () => {
         id: commentFromDB.id,
         username: commentFromDB.profiles.user_name,
         comment: commentFromDB.text,
-        date: commentFromDB.created_at,
+        date: convertDateFormat(commentFromDB.created_at),
       })),
     )
   }
@@ -65,7 +71,7 @@ export const CommentingSection: React.FC = () => {
           id: newComment.id,
           username: newComment.profiles.user_name,
           comment: newComment.text,
-          date: newComment.created_at,
+          date: convertDateFormat(newComment.created_at),
         },
         ...prev,
       ])
@@ -112,6 +118,7 @@ export const CommentingSection: React.FC = () => {
                 key={comment.id}
                 username={comment.username}
                 comment={comment.comment}
+                date={comment.date}
               />
             ))}
           </div>
diff --git a/yarn.lock b/yarn.lock
index 91c65b59..45885c4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6974,6 +6974,11 @@ date-fns@^2.14.0, date-fns@^2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+date-fns@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.0.6.tgz#fe3aeb7592d359f075ffc41cb16139828810ca83"
+  integrity sha512-W+G99rycpKMMF2/YD064b2lE7jJGUe+EjOES7Q8BIGY8sbNdbgcs9XFTZwvzc9Jx1f3k7LB7gZaZa7f8Agzljg==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"

From c2d0be582509d740d4b11b726ff9445f88de85e9 Mon Sep 17 00:00:00 2001
From: JulesFILIOT <dev@julesfiliot.com>
Date: Mon, 25 Dec 2023 19:37:28 +0100
Subject: [PATCH 30/30] feat(commenting system): add multi lines comment
 display handling

---
 .../src/client/components/Comment/Comment.module.scss      | 4 ++++
 .../src/client/components/Comment/Comment.tsx              | 2 +-
 .../src/client/components/WriteComment/WriteComment.tsx    | 7 -------
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
index a2cc6e6a..6182e512 100644
--- a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.module.scss
@@ -12,3 +12,7 @@
     font-weight: lighter;
   }
 }
+
+.commentText {
+  white-space: pre-line;
+}
diff --git a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
index 07930c4c..05b6800b 100644
--- a/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/Comment/Comment.tsx
@@ -19,7 +19,7 @@ export const Comment: React.FC<CommentProps> = ({
         <span className={styles.username}>{username}</span>
         <span className={styles.date}>{date}</span>
       </div>
-      <div>{comment}</div>
+      <div className={styles.commentText}>{comment}</div>
     </CardBody>
   )
 }
diff --git a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
index 03d5569a..5b95f33a 100644
--- a/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
+++ b/packages/docusaurus-commenting-system/src/client/components/WriteComment/WriteComment.tsx
@@ -23,12 +23,6 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
     }
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-    }
-  }
-
   return (
     <CardBody>
       <textarea
@@ -38,7 +32,6 @@ export const WriteComment: React.FC<WriteCommentProps> = ({
         rows={4}
         value={comment}
         onChange={(e) => setComment(e.target.value)}
-        onKeyDown={handleKeyDown}
       />
       <div className={styles.actionContainer}>
         <Button