From 99c24a018c258afe434150e304973dd39df16274 Mon Sep 17 00:00:00 2001 From: RutvikGhaskataEalf Date: Tue, 17 Dec 2024 21:24:34 +0530 Subject: [PATCH 1/4] feat: added feedback section for each page --- package-lock.json | 28 ++++++++--- package.json | 1 + src/css/custom.css | 37 ++++++++++++++ src/theme/DocPaginator/index.tsx | 50 +++++++++++++++++++ src/theme/Feedback/index.tsx | 85 ++++++++++++++++++++++++++++++++ 5 files changed, 195 insertions(+), 6 deletions(-) create mode 100644 src/theme/DocPaginator/index.tsx create mode 100644 src/theme/Feedback/index.tsx diff --git a/package-lock.json b/package-lock.json index e7248605..f06121da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,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", @@ -2732,6 +2733,27 @@ "node": ">=18.0" } }, + "node_modules/@feelback/js": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@feelback/js/-/js-0.3.4.tgz", + "integrity": "sha512-xr7gTqSJcVUYQlELs1TntYovCBjMcYUr/hGKTnDoF64/lig5CbX4bOmqLoF50IImCy5q3oIwg9w+TSFvtBwsIA==", + "license": "MIT" + }, + "node_modules/@feelback/react": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@feelback/react/-/react-0.3.4.tgz", + "integrity": "sha512-ZWzUQAmPwl4nYR2olzBKddHzoLtGW/2pb8TiesiJCirxhaDW2E/XBx2ZaB4fL5TGXtjBt4eYq/qZxJZ0fIE0kg==", + "license": "MIT", + "dependencies": { + "@feelback/js": "0.3.4" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=17" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -6123,12 +6145,6 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, - "node_modules/express/node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", - "license": "MIT" - }, "node_modules/express/node_modules/range-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", diff --git a/package.json b/package.json index cb26fa0a..f7d3661c 100644 --- a/package.json +++ b/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", diff --git a/src/css/custom.css b/src/css/custom.css index e65fc459..3e33d61d 100644 --- a/src/css/custom.css +++ b/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; } \ No newline at end of file diff --git a/src/theme/DocPaginator/index.tsx b/src/theme/DocPaginator/index.tsx new file mode 100644 index 00000000..fab1cadf --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/theme/Feedback/index.tsx b/src/theme/Feedback/index.tsx new file mode 100644 index 00000000..29d3add2 --- /dev/null +++ b/src/theme/Feedback/index.tsx @@ -0,0 +1,85 @@ +import { useState } from "react"; +import { + FeelbackTaggedMessage, + Question, + PRESET_YESNO_LIKE_DISLIKE, +} from "@feelback/react"; + +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_CONTENT_SET_ID = "d069bd2e-19d3-405c-9198-a8f005883f6b"; + +const Feedback = () => { + const [choice, setChoice] = useState<"y" | "n">(); + + return ( +
+
+ {!choice ? ( + setChoice(option)} + /> + ) : ( + + )} +
+
+ ); +}; + +export default Feedback; From 994120db5b083c006bcfec66dae450d1e970b7b7 Mon Sep 17 00:00:00 2001 From: RutvikGhaskataEalf Date: Wed, 18 Dec 2024 08:36:15 +0530 Subject: [PATCH 2/4] fix: update content set id --- src/theme/Feedback/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/Feedback/index.tsx b/src/theme/Feedback/index.tsx index 29d3add2..5248f7f4 100644 --- a/src/theme/Feedback/index.tsx +++ b/src/theme/Feedback/index.tsx @@ -53,7 +53,7 @@ const NO_TAGS = [ { value: "other-no", title: "Another reason" }, ]; -const FEEDBACK_CONTENT_SET_ID = "d069bd2e-19d3-405c-9198-a8f005883f6b"; +const FEEDBACK_CONTENT_SET_ID = "ef48ea6a-517e-47dc-b390-c083ecf3b99e"; const Feedback = () => { const [choice, setChoice] = useState<"y" | "n">(); From dbd1652af4a219beae3ec40edc13a491402dc263 Mon Sep 17 00:00:00 2001 From: RutvikGhaskataEalf Date: Wed, 18 Dec 2024 22:27:12 +0530 Subject: [PATCH 3/4] fix: added environment variables --- .env.example | 3 ++- docusaurus.config.ts | 3 +++ src/theme/Feedback/index.tsx | 7 ++++--- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.env.example b/.env.example index 546b735a..c454bbb7 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,4 @@ TYPESENSE_COLLECTION_NAME= TYPESENSE_SERVER_HOST= -TYPESENSE_SEARCH_ONLY_APIKEY= \ No newline at end of file +TYPESENSE_SEARCH_ONLY_APIKEY= +FEEDBACK_CONTENT_SET_ID= \ No newline at end of file diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f3880a9c..b843d27d 100644 --- a/docusaurus.config.ts +++ b/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", diff --git a/src/theme/Feedback/index.tsx b/src/theme/Feedback/index.tsx index 5248f7f4..28f3e714 100644 --- a/src/theme/Feedback/index.tsx +++ b/src/theme/Feedback/index.tsx @@ -4,6 +4,7 @@ import { Question, PRESET_YESNO_LIKE_DISLIKE, } from "@feelback/react"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; const YES_TAGS = [ { @@ -53,10 +54,10 @@ const NO_TAGS = [ { value: "other-no", title: "Another reason" }, ]; -const FEEDBACK_CONTENT_SET_ID = "ef48ea6a-517e-47dc-b390-c083ecf3b99e"; - const Feedback = () => { const [choice, setChoice] = useState<"y" | "n">(); + const { siteConfig } = useDocusaurusContext(); + const { FEEDBACK_CONTENT_SET_ID } = siteConfig.customFields; return (
@@ -70,7 +71,7 @@ const Feedback = () => { /> ) : ( Date: Thu, 19 Dec 2024 08:54:59 +0530 Subject: [PATCH 4/4] fix: removed typesense from env --- .env.example | 3 --- .github/workflows/pr.yml | 4 +--- .github/workflows/s3.yml | 4 +--- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/.env.example b/.env.example index c454bbb7..40d71246 100644 --- a/.env.example +++ b/.env.example @@ -1,4 +1 @@ -TYPESENSE_COLLECTION_NAME= -TYPESENSE_SERVER_HOST= -TYPESENSE_SEARCH_ONLY_APIKEY= FEEDBACK_CONTENT_SET_ID= \ No newline at end of file diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 7cb6b686..3b91792e 100644 --- a/.github/workflows/pr.yml +++ b/.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 \ No newline at end of file diff --git a/.github/workflows/s3.yml b/.github/workflows/s3.yml index 0caaa199..cd983e40 100644 --- a/.github/workflows/s3.yml +++ b/.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