Add comments to a Docusaurus site

1. Load the script

Add it to the scripts list in your config. Docusaurus puts it in the <head> of every page:

export default {
  // …your existing config
  scripts: [
    { src: 'https://disfora.com/public/disfora.js', async: true },
  ],
};

2. Comments on blog posts

Create a wrapper around the component that renders a blog post:

npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap --danger

Docusaurus asks for --danger because it doesn't promise that this component's insides stay the same between versions. A wrapper only renders the original component and adds the container after it, so upgrades don't affect it. Edit the file it creates:

import React from 'react';
import BlogPostItem from '@theme-original/BlogPostItem';
import { useBlogPost } from '@docusaurus/plugin-content-blog/client';

export default function BlogPostItemWrapper(props) {
  const { isBlogPostPage } = useBlogPost();
  return (
    <>
      <BlogPostItem {...props} />
      {isBlogPostPage && <div data-disfora-comments />}
    </>
  );
}

The blog index renders the same component for every post in the list. isBlogPostPage is only true on a post's own page, so the list doesn't get a comment box under each excerpt.

3. Comments on docs pages

Wrap the footer that sits at the end of every docs page:

npm run swizzle @docusaurus/theme-classic DocItem/Footer -- --wrap --danger

import React from 'react';
import Footer from '@theme-original/DocItem/Footer';

export default function FooterWrapper(props) {
  return (
    <>
      <Footer {...props} />
      <div data-disfora-comments />
    </>
  );
}

Each page's thread belongs to its address. When a reader moves between pages in the sidebar, Disfora loads the thread for the new page.

Check it on your site

Disfora only loads on the domain in your project, so localhost:3000 won't show it. Deploy, then verify your domain if you haven't yet, and open a post or docs page on your live site.

Ask a question

Something missing or unclear? Ask here and we'll answer in the thread.