From d4bd999c2622a048846e2379f3c9f39945070656 Mon Sep 17 00:00:00 2001 From: Yevheniia Sorokina Date: Fri, 7 Aug 2026 11:38:00 +0100 Subject: [PATCH 1/5] feat: per-page feedback widget (helpful-rate + comment) and edit-this-page link DocItem/Footer --wrap swizzle appends a 'Was this page helpful?' widget on every doc page. Vote -> docs_page_feedback; free-text comment -> docs_page_feedback_comment (the actionable part). Uses the existing PostHog capture helper; one vote per session; client-only, no new deps. Also enables editUrl so pages get an edit/PR link (repo is private, so useful for contributors with access). Co-Authored-By: Claude Opus 4.8 (1M context) --- docusaurus.config.ts | 1 + src/components/PageFeedback/index.tsx | 114 +++++++++++++++++ src/components/PageFeedback/styles.module.css | 115 ++++++++++++++++++ src/theme/DocItem/Footer/index.tsx | 23 ++++ 4 files changed, 253 insertions(+) create mode 100644 src/components/PageFeedback/index.tsx create mode 100644 src/components/PageFeedback/styles.module.css create mode 100644 src/theme/DocItem/Footer/index.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index db796f49b5..46d035b94d 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -419,6 +419,7 @@ const config: Config = { docs: { routeBasePath: "/", sidebarPath: require.resolve("./sidebars.ts"), + editUrl: "https://github.com/Scandit/data-capture-documentation/edit/main/", remarkPlugins: [remarkHideComments], breadcrumbs: true, admonitions: { diff --git a/src/components/PageFeedback/index.tsx b/src/components/PageFeedback/index.tsx new file mode 100644 index 0000000000..e526760060 --- /dev/null +++ b/src/components/PageFeedback/index.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import { capturePostHogEvent } from '@site/src/components/SkillsCallout/analytics'; +import styles from './styles.module.css'; + +/** + * PageFeedback — the "Was this page helpful?" widget shown at the bottom of + * every doc page (wired in via a DocItem/Footer swizzle). + * + * The vote (👍/👎) feeds the docs helpful-rate KPI. The FREE-TEXT comment is the + * actionable part — the vote just tells us which comments to read first — so the + * comment box is the emphasis once a reader has voted. + * + * Capture goes through the existing PostHog helper (same one search/skills use): + * - `docs_page_feedback` { url, title, helpful } + * - `docs_page_feedback_comment` { url, title, helpful, comment } + * One vote per browser session per page (sessionStorage), so it can't be spammed. + * Runs client-side only and never sends anything except to your own analytics. + */ + +function Inner() { + const permalink = window.location.pathname; + const title = document.title; + const storeKey = `docs-feedback:${permalink}`; + + const [helpful, setHelpful] = React.useState(null); + const [comment, setComment] = React.useState(''); + const [sent, setSent] = React.useState(false); + + React.useEffect(() => { + try { + const prior = window.sessionStorage.getItem(storeKey); + if (prior === 'up' || prior === 'down') setHelpful(prior === 'up'); + } catch { + /* ignore */ + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const base = () => ({ url: permalink, title }); + + const vote = (isHelpful: boolean) => { + setHelpful(isHelpful); + capturePostHogEvent('docs_page_feedback', { ...base(), helpful: isHelpful }); + try { + window.sessionStorage.setItem(storeKey, isHelpful ? 'up' : 'down'); + } catch { + /* ignore */ + } + }; + + const submit = () => { + const c = comment.trim(); + if (!c) return; + capturePostHogEvent('docs_page_feedback_comment', { ...base(), helpful: helpful === true, comment: c }); + setSent(true); + }; + + return ( +