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 + +[![docusaurus comments](./docusaurus-comments.png)](/blog/docusaurus-comments) + + +## Комментарии и обсуждения для блога + +На мой взгляд это очень полезная штука. + +- Комментарии дают возможность высказаться и поделиться своим мнением, задать вопросы или дополнить тему статьи. +- Для обсуждения идей и обмена знаниями, могут стимулировать дискуссии и помочь узнать что-то новое. + +Искал разные решения и в итоге остановился на **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 ; + } + 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