Adding Comments to Docusaurus Blogs

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. (If you'd like to join the community, feel free to check out talkyard.kevinwilliams.dev)

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.