update docs styling: mobile ver. + components (#912)

Author: rafavalls

docs/package.json

@@ -20,8 +20,5 @@
   "engines": {
     "node": ">=18.0.0",
     "npm": ">=8.0.0"
-  },
-  "dependencies": {
-    "zod": "^3.24.3"
   }
 }

docs/view/astro.config.mjs

@@ -23,11 +23,7 @@ export default defineConfig({
     },
   },
   integrations: [
-    mdx({
-      rehypePlugins: [
-        // rehype-mdx-code-props must run last according to docs
-      ],
-    }),
+    mdx(),
     react(),
   ],
   vite: {
@@ -36,4 +32,13 @@ export default defineConfig({
       tailwindcss(),
     ],
   },
+  markdown: {
+    shikiConfig: {
+      themes: {
+        light: "github-light",
+        dark: "github-dark",
+      },
+      defaultColor: "light",
+    },
+  },
 });

docs/view/package.json

@@ -17,14 +17,17 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "astro": "^5.6.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rehype-mdx-code-props": "^3.0.1",
     "sharp": "^0.34.2",
     "shiki": "^3.8.1",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.0.7",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "zod": "^3.24.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16"

docs/view/src/components/Header.astro

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import decoLight from "../../assets/deco-light.svg?url";
+import decoDark from "../../assets/deco-dark.svg?url";
+
+interface LogoProps {
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export function Logo({ className = "", width = 68, height = 28 }: LogoProps) {
+  const [isDark, setIsDark] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+
+    const checkTheme = () => {
+      const _html = document.documentElement;
+      const savedTheme = localStorage.getItem("theme") || "auto";
+
+      let isDarkTheme = false;
+
+      if (savedTheme === "auto") {
+        // Use system preference
+        isDarkTheme =
+          globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
+      } else {
+        isDarkTheme = savedTheme === "dark";
+      }
+
+      setIsDark(isDarkTheme);
+    };
+
+    // Check initial theme
+    checkTheme();
+
+    // Watch for theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "data-theme"
+        ) {
+          checkTheme();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
+
+    // Listen for system theme changes
+    const mediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", checkTheme);
+
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", checkTheme);
+    };
+  }, []);
+
+  // Show light logo by default during SSR
+  if (!isClient) {
+    return (
+      <div className={`relative ${className}`}>
+        <img
+          src={decoLight}
+          alt="Deco"
+          width={width}
+          height={height}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <img
+        src={isDark ? decoDark : decoLight}
+        alt="Deco"
+        width={width}
+        height={height}
+      />
+    </div>
+  );
+}