Add feedback mechanism

Author: biancabuzea200

package.json

@@ -23,6 +23,7 @@
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
     "prism-react-renderer": "^2.3.0",
+    "pushfeedback-react": "^0.1.40",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.77.8"

src/components/CallToActionButton/CallToActionButton.module.scss

@@ -21,15 +21,15 @@
     text-align: center;
 
     transition: all 200ms ease-out 10ms;
-    
+    color: white;
+
     &:hover {
       box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
       transform: scale(1.05);
       border: #0a2313 solid 1px;
       text-decoration: none;
     }
-  
-    color: white;
+
 
     a:hover {
       color: white !important;

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,50 @@
+import React, {useEffect} from 'react';
+import Footer from '@theme-original/DocItem/Footer';
+
+import { FeedbackButton } from 'pushfeedback-react';
+import { defineCustomElements } from 'pushfeedback/loader';
+import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
+
+function FeedbackWidget() {
+    const buttonThumbsUp = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>;
+    const buttonThumbsDown = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>;
+    // Replace with your PROJECT_ID
+    const projectId = 'o0spo5x3r6';
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            defineCustomElements(window);
+        }
+    }, []);
+
+    return(
+        <div className="feedback-widget margin-top--md margin-bottom--md">
+            <div className="margin-bottom--sm">
+                <b>Was this helpful?</b>
+            </div>
+            <span class="feedback-widget-positive">
+                <FeedbackButton project={projectId} rating="1" custom-font="True" button-style="default" modal-position="center">
+                    <button className="button button--outline button--primary button--sm" title="Yes">
+                        {buttonThumbsUp}
+                    </button>
+                </FeedbackButton>
+            </span>
+            <span class="feedback-widget-negative margin-left--sm">
+                <FeedbackButton project={projectId} rating="0" custom-font="True" button-style="default" modal-position="center">
+                    <button className="button button--outline button--primary button--sm" title="No">
+                        {buttonThumbsDown}
+                    </button>
+                </FeedbackButton>
+            </span>
+        </div>
+    );
+}
+
+export default function FooterWrapper(props) {
+    return (
+        <>
+        <FeedbackWidget/>
+        <Footer {...props} />
+        </>
+    );
+}

yarn.lock

@@ -2959,6 +2959,11 @@
     p-map "^4.0.0"
     webpack-sources "^3.2.2"
 
+"@stencil/core@^2.13.0":
+  version "2.22.3"
+  resolved "https://registry.yarnpkg.com/@stencil/core/-/core-2.22.3.tgz#83987e20bba855c450f6d6780e3a20192603f13f"
+  integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.5.1":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
@@ -3957,6 +3962,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -4655,6 +4665,13 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz#28beac7c20bad7f1775be3a7129d7eae409a3a71"
   integrity sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.8.1:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
@@ -6197,6 +6214,14 @@ html-webpack-plugin@^5.5.3:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -8651,6 +8676,21 @@ pupa@^3.1.0:
   dependencies:
     escape-goat "^4.0.0"
 
+pushfeedback-react@^0.1.40:
+  version "0.1.40"
+  resolved "https://registry.yarnpkg.com/pushfeedback-react/-/pushfeedback-react-0.1.40.tgz#28e550b4c38d41cd4f244ed89929a8185329a838"
+  integrity sha512-He2ssVfWi4MTRb46+i0gGlV4+CC9NolF+Hb2aZHgm+GqNHtOEd/Hw5IstxmcDUyjlD//Pvtbx+0ZeE4+HEOrxA==
+  dependencies:
+    pushfeedback "^0.1.40"
+
+pushfeedback@^0.1.40:
+  version "0.1.40"
+  resolved "https://registry.yarnpkg.com/pushfeedback/-/pushfeedback-0.1.40.tgz#b287817af79cea68a1f6add75d2bbb85c5032c3a"
+  integrity sha512-ft2+KIZTeFnH7JWOaW0ZmaK2Co5Z0V8NlvtZqaCMIj1wWW3Aa4ylMyPfAtYRQ2mmRyf9O7K4BNhjkORw/1zIuA==
+  dependencies:
+    "@stencil/core" "^2.13.0"
+    html2canvas "^1.4.1"
+
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -9979,6 +10019,13 @@ terser@^5.10.0, terser@^5.15.1, terser@^5.26.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -10390,6 +10437,13 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"