microsite: add feedback button to docs

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

microsite/README.md

@@ -233,3 +233,9 @@ Full documentation can be found on the [Docusaurus website](https://docusaurus.i
     - `highlight-remove-next-line`
     - `highlight-remove-start`
     - `highlight-remove-end`
+
+## Feedback widget
+
+A feedback widget is provided by the `docusaurus-pushfeedback` plugin, which connects to the https://pushfeedback.com service. Styling of the button is configured in `microsite/src/theme/customTheme.scss`, while the plugin itself is configured in `microsite/docusaurus.config.js`.
+
+Feedback submissions are connected to an account owned by @Rugvip and are available on request, reach out to @Rugvip on [Discord](https://discord.gg/backstage-687207715902193673).

microsite/docusaurus.config.js

@@ -163,6 +163,15 @@ module.exports = {
         ],
       },
     ],
+    [
+      'docusaurus-pushfeedback',
+      {
+        project: 'q8w1i6cair',
+        hideIcon: true,
+        customFont: true,
+        buttonStyle: 'dark',
+      },
+    ],
   ],
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */

microsite/package.json

@@ -1,21 +1,37 @@
 {
-  "version": "0.0.0",
   "name": "backstage-microsite",
-  "license": "Apache-2.0",
+  "version": "0.0.0",
   "private": true,
+  "license": "Apache-2.0",
   "scripts": {
-    "start": "node scripts/pre-build.js && docusaurus start",
     "build": "node scripts/pre-build.js && docusaurus build",
-    "prettier:fix": "prettier --write .",
-    "prettier:check": "prettier --check .",
-    "publish-gh-pages": "docusaurus-publish",
-    "write-translations": "docusaurus-write-translations",
-    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version",
-    "verify:sidebars": "node ./scripts/verify-sidebars",
-    "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
-    "docusaurus": "docusaurus"
+    "docusaurus": "docusaurus",
+    "prettier:check": "prettier --check .",
+    "prettier:fix": "prettier --write .",
+    "publish-gh-pages": "docusaurus-publish",
+    "rename-version": "docusaurus-rename-version",
+    "start": "node scripts/pre-build.js && docusaurus start",
+    "swizzle": "docusaurus swizzle",
+    "verify:sidebars": "node ./scripts/verify-sidebars",
+    "version": "docusaurus-version",
+    "write-translations": "docusaurus-write-translations"
+  },
+  "prettier": "@spotify/prettier-config",
+  "dependencies": {
+    "@docusaurus/core": "^3.1.1",
+    "@docusaurus/plugin-client-redirects": "^3.1.1",
+    "@docusaurus/preset-classic": "^3.1.1",
+    "@swc/core": "^1.3.46",
+    "clsx": "^2.0.0",
+    "docusaurus-plugin-sass": "^0.2.3",
+    "docusaurus-pushfeedback": "^1.0.0",
+    "luxon": "^3.0.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sass": "^1.57.1",
+    "swc-loader": "^0.2.3"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.1.1",
@@ -27,20 +43,5 @@
     "prettier": "^2.6.2",
     "typescript": "~5.1.0",
     "yaml-loader": "^0.8.0"
-  },
-  "prettier": "@spotify/prettier-config",
-  "dependencies": {
-    "@docusaurus/core": "^3.1.1",
-    "@docusaurus/plugin-client-redirects": "^3.1.1",
-    "@docusaurus/preset-classic": "^3.1.1",
-    "@swc/core": "^1.3.46",
-    "clsx": "^2.0.0",
-    "docusaurus-plugin-sass": "^0.2.3",
-    "luxon": "^3.0.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "^1.57.1",
-    "swc-loader": "^0.2.3"
   }
 }

microsite/src/theme/customTheme.scss

@@ -121,3 +121,26 @@
 }
 
 /* #endregion */
+
+/* For the docusaurus-pushfeedback plugin */
+:root {
+  --feedback-primary-color: var(--ifm-color-primary);
+  --feedback-button-dark-text-color: var(--ifm-color-black);
+
+  --feedback-modal-button-submit-bg-color: var(--ifm-color-primary);
+  --feedback-modal-button-submit-bg-color-hover: var(--ifm-color-primary-dark);
+
+  --feedback-modal-button-submit-text-color: var(--ifm-color-black);
+  --feedback-modal-button-submit-text-color-hover: var(--ifm-color-black);
+
+  --feedback-button-text-font-size: 1rem;
+  --feedback-button-text-font-weight: 600;
+}
+
+/* Hide feedback button unless we're in docs */
+feedback-button {
+  display: none;
+}
+html.plugin-docs feedback-button {
+  display: initial;
+}

microsite/yarn.lock

@@ -3862,6 +3862,7 @@ __metadata:
     "@types/webpack-env": ^1.18.0
     clsx: ^2.0.0
     docusaurus-plugin-sass: ^0.2.3
+    docusaurus-pushfeedback: ^1.0.0
     js-yaml: ^4.1.0
     luxon: ^3.0.0
     prettier: ^2.6.2
@@ -5115,6 +5116,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"docusaurus-pushfeedback@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "docusaurus-pushfeedback@npm:1.0.0"
+  peerDependencies:
+    "@docusaurus/core": 3.x
+  checksum: 5f119fac4b18198ecab7ca3892b8d19ea21c1f4147b7500de0f2a341651630ff090e38ac4984e33d87729f1b00d621ae8945efe2a2ea37b9a74b76c7f468f21e
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"