Add comments to your Docusaurus website in 5 minutes
Docusaurus is one of the best static site generators for blogs and documentation projects. Docusaurus is backed by the Meta Open Source team and is quite popular among developer communities for great performance and simple setup.
In this guide, you’ll add comments to your Docusaurus documentation project.
Why do I need comments?
For documentation
Documentation is the door to your software and its best advocate. It is also one of the most frequent touch-points with your customers. Collecting comments on your documentation, makes customers feel heard, reduces the threshold for issue reporting, and gives your tech writers actionable feedback to work on.
For blog
A blog is a great opportunity to build and empower developer communities. Enabling comments on your blog welcomes healthy discussions and brainstorming between your community members.
Prerequisites
Before proceeding with this guide, you must have your Docusaurus project set up locally.
To collect comments, likes, and dislikes you’ll use docsly.dev. docsly is a user feedback tool for documentation. You can sign up for a free account.
Get project credentials
To get your project’s publicId
, follow these steps:
- Open the dashboard.
- Select development project from the top navigation bar.
- Go to Settings > API keys section.
- Click Copy Public ID.
You must use the
publicId
from the development project in your dashboard
while testing locally.
Installation
Install the latest version of the @docsly/react
package using your favorite package manager.
pnpm add @docsly/react
# or
yarn add @docsly/react
# or
npm install @docsly/react
Initializing docsly
docsly uses swizzling to wrap itself inside the default <Footer />
component provided by Docusaurus.
Wrapping the Footer component doesn’t impact the default behavior. It only lets docsly to enhance the documentation experience.
You need to initialize docsly using the publicId
and pathname
(to learn more about props, see component ). In Docusaurus, you can get the pathname
using the useLocation
hook from @docusaurus/router
.
To initialize docsly,
- Create a new file
./theme/Footer/index.js
in the project root. - Copy the below code and paste it into the newly created file.
- Replace the
publicId
copied from the docsly dashboard.
// ./theme/Footer/index.js
import React from "react";
import Footer from "@theme-original/Footer";
import Docsly from "@docsly/react";
import "@docsly/react/styles.css";
import { useLocation } from "@docusaurus/router";
export default function FooterWrapper(props) {
const { pathname } = useLocation();
return (
<>
<Footer {...props} />
<Docsly publicId="<copied-from-dashboard>" pathname={pathname} />
</>
);
}
🥳 Your documentation is now ready to collect feedback using docsly.
To avoid misuse of the development project’s private ID, you must create a new project and use its
publicId
when deploying your project.
Example project
We’ve got a Docusaurus template project working with the latest @docsly/react
package hosted live at docusaurus.docsly.dev.
You can also check out the code on GitHub.
Additional notes
By now you must have realized that you can use docsly on any React application. So, what are you waiting for? Sign up today.
I’m eager to see your comments.
Originally published at https://dev.to on May 9, 2023.