Комментарии в блоге с Giscus

Разберём как с минимальными затратами ресурсов, прикрутить к сайту функциональную систему комментариев для посетителей.

Для решения этой задачи будем использовать приложение Giscus.

Принцип работы

После загрузки giscus GitHub Discussions search API используется для поиска обсуждений, связанных с текущей страницей на основе выбранного типа связи (URL, pathname, <title> и прочее). Если обсуждение не было найдено, то бот giscus автоматически создаст новое обсуждение, как только кто-нибудь впервые оставит комментарий или реакцию.

Чтобы добавить новый комментарий пользователи должны авторизовать giscus app для опубликования комментариев от их имени с помощью GitHub OAuth. Кроме того, посетители могут оставлять комментарии напрямую в GitHub Discussion. Модерация этих комментариев происходит средствами GitHub.

Настройка репозитория

Необходимо выбрать репозиторий для подключения giscus, удовлетворяющий следующим требованиям:

• Репозиторий является общедоступным, иначе посетители не смогут видеть обсуждение.
• Приложение giscus установлено, иначе посетители не смогут оставлять реакции и комментарии.
• Опция Discussions включена в настройках репозитория.

Желательно сделать тонкую настройку репозитория.

Необходимо выбрать категорию, где будут создаваться новые комментарии. Рекомендуется использовать категорию Announcements, там новые обсуждения могут быть созданы только модераторами и самим giscus, однако, если надо обеспечить посетителям возможность оставлять комментарии посредством интерфейса Github, нужно выбрать другую категорию.

Для привязки на сайте нам необходимо знать:

• repoId - уникальный идентификатор репозитория
• categoryId - уникальный идентификатор категории

Эти данные можно получить непосредственно на главной странице приложения или можно воспользоватся средствами GitHub GraphQL Explorer, выполнив следующий запрос:

query{
  repository(owner: "owner-name", name: "repo-name") {
    id # RepositoryID
    name
    discussionCategories(first: 10) {
      nodes {
        id # CategoryID
        name
      }
    }
  }
}

query{
  repository(owner: "owner-name", name: "repo-name") {
    id # RepositoryID
    name
    discussionCategories(first: 10) {
      nodes {
        id # CategoryID
        name
      }
    }
  }
}

Интерграция на сайте

У Giscus много вариантов реализации интеграций на стороне сайта, мы разберём интеграцию с использованием @giscus/react.

Создаем компонент.

"use client";
 
import { useTheme } from "next-themes";
import Giscus from "@giscus/react";
 
export default function Comments(): JSX.Element {
  const { theme } = useTheme();
  return (
    <Giscus
      id="comments"
      repo="<owner-name/repo-name>"
      repoId="<repo-ID>"
      category="Announcements"
      categoryId="<category-ID>"
      mapping="pathname"
      data-strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme={theme}
      lang="ru"
      loading="lazy"
    />
  );
}

"use client";
 
import { useTheme } from "next-themes";
import Giscus from "@giscus/react";
 
export default function Comments(): JSX.Element {
  const { theme } = useTheme();
  return (
    <Giscus
      id="comments"
      repo="<owner-name/repo-name>"
      repoId="<repo-ID>"
      category="Announcements"
      categoryId="<category-ID>"
      mapping="pathname"
      data-strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme={theme}
      lang="ru"
      loading="lazy"
    />
  );
}

Импортируем и вставляем компонент в необходимое место на странице.

import Comments from "@/components/Comments";
 
// awesome code
export default function Page(): JSX.Element {
  return (
    {/* awesome page layout */}
    <Comments />
  )
}

import Comments from "@/components/Comments";
 
// awesome code
export default function Page(): JSX.Element {
  return (
    {/* awesome page layout */}
    <Comments />
  )
}

Дело сделано! Мы получили отличную систему комментариев посетителей на своей странице с минимальными затратами.

Ссылки и дополнительная информация

• Приложение Giscus