docs: add dynamic routes page

apps/documentation/Cargo.toml

@@ -8,7 +8,7 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-tuono_lib = "0.15.0"
+tuono_lib = "0.16.2"
 glob = "0.3.1"
 time = { version = "0.3", features = ["macros"] }
 serde = { version = "1.0.202", features = ["derive"] }

apps/documentation/package.json

@@ -19,7 +19,7 @@
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "npm:[email protected].0"
+    "tuono": "npm:[email protected].2"
   },
   "devDependencies": {
     "@mdx-js/rollup": "3.1.0",

apps/documentation/src/components/sidebar/config.ts

@@ -111,6 +111,11 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Defining routes',
         href: '/documentation/routing/defining-routes',
       },
+      {
+        type: 'element',
+        label: 'Dynamic routes',
+        href: '/documentation/routing/dynamic-routes',
+      },
       {
         type: 'element',
         label: 'Link and navigation',
@@ -126,11 +131,6 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'Loading state',
         href: '/documentation/routing/loading-state',
       },
-      {
-        type: 'element',
-        label: 'Dynamic routes',
-        href: '/documentation/routing/dynamic-routes',
-      },
       {
         type: 'element',
         label: 'Layouts',

apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx

@@ -9,6 +9,53 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs'
 
 <Breadcrumbs breadcrumbs={[{ label: 'Dynamic routes' }]} />
 
-# Loading state
+# Dynamic routes
 
-Todo
+> 🚧 Only available for SSR apps. This feature will be soon available also for static generated apps.
+
+When the exact segment names are not known in advance and you need to generate routes from dynamic data,
+you can use dynamic segments, which are populated at request time.
+
+## Convention
+
+A dynamic segment can be created by wrapping a
+file or a folder name in square brackets: `[segmentName]`.
+
+The dynamic segment can be used in both folder and file name:
+
+- `src/routes/blog/[slug].tsx`
+- `src/routes/blog/[slug]/index.tsx`
+
+The same path can have multiple dynamic segments:
+
+- `src/routes/blog/[post]/[comment].tsx`
+
+### Example
+
+Assuming you're working on a blog with multiple posts,
+you can use a dynamic segment to define the post page: `src/routes/blog/[slug].tsx`.
+
+The `[slug]` is the dynamic segment which will be used to identify individual blog posts.
+
+```tsx
+import { useRouter } from 'tuono'
+
+export default function Page() {
+  const router = useRouter()
+  return <p>Post: {router.pathname}</p>
+}
+```
+
+## Catch all segments
+
+Dynamic Segments can be extended to catch-all subsequent segments by adding
+an ellipsis inside the brackets `[...segmentName]`.
+
+Given the following `src/routes/shop/[...slug].tsx`,
+the following paths will be matched:
+
+- `/shop/clothes`
+- `/shop/clothes/tops`
+- `/shop`
+- `/shop/clothes/tops/t-shirts`
+- and so on.

apps/documentation/tuono.config.ts

@@ -7,9 +7,6 @@ const config: TuonoConfig = {
       '@': 'src',
       '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
     },
-    optimizeDeps: {
-      exclude: ['@mdx-js/react'],
-    },
     plugins: [
       { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
     ],