fix: display meta.name in route card header and sidebar (v0.6.1)

Author: liorcodev

.gitignore

@@ -5,3 +5,5 @@ dist/
 .idea
 src/assets-inline.ts
 /.prettierrc
+scripts/generate-preview.ts
+preview.html

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.1] - 2026-02-26
+
+### Fixed
+
+- **`meta.name` not rendered in UI** — The `name` field from route metadata was never displayed in
+  the generated documentation. It now appears as a title in the route card header, with the path
+  shown beneath it as a secondary label. The sidebar also uses the name when available, falling back
+  to the path segment.
+
+---
+
 ## [0.6.0] - 2026-02-25
 
 ### Breaking Changes

assets/screenshot-1.png

@@ -1,6 +1,6 @@
 {
   "name": "trpc-docs-generator",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "author": "Lior Cohen",
   "homepage": "https://github.com/liorcodev/trpc-docs-generator#readme",
   "repository": {

assets/screenshot-2.png

@@ -83,7 +83,7 @@ export function generateDocsHtml(routes: RouteInfo[], options: DocsGeneratorOpti
             .map(
               route => `
             <a href="#${route.path.replace(/\./g, '-')}" class="sidebar-link">
-              ${route.path.split('.').pop()}
+              ${route.meta?.name ?? route.path.split('.').pop()}
             </a>
           `
             )
@@ -186,7 +186,10 @@ function generateRouteCard(route: RouteInfo): string {
     <div class="route-card" id="${routeId}">
       <div class="route-header">
         <span class="method-badge method-${route.type}">${route.type}</span>
-        <span class="route-path">${route.path}</span>
+        <div class="route-path-info">
+          ${route.meta?.name ? `<span class="route-name">${route.meta.name}</span>` : ''}
+          <span class="route-path">${route.path}</span>
+        </div>
         <div class="route-tags">
           ${docs?.auth ? '<span class="tag tag-auth"><span class="iconify" data-icon="mdi:shield-lock" style="vertical-align: -0.125em; margin-right: 0.25rem;"></span>Auth</span>' : ''}
           ${docs?.deprecated ? '<span class="tag tag-deprecated"><span class="iconify" data-icon="mdi:alert" style="vertical-align: -0.125em; margin-right: 0.25rem;"></span>Deprecated</span>' : ''}

assets/screenshot-3.png

@@ -333,12 +333,24 @@ header p {
   color: white;
 }
 
+.route-path-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  flex: 1;
+}
+
+.route-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
 .route-path {
   font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
   font-weight: 500;
-  color: var(--text-primary);
-  flex: 1;
+  color: var(--text-secondary);
   letter-spacing: -0.01em;
 }