Feat: Adds Feedback Widget to footer of pages.

docusaurus.config.js

@@ -18,6 +18,13 @@ const config = {
   organizationName: 'infinitered', // Usually your GitHub org/user name.
   projectName: 'cookbook', // Usually your repo name.
 
+  scripts: [
+    {
+      src: 'https://app.happyreact.com/widget/reactions.js',
+      defer: true,
+    },
+  ],
+
   i18n: {
     defaultLocale: 'en',
     locales: ['en'],

src/components/Feedback/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import styles from './styles.module.css';
+
+const VotedYes = () => {
+  return <span>Thanks for your feedback! We hope this recipe has been helpful.</span>;
+};
+
+const VotedNo = () => {
+  return <span>Thanks for your feedback. We will update this recipe as soon as we can.</span>;
+};
+
+export default function Feedback({ resource }) {
+  const [reaction, setReaction] = useState(null);
+
+  const isReacted = reaction === 'Yes' || reaction === 'No';
+
+  const handleReaction = (params) => {
+    setReaction(params.icon);
+  };
+
+  useEffect(() => {
+    if (ExecutionEnvironment.canUseDOM) {
+      window.HappyReact.init({
+        onReaction: handleReaction,
+      });
+    }
+  }, []);
+
+  return (
+    <div className={styles.root}>
+      <h3 className={styles.title}>Is this page still up to date? Did it work for you?</h3>
+      {!isReacted ? (
+        <div
+          className={styles.widget}
+          data-hr-token="4ab1ef36-87f3-4637-8c37-a80473d7505a"
+          data-hr-resource={resource}
+          data-hr-styles={JSON.stringify({
+            container: styles.container,
+            grid: styles.grid,
+            cell: styles.cell,
+            reaction: styles.reaction,
+            footer: styles.footer,
+          })}
+        />
+      ) : reaction === 'No' ? (
+        <VotedNo />
+      ) : (
+        <VotedYes />
+      )}
+    </div>
+  );
+}

src/components/Feedback/styles.module.css

@@ -0,0 +1,29 @@
+.root {
+    margin-top: 45px;
+  }
+
+  .widget .grid {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    min-height: 50px;
+  }
+
+  .widget .cell {
+    width: 50px;
+  }
+
+  .widget .reaction {
+    width: 100%;
+    border: black 1px solid;
+  }
+
+  .widget .reaction:hover {
+    border: black 1px solid;
+  }
+
+  .widget .footer {
+    margin-top: 10px;
+    margin-left: 0;
+  }
+

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import LastUpdated from '@theme/LastUpdated';
+import EditThisPage from '@theme/EditThisPage';
+import TagsListInline from '@theme/TagsListInline';
+import Feedback from '@site/src/components/Feedback';
+import styles from './styles.module.css';
+function TagsRow(props) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.docs.docFooterTagsRow,
+        'row margin-bottom--sm',
+      )}>
+      <div className="col">
+        <TagsListInline {...props} />
+      </div>
+    </div>
+  );
+}
+function EditMetaRow({
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+  formattedLastUpdatedAt,
+}) {
+  return (
+    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+export default function DocItemFooter() {
+  const {metadata} = useDoc();
+  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags, unversionedId} =
+    metadata;
+  const canDisplayTagsRow = tags.length > 0;
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+  if (!canDisplayFooter) {
+    return null;
+  }
+  return (
+    <>
+      <Feedback resource={unversionedId} />
+      <footer
+        className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+        {canDisplayTagsRow && <TagsRow tags={tags} />}
+        {canDisplayEditMetaRow && (
+          <EditMetaRow
+            editUrl={editUrl}
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+          />
+        )}
+      </footer>
+    </>
+  );
+}

src/theme/DocItem/Footer/styles.module.css

@@ -0,0 +1,11 @@
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}