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 {

pnpm-lock.yaml

@@ -122,7 +122,7 @@ importers:
       react-router: ^6.3.0
       react-router-dom: ^6.3.0
       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
@@ -138,7 +138,7 @@ importers:
       '@remix-run/node': 1.6.5_biqbaboplfbrettd7655fr4n2y
       '@remix-run/react': 1.6.5_biqbaboplfbrettd7655fr4n2y
       '@remix-run/vercel': 1.7.2_vdcavuuprsfwosnu3x64sz2mz4
-      '@tailwindcss/typography': 0.5.4_tailwindcss@3.1.6
+      '@tailwindcss/typography': 0.5.4_tailwindcss@3.2.7
       '@vercel/node': 2.5.21
       astro: 2.1.2_@types+node@18.0.6
       clsx: 1.2.1
@@ -152,7 +152,7 @@ importers:
       react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y
       zod: 3.17.10
     devDependencies:
-      '@astrojs/tailwind': 3.1.0_xtmeljc6rkmhc46azo7bjollee
+      '@astrojs/tailwind': 3.1.0_5fkwwuzubt6borit3q7k7y2k74
       '@remix-run/dev': 1.6.5_xontd7q62j6h4ge55exoz26nhu
       '@remix-run/serve': 1.6.5_biqbaboplfbrettd7655fr4n2y
       '@testing-library/cypress': 8.0.3_cypress@10.3.1
@@ -166,7 +166,7 @@ importers:
       npm-run-all: 4.1.5
       postcss: 8.4.14
       rehype-prism-plus: 1.4.2
-      tailwindcss: 3.1.6_postcss@8.4.14
+      tailwindcss: 3.2.7_postcss@8.4.14
       typedoc: 0.23.8_typescript@4.7.4
       typescript: 4.7.4
       wait-on: 6.0.1
@@ -257,7 +257,7 @@ packages:
       - supports-color
     dev: false
 
-  /@astrojs/tailwind/3.1.0_xtmeljc6rkmhc46azo7bjollee:
+  /@astrojs/tailwind/3.1.0_5fkwwuzubt6borit3q7k7y2k74:
     resolution: {integrity: sha512-eNflzlCdCtLZjc8pK0xQb/hXYnN/mVGVJFRAMWStrFwg8Tsvj6WVCPyRy77D5NL2tQ1piS2wiouOzAgiy1Dsiw==}
     peerDependencies:
       astro: ^2.1.0
@@ -268,7 +268,7 @@ packages:
       autoprefixer: 10.4.7_postcss@8.4.21
       postcss: 8.4.21
       postcss-load-config: 4.0.1_postcss@8.4.21
-      tailwindcss: 3.1.6_postcss@8.4.14
+      tailwindcss: 3.2.7_postcss@8.4.14
     transitivePeerDependencies:
       - ts-node
     dev: true
@@ -2598,7 +2598,7 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
-  /@tailwindcss/typography/0.5.4_tailwindcss@3.1.6:
+  /@tailwindcss/typography/0.5.4_tailwindcss@3.2.7:
     resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
@@ -2606,7 +2606,7 @@ packages:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
-      tailwindcss: 3.1.6_postcss@8.4.14
+      tailwindcss: 3.2.7_postcss@8.4.14
     dev: false
 
   /@testing-library/cypress/8.0.3_cypress@10.3.1:
@@ -2641,7 +2641,7 @@ packages:
   /@ts-morph/common/0.11.1:
     resolution: {integrity: sha512-7hWZS0NRpEsNV8vWJzg7FEz6V8MaLNeJOmwmghqUXTpzk16V1LLZhdo+4QvE/+zv4cVci0OviuJFnqhEfoV3+g==}
     dependencies:
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
       minimatch: 3.1.2
       mkdirp: 1.0.4
       path-browserify: 1.0.1
@@ -6199,7 +6199,7 @@ packages:
       '@types/glob': 7.2.0
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
       glob: 7.2.3
       ignore: 5.2.4
       merge2: 1.4.1
@@ -6748,16 +6748,10 @@ packages:
       ci-info: 3.5.0
     dev: true
 
-  /is-core-module/2.10.0:
-    resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
-    dependencies:
-      has: 1.0.3
-
   /is-core-module/2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-data-descriptor/0.1.4:
     resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==}
@@ -9035,17 +9029,17 @@ packages:
       yaml: 2.2.1
     dev: true
 
-  /postcss-nested/5.0.6_postcss@8.4.14:
+  /postcss-nested/6.0.0_postcss@8.4.14:
-    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
       postcss: 8.4.14
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.11
 
-  /postcss-selector-parser/6.0.10:
+  /postcss-selector-parser/6.0.11:
-    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
@@ -9773,7 +9767,7 @@ packages:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.10.0
+      is-core-module: 2.11.0
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -10562,8 +10556,8 @@ packages:
       '@pkgr/utils': 2.3.1
       tslib: 2.5.0
 
-  /tailwindcss/3.1.6_postcss@8.4.14:
+  /tailwindcss/3.2.7_postcss@8.4.14:
-    resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
+    resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     peerDependencies:
@@ -10575,10 +10569,11 @@ packages:
       detective: 5.2.1
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.2.11
+      fast-glob: 3.2.12
       glob-parent: 6.0.2
       is-glob: 4.0.3
       lilconfig: 2.0.6
+      micromatch: 4.0.5
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
@@ -10586,8 +10581,8 @@ packages:
       postcss-import: 14.1.0_postcss@8.4.14
       postcss-js: 4.0.0_postcss@8.4.14
       postcss-load-config: 3.1.4_postcss@8.4.14
-      postcss-nested: 5.0.6_postcss@8.4.14
+      postcss-nested: 6.0.0_postcss@8.4.14
-      postcss-selector-parser: 6.0.10
+      postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1
       resolve: 1.22.1