Update docs site to mitigate scroll spill on small screen

chrsgrrtt · chrsgrrtt · commit dcd80bfe4406 · 2024-10-19T16:41:30.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -173,3 +173,4 @@ dist
 
 # Finder (MacOS) folder config
 .DS_Store
+.vercel
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -18,7 +18,7 @@
 		"@astrojs/tailwind": "^5.1.1"
 	},
 	"scripts": {
-		"dev": "astro dev",
+		"dev": "astro dev --host",
 		"start": "astro dev",
 		"build": "astro check && astro build",
 		"preview": "astro preview",
diff --git a/packages/docs/src/astro-components/ComponentDocsLayout.astro b/packages/docs/src/astro-components/ComponentDocsLayout.astro
@@ -0,0 +1,18 @@
+---
+import Layout from "./Layout.astro";
+
+type Props = {
+  title?: string;
+  description?: string;
+};
+
+const { title, description } = Astro.props;
+---
+
+<Layout title={title} description={description}>
+  <main
+    class="lg:flex lg:items-start lg:gap-8 xl:gap-10 2xl:gap-12 w-full max-w-7xl"
+  >
+    <slot />
+  </main>
+</Layout>
diff --git a/packages/docs/src/astro-components/Layout.astro b/packages/docs/src/astro-components/Layout.astro
@@ -153,11 +153,14 @@ const pageTitle = [title, name].filter(Boolean).join(" — ");
         </div>
       </div>
     </header>
-    <main
-      class="lg:flex lg:items-start lg:gap-8 xl:gap-10 2xl:gap-12 w-full max-w-7xl"
+    <slot />
+    <footer
+      class="w-full max-w-7xl border-t border-zinc-300 dark:border-zinc-700 pt-6"
     >
-      <slot />
-    </main>
+      © {new Date().getFullYear()}
+      <a href="httphttps://hyperlaunch.com/">Hyperlaunch</a>. All rights
+      reserved.
+    </footer>
   </body>
 </html>
 <script>
diff --git a/packages/docs/src/pages/[element].astro b/packages/docs/src/pages/[element].astro
@@ -1,8 +1,8 @@
 ---
 import { getCollection } from "astro:content";
+import ComponentDocsLayout from "../astro-components/ComponentDocsLayout.astro";
 import ComponentNav from "../astro-components/ComponentNav.astro";
 import JumpLinks from "../astro-components/JumpLinks.astro";
-import Layout from "../astro-components/Layout.astro";
 
 export const prerender = true;
 
@@ -19,7 +19,7 @@ const { name, tagline } = entry.data;
 const { Content } = await entry.render();
 ---
 
-<Layout>
+<ComponentDocsLayout>
   <div
     class="hidden lg:block sticky lg:top-4 xl:top-6 2xl:top-8 max-h-[100svh] overflow-auto flex-shrink w-64"
   >
@@ -93,7 +93,7 @@ const { Content } = await entry.render();
       </aside>
     </div>
   </div>
-</Layout>
+</ComponentDocsLayout>
 <script>
   import "@hyperkitxyz/elements/detail.ts";
   import "@hyperkitxyz/elements/transition.ts";
diff --git a/packages/docs/src/pages/index.astro b/packages/docs/src/pages/index.astro
@@ -8,114 +8,112 @@ const tree = await getComponentTree();
 ---
 
 <Layout>
-  <div class="w-full flex flex-col gap-6 lg:gap-8 xl:gap-10 2xl:gap-12">
-    <div class="flex flex-col w-full items-center justify-end relative">
-      <Picture
-        src={robot}
-        format="webp"
-        alt=""
-        class="w-full max-w-4xl"
-        widths={[375, 750, 1200, 1500]}
-      />
-      <div class="lg:absolute z-40">
-        <div
-          class="max-w-5xl mx-auto text-black dark:text-white [text-shadow:_0_1px_30px_rgb(255_255_255/_100%)]
+  <div class="flex flex-col items-center justify-end relative">
+    <Picture
+      src={robot}
+      format="webp"
+      alt=""
+      class="w-full max-w-5xl"
+      widths={[375, 750, 1200, 1500]}
+    />
+    <div class="lg:absolute z-40">
+      <div
+        class="max-w-5xl mx-auto text-black dark:text-white [text-shadow:_0_1px_30px_rgb(255_255_255/_100%)]
 lg:[text-shadow:_0_1px_50px_rgb(255_255_255/_100%)] dark:[text-shadow:_0_1px_30px_rgb(0_0_0_/_100%)] dark:lg:[text-shadow:_0_1px_50px_rgb(0_0_0_/_100%)]"
+      >
+        <h1
+          class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black mb-4 lg:mb-6 xl:mb-8"
         >
-          <h1
-            class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black mb-4 lg:mb-6 xl:mb-8"
-          >
-            Headless Elements, Supercharged UIs
-          </h1>
-          <p class="md:text-lg lg:text-xl xl:text-2xl">
-            A suite of unstyled custom elements designed for building rich,
-            interactive UIs rapidly &mdash; without writing JavaScript. From
-            sortable lists to calendars, modals, and repeating forms, Hyperkit
-            let's you create dynamic, scalable interfaces, with pure HTML &amp;
-            CSS.
-          </p>
-        </div>
+          Headless Elements, Supercharged UIs
+        </h1>
+        <p class="md:text-lg lg:text-xl xl:text-2xl">
+          A suite of unstyled custom elements designed for building rich,
+          interactive UIs rapidly &mdash; without writing JavaScript. From
+          sortable lists to calendars, modals, and repeating forms, Hyperkit
+          let's you create dynamic, scalable interfaces, with pure HTML &amp;
+          CSS.
+        </p>
       </div>
     </div>
-    <div
-      class="bg-zinc-950 dark:bg-white border border-zinc-700 dark:border-zinc-400 rounded shadow-md px-4 py-2 mr-auto lg:mx-auto white-space-no-wrap text-zinc-100 dark:text-zinc-950 text-sm lg:text-base font-medium"
-    >
-      bun add @hyperkitxyz/elements
-    </div>
-    <div class="flex items-center justify-center w-full">
-      <div class="relative flex items-center w-full max-w-screen-lg">
-        <div
-          class="flex-grow h-px bg-gradient-to-r from-transparent via-zinc-200 to-zinc-200 dark:via-zinc-700 dark:to-zinc-700"
-        >
-        </div>
-        <h2
-          class="mx-4 text-xs uppercase font-semibold tracking-wider text-zinc-900 dark:text-zinc-100"
-        >
-          Components
-        </h2>
-        <div
-          class="flex-grow h-px bg-gradient-to-l from-transparent via-zinc-200 to-zinc-200 dark:via-zinc-700 dark:to-zinc-700"
-        >
-        </div>
+  </div>
+  <div
+    class="bg-zinc-950 dark:bg-white border border-zinc-700 dark:border-zinc-400 rounded shadow-md px-4 py-2 mr-auto lg:mx-auto white-space-no-wrap text-zinc-100 dark:text-zinc-950 text-sm lg:text-base font-medium"
+  >
+    bun add @hyperkitxyz/elements
+  </div>
+  <div class="flex items-center justify-center w-full max-w-3xl">
+    <div class="relative flex items-center w-full max-w-screen-lg">
+      <div
+        class="flex-grow h-px bg-gradient-to-r from-transparent via-zinc-200 to-zinc-200 dark:via-zinc-700 dark:to-zinc-700"
+      >
+      </div>
+      <h2
+        class="mx-4 text-xs uppercase font-semibold tracking-wider text-lime-500 dark:text-lime-400"
+      >
+        Components
+      </h2>
+      <div
+        class="flex-grow h-px bg-gradient-to-l from-transparent via-zinc-200 to-zinc-200 dark:via-zinc-700 dark:to-zinc-700"
+      >
       </div>
     </div>
-    <nav class="flex flex-col gap-2 lg:gap-4 xl:gap-6 2xl:gap-4">
-      {
-        tree.map(({ name, items }, i) => (
-          <>
-            <hyperkit-detail-summoner summons={`component-grid-${i}`}>
-              <button class="block w-full flex items-center justify-between text-left px-4 py-2 lg:px-6 bg-zinc-200 dark:bg-zinc-800 rounded font-bold group">
-                {name}
-                <span class="group-data-[active]:rotate-180 transition-rotate duration-300">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="size-5"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="m4.5 15.75 7.5-7.5 7.5 7.5"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </hyperkit-detail-summoner>
-            <hyperkit-detail id={`component-grid-${i}`}>
-              <hyperkit-transition
-                class="grid gap-2 lg:gap-4 xl:gap-6 2xl:gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
-                enter-class="transition-all duration-500 ease-in"
-                enter-from-class="opacity-0 max-h-0"
-                enter-to-class="opacity-100 max-h-[1000px]"
-                exit-class="transition-all duration-300 ease-out"
-                exit-from-class="opacity-100 max-h-[1000px]"
-                exit-to-class="opacity-0 max-h-0"
-              >
-                {items.map((item) => (
-                  <a
-                    href={`/${item?.slug}`}
-                    class="group border border-zinc-200 dark:border-zinc-800 rounded overflow-hidden hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-color duration-300"
-                  >
-                    <div class="p-4 lg:p-6 xl:p-8">
-                      <h3 class="lg:text-lg xl:text-xl font-semibold text-zinc-900 dark:text-zinc-100 group-hover:text-lime-500 dark:group-hover:text-lime-400 mb-2">
-                        {item?.data.name}
-                      </h3>
-                      <p class="text-zinc-600 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100">
-                        {item?.data.tagline}
-                      </p>
-                    </div>
-                  </a>
-                ))}
-              </hyperkit-transition>
-            </hyperkit-detail>
-          </>
-        ))
-      }
-    </nav>
   </div>
+  <nav class="flex flex-col gap-2 lg:gap-4 xl:gap-6 2xl:gap-4 w-full max-w-7xl">
+    {
+      tree.map(({ name, items }, i) => (
+        <>
+          <hyperkit-detail-summoner summons={`component-grid-${i}`}>
+            <button class="block w-full flex items-center justify-between text-left px-4 py-2 lg:px-6 bg-zinc-200 dark:bg-zinc-800 rounded font-bold group">
+              {name}
+              <span class="group-data-[active]:rotate-180 transition-rotate duration-300">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m4.5 15.75 7.5-7.5 7.5 7.5"
+                  />
+                </svg>
+              </span>
+            </button>
+          </hyperkit-detail-summoner>
+          <hyperkit-detail id={`component-grid-${i}`}>
+            <hyperkit-transition
+              class="grid gap-2 lg:gap-4 xl:gap-6 2xl:gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+              enter-class="transition-all duration-500 ease-in"
+              enter-from-class="opacity-0 max-h-0"
+              enter-to-class="opacity-100 max-h-[1000px]"
+              exit-class="transition-all duration-300 ease-out"
+              exit-from-class="opacity-100 max-h-[1000px]"
+              exit-to-class="opacity-0 max-h-0"
+            >
+              {items.map((item) => (
+                <a
+                  href={`/${item?.slug}`}
+                  class="group border border-zinc-200 dark:border-zinc-800 rounded overflow-hidden hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-color duration-300"
+                >
+                  <div class="p-4 lg:p-6 xl:p-8">
+                    <h3 class="lg:text-lg xl:text-xl font-semibold text-zinc-900 dark:text-zinc-100 group-hover:text-lime-500 dark:group-hover:text-lime-400 mb-2">
+                      {item?.data.name}
+                    </h3>
+                    <p class="text-zinc-600 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100">
+                      {item?.data.tagline}
+                    </p>
+                  </div>
+                </a>
+              ))}
+            </hyperkit-transition>
+          </hyperkit-detail>
+        </>
+      ))
+    }
+  </nav>
 </Layout>
 <script>
   import "@hyperkitxyz/elements/detail.ts";

Original file line number	Diff line number	Diff line change
`@@ -173,3 +173,4 @@ dist`
`173`	`173`
`174`	`174`	`# Finder (MacOS) folder config`
`175`	`175`	`.DS_Store`
	`176`	`+.vercel`