Add giscus comments and i18n to Docusaurus

Goal

This post is detailed description of adding giscus and i18n to website built by Docusaurus.

Add giscus comments feature

Preparations

• Enable discussion feature for your website's public github repo, it can be done in repo's Settings/General/Features. This is the doc you can refer.

• Configure giscus in your Github account and in section "Repository access" add only your website repo to be accessed by giscus

Get props value

• In giscus website, your can get props value in section "Configuration"

• In "Page ↔️ Discussions Mapping" part, I recommend choosing "Discussion title contains page <title>", so that the change of url won't affect the searching result.

• In "Discussion Category" part you can Announcements as recommended.

• In "Enable giscus" part, you can get the props value, you can find that if you modify settings above, the value will change accordingly.

• giscus has wrapper componet, you can use @giscus/react

Create giscus component

install @giscus/react

pnpm install @giscus/react

create src/components/Giscus.tsx file:

import React from "react";
import Giscus from "@giscus/react";
import { useColorMode } from "@docusaurus/theme-common";

export default function GiscusComponent() {
  const { colorMode } = useColorMode();

  return (
    <Giscus
      repo="username/repo" // need to change
      repoId="R_kgxxxxxx" // need to change 
      category="Announcements"
      categoryId="DIC_your category id" // need to change
      mapping="title"
      term="Welcome to @giscus/react component!"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme={colorMode}
      lang="en"
      loading="lazy"
    />
  );
}

Add component to blogs and docs

Use swizzle command to create BlogPostItem and DocItem/Footer in src/theme directory

pnpm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap

pnpm run swizzle @docusaurus/theme-classic DocItem/Footer -- --wrap

Add GiscusComponent to BlogPostItem and DocItem

//src/theme/BlogPostItem/index.js

import React from "react";
import BlogPostItem from "@theme-original/BlogPostItem";
import GiscusComponent from "@site/src/components/GiscusComponent";

export default function BlogPostItemWrapper(props) {
  return (
    <>
      <BlogPostItem {...props} />
      <GiscusComponent />
    </>
  );
}

//src/theme/DocItem/Footer/index.js

import React from "react";
import Footer from "@theme-original/DocItem/Footer";
import GiscusComponent from "@site/src/components/GiscusComponent";

export default function FooterWrapper(props) {
  return (
    <>
      <GiscusComponent />
      <Footer {...props} />
    </>
  );
}

Add i18n

Actually, you can just follow this tutorial. I will give some tips about the tutorial

• you can just the code example below to configure i18n settings if you don't have complicated requirements.

//docusaurus.config.js

i18n: {
    defaultLocale: 'fr',
    locales: ['en', 'fr'],
  },

• As shown in the picture, run pnpm run write-translations --locale en will generate a lot of files.

• You should copy your docs and blogs to i18n/en/docusaurus-plugin-content-docs/current and i18n/fr/docusaurus-plugin-content-blog.
• Note: you need to create current directory by yourself

References

giscus.app

giscus-component

docusaurus swizzle

docusaurus i18n tutorial