Add Amplitude client and custom feedback component

docusaurus.config.js

@@ -8,6 +8,9 @@ module.exports = {
   baseUrl: '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'throw',
+  customFields: {
+    amplitudeApiKey: env('AMPLITUDE_API_KEY', ''),
+  },
   themeConfig: {
     announcementBar: {
       id: 'github_star',

package.json

@@ -17,12 +17,16 @@
     "@docusaurus/plugin-client-redirects": "^2.0.0-beta.8",
     "@docusaurus/preset-classic": "2.0.0-beta.8",
     "@mdx-js/react": "^1.6.21",
+    "amplitude-js": "^8.9.1",
     "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "string.prototype.replaceall": "^1.0.6"
   },
+  "resolutions": {
+    "*/ua-parser-js": "0.7.24"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

src/components/AmplitudeClient.tsx

@@ -0,0 +1,22 @@
+import React, { createContext } from 'react';
+import amplitude, { AmplitudeClient } from 'amplitude-js';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export const AmplitudeContext = createContext<AmplitudeClient | undefined>(undefined);
+
+export function AmplitudeClientProvider (props) {
+    const { siteConfig } = useDocusaurusContext();
+    const apiKey = siteConfig.customFields?.amplitudeApiKey;
+
+    let client = undefined;
+    if (apiKey) {
+        client = amplitude.getInstance()
+        client.init(apiKey);
+    }
+
+    return (
+        <AmplitudeContext.Provider value={client}>
+            {props.children}
+        </AmplitudeContext.Provider>
+    );
+};

src/components/Feedback.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useState } from "react";
+import Link from '@docusaurus/Link';
+import { AmplitudeContext } from '../components/AmplitudeClient';
+
+const DOC_FEEDBACK_EVENT = 'Submit Doc Feedback';
+type FeedbackTypes = 'quality' | 'question';
+
+const submitAmplitudeFeedback = (client: any, feedbackType: FeedbackTypes, docId: string, value: string) => {
+    client?.logEvent(DOC_FEEDBACK_EVENT, { type: feedbackType, value: value } );
+}
+
+export function Feedback(props: { docId: string }) {
+    const amplitudeClient = useContext(AmplitudeContext);
+    const [qualitySubmitted, setQualitySubmitted] = useState(undefined);
+    const [questionSubmitted, setQuestionSubmitted] = useState(false);
+    const [questionInput, setQuestionInput] = useState('');
+
+    const feedbackHandler = (feedbackType: FeedbackTypes, value: string) => {
+        return () => {
+            setQualitySubmitted(value);
+            submitAmplitudeFeedback(amplitudeClient, feedbackType, props.docId, value);
+        };
+    };
+    const questionHandler = () => {
+        setQuestionSubmitted(true);
+        submitAmplitudeFeedback(amplitudeClient, 'question', props.docId, questionInput);
+    };
+
+    return <div>
+        <hr />
+        <p>Was this page helpful?</p>
+        <div className="feedback-button-container">
+            <button className={ `feedback-button ${qualitySubmitted === 'yes' ? 'selected' : ''}` } onClick={feedbackHandler('quality', 'yes')} disabled={qualitySubmitted}>Yes</button>
+            <button className={ `feedback-button ${qualitySubmitted === 'no' ? 'selected' : ''}` } onClick={feedbackHandler('quality', 'no')} disabled={qualitySubmitted}>No</button>
+        </div>
+        {qualitySubmitted &&
+            <div className="feedback-question-section">
+                <br/>
+                <p>
+                    Thanks for your feedback.<br/>
+                    If you have a specific question that you'd like answered, submit it here or join our conversation on <Link to="https://authzed.com/discord">Discord</Link>.
+                </p>
+                <textarea value={questionInput} onChange={event => setQuestionInput(event.target.value)} disabled={questionSubmitted} />
+                <button className="feedback-button" onClick={questionHandler} disabled={questionSubmitted}>{questionSubmitted ? 'Thanks!' : 'Submit'}</button>
+            </div>
+        }
+    </div>;
+}

src/css/custom.css

@@ -124,3 +124,41 @@ table td {
     height: 24px;
     width: 24px;
 }
+
+
+.feedback-button-container {
+  flex: 1;
+}
+
+.feedback-button {
+  padding: 1rem;
+  margin-right: 1rem;
+  min-width: 5rem;
+  color: var(--ifm-color-content-secondary);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background: var(--ifm-background-color);
+  border-radius: var(--ifm-pagination-nav-border-radius);
+  cursor: pointer;
+}
+.feedback-button:hover {
+  background: var(--ifm-background-color);
+  border: 1px solid var(--ifm-link-hover-color);
+}
+.feedback-button:disabled, .feedback-button:disabled:hover {
+  cursor: default;
+  color: var(--ifm-color-content-secondary);
+  background: #ccc;
+  border: 1px solid #ccc;
+}
+.feedback-button.selected {
+  background: var(--ifm-navbar-link-hover-color);
+}
+.feedback-button.selected:hover {
+  background: var(--ifm-navbar-link-hover-color);
+}
+
+.feedback-question-section textarea {
+  width: 100%;
+  height: 4rem;
+  margin-bottom: 1rem;
+}

src/theme/DocItemFooter.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import OriginalDocItemFooter from '@theme-original/DocItemFooter';
+import { Props as DocProps } from '@docusaurus/plugin-content-docs';
+import { Feedback } from '../components/Feedback';
+
+export default function DocItemFooter(props: DocProps) {
+  const { metadata } = props.content;
+  const docId = metadata.id;
+
+  return (
+    <>
+      <OriginalDocItemFooter {...props} />
+      <Feedback docId={docId} />
+    </>
+  );
+}

src/theme/Root.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AmplitudeClientProvider } from '../components/AmplitudeClient';
+
+export default function Root({ children }) {
+  return (
+    <AmplitudeClientProvider>
+      {children}
+    </AmplitudeClientProvider>
+  );
+};

yarn.lock

@@ -229,6 +229,24 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
+"@amplitude/types@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/types/-/types-1.9.0.tgz#cb578e435a1635eef30670ff2b8c6250e9d031f4"
+  integrity sha512-/uVOkAla90Kt2OtwtwZ1ENWkzJLBg6p6tYInr32qRgSHJSsoqpGBf6Oc/u1mRZyyVB2Ne/JIo/FYTFHLv1kt6A==
+
+"@amplitude/[email protected]":
+  version "0.7.25"
+  resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.25.tgz#ccbeb0bd24fca3759cfc09a3b9ba95a23ea32756"
+  integrity sha512-AUeO9T6vLkUNw0iYxchFBw3FylJAMv5g2sPUsS5XCulAP3TpZg9Y/QESOl+oCLGqTQYumUJZHfoQBemN22eghw==
+
+"@amplitude/utils@^1.0.5":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@amplitude/utils/-/utils-1.9.0.tgz#90068be1530aa0f532ebc9eaf9f192d91064bce5"
+  integrity sha512-RSh3ieP2+X37ZkpEN0MpJ6XxsQ1AbxVpbGU1R5wbrIq3Wlg3uv1q/JJddfyaFdoM55CsW4SrzqiwAD9T2WAI4w==
+  dependencies:
+    "@amplitude/types" "^1.9.0"
+    tslib "^1.9.3"
+
 "@babel/[email protected]":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -2628,6 +2646,16 @@ alphanum-sort@^1.0.2:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+amplitude-js@^8.9.1:
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/amplitude-js/-/amplitude-js-8.9.1.tgz#b30a16bb0fcd83c17207ae5f63e671f9b404beba"
+  integrity sha512-k5NMUEgXXseN7Cl4oLm0Xnq4P5R9Rlz1nbvjRsUqTUj/Ihs+S+3sy5aRWBJsfvxjKyOmDMrclMilgra8Sp6MZQ==
+  dependencies:
+    "@amplitude/ua-parser-js" "0.7.25"
+    "@amplitude/utils" "^1.0.5"
+    blueimp-md5 "^2.10.0"
+    query-string "5"
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -2940,6 +2968,11 @@ bluebird@^3.7.1:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+blueimp-md5@^2.10.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
+  integrity sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==
+
 [email protected]:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -7489,6 +7522,15 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+query-string@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
+  integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
@@ -8595,6 +8637,11 @@ std-env@^2.2.1:
   dependencies:
     ci-info "^1.6.0"
 
+strict-uri-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
+
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -8934,7 +8981,7 @@ ts-essentials@^2.0.3:
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
   integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
 
-tslib@^1.9.0:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==