feat: added feedback section for each page (#350)

* feat: added feedback section for each page

* fix: update content set id

* fix: added environment variables

* fix: removed typesense from env

.env.example

@@ -1,3 +1 @@
-TYPESENSE_COLLECTION_NAME=
-TYPESENSE_SERVER_HOST=
-TYPESENSE_SEARCH_ONLY_APIKEY=
+FEEDBACK_CONTENT_SET_ID=

.github/workflows/pr.yml

@@ -32,7 +32,5 @@ jobs:
       - name: create env file
         run: |
           touch .env
-          echo TYPESENSE_COLLECTION_NAME="test-collection" >> .env
-          echo TYPESENSE_SERVER_HOST="test-host" >> .env
-          echo TYPESENSE_SEARCH_ONLY_APIKEY="test-api-key" >> .env
+          echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
       - run: npm run build

.github/workflows/s3.yml

@@ -22,9 +22,7 @@ jobs:
     - name: create env file
       run: |
         touch .env
-        echo TYPESENSE_COLLECTION_NAME=${{ vars.TYPESENSE_COLLECTION_NAME }} >> .env
-        echo TYPESENSE_SERVER_HOST=${{ vars.TYPESENSE_SERVER_HOST }} >> .env
-        echo TYPESENSE_SEARCH_ONLY_APIKEY=${{ vars.TYPESENSE_SEARCH_ONLY_APIKEY }} >> .env
+        echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
     - run: npm run build
 
     - name: Configure AWS Credentials

docusaurus.config.ts

@@ -110,6 +110,9 @@ const config: Config = {
       indexName: "aelf",
     },
   } satisfies Preset.ThemeConfig,
+  customFields: {
+    FEEDBACK_CONTENT_SET_ID: process.env.FEEDBACK_CONTENT_SET_ID || "",
+  },
   stylesheets: [
     {
       href: "/katex/katex.min.css",

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
+    "@feelback/react": "^0.3.4",
     "@mdx-js/react": "^3.0.0",
     "@sinm/react-file-tree": "^1.1.1",
     "chaingpt-component": "^0.2.0-beta.3",

src/css/custom.css

@@ -70,4 +70,41 @@
   .mobile-only {
     display: none;
   }
+}
+
+/*
+Feedback widget CSS customization
+https://www.feelback.dev/docs/guides/stripe-like-documentation-feedback-for-docusaurus/
+*/
+@import "@feelback/react/styles/feelback.css";
+
+.feedback-component{
+  margin-top: 2rem;
+}
+
+.feedback-component .feelback-container .feelback-buttons{
+  gap: 10px;
+}
+
+.feedback-component .feelback-container .feelback-btn {
+    background-color: var(--ifm-color-primary);
+    color: white;
+    height: 37px;
+    padding-inline: 15px;
+    border-radius: 7px;
+}
+
+.feedback-component .feelback-container .feelback-btn:hover{
+  background-color: var(--ifm-color-primary-dark);
+
+}
+
+.feedback-component .feelback-container textarea {
+    border: 1px solid var(--ifm-color-primary-lightest);
+    border-radius: 10px;
+    padding: 0.7rem;
+}
+
+.feedback-component .feelback-radio-side label{
+  font-weight: 600;
 }

src/theme/DocPaginator/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import Translate, { translate } from "@docusaurus/Translate";
+import PaginatorNavLink from "@theme/PaginatorNavLink";
+import type { Props } from "@theme/DocPaginator";
+import Feedback from "../Feedback";
+
+export default function DocPaginator(props: Props): JSX.Element {
+  const { previous, next } = props;
+  return (
+    <nav>
+      <div
+        className="pagination-nav docusaurus-mt-lg"
+        aria-label={translate({
+          id: "theme.docs.paginator.navAriaLabel",
+          message: "Docs pages",
+          description: "The ARIA label for the docs pagination",
+        })}
+      >
+        {previous && (
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc"
+              >
+                Previous
+              </Translate>
+            }
+          />
+        )}
+        {next && (
+          <PaginatorNavLink
+            {...next}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc"
+              >
+                Next
+              </Translate>
+            }
+            isNext
+          />
+        )}
+      </div>
+      <Feedback />
+    </nav>
+  );
+}

src/theme/Feedback/index.tsx

@@ -0,0 +1,86 @@
+import { useState } from "react";
+import {
+  FeelbackTaggedMessage,
+  Question,
+  PRESET_YESNO_LIKE_DISLIKE,
+} from "@feelback/react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+const YES_TAGS = [
+  {
+    value: "accurate",
+    title: "Accurate",
+    description: "Accurately describes the product or feature.",
+  },
+  {
+    value: "problem-solved",
+    title: "Solved my problem",
+    description: "Helped me resolve an issue.",
+  },
+  {
+    value: "clear",
+    title: "Easy to understand",
+    description: "Easy to follow and comprehend.",
+  },
+  {
+    value: "product-chosen",
+    title: "Helped me decide to use the product",
+    description: "Convinced me to adopt the product or feature.",
+  },
+  { value: "other-yes", title: "Another reason" },
+];
+
+const NO_TAGS = [
+  {
+    value: "inaccurate",
+    title: "Inaccurate",
+    description: "Doesn't accurately describe the product or feature.",
+  },
+  {
+    value: "missing-info",
+    title: "Couldn't find what I was looking for",
+    description: "Missing important information.",
+  },
+  {
+    value: "unclear",
+    title: "Hard to understand",
+    description: "Too complicated or unclear.",
+  },
+  {
+    value: "bad-examples",
+    title: "Code samples errors",
+    description: "One or more code samples are incorrect.",
+  },
+  { value: "other-no", title: "Another reason" },
+];
+
+const Feedback = () => {
+  const [choice, setChoice] = useState<"y" | "n">();
+  const { siteConfig } = useDocusaurusContext();
+  const { FEEDBACK_CONTENT_SET_ID } = siteConfig.customFields;
+
+  return (
+    <div className="alert alert--info feedback-component">
+      <div className="feelback-container">
+        {!choice ? (
+          <Question
+            text="Was this page helpful?"
+            items={PRESET_YESNO_LIKE_DISLIKE}
+            showLabels
+            onClick={(option: "y" | "n") => setChoice(option)}
+          />
+        ) : (
+          <FeelbackTaggedMessage
+            contentSetId={FEEDBACK_CONTENT_SET_ID as string}
+            layout="radio-group"
+            tags={choice === "y" ? YES_TAGS : NO_TAGS}
+            title={choice === "y" ? "What did you like?" : "What went wrong?"}
+            placeholder="(optional) Please, further detail the feedback"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;