.agents/memory/2026-02-23-astro-landing-page-migration-task-1.md

2.4 KiB

2026-02-23 Session Notes

Astro Landing Page Migration (Task #1)

Landing-worker was assigned task #1 of the astro-migration team project: scaffold Astro in web/ and extract the existing landing page from web/public/index.html (2167 lines) into Astro components.

Phase 1 - Project Scaffolding: Created Astro configuration and updated project metadata. Configured astro.config.mjs for static output at site https://www.signetai.sh. Updated package.json to add Astro as a dependency, remove vitest/worker test infrastructure, and standardize build scripts (dev, build, preview, deploy). Created tsconfig.json extending Astro's strict preset. Cleaned up legacy files: removed web/src/index.ts, deleted web/test/ directory and web/vitest.config.mts.

Phase 2 - CSS Extraction: Split CSS into two files following organizational principles. src/styles/global.css contains reusable foundation: CSS custom properties (:root and [data-theme]), reset styles, typography utilities (.text-muted, .text-bright, .text-accent), button/badge component styles, layout helpers (.container, .section-header), navigation/footer styles, responsive breakpoints, and CRT noise effects. src/styles/landing.css contains section-specific styles: hero, architecture showcase, secrets module, manifesto, comparison table, pipeline visualization, code tabs, trust grid, terminal windows, CTAs.

Phase 3 - JavaScript Module Organization: Extracted scripts into three focused modules. theme.ts (~25 lines) handles theme toggle and localStorage persistence—marked for inline inclusion in <head> to prevent flash of unstyled theme (FOUC). interactions.ts (~60 lines) manages parallax scroll effects, intersection observer for reveal animations, copy-to-clipboard functionality, and code tab switching. canvas-animations.ts (~300 lines) contains ASCII dither implementation, latent topology visualization, and hex stream population.

Component Architecture: Created Base layout (src/layouts/Base.astro) with HTML/head structure, Google Fonts preconnection, global CSS import, theme script inline, noise SVG filter definition, and bg-grid element. Extracted 14 landing components (Nav, Footer, ThemeToggle, Hero, Problem, SecretsShowcase, Manifesto, Comparison, CoreFeatures, Pipeline, Quickstart, Trust, Cta, and index.astro page). All components used straight HTML extraction—no refactoring to maintain pixel parity with current site.