Fix docs trailing-slash URLs and improve mobile API navigation

site/app/app.vue

@@ -54,7 +54,7 @@ const searchPlaceholder = computed(() => {
   return `Search ${packageName} API…`
 })
 
-const { defaultApiPath } = useApiCatalog()
+const { defaultApiPath, hasMultiplePackages } = useApiCatalog()
 
 const items = computed<NavigationMenuItem[]>(() => [
   {
@@ -174,6 +174,28 @@ const mobileDocsNav = computed(
           :navigation="mobileDocsNav"
           highlight
         />
+
+        <template v-if="route.path.startsWith('/api/')">
+          <USeparator class="my-4" />
+
+          <div class="space-y-3">
+            <ApiPackageSelect v-if="hasMultiplePackages" />
+            <ApiVersionSelect />
+
+            <p
+              v-if="apiNavigation.length"
+              class="mb-2 text-xs font-semibold tracking-wide text-muted uppercase"
+            >
+              API
+            </p>
+
+            <UContentNavigation
+              v-if="apiNavigation.length"
+              :navigation="apiNavigation"
+              highlight
+            />
+          </div>
+        </template>
       </template>
     </UHeader>
 

site/app/middleware/route-normalize.global.ts

@@ -0,0 +1,19 @@
+/** Strip trailing slashes (GitHub Pages directory URLs) and normalize API casing. */
+export default defineNuxtRouteMiddleware((to) => {
+  let normalized = to.path
+
+  if (normalized.startsWith('/api/')) {
+    normalized = normalized.toLowerCase()
+  }
+
+  if (normalized.length > 1 && normalized.endsWith('/')) {
+    normalized = normalized.slice(0, -1)
+  }
+
+  if (normalized === to.path) return
+
+  return navigateTo(
+    { path: normalized, hash: to.hash, query: to.query },
+    { replace: true },
+  )
+})

site/app/pages/api/[...slug].vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'api',
-  middleware: ['api-normalize'],
 })
 
 const route = useRoute()

site/app/pages/docs/[...slug].vue

@@ -4,17 +4,20 @@ definePageMeta({
 })
 
 const route = useRoute()
+const docsPath = computed(() => route.path.replace(/\/$/, '') || '/')
 
-const { data: page } = await useAsyncData(route.path, () =>
-  queryCollection('docs').path(route.path).first(),
+const { data: page } = await useAsyncData(
+  () => `docs:${docsPath.value}`,
+  () => queryCollection('docs').path(docsPath.value).first(),
 )
 
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 }
 
-const { data: surround } = await useAsyncData(`${route.path}-surround`, () =>
-  queryCollectionItemSurroundings('docs', route.path),
+const { data: surround } = await useAsyncData(
+  () => `docs:${docsPath.value}-surround`,
+  () => queryCollectionItemSurroundings('docs', docsPath.value),
 )
 
 useSeoMeta({