Added popup

docs/docs/development/new-behavior.mdx

@@ -450,7 +450,7 @@ Consider the following prompts when writing documentation for new behaviors:
 Consider also including visual aids alongside written documentation if it adds clarity.
 
 :::info
-See [Documentation](documentation.md) for more information on writing, testing, and formatting ZMK documentation.
+See [Documentation](contributing/documentation.md) for more information on writing, testing, and formatting ZMK documentation.
 :::
 
 ## Submitting a Pull Request

docs/docs/hardware.mdx

@@ -55,4 +55,4 @@ Please see pages under the "Features" header in the sidebar for details.
 {/* prettier-ignore */}
 <Heading as="h2" id="contributing">Contributing</Heading>
 
-If you'd like to add support for a new keyboard shield, head over to the [New Keyboard Shield](development/hardware-integration/new-shield.mdx) documentation and note the [clean room design requirements](development/index.md).
+If you'd like to add support for a new keyboard shield, head over to the [New Keyboard Shield](development/hardware-integration/new-shield.mdx) documentation and note the [clean room design requirements](development/contributing/clean-room.md).

docs/docusaurus.config.js

@@ -81,7 +81,7 @@ module.exports = {
             },
             {
               label: "Development",
-              to: "docs/development",
+              to: "docs/development/contributing/clean-room",
             },
           ],
         },

docs/sidebars.js

@@ -115,14 +115,7 @@ module.exports = {
       ],
     },
     {
-      type: "category",
-      label: "Development",
-      link: {
-        type: "doc",
-        id: "development/index",
-      },
-      collapsed: true,
-      items: [
+      Development: [
         {
           type: "category",
           label: "Hardware Integration",
@@ -137,6 +130,15 @@ module.exports = {
             "development/hardware-integration/boards-shields-keymaps",
           ],
         },
+        {
+          type: "category",
+          label: "Contributing",
+          collapsed: true,
+          items: [
+            "development/contributing/clean-room",
+            "development/contributing/documentation",
+          ],
+        },
         {
           type: "category",
           label: "Local Toolchain",
@@ -165,7 +167,6 @@ module.exports = {
         },
         "development/studio-rpc-protocol",
         "development/new-behavior",
-        "development/documentation",
       ],
     },
   ],

docs/src/components/popup-manager.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "@docusaurus/router";
+import Popup from "./popup";
+
+const PopupManager = () => {
+  const location = useLocation();
+  const [showPopup, setShowPopup] = useState(false);
+
+  const categoryPath = "/docs/development";
+  const redirectPath = "/docs/development/contributing/clean-room";
+
+  useEffect(() => {
+    // Check if the current path is within the desired category
+    const isCategoryPage = location.pathname.startsWith(categoryPath);
+
+    if (isCategoryPage) {
+      // Check localStorage to see if the popup has been shown before
+      const hasSeenPopup = localStorage.getItem("hasSeenCleanRoomWarningPopup");
+      // If clean room is clicked directly no redirect necessary
+      if (window.location.pathname != redirectPath && !hasSeenPopup) {
+        setShowPopup(true);
+        localStorage.setItem("hasSeenCleanRoomWarningPopup", "true");
+      }
+    }
+  }, [location.pathname]);
+
+  const handleClose = () => {
+    window.location.href = redirectPath;
+    setShowPopup(false);
+  };
+
+  return showPopup ? <Popup onClose={handleClose} /> : null;
+};
+
+export default PopupManager;

docs/src/components/popup.js

@@ -0,0 +1,35 @@
+import "../css/popup.css";
+import PropTypes from "prop-types";
+
+const Popup = ({ onClose }) => {
+  return (
+    <div className="popup-overlay">
+      <div
+        className="popup-content theme-admonition theme-admonition-danger admonition_node_modules-@docusaurus-theme-classic-lib-theme-Admonition-Layout-styles-module alert alert--danger"
+        role="alert"
+      >
+        <h1 className="centered-container"> Clean Room Policy </h1>
+        <div className="centered-container">
+          <p>
+            Before reading this section, it is <b>vital</b> that you read
+            through our clean room policy.
+          </p>
+        </div>
+        <div className="centered-container">
+          <button
+            className="button button--outline button--secondary"
+            onClick={onClose}
+          >
+            Take me there!
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
+
+Popup.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};

docs/src/css/popup.css

@@ -0,0 +1,33 @@
+/* src/components/Popup.css */
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-content {
+  border-left: 4px solid var(--ifm-color-danger-dark); /* Border width, style, and color */
+  border-right: 4px solid var(--ifm-color-danger-dark); /* Border width, style, and color */
+  justify-content: center;
+  background: var(--ifm-alert-background-color);
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 700px;
+  width: 100%;
+}
+
+.popup-content button {
+  margin-top: 10px;
+}
+
+.centered-container {
+  display: flex;
+  justify-content: center;
+}

docs/src/theme/Footer/index.js

@@ -0,0 +1,11 @@
+import Footer from "@theme-original/Footer";
+import PopupManager from "../../components/popup-manager"; // Adjust path if necessary
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <PopupManager />
+      <Footer {...props} />
+    </>
+  );
+}