Adding Comments to a Docusaurus Blog

The features that docusaurus comes with out of the box are great, but there's one piece that's missing, especially for a blog - comments.

That being said, it doesn't really surprise me, considering the number of options available for comments and the fact that docusaurus is primarily for documentation.

Nevertheless, I went searching for some options and decided to add Talkyard to my site.

Setup​

I decided to self-host a talkyard server, so the first thing I did was setup a VM inside of Azure, and point a domain name toward the public IP of the VM.

Another thing that will be helpful is to have an email service. I already had a SendGrid account, so that was taken care of.

Install Talkyard​

Once the initial server was setup, it was time to install talkyard. There's not much to explain for this, and the instructions are super easy to follow

Swizzling the BlogPostPage​

In order to get comments to show up, we need a way to add them to every blog post. To do this, we can swizzle the BlogPostPage by running

npm run swizzle @docusaurus/theme-classic BlogPostPage -- --eject

This will add an index.js file to /src/theme/BlogPostPage and blogs will now use this component instead of the default component.

# Folder contents
- blog
- docs
- src
  - theme
    - BlogPostPage
      - index.js

Create a Comment Component​

Since Docusaurus is built with React, we can add a comments by creating a new React component. To do this, add an index.tsx file under src/components/TalkyardComments

# Folder contents
- blog
- docs
- src
  - components
    - TalkyardComments
      - index.tsx

Next, you can add the following code. Be sure to replace TALKYARD_SERVER_URL and TALKYARD_SCRIPT_URL with appropriate values from the Embedded comments section of the Talkyard admin settings.

import React, { useEffect } from "react";

export default function TalkyardComments() {
  // Runs when the page loads
  useEffect(() => {
    // When loading the talkyard script, there's a "talkyard-session" iframe
    // that adds a white bar to the bottom of the screen, under the footer.
    // This function looks for that element, and hides it
    const hideTalkyardIframe = (id) => {
      try {
        let iframe = document.getElementById("talkyard-session");
        if (iframe.style.display !== "none") iframe.style.display = "none";

        if (id && iframe.style.display === "none") clearInterval(id);
      } catch (e) {
        console.log("error:", e);
      }
    };

    // Add the talkyard scripts to the page
    const serverScript = document.createElement("script");
    serverScript.id = "talkyard_url";
    serverScript.innerText = "talkyardServerUrl='<TALKYARD_SERVER_URL>;";
    (
      document.getElementsByTagName("head")[0] ||
      document.getElementsByTagName("body")[0]
    ).appendChild(serverScript);

    const talkyardScript = document.createElement("script");
    talkyardScript.async = true;
    talkyardScript.defer = true;
    talkyardScript.id = "talkyard_script";
    talkyardScript.src = "<TALKYARD_SCRIPT_URL>";
    (
      document.getElementsByTagName("head")[0] ||
      document.getElementsByTagName("body")[0]
    ).appendChild(talkyardScript);

    // Try hiding the talkyard iFrame after it's loaded via the scripts above
    let interval = setInterval(() => hideTalkyardIframe(interval), 100);

    // When leaving the page, remove all of the elements that were added by
    // Talkyard. Not doing this will cause duplicate elements to show up for
    // for every blog post you visit
    return () => {
      try {
        document.getElementById("talkyard_script").remove();
        document.getElementById("talkyard_url").remove();
        document.getElementById("talkyard-session").remove();
        document.getElementById("ed-editor-wrapper").remove();
        document.getElementById("ed-editor-placeholder").remove();
        clearInterval(interval);
      } catch (e) {
        console.log("Error:", e);
      }
    };
  }, []);

  // The actual comments that show up on the page
  return (
    <div className="talkyard-comments" style={{ marginTop: "45px" }}>
      <noscript>Please enable Javascript to view comments.</noscript>
      <p style={{ marginTop: "25px", opacity: "0.9", fontSize: "96%" }}>
        Comments powered by
        <a href="https://www.talkyard.io">Talkyard</a>.
      </p>
    </div>
  );
}

Add Comments to the BlogPostPage​

Now that we have a component for displaying comments, we can update the BlogPostPage component that we swizzled earlier.

Within the BlogPostPage component, there's a BlogPostContent component. That's where we want to add our new Talkyard component:

function BlogPostPageContent(props) {
  const { content: BlogPostContents, sidebar } = props;
  const { assets, metadata } = BlogPostContents;
  const { nextItem, prevItem, frontMatter } = metadata;
  const {
    hide_table_of_contents: hideTableOfContents,
    toc_min_heading_level: tocMinHeadingLevel,
    toc_max_heading_level: tocMaxHeadingLevel,
  } = frontMatter;

  return (
    <BlogLayout
      sidebar={sidebar}
      toc={
        !hideTableOfContents &&
        BlogPostContents.toc &&
        BlogPostContents.toc.length > 0 ? (
          <TOC
            toc={BlogPostContents.toc}
            minHeadingLevel={tocMinHeadingLevel}
            maxHeadingLevel={tocMaxHeadingLevel}
          />
        ) : undefined
      }
    >
      <BlogPostItem
        frontMatter={frontMatter}
        assets={assets}
        metadata={metadata}
        isBlogPostPage
      >
        <BlogPostContents />
      </BlogPostItem>

      {/* I put the comments here: Under the actual post, but before the next
      and previous buttons. */}
      <TalkyardComments />

      {(nextItem || prevItem) && (
        <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
      )}
    </BlogLayout>
  );
}

Conclusion​

So there you have it - Talkyard comments added to a Docusaurus blog. And since we created a component, we can easily add comments to our documents, pages, or anywhere else.