docs: add Tuscany demo stories design spec (3 story composition showcases)
This commit is contained in:
@@ -0,0 +1,154 @@
|
||||
# Tuscany Demo Stories — Design Spec
|
||||
|
||||
**Date:** 2026-06-19
|
||||
**Goal:** Three demo stories for the Italy 2025 Tuscany trip that showcase distinct story-mode composition patterns. Content is illustrative; the purpose is to demonstrate what the format can do.
|
||||
|
||||
---
|
||||
|
||||
## Context
|
||||
|
||||
Demo content lives in `user/docs/demo/trips/italy-2025/`. The `demo-load` Makefile target currently copies the Italy dailies and GPX files but does not copy a `04.stories/` folder. This spec adds three story files and wires them into `demo-load` / `demo-reset`.
|
||||
|
||||
Story pages must live at:
|
||||
```
|
||||
user/docs/demo/trips/italy-2025/04.stories/<n>.<slug>/story.md
|
||||
```
|
||||
|
||||
The `demo-load` target copies the entire `04.stories/` folder into:
|
||||
```
|
||||
user/pages/01.trips/italy-2025/04.stories/
|
||||
```
|
||||
|
||||
A `stories.md` listing page already exists at `user/docs/demo/trips/italy-2025/stories.md` and is already loaded by `demo-load`.
|
||||
|
||||
---
|
||||
|
||||
## Story 1 — "The Val d'Orcia at Dawn"
|
||||
|
||||
**Composition pattern:** Gallery-led. Multiple `[snap-gallery]` blocks; chapter breaks as pure visual section dividers; minimal prose; PullQuote without background image (text-only variant).
|
||||
|
||||
**Demonstrates:**
|
||||
- Two `[snap-gallery]` blocks in one story (landscape set + detail set)
|
||||
- `[chapter-break]` used as a pure scene-change divider (no thematic text, just atmosphere)
|
||||
- `[pull-quote]` without `image=` parameter → text-only frosted style
|
||||
|
||||
**Frontmatter:**
|
||||
```yaml
|
||||
title: The Val d'Orcia at Dawn
|
||||
date: 2025-09-05
|
||||
location_name: Val d'Orcia
|
||||
location_country: Italy
|
||||
lat: 43.078
|
||||
lng: 11.676
|
||||
hero_image: hero.jpg
|
||||
hero_alt: Cypress-lined dirt road at first light, Tuscany
|
||||
published: true
|
||||
```
|
||||
|
||||
**Structure:**
|
||||
1. Short intro prose (2–3 sentences)
|
||||
2. `[snap-gallery]` — 4 images: landscape wide shots (dawn light, rolling hills, cypress allée, dirt road)
|
||||
3. Brief prose bridge (2 sentences)
|
||||
4. `[chapter-break]` — title "The Hour Before Heat", no number
|
||||
5. More prose (2–3 sentences)
|
||||
6. `[snap-gallery]` — 4 images: close-up details (gravel texture, bike wheel, water bottle, shadow on road)
|
||||
7. `[pull-quote]` — **no image param** (text-only variant) — short reflective line
|
||||
8. One closing sentence
|
||||
|
||||
**Path:** `user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md`
|
||||
|
||||
---
|
||||
|
||||
## Story 2 — "The Long Climb to Montalcino"
|
||||
|
||||
**Composition pattern:** Scrollytelling-led. Two `[scrolly-section]` blocks with different step counts, demonstrating the sticky-image format at different rhythms. PullQuote with background image between the two sections.
|
||||
|
||||
**Demonstrates:**
|
||||
- `[scrolly-section]` with 3 steps (tighter rhythm, effort/grind feeling)
|
||||
- `[scrolly-section]` with 5 steps (longer, more expansive — arrival and wandering)
|
||||
- `[pull-quote]` with `image=` parameter (frosted overlay on photo)
|
||||
- `[chapter-break]` with roman numeral, separating climb from descent/arrival
|
||||
|
||||
**Frontmatter:**
|
||||
```yaml
|
||||
title: The Long Climb to Montalcino
|
||||
date: 2025-09-05
|
||||
end_date: 2025-09-06
|
||||
location_name: Montalcino
|
||||
location_country: Italy
|
||||
lat: 43.058
|
||||
lng: 11.489
|
||||
hero_image: hero.jpg
|
||||
hero_alt: Hairpin road climbing through olive groves towards a hilltop town
|
||||
published: true
|
||||
```
|
||||
|
||||
**Structure:**
|
||||
1. Intro prose (3 sentences — sets the scene: hot afternoon, 14km climb)
|
||||
2. `[scrolly-section]` — image: the climb. **3 steps:** (1) first kilometer, legs fresh; (2) halfway, sun overhead, silence; (3) the last 500m, the town appears
|
||||
3. `[chapter-break]` — title "Montalcino", number "II"
|
||||
4. `[pull-quote image="vineyard.jpg"]` — line about the view from the top
|
||||
5. Prose (2–3 sentences — arrival, finding a bar, cold water)
|
||||
6. `[scrolly-section]` — image: the town/streets. **5 steps:** (1) the main piazza; (2) a wine shop; (3) a cat on a wall; (4) evening light on the fortress; (5) the descent begins
|
||||
7. Closing prose (1–2 sentences)
|
||||
|
||||
**Path:** `user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md`
|
||||
|
||||
---
|
||||
|
||||
## Story 3 — "One Evening in Siena"
|
||||
|
||||
**Composition pattern:** Mood/fragment piece. Short and impressionistic. Opens with a PullQuote (no image) — the quote anchors the story before any prose. Closes with a PullQuote with image. Single short ScrollySection. SnapGallery in the middle.
|
||||
|
||||
**Demonstrates:**
|
||||
- PullQuote **as opening element** (before any body prose) — unusual structure
|
||||
- `[scrolly-section]` with just 2 steps (the minimum — shows it works for very short sections)
|
||||
- `[snap-gallery]` as a mid-story element (not a closing flourish)
|
||||
- PullQuote with image **as closing element**
|
||||
- Overall: the format works for short, atmospheric pieces, not just long narratives
|
||||
|
||||
**Frontmatter:**
|
||||
```yaml
|
||||
title: One Evening in Siena
|
||||
date: 2025-09-05
|
||||
location_name: Siena
|
||||
location_country: Italy
|
||||
lat: 43.318
|
||||
lng: 11.330
|
||||
hero_image: hero.jpg
|
||||
hero_alt: The Piazza del Campo at dusk, terracotta rooftops fading to blue
|
||||
published: true
|
||||
```
|
||||
|
||||
**Structure:**
|
||||
1. `[pull-quote]` — **no image, opens the story** — a single observational sentence about Siena at dusk
|
||||
2. Intro prose (2 sentences — arrival on bike, the square)
|
||||
3. `[scrolly-section image="campo.jpg"]` — **2 steps:** (1) the square fills with people as the sun goes; (2) a busker, a couple arguing, pigeons
|
||||
4. `[snap-gallery]` — 3 images: campo at dusk, a doorway, someone eating gelato
|
||||
5. Prose (2 sentences — finding dinner, the relief of sitting down)
|
||||
6. `[pull-quote image="sunset.jpg"]` — **with image, closes the story** — a line about what cycling does to ordinary moments
|
||||
|
||||
**Path:** `user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md`
|
||||
|
||||
---
|
||||
|
||||
## Makefile Changes
|
||||
|
||||
`demo-load` — add after the existing Italy stories.md copy line:
|
||||
```makefile
|
||||
cp -r user/docs/demo/trips/italy-2025/04.stories user/pages/01.trips/italy-2025/ 2>/dev/null || true
|
||||
```
|
||||
|
||||
`demo-reset` — the existing `rm -rf user/pages/01.trips/italy-2025` already removes everything including stories, so no additional line needed.
|
||||
|
||||
---
|
||||
|
||||
## Deliverables
|
||||
|
||||
1. `user/docs/demo/trips/italy-2025/04.stories/01.val-dorcia-dawn/story.md`
|
||||
2. `user/docs/demo/trips/italy-2025/04.stories/02.long-climb-montalcino/story.md`
|
||||
3. `user/docs/demo/trips/italy-2025/04.stories/03.one-evening-siena/story.md`
|
||||
4. `Makefile` — one line added to `demo-load`
|
||||
5. Two commits: one for story files (user repo), one for Makefile (main repo)
|
||||
|
||||
No image files are committed. Shortcode image params reference filenames that won't resolve without real photos — this is consistent with the existing Japan demo story.
|
||||
Reference in New Issue
Block a user