Skip to content

Commit 678a67c

Browse files
feat: dynamically generate app navigation from content frontmatter
* feat: dynamically generate app navigation from content frontmatter * doc: add chapter for creating and managing content to README --------- Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>
1 parent f3ab24a commit 678a67c

File tree

18 files changed

+310
-48
lines changed

18 files changed

+310
-48
lines changed

.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# build output
2+
dist/
3+
public/
4+
# generated types
5+
.astro/
6+
# dependencies
7+
node_modules/
8+
# logs
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*
12+
pnpm-debug.log*
13+
# environment variables
14+
.env
15+
.env.production
16+
# macOS-specific files
17+
.DS_Store
18+
# jetbrains setting folder
19+
.idea/
20+
21+
**/*/.env

README.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,90 @@
11
# One Platform
2+
3+
## 📝 Creating and Managing Content
4+
5+
All content pages are located inside the `/content/pages/` directory.
6+
Each folder in this directory represents a **section**, and every section must contain an `index.md`
7+
(or `index.mdx`) file as the main entry for that topic.
8+
9+
Astro automatically scans this folder structure and builds the navigation tree based on the files it finds — no
10+
manual configuration is required.
11+
12+
13+
### 📁 Folder structure example
14+
15+
```
16+
content/
17+
└── pages/
18+
├── index.mdx → homepage (not shown in navigation)
19+
├── products-and-services/
20+
│ ├── index.md → “Products & Services” (main navigation item)
21+
│ ├── foundations/
22+
│ │ └── index.md → child page under “Products & Services”
23+
│ └── components-and-patterns/
24+
│ └── index.md → child page under “Products & Services”
25+
└── resources/
26+
├── documentation/
27+
│ ├── index.md → “Documentation” (has subnavigation)
28+
│ ├── getting-started/
29+
│ │ └── index.md → subpage
30+
│ └── foundations/
31+
│ └── index.md → subpage
32+
```
33+
34+
35+
### 🧩 Frontmatter properties
36+
37+
Each `index.md` (or `index.mdx`) file begins with a **frontmatter block**. That's the configuration area between `---` lines at the top of the file.
38+
39+
Example:
40+
41+
```
42+
---
43+
layout: "@template/layouts/default"
44+
title: "Foundations"
45+
order: 2
46+
isSubNavigation: false
47+
hidePage: false
48+
iconTrailing: "arrow_right"
49+
---
50+
```
51+
52+
Below is an explanation of each field:
53+
54+
| Property | Type | Default | Description |
55+
| --------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56+
| **`layout`** | `string` | required | Always use `@template/layouts/default` for standard pages. |
57+
| **`title`** | `string` || The name shown in the navigation and as the page headline. |
58+
| **`hidePage`** | `boolean` | `false` | If set to `true`, this page will **not** be directly visible in the navigation and users will be redirected to the first visible child page instead. Useful for sections that act as folders rather than actual pages. |
59+
| **`order`** | `number` | optional | Defines the order of this page among its siblings. Lower numbers appear first. |
60+
| **`isSubNavigation`** | `boolean` | `false` | When set to `true`, the page acts as a **parent with subpages**. On any of its child pages, a sub-navigation will automatically appear, highlighting the current child. |
61+
| **`iconTrailing`** | `string` | optional | Optional trailing icon displayed next to the navigation label (uses DB UX icon names). |
62+
63+
64+
### 🧭 How navigation is generated
65+
66+
1. Main Navigation
67+
* Each top-level folder under `content/pages/` becomes a main navigation entry.
68+
* The order of these main items is determined by the `order` property in their respective `index.md` files.
69+
* The root homepage (`content/pages/index.mdx`) is automatically excluded.
70+
71+
2. Subpages
72+
* Every subfolder inside a main section appears as a child item in the navigation.
73+
* Their `order` values define their position within the group.
74+
75+
3. Sub-Navigation
76+
* If a parent page (like `Documentation`) has `isSubNavigation: true`, then on its child pages, a local sub-navigation bar will be shown.
77+
The current child page will appear highlighted in that bar.
78+
79+
4. Hidden Pages
80+
* If `hidePage: true`, the page itself is not listed in the navigation.
81+
* When a user clicks the parent item, they will be taken directly to the first visible child page instead.
82+
83+
84+
### ✅ Best practices
85+
86+
* Always include a title and layout in every page’s frontmatter.
87+
* Use `order` values like `1, 2, 3…` for clarity.
88+
* Avoid duplicate titles in the same folder level.
89+
* For “section overview” pages that should not have content themselves, set `hidePage: true` and place the actual content in child pages.
90+
* Only set `isSubNavigation: true` on parent pages that have multiple related subpages.

app.navigation.ts

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,3 @@
1-
export const appNavigation: AppNavigation = [
2-
{
3-
title: "Products & Services",
4-
children: [
5-
{ title: "Foundations", path: "products-and-services/foundations" },
6-
{ title: "Components & Patterns", path: "products-and-services/components-and-patterns" },
7-
{ title: "Templates", path: "products-and-services/templates" },
8-
{ title: "Extensions", path: "products-and-services/extensions" },
9-
],
10-
},
11-
{
12-
title: "Resources",
13-
children: [
14-
{
15-
title: "Documentation",
16-
path: "resources/documentation",
17-
isSubNavigation: true,
18-
children: [
19-
{ title: "Getting Started", path: "resources/documentation/getting-started" },
20-
{ title: "Foundations", path: "resources/documentation/foundations" },
21-
],
22-
},
23-
],
24-
},
25-
{ title: "Community", iconTrailing: "lock_closed", path: "/", }
26-
];
1+
import { buildAppNavigationFromContent } from "@template/utils/content-navigation";
2+
3+
export const appNavigation: AppNavigation = buildAppNavigationFromContent();

content/pages/community/index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
layout: "@template/layouts/default"
3+
title: "Community"
4+
iconTrailing: "lock_closed"
5+
order: 3
6+
---
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
layout: "@template/layouts/default"
33
title: "Components & Patterns"
4-
toc: false
54
---
65

76
XXX
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
layout: "@template/layouts/default"
33
title: "Extensions"
4-
toc: false
54
---
65

76
XXX
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
layout: "@template/layouts/default"
33
title: "Foundations"
4-
toc: false
54
---
65

76
XXX
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: "Products and Services"
3+
hidePage: true
4+
order: 1
5+
---
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
layout: "@template/layouts/default"
33
title: "Templates"
4-
toc: false
54
---
65

76
XXX
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: "@template/layouts/default"
33
title: "Foundations"
4-
toc: false
4+
order: 2
55
---
66

77
XXX

0 commit comments

Comments
 (0)