add comments giscus

blog/docusaurus-comments/index.md

@@ -0,0 +1,138 @@
+---
+slug: docusaurus-comments
+title: Docusaurus комментарии
+description: Add commenst docusaurus, добавление коментариев в docusaurus с использованием Giscus
+image: ./docusaurus-comments.png
+tags: [blog, docusaurus, github, giscus]
+date: 2023-06-17
+---
+
+Добавление комментарий, обсуждений в запиях блога docusaurus
+
+[![docusaurus comments](./docusaurus-comments.png)](/blog/docusaurus-comments)
+
+<!--truncate-->
+## Комментарии и обсуждения для блога
+
+На мой взгляд это очень полезная штука. 
+
+- Комментарии дают возможность высказаться и поделиться своим мнением, задать вопросы или дополнить тему статьи.
+- Для обсуждения идей и обмена знаниями, могут стимулировать дискуссии и помочь узнать что-то новое.
+
+Искал разные решения и в итоге остановился на **Giscus**. Это opensource проект для добавления коментариев через Discussions Github
+
+Офф.сайт - [https://giscus.app/ru](https://giscus.app/ru)
+
+
+## Настройка Github
+
+### Включить обсуждения
+
+Нужно активировать Discussion в настройках репозитория
+
+![Discussion](./discussions-enable.png)
+
+После этого для удобства удалил лишние категории, оставил только Generals
+
+### Установка Giscus App 
+
+Установить для выбранного репозитория Giscus GitHub App
+
+[https://github.com/apps/giscus](https://github.com/apps/giscus)
+
+
+## Настройка Giscus
+Установка пакета
+```
+npm add @giscus/react
+```
+
+Создание компонента
+```
+npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap
+```
+
+Дання команда создаст файл по пути `src/theme/BlogPostItem/index.js`
+
+Переименовать файл в **BlogPostItem.tsx** и положить уровнем выше в итоге получится `src/theme/BlogPostItem.tsx`
+
+Содержание файла 
+```tsx
+import React from 'react';
+import BlogPostItem from '@theme-original/BlogPostItem';
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+import Giscus from "@giscus/react";
+
+export default function BlogPostItemWrapper(props) {
+  const { isBlogPostPage } = useBlogPost();
+  if (!isBlogPostPage) {
+    return <BlogPostItem {...props} />;
+  }
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {(
+        <div className="docusaurus-blog-comments">
+          <Giscus
+            repo="akmalovaa/akmalov.com"
+            repoId="R_kgDOI0gPCg"
+            category="General"
+            categoryId="DIC_kwDOI0gPCs4CXR_A"
+            mapping="pathname"
+            reactionsEnabled="1"
+            emitMetadata="0"
+            inputPosition="bottom"
+            theme="dark"
+            lang={'ru'}
+            loading="lazy"
+          />
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+:::tip
+Можно сделать лучше и кусок с Giscus перенести в `src/components` а переменные через dotenv файл потдягивать
+:::
+
+Пока буду делать просто и топорно, т.к. github Discussion сейчас активно развивается и возможны изменения в API - необходимо будет быстро исправить.
+
+
+Пройдемся по переменным:
+- `repo` тут все понятно автор и репо
+- `repoId` нужно будет вытащить через API
+- `category` название категории в Discussion
+- `categoryId` нужно будет вытащить через API
+
+Удобнее всего ID вытаскивать через GraphQL запрос вытаскивать.
+Если уже установлена Github CLI то можно выполнить команду:
+
+```bash
+gh api graphql -f query='{ 
+  repository(owner: "akmalovaa", name:"akmalov.com"){
+    id
+    discussionCategories(first:10) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+}
+'
+```
+
+Нужно подставить свои **owner** и repo **name**. В ответ придет json с ID репозитория и категорий.
+
+Можно попробовать через Github API эти данные вытащить, но способ выше показался проще.
+
+## Итого
+
+Вроде без особых сложностей можно добавить комментарии в своем блоге с docusaurus.
+
+Некоторые сервисы (аналоги giscus) используют для комментов `github issue`, но мне кажется `github discussions` лучше для этого подходит и по логике и по функционалу.
+

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@docusaurus/core": "2.4.1",
         "@docusaurus/preset-classic": "2.4.1",
+        "@giscus/react": "^2.2.8",
         "@icons-pack/react-simple-icons": "5.11.0",
         "@mdi/js": "^7.2.96",
         "@mdi/react": "^1.6.1",
@@ -3501,6 +3502,18 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@giscus/react": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-2.2.8.tgz",
+      "integrity": "sha512-dPk3GMmsx5hHXXi8Xye7aen+lsZ/PR4I7AwTXKxKtAvxXsH5XAVB/bI6uWr4BrLEH3plZMzgOlVUIPOFJsHQCw==",
+      "dependencies": {
+        "giscus": "^1.2.8"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3652,6 +3665,19 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
+      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.2.tgz",
+      "integrity": "sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
     "node_modules/@mdi/js": {
       "version": "7.2.96",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
@@ -4487,6 +4513,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
+    },
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -8627,6 +8658,14 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/giscus": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.2.8.tgz",
+      "integrity": "sha512-pufrgQYt1W+4ztiWp/PilLPN8NdyKvpbQ8jNqbAa1g84t6qqyevXHfkOYCi4x4d+y191vJAUc6seL1Dq74yUeA==",
+      "dependencies": {
+        "lit": "^2.6.1"
+      }
+    },
     "node_modules/github-slugger": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
@@ -10045,6 +10084,34 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/lit": {
+      "version": "2.7.5",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.7.5.tgz",
+      "integrity": "sha512-i/cH7Ye6nBDUASMnfwcictBnsTN91+aBjXoTHF2xARghXScKxpD4F4WYI+VLXg9lqbMinDfvoI7VnZXjyHgdfQ==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.7.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.2.tgz",
+      "integrity": "sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.7.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.7.4.tgz",
+      "integrity": "sha512-/Jw+FBpeEN+z8X6PJva5n7+0MzCVAH2yypN99qHYYkq8bI+j7I39GH+68Z/MZD6rGKDK9RpzBw7CocfmHfq6+g==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
+    "@giscus/react": "^2.2.8",
     "@icons-pack/react-simple-icons": "5.11.0",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",

src/theme/BlogPostItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import BlogPostItem from '@theme-original/BlogPostItem';
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+import Giscus from "@giscus/react";
+
+export default function BlogPostItemWrapper(props) {
+  const { isBlogPostPage } = useBlogPost();
+  if (!isBlogPostPage) {
+    return <BlogPostItem {...props} />;
+  }
+  return (
+    <>
+      <BlogPostItem {...props} />
+      {(
+        <div className="docusaurus-blog-comments">
+          <Giscus
+            repo="akmalovaa/akmalov.com"
+            repoId="R_kgDOI0gPCg"
+            category="General"
+            categoryId="DIC_kwDOI0gPCs4CXR_A"
+            mapping="pathname"
+            reactionsEnabled="1"
+            emitMetadata="0"
+            inputPosition="bottom"
+            theme="dark"
+            lang={'ru'}
+            loading="lazy"
+          />
+        </div>
+      )}
+    </>
+  );
+}