Add cookie consent banner (#155)

* Add `react-cookie-consent`

* Add cookie consent banner

* Revise code for responding to cookie consent

* Revise code for responding to cookie consent

* Add link to cookie policy

* Create index.mdx

* Create index.mdx

Author: josh-wong

package-lock.json

@@ -32,6 +32,7 @@
     "docusaurus-theme-github-codeblock": "^2.0.2",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
+    "react-cookie-consent": "9.0.0",
     "react-dom": "^18.0.0",
     "three": "^0.168.0"
   },

package.json

@@ -0,0 +1,28 @@
+# Cookie policy
+
+This website, 080f53.com, uses cookies to improve your experience, enhance the functionality of my website, and personalize content. Cookies are small text files stored on your device by my website.
+
+I use Microsoft Clarity and Google Tag Manager cookies for the following purposes:
+
+- **Necessary cookies:** These cookies are essential for you to navigate my website and access its basic features.
+- **Performance cookies:** These cookies help me understand how visitors interact with my content, which improves my ability to create relevant and engaging blog posts, projects, and updates.
+- **Functionality cookies:** These cookies enable features like commenting, social sharing, and form submissions on my website.
+
+## Consent
+
+By visiting or using this website, you consent to the use of cookies by me.
+
+If you do not consent to my use of cookies, please [contact me](/about#contact) to disable them.
+
+Cookies typically stay active for a limited time, usually until you close your browser or delete the cookie. However, some cookies may remain active for longer periods, such as:
+
+- **Session cookies:** These are deleted when you close your browser.
+- **Persistent cookies:** These remain active for a set period of time (usually up to 1 year).
+
+## Changes to cookie policy
+
+I reserve the right to update this cookie policy at any time. Changes will be effective immediately upon posting.
+
+## Contact me
+
+If you have any questions about my cookie policy or consent, please [contact me](/about#contact).

src/pages/cookies/index.mdx

@@ -1,10 +1,57 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Clarity from '@microsoft/clarity';
+import CookieConsent from "react-cookie-consent";
 
-const projectId = "p9179dcazx"
-Clarity.init(projectId);
+// Initialize Clarity with the given project ID
+const projectId = "p9179dcazx";
 
-// Default implementation, that you can customize
-export default function Root({children}) {
-  return <>{children}</>;
+export default function Root({ children }) {
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      // Initialize Clarity only on the client-side
+      Clarity.init(projectId);
+
+      // Add an event listener for the consent event
+      window.addEventListener("CookieConsent", () => {
+        if (window.clarity) {
+          window.clarity('consent');
+          console.log("Clarity consent event triggered.");
+        }
+      });
+    }
+  }, []);
+
+  const handleConsentAccept = () => {
+    // Dispatch a custom "CookieConsent" event when the user accepts cookies
+    const consentEvent = new Event("CookieConsent");
+    window.dispatchEvent(consentEvent);
+    console.log("CookieConsent event dispatched.");
+  };
+
+  return (
+    <>
+      {children}
+      <div>
+        <CookieConsent
+          location="bottom"
+          buttonText="I understand"
+          style={{
+            backgroundColor: "#080f53",
+            padding: "20px",
+          }}
+          buttonStyle={{
+            backgroundColor: "#fff",
+            color: "#000",
+            fontWeight: "500",
+            fontFamily:
+              "system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+          }}
+          expires={150}
+          onAccept={handleConsentAccept}
+        >
+          This website uses cookies to enhance the user experience. By continuing to use this website, you acknowledge that you have read and understood the <a href="/cookies">cookie policy</a> and consent to the use of cookies to improve your browsing experience, personalize content, and analyze website traffic.
+        </CookieConsent>
+      </div>
+    </>
+  );
 }