Changelog - 2025-12-27 (#1)

Slide Deck Architecture: Modular Components, Citations & Production Pages

Overview

This update introduces a modular slide deck architecture for the strategy and thesis narrative pages. Each section that was preceded by a badge and header has been extracted into its own reusable component. A new PageAsDeckWrapper layout provides double-click navigation between sections, making the pages function like a presentation deck while maintaining the flowing scroll experience.

Key deliverables:

• 17 Strategy Section Components: Extracted from strategy/to-carve.astro

• 16 Thesis Section Components: Extracted from thesis/to-carve.astro

• PageAsDeckWrapper Layout: Double-click and keyboard navigation between sections

• Production Pages: Reassembled pages promoted to index, previous index archived

• Citation System: Popover-based citations ported to both strategy and thesis pages

Production Page Promotion

The reassembled component-based pages have been promoted to production:

The modular component-based versions are now the primary pages served at /strategy and /thesis.

Citation System with Popovers

Ported the citation system from the original pages to the modular slide components. Citations use HTML popover elements for inline source attribution.

Implementation

Citations are integrated directly into slide components using the popover pattern:

<sup>
  <a class="citation-link" popovertarget="cite-source-name">[1]</a>
</sup>
<div id="cite-source-name" popover class="citation-popover">
  <p class="citation-text">Source Name, "Title," Year</p>
  <a href="https://source-url.com" target="_blank">View Source</a>
</div>

Content Corrections & Cosmetic Improvements

Various slides received content corrections and cosmetic touch-ups:

• T02-TrillionDollarDiseases: Updated disease cost statistics with citations

• T03-HealthspanGap: Refined healthspan vs lifespan visualization

• T04-USDemographics: Corrected demographic figures

• T05-CostReality: Updated medical cost data

• T08-DemographicStats: Added citation popovers for UN data

• T10-LongevityEconomy: Market size corrections

• T11-ExitPotentialHero: Improved exit path messaging

• T12-IPOPath: Updated IPO statistics

• T13-MAPath: Corrected M&A deal values

• T14-MarketGrowth: Updated market growth projections

• T15-DealStructure: Refined deal structure example

• T16-Closing: Redesigned with card layout, smaller header, emphasized subheader

Component Extraction

Strategy Sections (17 components)

Located in src/layouts/sections/narratives/slides/strategy/:

Thesis Sections (16 components)

Located in src/layouts/sections/narratives/slides/thesis/:

PageAsDeckWrapper Layout

A new wrapper layout that enables presentation-style navigation while preserving smooth scrolling.

Location: src/layouts/PageAsDeckWrapper.astro

Features

Props

interface Props {
  enableScrollSnap?: boolean;     // Default: true
  showNavigationHints?: boolean;  // Default: true
  hintDuration?: number;          // Default: 3000 (ms), 0 = always show
}

Usage

<PageAsDeckWrapper enableScrollSnap={true} showNavigationHints={true}>
  <SlideComponent1 />
  <SlideComponent2 />
  <SlideComponent3 />
</PageAsDeckWrapper>

The wrapper automatically detects <section> elements within the slotted content and enables navigation between them.

Technical Implementation

Vanilla JavaScript (Not TypeScript/TSX)

The navigation script uses pure vanilla JavaScript for maximum Astro compatibility:

// Double-click handler
wrapper.addEventListener('dblclick', function(event) {
  var viewportHeight = window.innerHeight;
  var clickY = event.clientY;
  var isUpperHalf = clickY < viewportHeight / 2;

  if (isUpperHalf) {
    navigateToPrevious();
  } else {
    navigateToNext();
  }
});

Key decision: Avoided TypeScript class syntax and arrow functions in favor of vanilla JS function declarations for reliable Astro script handling.

Reveal Animation System

Each section component uses the reveal animation system from the original pages:

.reveal-item {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal-item.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

Animation types:

• data-reveal="fade-up" - Translate up 40px

• data-reveal="slide-right" - Translate from -60px

• data-reveal="slide-left" - Translate from +60px

• data-reveal="scale-up" - Scale from 0.85

IntersectionObserver for Reveals

The reassembled pages include an IntersectionObserver script that triggers reveal animations:

var observer = new IntersectionObserver(
  function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var delay = parseInt(target.style.getPropertyValue('--delay') || '0', 10);
        setTimeout(function() {
          target.classList.add('revealed');
        }, delay);
      }
    });
  },
  { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
);

Bug Fixes During Development

Issue: Content Not Visible

Symptom: Scroll-snap worked but content was invisible.

Root Cause: The reveal animation script was looking for .slide-deck .reveal-item but the wrapper class was .deck-wrapper.

Fix: Updated selector to .deck-wrapper .reveal-item in both reassembled pages.

Issue: TypeScript Syntax in Script Block

Symptom: Arrow functions and type assertions not processing correctly.

Fix: Converted all script code to vanilla JavaScript:

// Before (TypeScript)
const delay = parseInt((entry.target as HTMLElement).style.getPropertyValue('--delay') || '0');

// After (Vanilla JS)
var target = entry.target;
var delay = parseInt(target.style.getPropertyValue('--delay') || '0', 10);

File Structure

src/layouts/
├── PageAsDeckWrapper.astro           # Deck navigation wrapper
└── sections/narratives/slides/
    ├── strategy/                     # 17 strategy slides
    │   ├── S01-WhyNowHero.astro
    │   ├── S02-TimingWindow.astro
    │   └── ... (S03-S17)
    └── thesis/                       # 16 thesis slides
        ├── T01-AgingCrisisHero.astro
        ├── T02-TrillionDollarDiseases.astro
        └── ... (T03-T16)

src/pages/
├── strategy/
│   ├── index.astro                   # Production page (modular components)
│   └── archive.astro                 # Previous monolithic version
└── thesis/
    ├── index.astro                   # Production page (modular components)
    └── archive.astro                 # Previous monolithic version

Future Enhancements

The modular architecture enables several future possibilities:

1. Custom Deck Compositions: Mix and match sections from strategy and thesis

2. Presentation Mode: Full-screen with progress bar

3. Export to PDF: Server-side rendering of slides

4. Slide Thumbnails: Navigation via thumbnail strip

5. Transition Effects: Custom animations between sections

Summary

This refactor transforms the monolithic to-carve.astro files into a composable slide system and promotes the modular pages to production:

1. 33 Reusable Slide Components: Each section is independently usable

2. PageAsDeckWrapper: Presentation-style navigation with scroll-snap

3. Production Promotion: Modular pages now serve as main /strategy and /thesis routes

4. Citation Popovers: Inline source attribution with popover UI

5. Content Corrections: Updated statistics, market data, and messaging across thesis slides

6. Cosmetic Improvements: Card layouts, refined typography, and visual hierarchy

The slide components can now be imported individually for custom page compositions or reassembled in any order for different presentation contexts.