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