Added cookies

documentation/package.json

@@ -27,6 +27,7 @@
         "posthog-docusaurus": "^2.0.2",
         "prism-react-renderer": "^2.4.1",
         "react": "^18.3.1",
+        "react-cookie-consent": "^9.0.0",
         "react-dom": "^18.3.1",
         "react-player": "^2.16.0",
         "reactflow": "^11.11.4",

documentation/src/pages/leave.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import "../css/custom.css";
+
+const LeavePage = () => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        padding: "20px",
+      }}
+      className="leave-container"
+    >
+      <h1 style={{ fontSize: "2em", marginBottom: "20px" }}>
+        You've Chosen to Leave
+      </h1>
+      <p style={{ marginBottom: "10px" }}>
+        We respect your decision to decline cookies. Unfortunately, this website
+        requires cookies to function properly.
+      </p>
+      <p style={{ marginBottom: "20px" }}>
+        If you wish to return, you can go back to the homepage and allow us to
+        use cookies.
+      </p>
+      <Link to="/" style={{ fontSize: "1.2em" }}>
+        Go to Homepage
+      </Link>
+    </div>
+  );
+};
+
+export default LeavePage;

documentation/src/pages/privacy-policy.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import "../css/custom.css";
+
+const PrivacyPolicy = () => {
+  return (
+    <div className="privacy-policy-container" style={{ padding: "40px", maxWidth: "800px", margin: "0 auto" }}>
+      <h1 style={{ fontSize: "2.5em", marginBottom: "20px", textAlign: "center" }}>
+        Privacy Policy
+      </h1>
+      <p style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6" }}>
+        We respect your privacy and are committed to protecting it. This privacy policy lets you know how we collect and use your personal information.
+      </p>
+      <p style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6" }}>
+        We do not share personal information with third-parties nor do we store information we collect about your visit to this documentation site for use other than to analyze content performance through the use of cookies, which you can turn off at any time by modifying your Internet browser's settings.
+      </p>
+      <h2 style={{ fontSize: "2em", marginBottom: "15px" }}>Data Collection</h2>
+      <p style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6" }}>
+        We use the following tools that may collect data:
+      </p>
+      <ul style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6", paddingLeft: "20px" }}>
+        <li style={{ marginBottom: "10px" }}>
+          <strong>PostHog:</strong> We use PostHog to collect data on user interactions, such as page views, click events, session duration, referrer information, and user agent details (browser, OS, device type), to help us understand how users engage with our documentation.
+        </li>
+        <li style={{ marginBottom: "10px" }}>
+          <strong>Algolia:</strong> We use Algolia to provide fast and relevant search results. Algolia collects data on search queries, click-through rates, search result rankings, user interactions with search results, and metadata about the documents being searched to improve the search experience.
+        </li>
+      </ul>
+      <p style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6" }}>
+        We are not responsible for the republishing of the content found on this documentation site on other websites or media without our permission.
+      </p>
+      <p style={{ marginBottom: "20px", fontSize: "1.2em", lineHeight: "1.6" }}>
+        This privacy policy is subject to change without notice.
+      </p>
+      <Link to="/">
+        Go to Homepage
+      </Link>
+    </div>
+  );
+};
+
+export default PrivacyPolicy;

documentation/src/theme/Root.js

@@ -0,0 +1,83 @@
+import React from "react";
+import CookieConsent from "react-cookie-consent";
+import styles from "./custom.css"; // Assuming you have a custom CSS file for styling
+
+// Default implementation, that you can customize
+export default function Root({ children }) {
+  // Custom styles for the CookieConsent component
+  const cookieConsentStyles = {
+    container: {
+      background: "#37454a",
+      color: "#fff",
+      padding: "10px",
+    },
+    button: {
+      color: "#fff",
+      fontSize: "16px",
+      background: "#4CAF50",
+      borderRadius: "5px",
+      padding: "10px 20px",
+    },
+    declineButton: {
+      color: "#fff",
+      background: "#f44336",
+      fontSize: "16px",
+      borderRadius: "5px",
+      padding: "10px 20px",
+    },
+    content: {
+      margin: "10px",
+    },
+    overlay: {
+      background: "rgba(0,0,0,0.7)",
+    },
+  };
+
+  return (
+    <>
+      <CookieConsent
+        visible="byCookieValue"
+        location="bottom"
+        buttonText="Accept"
+        declineButtonText="Decline"
+        cookieName="TypeWriterCookieConcent"
+        style={cookieConsentStyles.container}
+        buttonStyle={cookieConsentStyles.button}
+        declineButtonStyle={cookieConsentStyles.declineButton}
+        contentStyle={cookieConsentStyles.content}
+        overlay
+        overlayStyle={cookieConsentStyles.overlay}
+        expires={150}
+        onAccept={() => {
+          try {
+            // Custom accept logic
+            console.log("Cookies accepted!");
+          } catch (error) {
+            console.error("Error accepting cookies:", error);
+          }
+        }}
+        onDecline={() => {
+          try {
+            // Custom decline logic
+            console.log("Cookies declined!");
+            window.location.href = "/leave";
+          } catch (error) {
+            console.error("Error declining cookies:", error);
+          }
+        }}
+        enableDeclineButton
+        flipButtons
+        ariaAcceptLabel="Accept cookies"
+        ariaDeclineLabel="Decline cookies"
+      >
+        This website uses cookies to enhance the user experience.{" "}
+        <span style={{ fontSize: "10px" }}>
+          <a href="/privacy-policy" style={{ color: "#f1d600" }}>
+            Learn more
+          </a>
+        </span>
+      </CookieConsent>
+      {children}
+    </>
+  );
+}