chore: update docs

apps/docs/.gitignore

@@ -0,0 +1,39 @@
+node_modules/
+dist/
+*.tsbuildinfo
+.DS_Store
+.vercel
+.netlify
+_site/
+scripts/smoke/*-main/
+scripts/memory/project/src/pages/
+benchmark/projects/
+benchmark/results/
+test-results/
+*.log
+package-lock.json
+.turbo/
+.eslintcache
+.pnpm-store
+
+# ignore top-level vscode settings
+/.vscode/settings.json
+
+# do not commit .env files or any files that end with `.env`
+*.env
+
+packages/astro/src/**/*.prebuilt.ts
+packages/astro/src/**/*.prebuilt-dev.ts
+!packages/astro/vendor/vite/dist
+packages/integrations/**/.netlify/
+
+# exclude IntelliJ/WebStorm stuff
+.idea
+
+# ignore content collection generated files
+packages/**/test/**/fixtures/**/.astro/
+packages/**/test/**/fixtures/**/env.d.ts
+packages/**/e2e/**/fixtures/**/.astro/
+packages/**/e2e/**/fixtures/**/env.d.ts
+examples/**/.astro/
+examples/**/env.d.ts

apps/docs/astro.config.mjs

@@ -0,0 +1,41 @@
+import { defineConfig } from "astro/config";
+import cloudflare from "@astrojs/cloudflare";
+import tailwind from "@astrojs/tailwind";
+import {
+  transformerNotationDiff,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+  transformerNotationFocus,
+  transformerNotationErrorLevel,
+  transformerRenderWhitespace,
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+  transformerCompactLineOptions,
+} from "@shikijs/transformers";
+import mdx from "@astrojs/mdx";
+
+// https://astro.build/config
+export default defineConfig({
+  output: "server",
+  devToolbar: {
+    enabled: false,
+  },
+  markdown: {
+    shikiConfig: {
+      theme: "vitesse-dark",
+      transformers: [
+        transformerNotationDiff(),
+        transformerNotationFocus(),
+        transformerMetaHighlight(),
+        transformerMetaWordHighlight(),
+        transformerNotationHighlight(),
+        transformerNotationWordHighlight(),
+        transformerNotationErrorLevel(),
+        transformerRenderWhitespace(),
+        transformerCompactLineOptions(),
+      ],
+    },
+  },
+  integrations: [tailwind(), mdx()],
+  adapter: cloudflare(),
+});

apps/docs/package.json

@@ -1,17 +1,28 @@
 {
   "name": "@formbase/docs",
-  "version": "0.1.0",
-  "description": "Documentation for formbase.dev",
+  "version": "0.0.1",
+  "type": "module",
   "scripts": {
-    "build": "next build",
-    "dev": "next dev -p 3001",
-    "start": "next start"
+    "astro": "astro",
+    "build": "astro check && astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
   },
   "dependencies": {
-    "next": "^14.2.3",
-    "nextra": "^2.13.4",
-    "nextra-theme-docs": "^2.13.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/cloudflare": "^10.4.1",
+    "@astrojs/mdx": "^3.1.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@logsnag/astro": "^1.0.0-beta.1",
+    "@shikijs/transformers": "^1.6.5",
+    "@tailwindcss/typography": "^0.5.13",
+    "astro": "^4.10.2",
+    "astro-seo": "^0.8.4",
+    "clsx": "^2.1.1",
+    "minisearch": "^6.3.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5"
   }
 }

apps/docs/src/components/links.astro

@@ -0,0 +1,47 @@
+---
+
+---
+
+<script is:inline>
+  function copyUrl() {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(window.location.href);
+    } else {
+      console.error('Clipboard API not supported');
+    }
+  }
+</script>
+
+<div class="flex gap-5 text-gray-200">
+  <a
+    target="_blank"
+    href="https://github.com/eight-labs/formbase"
+    class="hover:text-gray-50 transition-colors duration-3000"
+  >
+    <svg viewBox="0 0 24 24" class="h-6" xmlns="http://www.w3.org/2000/svg"
+      ><g fill="currentColor"
+        ><path
+          opacity=".32"
+          d="M12 1.25C6.06 1.25 1.25 6.06 1.25 12c0 5.93 4.81 10.75 10.75 10.75 5.93 0 10.75-4.82 10.75-10.75 0-5.94-4.82-10.75-10.75-10.75Z"
+        ></path><path
+          d="M14.53 19c0 .65-.02 1.4-.03 1.9v1.55s-1.01.29-2.51.29c-1.5 0-2.5-.3-2.5-.3v-1.55 -1.98c0-1.07.68-1.85.68-1.85 -2.26-.25-4.56-1.58-4.56-5.55 0-1.16.32-1.7.96-2.44 -.13-.29-.45-1.37.12-2.81 .8-.25 2.78 1.11 2.78 1.11 .8-.25 1.65-.34 2.5-.34 .88 0 1.73.08 2.54.33 0 0 1.93-1.41 2.78-1.12 .53 1.37.23 2.4.13 2.75l-.02.05c.64.74 1.04 1.28 1.04 2.43 0 3.96-2.38 5.29-4.64 5.54 0 0 .68.91.68 1.91Z"
+        ></path></g
+      ></svg
+    >
+  </a>
+  <button
+    onclick="copyUrl()"
+    class="hover:text-gray-50 transition-colors duration-300"
+  >
+    <svg viewBox="0 0 24 24" class="h-6" xmlns="http://www.w3.org/2000/svg"
+      ><g fill="currentColor"
+        ><path
+          opacity=".32"
+          d="M18 7.25V10c0 2.8 0 4.2-.55 5.27 -.48.94-1.25 1.7-2.19 2.18 -1.07.54-2.47.54-5.27.54H7.24v0c0 .69 0 1.04.04 1.33 .25 1.74 1.62 3.11 3.36 3.36 .29.04.64.04 1.33.04h4.35c2.24 0 3.36 0 4.21-.44 .75-.39 1.36-1 1.74-1.75 .43-.86.43-1.98.43-4.22v-4.35c0-.7 0-1.05-.05-1.34 -.26-1.75-1.63-3.12-3.37-3.37 -.3-.05-.65-.05-1.34-.05v0Z"
+        ></path><path
+          d="M7.65 1.25c-2.25 0-3.37 0-4.22.43 -.76.38-1.37.99-1.75 1.74 -.44.85-.44 1.97-.44 4.21v2.7c0 2.24 0 3.36.43 4.21 .38.75.99 1.36 1.74 1.74 .85.43 1.97.43 4.21.43h2.69c2.24 0 3.36 0 4.21-.44 .75-.39 1.36-1 1.74-1.75 .43-.86.43-1.98.43-4.22V7.6c0-2.25 0-3.37-.44-4.22 -.39-.76-1-1.37-1.75-1.75 -.86-.44-1.98-.44-4.22-.44h-2.7Z"
+        ></path></g
+      ></svg
+    >
+  </button>
+</div>

apps/docs/src/components/navbar.astro

@@ -0,0 +1,38 @@
+---
+import Links from './links.astro';
+import Search from './search.astro';
+---
+
+<div
+  class="flex items-center z-30 gap-5 justify-end sticky top-0 bg-gray-950 pb-2"
+>
+  <button onclick="toggleSidebar()" class="md:hidden">
+    <svg
+      viewBox="0 0 24 24"
+      class="text-gray-200 h-6"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        fill="currentColor"
+        d="M3 6.75h18c.41 0 .75-.34.75-.75 0-.42-.34-.75-.75-.75H3c-.42 0-.75.33-.75.75 0 .41.33.75.75.75Zm0 6h8c.41 0 .75-.34.75-.75 0-.42-.34-.75-.75-.75H3c-.42 0-.75.33-.75.75 0 .41.33.75.75.75Zm0 6h13c.41 0 .75-.34.75-.75 0-.42-.34-.75-.75-.75H3c-.42 0-.75.33-.75.75 0 .41.33.75.75.75Z"
+      ></path></svg
+    >
+  </button>
+
+  <Search />
+  <Links />
+</div>
+
+<script is:inline>
+  const toggleSidebar = () => {
+    // get the sidebar element
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.getElementById('overlay');
+    const sidebarToggle = document.getElementById('sidebar-toggle');
+    // toggle the sidebar class
+    if (!sidebar || !overlay) return;
+    const isOpen = sidebar.getAttribute('data-open') === 'true';
+    sidebar.setAttribute('data-open', (!isOpen).toString());
+    overlay.classList.toggle('hidden');
+    sidebarToggle.classList.toggle('hidden');
+  };
+</script>

apps/docs/src/components/search.astro

@@ -0,0 +1,30 @@
+---
+const search = Astro.url.searchParams.get('search') || '';
+---
+
+<div class="flex-1">
+  <form action="/search" method="get">
+    <div class="relative p-1">
+      <svg
+        viewBox="0 0 24 24"
+        class="h-4 w-4 text-gray-500 absolute top-1/2 left-4 transform -translate-y-1/2"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          d="M21.53 20.46l-3.64-3.64c-.3-.3-.77-.3-1.07 0 -.3.29-.3.76 0 1.06l3.63 3.63c.29.29.76.29 1.06 0 .29-.3.29-.77 0-1.07Zm-3.64-2.58c1.81-1.82 2.85-4.28 2.85-6.9 0-5.39-4.37-9.75-9.75-9.75 -5.39 0-9.75 4.36-9.75 9.75 0 5.38 4.36 9.75 9.75 9.75 2.62 0 5.07-1.04 6.89-2.86Zm-1.07-1.07c-1.54 1.53-3.62 2.41-5.84 2.41 -4.56 0-8.25-3.7-8.25-8.25 0-4.56 3.69-8.25 8.25-8.25 4.55 0 8.25 3.69 8.25 8.25 0 2.21-.88 4.29-2.42 5.83Z"
+        ></path>
+      </svg>
+      <input
+        name="q"
+        type="text"
+        placeholder="Search..."
+        autocomplete="off"
+        value={search}
+        class="w-full text-sm font-mono lowercase rounded-xl
+        p-2 bg-gray-900 border border-gray-800 duration-400 ring-opacity-0 ring transition-all ring-white
+        text-gray-200 border-transparent focus:ring-opacity-100 focus:outline-none pl-10"
+      />
+    </div>
+  </form>
+</div>