diff --git a/blog/docusaurus-comments/discussions-enable.png b/blog/docusaurus-comments/discussions-enable.png
new file mode 100644
index 0000000..6d7c22b
Binary files /dev/null and b/blog/docusaurus-comments/discussions-enable.png differ
diff --git a/blog/docusaurus-comments/docusaurus-comments.png b/blog/docusaurus-comments/docusaurus-comments.png
new file mode 100644
index 0000000..b456868
Binary files /dev/null and b/blog/docusaurus-comments/docusaurus-comments.png differ
diff --git a/blog/docusaurus-comments/index.md b/blog/docusaurus-comments/index.md
new file mode 100644
index 0000000..841511a
--- /dev/null
+++ b/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
+
+[](/blog/docusaurus-comments)
+
+
+## Комментарии и обсуждения для блога
+
+На мой взгляд это очень полезная штука.
+
+- Комментарии дают возможность высказаться и поделиться своим мнением, задать вопросы или дополнить тему статьи.
+- Для обсуждения идей и обмена знаниями, могут стимулировать дискуссии и помочь узнать что-то новое.
+
+Искал разные решения и в итоге остановился на **Giscus**. Это opensource проект для добавления коментариев через Discussions Github
+
+Офф.сайт - [https://giscus.app/ru](https://giscus.app/ru)
+
+
+## Настройка Github
+
+### Включить обсуждения
+
+Нужно активировать Discussion в настройках репозитория
+
+
+
+После этого для удобства удалил лишние категории, оставил только 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 ;
+ }
+ return (
+ <>
+
+ {(
+
+
+
+ )}
+ >
+ );
+}
+```
+
+:::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` лучше для этого подходит и по логике и по функционалу.
+
diff --git a/package-lock.json b/package-lock.json
index caa12c0..7ec500d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 70a1798..0fee89c 100644
--- a/package.json
+++ b/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",
diff --git a/src/theme/BlogPostItem.tsx b/src/theme/BlogPostItem.tsx
new file mode 100644
index 0000000..5e666fe
--- /dev/null
+++ b/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 ;
+ }
+ return (
+ <>
+
+ {(
+
+
+
+ )}
+ >
+ );
+}
\ No newline at end of file