active link style

packages/website/package.json

@@ -53,7 +53,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "rehype-prism-plus": "^1.4.2",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.2.7",
     "typedoc": "^0.23.8",
     "typescript": "^4.7.4",
     "wait-on": "^6.0.1"

packages/website/src/components/nav-link.astro

@@ -0,0 +1,14 @@
+---
+export type Props = astroHTML.JSX.AnchorHTMLAttributes & {
+  href: string
+}
+const url = Astro.url
+const linkUrl = new URL(Astro.props.href, url)
+---
+
+<a
+  {...Astro.props}
+  data-active={url.pathname === linkUrl.pathname ? true : undefined}
+>
+  <slot />
+</a>

packages/website/src/pages/guides/[slug].astro

@@ -4,6 +4,7 @@ import { getCollection, type CollectionEntry } from "astro:content"
 import AppFooter from "~/components/app-footer.astro"
 import Layout from "~/components/layout.astro"
 import MainNavigation from "~/components/main-navigation.astro"
+import NavLink from "~/components/nav-link.astro"
 
 export type Props = {
   guide: CollectionEntry<"guides">
@@ -37,9 +38,13 @@ const { Content } = await Astro.props.guide.render()
           {
             guides.map((guide) => (
               <li>
-                <a class="link" href={`/guides/${guide.slug}`} rel="prefetch">
+                <NavLink
+                  class="link data-[active]:link-active"
+                  href={`/guides/${guide.slug}`}
+                  rel="prefetch"
+                >
                   {guide.data.title}
-                </a>
+                </NavLink>
               </li>
             ))
           }

packages/website/src/styles/tailwind.css

@@ -24,13 +24,13 @@
     @apply font-medium inline-block relative opacity-60 hover:opacity-100 transition-opacity;
   }
   .link::after {
-    @apply content-[''] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition;
+    @apply content-[''] bottom-[-2px] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition;
   }
   .link:hover::after {
     @apply -translate-y-px opacity-50;
   }
   .link-active {
-    @apply text-emerald-500;
+    @apply text-emerald-500 opacity-100;
   }
 
   .button {