feat: attach Feedback SDK widget (#364)

lukeed · web-flow · commit 82ebb5992f59 · 2021-10-29T08:05:08.000-07:00
* chore: add feedback widget to docs-page layout

* feat: add feedback btn to toolbar

* fix: emit custom "theme" event for feedback
diff --git a/src/components/docs-page.js b/src/components/docs-page.js
@@ -41,6 +41,9 @@ const DocsPage = ({ pageContext: page, children, location }) => {
 
       <Helmet>
         <html is-docs-page="" {...disableSearchProps}/>
+        <script data-source="docs" async defer src="https://feedback.developers.cloudflare.com/sdk.js"></script>
+        <link rel="preload" href="https://feedback.developers.cloudflare.com/sdk.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
+        <noscript>{'<link rel="stylesheet" href="https://feedback.developers.cloudflare.com/sdk.css"/>'}</noscript>
       </Helmet>
 
       <HandleMobilePageNavigations/>
diff --git a/src/components/docs-toolbar.js b/src/components/docs-toolbar.js
@@ -17,6 +17,16 @@ const DocsToolbar = () => {
       </div>
 
       <div className="DocsToolbar--tools">
+        <button data-feedback className="DocsToolbar--feedback Button Button-is-docs-secondary">
+          <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17">
+            <path d="M14 2.5H2l-.5.5v11.165l.863.345 2.852-3.01H14l.5-.5V3l-.5-.5Zm-.5 8H4.785L2.5 12.911V3.5h11v7Z" fill="currentColor"></path>
+            <path d="M12.5 5.003h-9v1h9v-1ZM12.5 7.5h-9v1h9v-1Z" fill="currentColor"></path>
+          </svg>
+          Give Feedback
+        </button>
+
+        <div className="DocsToolbar--tools-spacer"/>
+
         <div className="DocsToolbar--tools-icon-item">
           <div className="Tooltip---root">
             <div className="DocsToolbar--tools-icon-item-content">
diff --git a/src/components/theme-toggle.js b/src/components/theme-toggle.js
@@ -68,10 +68,24 @@ const setTheme = theme => {
 }
 
 const storeTheme = theme => {
-  localStorage.theme = JSON.stringify({
-    theme: theme,
-    updated: +new Date()
-  })
+  try {
+    document.dispatchEvent(
+      new CustomEvent('theme', {
+        detail: theme === 'dark'
+      })
+    )
+  } catch (err) {
+    // ignore
+  }
+
+  try {
+    localStorage.theme = JSON.stringify({
+      theme: theme,
+      updated: +new Date()
+    })
+  } catch (err) {
+    // safari may throw SecurityError
+  }
 }
 
 class ThemeToggle extends React.Component {
diff --git a/src/css/docs/components/docs-toolbar.css b/src/css/docs/components/docs-toolbar.css
@@ -18,6 +18,18 @@
   visibility: hidden;
 }
 
+.DocsToolbar--feedback {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+}
+
+.DocsToolbar--feedback svg {
+  width: 1em;
+  margin-right: 0.5em;
+  height: 1em;
+}
+
 .DocsToolbar--tools {
   display: flex;
   align-items: center;
@@ -70,6 +82,7 @@
     max-width: 100vw;
   }
 
+  .DocsToolbar--feedback,
   .DocsToolbar--tools-spacer,
   .DocsToolbar--tools-icon-item {
     display: none;
