Overview

This is the skeleton's demo Overview guide. It exists to show how a your-journey article is assembled: every entry listed in GUIDES (lib/content.ts) is loaded from content/<locale>/your-journey/<slug>.mdx and rendered as one anchored section of the single-page /your-journey/ route.

Replace this file with your own copy. The heading above (<h1>) is styled as the section title, and every ## heading is auto-linked in the jump navigation at the top of the page.

What this skeleton gives you

next-intl routing with a [locale] segment and localePrefix: 'as-needed'.
MDX content pipeline — drop a .mdx file in and it renders, no build step.
Custom MDX components available inside any guide, such as the gallery and carousel components shown on the Characters guide.
A dark "tech" design system in app/globals.css with CSS variables for every colour, plus three font tokens for display, body and mono text.

Where to edit

What you want to change	File
Site name, links, entry index	`lib/content.ts`
UI strings (nav, buttons, footer)	`messages/en.json`
Colours, fonts, spacing tokens	`app/globals.css`
Article body	`content/en/your-journey/*.mdx`

Gallery component

Below is the <Gallery> MDX component. It reads a comma-separated list of basenames from public/images/your-journey/ and lays them out in a grid.

Characters

This demo guide shows the carousel component. It renders a horizontally scrollable strip of portrait cards with prev/next buttons, and is driven by the COMPANIONS map in lib/content.ts — one array for each group name.

Everything here is placeholder copy. Swap the names, portraits and descriptions in COMPANIONS for your own roster.

Combat group

Sample Fighter One
Placeholder description for the first combat companion. Two or three sentences is the sweet spot for the card height.

Sample Fighter Two
Placeholder description for the second combat companion. Keep the tone consistent across the roster.

Story group

Sample Ally One
Placeholder description for a story-side ally. These appear in the second carousel group.

Sample Ally Two
Placeholder description for another story ally. Add as many as you need.

Adding a portrait

Drop the image in public/ and point the img field at its public path, e.g. /images/placeholder/portrait.jpg. Portraits look best at a 3:4 ratio — the frame crops to fill, so slightly different ratios still line up.

World & Lore

A third demo guide, included so the jump navigation on /your-journey/ has more than two entries to lay out. Use it as a template for lore, setting or timeline pages.

Setting

Placeholder paragraph describing the setting. Two or three sentences is usually enough to orient a new reader before they dive into the detail pages.

Timeline

The /prologue/ route renders a second timeline block driven by the TIMELINE array in lib/content.ts. It alternates left/right automatically and needs one image per era.

Tone and voice

Keep the copy consistent across guides — the article layout applies the same typography everywhere, so a change in voice is far more noticeable than a change in formatting.

Your Journey