Files
intotheeast-com/docs/working/specs/2026-06-19-tuscany-demo-stories-design.md
T

155 lines
6.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 (23 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 (23 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 (23 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 (12 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.