diff --git a/public/doc/_sidebar.md b/public/doc/_sidebar.md index 0ae287a3..1a728785 100644 --- a/public/doc/_sidebar.md +++ b/public/doc/_sidebar.md @@ -12,6 +12,7 @@ - [Vue](https://github.com/2nthony/vue-cusdis) - [Docsify](/integration/docsify.md) - [Jekyll](/integration/jekyll.md) + - [Docusaurus](/integration/docusaurus.md) - [Hugo](https://discourse.gohugo.io/t/free-and-open-source-comments-for-hugo/32940) - [Hexo](https://blog.cusdis.com/integate-cusdis-in-hexo) - [Mkdocs](/integration/mkdocs.md) diff --git a/public/doc/integration/docusaurus.md b/public/doc/integration/docusaurus.md new file mode 100644 index 00000000..d7a4394f --- /dev/null +++ b/public/doc/integration/docusaurus.md @@ -0,0 +1,122 @@ +# Integrate Cusdis into Docusaurus + +[Docusaurus](https://github.com/facebook/docusaurus) is a user-friendly, open-source static site generator developed by Meta. It harnesses the full potential of **React** and **MDX**, making it easy to start, customizable, and suitable for localization. + +## Usage + +This guide will walk you through the steps to add Cusdis comments to your Docusaurus website pages. + +### Installing Dependencies + +Before integrating Cusdis, ensure that you have installed the required dependencies. You will need `react-cusdis`, which is a **React wrapper for Cusdis**. Install it as a dependency in your Docusaurus project: + +```bash +npm install react-cusdis +# or +yarn add react-cusdis + +``` + +### Create a Cusdis Component + +Next, create a new component for Cusdis in your Docusaurus project. You can name it `CusdisComments.js` and place it in the `src/components folder`. Here's an example of what the component might look like: + +```js +import { ReactCusdis } from 'react-cusdis'; + +export default function CusdisComments(props) { + const appId = process.env.CUSDIS_APP_ID; + + return ( +