From 398cc47b6976fcc61c009bc1f8dbb47a1a27e305 Mon Sep 17 00:00:00 2001 From: Dan Barr <6922515+danbarr@users.noreply.github.com> Date: Tue, 30 Sep 2025 19:37:12 -0400 Subject: [PATCH] Add feedback widget Signed-off-by: Dan Barr <6922515+danbarr@users.noreply.github.com> --- docusaurus.config.ts | 10 +++ package-lock.json | 42 +++++++++ package.json | 2 + src/css/custom.css | 4 + src/theme/DocItem/Footer/index.tsx | 132 +++++++++++++++++++++++++++++ 5 files changed, 190 insertions(+) create mode 100644 src/theme/DocItem/Footer/index.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c828f750..820ac595 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -19,6 +19,16 @@ const config: Config = { debug: false, }, ], + [ + 'docusaurus-pushfeedback', + { + project: '8lp399irfx', + buttonStyle: 'dark', + buttonPosition: 'bottom-right', + modalPosition: 'bottom-right', + customFont: true, + }, + ], [ './plugins/mcp-metadata-plugin', { diff --git a/package-lock.json b/package-lock.json index 81e5d5b1..a1e4a2c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,10 @@ "@mdx-js/react": "^3.1.1", "clsx": "^2.1.1", "docusaurus-json-schema-plugin": "1.15.0", + "docusaurus-pushfeedback": "^1.0.9", "glob": "^11.0.3", "prism-react-renderer": "^2.4.1", + "pushfeedback-react": "^0.1.76", "react": "^19.1.1", "react-dom": "^19.1.1", "redocusaurus": "2.5.0" @@ -5180,6 +5182,19 @@ "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", "license": "MIT" }, + "node_modules/@stencil/core": { + "version": "2.22.3", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz", + "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=12.10.0", + "npm": ">=6.0.0" + } + }, "node_modules/@stoplight/json": { "version": "3.21.7", "resolved": "https://registry.npmjs.org/@stoplight/json/-/json-3.21.7.tgz", @@ -9935,6 +9950,15 @@ "@docusaurus/utils": "^3.6.0" } }, + "node_modules/docusaurus-pushfeedback": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/docusaurus-pushfeedback/-/docusaurus-pushfeedback-1.0.9.tgz", + "integrity": "sha512-StGUlkRUHwYiswxBK06FtfwgTE2xDVwEoxFnIF6yifb/85rjrBo6GlmZLxnESekSrjH33RxIM3VBJQAPe7yuNg==", + "license": "MIT", + "peerDependencies": { + "@docusaurus/core": "3.x" + } + }, "node_modules/docusaurus-theme-redoc": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/docusaurus-theme-redoc/-/docusaurus-theme-redoc-2.5.0.tgz", @@ -19974,6 +19998,24 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pushfeedback": { + "version": "0.1.76", + "resolved": "https://registry.npmjs.org/pushfeedback/-/pushfeedback-0.1.76.tgz", + "integrity": "sha512-EP5IqnfnSgoT/faR4bMF/nIoy1n7RlOQGZUTar5+Y+BGU5J+mBUTbOpn5ODEgm19tWC4cFVmfL21mXKmFFvqlA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^2.13.0" + } + }, + "node_modules/pushfeedback-react": { + "version": "0.1.76", + "resolved": "https://registry.npmjs.org/pushfeedback-react/-/pushfeedback-react-0.1.76.tgz", + "integrity": "sha512-en+Cm2CNWPOp5BCmsg0ANuuB40MQdd83/mdyXRZ+jVV+mngdL2Zvn3y7x6q3AcZXlE4Q7504oILjrv9jL7V9PQ==", + "license": "ISC", + "dependencies": { + "pushfeedback": "^0.1.76" + } + }, "node_modules/qs": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", diff --git a/package.json b/package.json index 1eb50f5c..41993244 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,10 @@ "@mdx-js/react": "^3.1.1", "clsx": "^2.1.1", "docusaurus-json-schema-plugin": "1.15.0", + "docusaurus-pushfeedback": "^1.0.9", "glob": "^11.0.3", "prism-react-renderer": "^2.4.1", + "pushfeedback-react": "^0.1.76", "react": "^19.1.1", "react-dom": "^19.1.1", "redocusaurus": "2.5.0" diff --git a/src/css/custom.css b/src/css/custom.css index af1cd338..b797f71a 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -47,6 +47,8 @@ --ifm-color-primary-lightest: #340cd7; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%); + + --feedback-primary-color: var(--ifm-color-primary) !important; } /* Overrides for dark mode. */ @@ -77,6 +79,8 @@ html[data-theme='dark'] { --ifm-color-primary-lighter: #b3d6ff; --ifm-color-primary-lightest: #ebf4ff; --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%); + + --feedback-primary-color: var(--ifm-color-primary-darker) !important; } thead th { diff --git a/src/theme/DocItem/Footer/index.tsx b/src/theme/DocItem/Footer/index.tsx new file mode 100644 index 00000000..80e6c9ba --- /dev/null +++ b/src/theme/DocItem/Footer/index.tsx @@ -0,0 +1,132 @@ +import React, { type ReactNode, useState } from 'react'; +import Footer from '@theme-original/DocItem/Footer'; +import type FooterType from '@theme/DocItem/Footer'; +import type { WrapperProps } from '@docusaurus/types'; + +import { FeedbackButton } from 'pushfeedback-react'; +import 'pushfeedback/dist/pushfeedback/pushfeedback.css'; + +type Props = WrapperProps; + +function FeedbackWidget(): React.JSX.Element { + const [selected, setSelected] = useState(null); // Track the selected button + + const buttonThumbsUp = ( + + + + ); + + const buttonThumbsDown = ( + + + + ); + + // Replace with your PROJECT_ID + const projectId: string = '8lp399irfx'; + + const handleButtonClick = (rating: string): void => { + setSelected(rating); + }; + + return ( +
+
+ Was this helpful? +
+ + + + + + + + + + + + {/* Style Block for Button Hover */} + +
+ ); +} + +export default function FooterWrapper(props: Props): ReactNode { + return ( + <> + +