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

6.3 KiB
Raw Blame History

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:

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:

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:

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:

	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.