feat: adds simpleanalytics and cookie consent (#97)

* feat: adds simpleanalytics and cookie consent

* fix: flashing of consent banner

* feat: change consent banner position

* refactor: remove import

* refactor: css formatting

package.json

@@ -32,7 +32,8 @@
     "sass": "^1.59.3",
     "sass-loader": "^13.2.1",
     "typescript": "^5.0.2",
-    "webpack": "^5.76.3"
+    "webpack": "^5.76.3",
+    "react-cookie": "7.0.2"
   },
   "browserslist": {
     "production": [

src/components/CookieConsent/CookieBanner.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const CookieBanner = ({ onClick }) => {
+  return (
+    <div aria-live="assertive" className="cookie-consent">
+      <div className="cookie-consent__wrapper">
+        <div>
+          This site uses cookies. <br />
+        </div>
+        <button className="cookie-consent__confirm" onClick={onClick}>
+          OK
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CookieBanner;

src/components/CookieConsent/index.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useCookies } from "react-cookie";
+import CookieBanner from "./CookieBanner";
+
+const COOKIES_CONSENT_NAME = "cookie-consent-given";
+const COOKIES_CONSENT_VALUE = 1;
+
+export default function CookiesConsent() {
+  if (typeof window === "undefined") return null;
+  const [cookies, setCookie] = useCookies();
+  const [consentGiven, setIsConsentGiven] = React.useState(
+    cookies?.[COOKIES_CONSENT_NAME] === COOKIES_CONSENT_VALUE
+  );
+
+  return consentGiven ? (
+    <>
+      <script
+        async
+        defer
+        src="https://scripts.simpleanalyticscdn.com/latest.js"
+      ></script>
+      <noscript>
+        <img
+          src="https://queue.simpleanalyticscdn.com/noscript.gif"
+          alt=""
+          referrerPolicy="no-referrer-when-downgrade"
+        />
+      </noscript>
+    </>
+  ) : (
+    <CookieBanner
+      onClick={() => {
+        const yearFromNow = new Date(
+          new Date().setFullYear(new Date().getFullYear() + 1)
+        );
+        setCookie(COOKIES_CONSENT_NAME, COOKIES_CONSENT_VALUE, {
+          expires: yearFromNow,
+        });
+        setIsConsentGiven(true);
+      }}
+    />
+  );
+}

src/css/custom.scss

@@ -127,3 +127,68 @@ h6 {
     height: 15px;
   }
 }
+
+.cookie-consent {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 50;
+  padding: 0 24px 24px 24px;
+}
+
+@media screen and (max-width: 640px) {
+  .cookie-consent {
+    width: 100%;
+    padding: 0 16px 16px 16px;
+  }
+}
+
+.cookie-consent__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  overflow: hidden;
+  padding: 14px;
+  background: var(--ifm-navbar-background-color);
+  border-radius: 12px;
+  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.25);
+  color: var(--ifm-font-color-base);
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.cookie-consent__confirm {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+  border: none;
+  font-weight: 600;
+}
+
+html[data-theme='dark'] .cookie-consent__confirm {
+  background: white;
+  color: rgb(0, 0, 0, 0.8);
+}
+html[data-theme='dark'] .cookie-consent__confirm:hover {
+  background: rgb(255, 255, 255, 0.9);
+}
+html[data-theme='dark'] .cookie-consent__confirm:active {
+  outline: 2px solid rgb(255, 255, 255, 0.6);
+}
+
+html[data-theme='light'] .cookie-consent__confirm {
+  background: black;
+  color: rgb(255, 255, 255);
+}
+html[data-theme='light'] .cookie-consent__confirm:hover {
+  background: rgb(0, 0, 0, 0.8);
+}
+html[data-theme='light'] .cookie-consent__confirm:active {
+  outline: 2px solid rgb(0, 0, 0, 0.6);
+}

src/theme/Root.js

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