feat: navbar active links (#122)

src/html/components/games-link.tsx

@@ -1,3 +1,4 @@
+import { requestContext } from '@fastify/request-context'
 import { collections } from '../../database/collections'
 import { GameState } from '../../database/models/game.model'
 import { GameLiveIndicator } from './game-live-indicator'
@@ -8,8 +9,14 @@ export async function GamesLink() {
       $in: [GameState.created, GameState.configuring, GameState.launching, GameState.started],
     },
   })
+  const url = requestContext.get('url')
   return (
-    <a href="/games" class={['menu-item', gamesLiveCount > 0 && 'accent']} id="navbar-games-link">
+    <a
+      href="/games"
+      class={['menu-item', gamesLiveCount > 0 && 'accent']}
+      id="navbar-games-link"
+      aria-current={url === '/games' ? 'page' : undefined}
+    >
       {gamesLiveCount > 0 ? <GameLiveIndicator /> : <></>}
       Games
     </a>

src/html/components/navigation-bar.tsx

@@ -1,3 +1,4 @@
+import { requestContext } from '@fastify/request-context'
 import type { User } from '../../auth/types/user'
 import { GamesLink } from './games-link'
 import { IconBrandDiscord, IconChartPie, IconCrown, IconHeart } from './icons'
@@ -71,8 +72,9 @@ function Menu(props: Html.PropsWithChildren<{ user?: User | undefined }>) {
 }
 
 function MenuItem({ href, children }: Html.PropsWithChildren<{ href: string }>) {
+  const url = requestContext.get('url')
   return (
-    <a href={href} class="menu-item">
+    <a href={href} class="menu-item" aria-current={url === href ? 'page' : undefined}>
       {children}
     </a>
   )

src/html/index.ts

@@ -2,12 +2,15 @@ import fp from 'fastify-plugin'
 import { z } from 'zod'
 import type { ZodTypeProvider } from 'fastify-type-provider-zod'
 import mime from 'mime'
+import { resolve } from 'node:path'
 
 export const csses = new Map<string, string>()
 
 export default fp(
   async app => {
-    await app.register((await import('./middleware/htmx')).default)
+    await app.register((await import('@fastify/autoload')).default, {
+      dir: resolve(import.meta.dirname, 'middleware'),
+    })
 
     app.withTypeProvider<ZodTypeProvider>().get(
       '/css/:fileName',

src/html/middleware/path.ts

@@ -0,0 +1,15 @@
+import fp from 'fastify-plugin'
+
+declare module '@fastify/request-context' {
+  interface RequestContextData {
+    // Current request url (e.g. /games/1234)
+    url: string | undefined
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export default fp(async app => {
+  app.addHook('preHandler', async request => {
+    request.requestContext.set('url', request.url)
+  })
+})

src/html/styles/navigation-bar.css

@@ -30,7 +30,7 @@
       padding: 4px 10px;
     }
 
-    &.active {
+    &[aria-current='page'] {
       background-color: theme(colors.abru.dark.20);
     }
 

src/main.ts

@@ -36,7 +36,6 @@ await app.register(await import('@fastify/static'), {
 await app.register((await import('@kitajs/fastify-html-plugin')).default)
 
 await app.register((await import('./html')).default)
-await app.register((await import('./messages')).default)
 await app.register((await import('./websocket')).default)
 await app.register((await import('./auth')).default)
 await app.register((await import('./queue')).default)