Improve docs visibility

docs/weaviate/config-refs/index.mdx

@@ -50,3 +50,9 @@ export const mainReferencesData = [
 <br />
 <CardsSection items={mainReferencesData} />
 <br />
+
+:::info Deployment documentation
+
+For deployment related topics like security, backups, replication, cluster information and advanced configuration options, visit the [deployment documentation](/docs/deploy/configuration/index.mdx).
+
+:::

docs/weaviate/guides.mdx

@@ -22,6 +22,12 @@ import { howToGuidesCardsData } from "/_includes/configuration/how-to-manuals.js
 ## Other guides and tutorials
 
 export const otherGuidesCardsData = [
+  {
+    title: "Deployment guides",
+    description: "Learn how to install and configure Weaviate for production.",
+    link: "/docs/deploy/configuration",
+    icon: "fa fa-database",
+  },
   {
     title: "Tutorials",
     description: "Step-by-step guides and practical examples.",

sidebars.js

@@ -8,11 +8,6 @@ const sidebars = {
       id: "weaviate/index",
       label: "Introduction",
     },
-    {
-      type: "link",
-      label: "Installation",
-      href: "https://weaviate.io/docs/deploy/installation-guides",
-    },
     {
       type: "category",
       label: "Quickstart",
@@ -22,6 +17,11 @@ const sidebars = {
       },
       items: ["weaviate/quickstart/local"],
     },
+    {
+      type: "link",
+      label: "Installation",
+      href: "https://weaviate.io/docs/deploy/installation-guides",
+    },
     {
       type: "category",
       label: "Connect to Weaviate",

src/components/BaseModal/index.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import styles from "./styles.module.scss";
+
+export default function BaseModal({
+  isOpen,
+  onClose,
+  children,
+  className = "",
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  maxWidth = "750px",
+}) {
+  console.log("BaseModal render - isOpen:", isOpen, "className:", className);
+
+  useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      console.log("BaseModal: Adding event listeners and preventing scroll");
+      document.addEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  const handleOverlayClick = (e) => {
+    console.log("BaseModal: Overlay clicked");
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={`${styles.modalOverlay} ${isOpen ? styles.active : ""}`}
+      onClick={handleOverlayClick}
+    >
+      <div
+        className={`${styles.modalContent} ${className}`}
+        style={{ maxWidth }} // Apply maxWidth to content, not overlay
+        onClick={(e) => e.stopPropagation()}
+      >
+        {showCloseButton && (
+          <button
+            className={styles.modalClose}
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            ✕
+          </button>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/BaseModal/styles.module.scss

@@ -0,0 +1,133 @@
+// BaseModal.module.scss - Base Modal styles only
+
+// CSS Variables for base modal
+:root {
+  --modal-overlay-bg: rgba(0, 0, 0, 0.6);
+  --modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  --modal-border-radius: 12px;
+  --modal-transition: all 0.3s ease;
+
+  // Base colors
+  --modal-bg: white;
+  --modal-text-color: #333;
+  --modal-border-color: #eaeaea;
+
+  // Dark mode variables
+  --modal-dark-bg: #1f2228;
+  --modal-dark-text-color: #ffffff;
+  --modal-dark-border-color: #242e3e;
+}
+
+// Modal Overlay
+.modalOverlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background: var(--modal-overlay-bg) !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  z-index: 10001 !important;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  backdrop-filter: blur(2px);
+  margin: 0 !important;
+  padding: 0 !important;
+
+  &.active {
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+}
+
+// Modal Content
+.modalContent {
+  background: var(--modal-bg);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-shadow);
+  position: relative;
+  transform: translateY(-20px);
+  opacity: 0;
+  transition: var(--modal-transition);
+  overflow-y: auto;
+  max-height: 90vh !important;
+  width: auto;
+  margin: 1rem;
+
+  // Animation when active
+  .modalOverlay.active & {
+    transform: translateY(0) !important;
+    opacity: 1 !important;
+  }
+
+  // Dark mode support
+  :global([data-theme="dark"]) & {
+    background-color: var(--modal-dark-bg);
+    color: var(--modal-dark-text-color);
+  }
+}
+
+// Close Button
+.modalClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.1);
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--modal-text-color);
+  transition: background-color 0.2s ease;
+  z-index: 1;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  // Dark mode support
+  :global([data-theme="dark"]) & {
+    color: var(--modal-dark-text-color);
+    background: rgba(255, 255, 255, 0.1);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+// Base responsive behavior
+@media (max-width: 768px) {
+  .modalContent {
+    max-height: 90vh !important;
+    overflow-y: auto;
+    margin: 0.5rem !important;
+    width: calc(100vw - 1rem) !important;
+    max-width: calc(100vw - 1rem) !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .modalClose {
+    top: 15px;
+    right: 15px;
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+  }
+
+  .modalContent {
+    margin: 0.25rem !important;
+    width: calc(100vw - 0.5rem) !important;
+    max-width: calc(100vw - 0.5rem) !important;
+  }
+}

src/components/FirstVisitModal/index.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from "react";
+import BaseModal from "../BaseModal"; // Assuming BaseModal is in the parent directory
+import styles from "./styles.module.scss";
+
+export default function FirstVisitModal() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    console.log("FirstVisitModal useEffect running...");
+
+    // Check for dev override in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const forceShow = urlParams.get("firstvisit") === "true";
+
+    const hasVisited = localStorage.getItem("docs-has-visited");
+    console.log("hasVisited:", hasVisited, "forceShow:", forceShow);
+
+    if (!hasVisited || forceShow) {
+      console.log("Showing modal...");
+      const timer = setTimeout(() => {
+        setIsModalOpen(true);
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleClose = () => {
+    console.log("Modal closing...");
+    setIsModalOpen(false);
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const forceShow = urlParams.get("firstvisit") === "true";
+
+    if (!forceShow) {
+      localStorage.setItem("docs-has-visited", "true");
+    }
+  };
+
+  console.log("FirstVisitModal render - isModalOpen:", isModalOpen);
+
+  return (
+    <BaseModal
+      isOpen={isModalOpen}
+      onClose={handleClose}
+      className={styles.firstVisitModal}
+      maxWidth="80vw"
+      showCloseButton={false} // We'll use custom header
+    >
+      {/* Changed className from styles.modalContent to styles.firstVisitModalInnerContent */}
+      <div className={styles.firstVisitModalInnerContent}>
+        {/* Custom Header with title aligned to close button */}
+        <div className={styles.modalHeader}>
+          <h2 className={styles.modalTitle}>Explore Weaviate docs</h2>
+          <button
+            className={styles.customCloseButton}
+            onClick={handleClose}
+            aria-label="Close modal"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Content Container */}
+        <div className={styles.contentContainer}>
+          <div className={styles.content}>
+            <div className={styles.description}>
+              <p>
+                The Weaviate documentation is divided into the following four
+                sections: Core database, Deployment, Weaviate Cloud and Weaviate
+                Agents docs.
+              </p>
+            </div>
+
+            {/* Guideflow iframe for overview */}
+            <div className={styles.iframeContainer}>
+              <div>
+                <iframe
+                  id="er5mn6lu6k"
+                  src="https://app.guideflow.com/embed/er5mn6lu6k"
+                  width="100%"
+                  height="100%"
+                  style={{
+                    overflow: "hidden",
+                    border: "none",
+                  }}
+                  allow="clipboard-read; clipboard-write"
+                  webKitAllowFullScreen
+                  mozAllowFullScreen
+                  allowFullScreen
+                  allowTransparency="true"
+                />
+                <script
+                  src="https://app.guideflow.com/assets/opt.js"
+                  data-iframe-id="er5mn6lu6k"
+                ></script>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}