Add /db subnav (#1034)

* wip(db): add db subnav * feat(db): add subnav menu
withastro · Apr 11, 2024 · e155e42 · e155e42
1 parent 88fdd40
commit e155e42
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 98 deletions.
diff --git a/src/components/HeaderNav.astro b/src/components/HeaderNav.astro
@@ -30,7 +30,4 @@ const socialLinks = siteInfo.socialLinks.filter((link) => !link.footerOnly)
 
 <div class="hidden gap-4 sm:flex">
 	<SocialLinks links={socialLinks} />
-	<a href="https://studio.astro.build/" class="button button-white button-sm hidden lg:flex"
-		>Astro Studio</a
-	>
 </div>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -1,82 +1,81 @@
 ---
-import BaseHead, { type Props as HeadProps } from "~/components/BaseHead.astro"
-import Footer from "~/components/Footer.astro"
-import Header, { type Props as HeaderProps } from "~/components/Header.astro"
-import HeaderDrawerContent from "~/components/HeaderDrawerContent.astro"
-import HeaderNav from "~/components/HeaderNav.astro"
-import SkipLink from "~/components/SkipLink.astro"
-import "~/styles/tailwind.css"
+import BaseHead, { type Props as HeadProps } from "~/components/BaseHead.astro";
+import Footer from "~/components/Footer.astro";
+import Header, { type Props as HeaderProps } from "~/components/Header.astro";
+import HeaderDrawerContent from "~/components/HeaderDrawerContent.astro";
+import HeaderNav from "~/components/HeaderNav.astro";
+import SkipLink from "~/components/SkipLink.astro";
+import "~/styles/tailwind.css";
 
 interface Props extends HeadProps, HeaderProps {
-	class?: string
+  class?: string;
 }
 
-const { class: classList, header = "default", ...head } = Astro.props
+const { class: classList, header = "default", ...head } = Astro.props;
 ---
 
 <!doctype html>
 <html
-	lang="en"
-	class:list={[
-		"astro-gray-700 overflow-x-hidden break-words text-astro-gray-100 [color-scheme:dark] [word-break:break-word]",
-		classList || "bg-black",
-	]}
+  lang="en"
+  class:list={[
+    "astro-gray-700 overflow-x-hidden break-words text-astro-gray-100 [color-scheme:dark] [word-break:break-word]",
+    classList || "bg-black",
+  ]}
 >
-	<head>
-		<BaseHead {...head} />
-	</head>
-	<body>
-		<div class="flex min-h-screen flex-col overflow-x-hidden">
-			<SkipLink />
-			<div
-				id="nav"
-				class:list={{
-					"left-0 right-0 top-0 z-20 max-h-screen": true,
-					"sticky bg-black": header === "default",
-					absolute: header === "transparent",
-				}}
-			>
-				<Header {header}>
-					<HeaderNav />
-					<HeaderDrawerContent slot="drawer" />
-				</Header>
-				{header === "default" && <hr class="border-astro-gray-500" />}
-			</div>
+  <head>
+    <BaseHead {...head} />
+  </head>
+  <body class="flex min-h-screen max-w-screen flex-col overflow-x-hidden">
+    <SkipLink />
+    <div
+      id="nav"
+      class:list={{
+        "left-0 right-0 top-0 z-20 max-h-screen": true,
+        "sticky bg-black": header === "default",
+        absolute: header === "transparent",
+      }}
+    >
+      <Header {header}>
+        <HeaderNav />
+        <HeaderDrawerContent slot="drawer" />
+      </Header>
+      {header === "default" && <hr class="border-astro-gray-500" />}
+    </div>
 
-			<main id="main" class="relative z-10 flex flex-1 flex-col">
-				<slot />
-			</main>
+    <slot name="subnav" />
 
-			<hr class="border-astro-gray-500" />
+    <main id="main" class="relative z-10 flex flex-1 flex-col">
+      <slot />
+    </main>
 
-			<Footer />
+    <hr class="border-astro-gray-500" />
 
-			<style>
-				:root.disclosure-open {
-					overflow-y: hidden;
-				}
-				body::before {
-					content: "";
-					position: fixed;
-					display: block;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					z-index: 11;
-					background: #0d0f14;
-					pointer-events: none;
-					opacity: 0;
-					transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
-				}
-				:root.disclosure-open body::before {
-					opacity: 1;
-				}
+    <Footer />
+    <style>
+      :root.disclosure-open {
+        overflow-y: hidden;
+      }
+      body::before {
+        content: "";
+        position: fixed;
+        display: block;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 11;
+        background: #0d0f14;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
+      }
+      :root.disclosure-open body::before {
+        opacity: 1;
+      }
 
-				:root.disclosure-open #nav {
-					overflow-y: auto;
-				}
-			</style>
-		</div>
-	</body>
+      :root.disclosure-open #nav {
+        overflow-y: auto;
+      }
+    </style>
+  </body>
 </html>
diff --git a/src/pages/db/_components/Badge.astro b/src/pages/db/_components/Badge.astro
@@ -0,0 +1,45 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 36 24"
+    width="36"
+    height="24"
+>
+    <rect
+        width="35"
+        height="23"
+        x=".5"
+        y=".5"
+        fill="url(#a)"
+        fill-opacity=".33"
+        rx="3.5"></rect>
+    <rect width="35" height="23" x=".5" y=".5" stroke="url(#b)" rx="3.5"></rect>
+    <path
+        fill="#fff"
+        d="M10.8 16.5V7.53h2.62c2.58 0 3.68 1.29 3.68 4.49S16 16.5 13.42 16.5H10.8Zm2.64-7.77h-1.31v6.57h1.31c1.7 0 2.28-.84 2.28-3.29 0-2.39-.6-3.28-2.28-3.28Zm5.87 7.77V7.53H22c2.08 0 3.1.78 3.1 2.35 0 .76-.24 1.42-1.1 1.77V12c1.07.31 1.38 1.1 1.38 2.03 0 1.65-1.04 2.47-3.1 2.47H19.3Zm2.7-7.83h-1.38v2.7h1.39c1.22 0 1.73-.38 1.73-1.34 0-.97-.5-1.36-1.73-1.36Zm.25 3.81h-1.63v2.86h1.63c1.24 0 1.73-.41 1.73-1.43 0-1.01-.5-1.43-1.73-1.43Z"
+    ></path>
+    <defs>
+        <linearGradient
+            id="a"
+            x1="0"
+            x2="36.37"
+            y1="24"
+            y2=".58"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#D83333"></stop>
+            <stop offset="1" stop-color="#F041FF"></stop>
+        </linearGradient>
+        <linearGradient
+            id="b"
+            x1="0"
+            x2="36.37"
+            y1="24"
+            y2=".58"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#D83333"></stop>
+            <stop offset="1" stop-color="#F041FF"></stop>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/pages/db/_components/Features.astro b/src/pages/db/_components/Features.astro
@@ -12,7 +12,7 @@ import ZeroLockin from "./features/ZeroLockin.astro"
 
 <section class="mx-auto w-full max-w-screen-xl space-y-2 p-4 sm:p-8">
 	<SectionText>
-		<Fragment slot="eyebrow">Features</Fragment>
+		<span slot="eyebrow" id="features">Features</span>
 		<Fragment slot="title">Everything you need, included</Fragment>
 	</SectionText>
 

diff --git a/src/pages/db/_components/Hero.astro b/src/pages/db/_components/Hero.astro
@@ -6,7 +6,10 @@ import Pill from "./Pill.astro";
 ---
 
 <section
-  class="align-center landing-section relative flex h-[calc(100dvh-5rem)] max-h-[48rem] content-center items-center overflow-hidden bg-[#6628C6] bg-cover bg-no-repeat px-4 py-16 md:px-8"
+  class:list={[
+    "align-center landing-section relative flex h-[calc(100dvh-5rem)] max-h-[48rem] content-center items-center overflow-hidden bg-[#6628C6] bg-cover bg-no-repeat px-4 py-16 md:px-8",
+    Astro.props.class,
+  ]}
 >
   <HeroVideo class="lg:w-full" />
   <div

diff --git a/src/pages/db/_components/Subnav.astro b/src/pages/db/_components/Subnav.astro
@@ -0,0 +1,93 @@
+---
+import AstroLogo from "~/components/AstroLogo.astro";
+import Badge from "./Badge.astro";
+import Icon from "astro-icon";
+---
+
+<nav
+	aria-label="Secondary"
+	class:list={[
+		"container fixed left-0 right-0 top-0 z-20 flex hidden h-header items-center bg-black shadow-lg sm:flex",
+		Astro.props.class,
+	]}
+>
+	<a
+		href="#"
+		class="block text-xl heading flex flex-row items-center gap-2 whitespace-nowrap"
+	>
+		<span class="sr-only">Astro DB</span>
+		<span aria-hidden="true">
+			<AstroLogo />
+		</span>
+		<span
+			class="min-w-4 w-full bg-blue-purple-gradient bg-clip-text text-transparent"
+			aria-hidden="true"
+		>
+			<Badge />
+		</span></a
+	>
+	<div class="xs:p-6 mx-auto w-full max-w-screen-xl space-y-8 p-4 sm:px-8">
+		<div
+			class="ml-16 flex shrink flex-row items-center gap-16 gap-8 justify-end lg:justify-start"
+		>
+			<a
+				href="#use-cases"
+				class="whitespace-nowrap eyebrow link aria-current:underline underline-offset-4"
+				>Use Cases</a
+			>
+			<a
+				href="#features"
+				class="whitespace-nowrap aria-current:underline underline-offset-4"
+				data-astro-prefetch
+				class="eyebrow link">Features</a
+			>
+			<a
+				href="#pricing"
+				data-astro-prefetch
+				class="whitespace-nowrap eyebrow link aria-current:underline underline-offset-4"
+				>Pricing</a
+			>
+		</div>
+	</div>
+
+	<div class="flex-1"></div>
+
+	<div class="hidden gap-4 sm:flex">
+		<a
+			href="https://studio.astro.build/"
+			class="button button-outline button-sm hidden lg:flex whitespace-nowrap"
+			>Open Astro Studio
+			<span><Icon name="ri:external-link-line" size="16" /></span>
+		</a>
+	</div>
+</nav>
+
+<script>
+	const nav = document.querySelector('nav[aria-label="Secondary"]')!;
+	const targets = Array.from(nav.querySelectorAll("a[href^='#']"))
+		.map((a) => a.getAttribute("href")?.slice(1))
+		.filter(Boolean);
+	const io = new IntersectionObserver(
+		([entry]) => {
+			if (entry.intersectionRatio > 0.5) {
+				const element = entry.target.querySelector(
+					`:is(${targets.map((id) => `[id="${id}"]`).join(",")})`,
+				);
+				if (element) {
+					const link = nav.querySelector(`a[href="#${element.id}"]`);
+					resetSubnav();
+					link?.setAttribute("aria-current", "true");
+				}
+			}
+		},
+		{ threshold: [0, 0.4, 0.6, 1] },
+	);
+	for (const section of document.querySelectorAll("section")) {
+		io.observe(section);
+	}
+	function resetSubnav() {
+		for (const item of nav.querySelectorAll("[aria-current]")) {
+			item.removeAttribute("aria-current");
+		}
+	}
+</script>
diff --git a/src/pages/db/index.astro b/src/pages/db/index.astro
@@ -1,34 +1,35 @@
 ---
-import MainLayout from "~/layouts/MainLayout.astro"
-import Features from "./_components/Features.astro"
-import FooterCTA from "./_components/FooterCTA.astro"
-import Hero from "./_components/Hero.astro"
-import Intro from "./_components/Intro.astro"
-import Pricing from "./_components/Pricing.astro"
-import UseCases from "./_components/UseCases.astro"
+import MainLayout from "~/layouts/MainLayout.astro";
+import Features from "./_components/Features.astro";
+import FooterCTA from "./_components/FooterCTA.astro";
+import Hero from "./_components/Hero.astro";
+import Intro from "./_components/Intro.astro";
+import Pricing from "./_components/Pricing.astro";
+import Subnav from "./_components/Subnav.astro";
+import UseCases from "./_components/UseCases.astro";
 
-export const prerender = true
-const title = "Astro DB"
-const description = "The SQL database platform for content-driven websites."
+export const prerender = true;
+const title = "Astro DB";
+const description = "The SQL database platform for content-driven websites.";
 ---
 
 <MainLayout
-	class="bg-[#060913]"
-	header="transparent"
-	rawTitle={title}
-	description={description}
-	image={{
-		src: "/og/astro-db.jpg",
-		alt: "Astro DB - the SQL database platform for content-driven websites.",
-	}}
+  class="bg-[#060913] scroll-pt-[7.5rem] scroll-smooth"
+  header="transparent"
+  rawTitle={title}
+  description={description}
+  image={{
+    src: "/og/astro-db.jpg",
+    alt: "Astro DB - the SQL database platform for content-driven websites.",
+  }}
 >
-	<Hero />
-
-	<div class="mb-16 space-y-32">
-		<Intro />
-		<UseCases />
-		<Features />
-		<Pricing />
-		<FooterCTA />
-	</div>
+  <Hero class="z-20" />
+  <div class="mb-16 space-y-32 z-10">
+    <Subnav />
+    <Intro />
+    <UseCases />
+    <Features />
+    <Pricing />
+    <FooterCTA />
+  </div>
 </MainLayout>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,6 +6,9 @@ export default {
 	theme: {
 		fontFamily: {},
 		extend: {
+			aria: {
+				current: 'current'
+			},
 			animation: {
 				float: "float 6s ease-in-out infinite",
 			},