Lossless Changelog
product

Project Scaffold Summary — coglet-shuffle (Pug → Astro Migration Complete)

Full Pug-to-Astro migration of the Coglet Shuffle steampunk marketing site — 12 components, Alpine.js mobile nav, Tailwind v4 CSS-based theming, and a passing production build.

Michael StatonMusic Editoraugmented with Claude Code on Claude Sonnet 4.6

Project Scaffold Summary — coglet-shuffle (Pug → Astro Migration Complete)

Why Care?

Coglet Shuffle started as a Shuffle.dev–exported Pug template — polished visuals, steampunk aesthetic, but stuck in a build toolchain that made ongoing development awkward. The migration to Astro brings it into the same stack as the rest of the Astro Knots family: Astro 5, Tailwind v4, pnpm, deployable anywhere.

This entry initializes the changelog/ for the repo. Prior progress lives only in the MIGRATION-STATUS.md file and git history.

What's New? (as of 2026-07-06)

Migration is 100% complete. All 12 original components have been ported:

ComponentFile
Navigation (with Alpine.js mobile dropdown)Navigation.astro
Hero sectionHero.astro
Applications Section × 2ApplicationsSection.astro, ApplicationsSection2.astro
Co-Design CTACoDesignCTA.astro
Features SectionFeaturesSection.astro
Stats SectionStatsSection.astro
Testimonials (static 6-card grid)TestimonialsSection.astro
Newsletter (× 2 locations)NewsletterSection.astro
Final CTAFinalCTA.astro
FooterFooter.astro
Base LayoutLayout.astro

Production build: passing. 1 page built, ~510ms.

Architecture Notes

The repo has an unusual two-level structure — the original Pug source is preserved at root, and the active Astro project lives at astro-site/:

coglet-shuffle/
├── src/           # Original Pug source (reference only — do not edit)
├── public/        # Generated HTML from Pug (reference only)
└── astro-site/    # ← ACTIVE Astro project (work here)
    ├── src/
    │   ├── pages/index.astro
    │   ├── layouts/Layout.astro
    │   └── components/  (12 components)
    └── public/
        └── saturn-assets/

Custom theme: Orange #FF460C palette, steampunk styling, Sora + Playfair Display fonts. Tailwind v4 @theme directive — CSS-based config, no JS config file.

Alpine.js used only for the mobile navigation dropdown. Everything else is CSS.

What's Next

  • Upgrade from Astro 5 → 7

  • Consider collapsing astro-site/ to the repo root (the Pug source is reference-only, no longer needed)

  • Connect newsletter forms to a backend

  • Add context-v/ for specs

  • Carousel testimonials (currently a static 6-card grid)

  • WebP image optimization