feat: Website and docusaurus telemetry: cookie consent

docs/.gitignore

@@ -18,5 +18,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 .vercel

docs/package.json

@@ -44,5 +44,8 @@
     "@types/react-router-dom": "^5.1.7",
     "http-proxy-middleware": "^1.0.6",
     "typescript": "^4.1.5"
+  },
+  "prettier": {
+    "singleQuote": false
   }
 }

docs/src/components/CookieConsent.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { getCookie, setCookie } from "../lib/helpers";
+
+const CookieConsent = () => {
+  const COOKIE_CONSENT_NAME = "COOKIE_CONSENT_NAME";
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (getCookie(COOKIE_CONSENT_NAME) === "true") {
+      setVisible(false);
+    } else {
+      setVisible(true);
+    }
+  }, [visible]);
+
+  const handleAccept = () => {
+    setCookie(COOKIE_CONSENT_NAME, "true", 7);
+    setVisible(false);
+  };
+
+  return (
+    visible && (
+      <div className="cookie-consent">
+        <div className="container">
+          <div className="cookie-consent-wrapper">
+            <div className="cookie-consent-info">
+              We use cookies to enhance your experience, analyze our traffic,
+              and for security and marketing. By visiting our website you agree
+              to our use of cookies.{" "}
+              <strong>
+                <a href="/privacy">
+                  *Read more about cookies*
+                </a>
+              </strong>
+            </div>
+            <div className="cookie-consent-action">
+              <button
+                className="cookie-consent-button"
+                onClick={handleAccept}
+              >
+                I Accept
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default CookieConsent;

docs/src/css/custom.css

@@ -24,15 +24,21 @@
   --ifm-color-gray-500: rgb(68, 68, 68);
   --ifm-color-gray-600: rgb(42, 42, 42);
   --ifm-pre-background: var(--ifm-color-dark-600);
+  --ifm-cookie-consent-background: #fff;
+  --ifm-cookie-consent-border: rgba(0, 0, 0, 0.1);
+  --ifm-cookie-consent-color: #242424;
 }
 
-html[data-theme='dark'] .footer {
+html[data-theme="dark"] .footer {
   --ifm-footer-background-color: var(--ifm-color-dark-600);
   --ifm-footer-link-color: var(--ifm-color-dark-500);
 }
 
-html[data-theme='dark'] :root {
+html[data-theme="dark"] {
   --ifm-code-background: var(--ifm-color-gray-600);
+  --ifm-cookie-consent-background: #2a2a2a;
+  --ifm-cookie-consent-border: #343434;
+  --ifm-cookie-consent-color: #fff;
 }
 
 .footer {
@@ -48,7 +54,7 @@ html[data-theme='dark'] :root {
   font-weight: lighter;
 }
 
-html[dark-theme='light'] .footer__copyright {
+html[dark-theme="light"] .footer__copyright {
   color: var(--ifm-color-gray-500);
 }
 
@@ -63,29 +69,96 @@ div.footer {
   padding: 0 var(--ifm-pre-padding);
 }
 
-div[class^='announcementBar_'] {
+div[class^="announcementBar_"] {
   --site-announcement-bar-stripe-color1: hsl(
-          var(--site-primary-hue-saturation),
-          85%
+    var(--site-primary-hue-saturation),
+    85%
   );
   --site-announcement-bar-stripe-color2: hsl(
-          var(--site-primary-hue-saturation),
-          95%
+    var(--site-primary-hue-saturation),
+    95%
   );
-  background-color: #20BEB6;
+  background-color: #20beb6;
   color: rgb(253, 253, 253);
   font-weight: bold;
 }
 
-[class^='announcementBar'] .close {
+[class^="announcementBar"] .close {
   color: rgb(253, 253, 253);
   opacity: 0.9;
 }
 
-a[class^='footerLogoLink'] {
+a[class^="footerLogoLink"] {
   opacity: 0.9;
 }
 
-.navbar {
+.cookie-consent {
+  background-color: var(--ifm-cookie-consent-background);
+  position: sticky;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 50;
+  border-top: 1px solid var(--ifm-cookie-consent-border);
+}
+
+.cookie-consent-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0.75rem auto;
+  gap: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-left: 1rem;
+  padding-right: 3.5rem;
+  max-width: 56rem;
+}
 
-}
+.cookie-consent-info,
+.cookie-consent-action {
+  width: 100%;
+}
+
+.cookie-consent-button {
+  color: var(--ifm-color-white);
+  background-color: var(--ifm-color-primary-dark);
+  font-weight: 700;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.5rem 0.75rem;
+  display: inline-flex;
+  position: relative;
+  border-radius: 0.25rem;
+  align-items: center;
+  border-color: transparent;
+  transition-property: background-color, border-color, color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter,
+    -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  cursor: pointer;
+}
+
+.cookie-consent-button:hover,
+.cookie-consent-button:focus {
+  background-color: var(--ifm-color-primary-darkest);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+@media (min-width: 1280px) {
+  .cookie-consent-info,
+  .cookie-consent-action {
+    width: auto;
+  }
+
+  .cookie-consent-info {
+    flex: 1 1 0%;
+  }
+
+  .cookie-consent-wrapper {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}

docs/src/lib/helpers.ts

@@ -0,0 +1,34 @@
+export function setCookie(name: string, value: string, days: number) {
+  let expires = ""
+
+  if (days) {
+    const date = new Date()
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+    expires = "; expires=" + date.toUTCString()
+  }
+
+  document.cookie =
+    name + "=" + (value || "") + expires + "; Path=/; SameSite=Strict;"
+}
+
+export function getCookie(name: string) {
+  const nameEQ = name + "="
+  const ca = document.cookie.split(";")
+
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) === " ") {
+      c = c.substring(1, c.length)
+    }
+    if (c.indexOf(nameEQ) === 0) {
+      return c.substring(nameEQ.length, c.length)
+    }
+  }
+
+  return undefined
+}
+
+export function removeCookie(name: string) {
+  document.cookie =
+    name + "=; Path=/; SameSite=Strict; Expires=Thu, 01 Jan 1970 00:00:01 GMT;"
+}

docs/src/pages/index.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
-import Head from '@docusaurus/Head';
-import { Redirect } from '@docusaurus/router';
+import React from "react";
+import { Redirect } from "@docusaurus/router";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
 const Home = () => {
-    return <Redirect to={useBaseUrl('/getting_started/synth')} />;
+  return <Redirect to={useBaseUrl("/getting_started/synth")} />;
 };
 
 export default Home;

docs/src/theme/Root.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import CookieConsent from "../components/CookieConsent";
+
+function Root({ children }) {
+  return (
+    <>
+      {children}
+      <CookieConsent />
+    </>
+  );
+}
+
+export default Root;

www/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

www/.gitignore

@@ -1 +1,4 @@
 .vercel
+.next
+node_modules
+yarn.lock

www/components/CookieConsent.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { getCookie, setCookie } from "../lib/helpers"
+
+const CookieConsent = () => {
+  const COOKIE_CONSENT_NAME = "COOKIE_CONSENT_NAME"
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (getCookie(COOKIE_CONSENT_NAME) === "true") {
+      setVisible(false)
+    } else {
+      setVisible(true)
+    }
+  }, [visible])
+
+  const handleAccept = () => {
+    setCookie(COOKIE_CONSENT_NAME, "true", 7)
+    setVisible(false)
+  }
+
+  return (
+    visible && (
+      <div className="sticky left-0 bottom-0 w-full z-50 bg-dark-600 border-t border-dark-500">
+        <div className="container max-w-4xl mx-auto">
+          <div className="flex flex-wrap items-center py-3 gap-5 text-sm px-10 xl:px-20">
+            <div className="w-full xl:flex-1 xl:w-auto">
+              We use cookies to enhance your experience, analyze our traffic,
+              and for security and marketing. By visiting our website you agree
+              to our use of cookies.{" "}
+              <strong>
+                <Link href="/privacy">
+                  <a className="text-accent-1">*Read more about cookies*</a>
+                </Link>
+              </strong>
+            </div>
+            <div className="w-full xl:w-auto">
+              <button
+                className="text-white bg-brand-600 hover:bg-brand-400 font-bold py-2 px-3 text-sm focus:outline-none relative inline-flex items-center rounded border-transparent transition"
+                onClick={handleAccept}
+              >
+                I Accept
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  )
+}
+
+export default CookieConsent