PR #78 — BS-5 Phase 3: Sections 7+8, Subpages, and Blog Pipeline

The Broader Goal at the End of the Previous PR

At the end of Phase 2, the core homepage narrative structure (tagline, terminal carousel, relief section, getting started guide, and feature spotlight) was successfully implemented. The goal of Phase 3 is to achieve full content completion for the website redesign. This includes implementing Section 7 (Docs download), Section 8 (Waitlist form + recent blog posts), creating the standalone subpages (/blog, /docs, /features, /changelog, /about), and setting up the blog compilation pipeline.

Strategic Shifts in This PR

The primary challenge of this phase was sourcing the blog posts. The posts are written and stored in the root docs/blog/ directory, which is outside the website source input folder (website/src/).

To avoid duplicating files in git or introducing heavy NPM build-step dependencies, we implemented a config-time copy strategy inside website/.eleventy.js. Whenever the Eleventy build starts, the configuration dynamically reads the blog posts, copies them to website/src/blog/posts/ (which is ignored in .gitignore), and writes a Directory Data File (posts.json) to apply the blog post Nunjucks layout (blog-post.njk) and slug-based permalinks (/blog/33-pr78-bs5-phase3-agy-subpages/).

For the /changelog subpage, rather than manual copy-pasting, we automated the processing of the root CHANGELOG.md inside .eleventy.js. It strips metadata headers, parses versions, and wraps added/changed/fixed tags in semantic HTML classes so they can be styled with vibrant badges.

What This PR Shipped

• Section 7 (Documentation Download): Replaced the docs section shell with a 3-column grid featuring Quick Start Guide, Command Reference, and The Manual, each with a distinctive dark-gradient header box and link.
• Section 8 (Waitlist + Blog teasers): Replaced the waitlist shell. Added a waitlist form with a JavaScript submission handler that validates inputs, hides the form, and displays a success message. Below the form, a dynamic teaser section renders cards for the 3 most recent blog posts.
• Subpage Suite:
  • /blog: Grid layout displaying all posts sorted by date descending, featuring responsive grids, and mapped hero images or premium fallback gradients.
  • /blog/<slug>: Clean, high-readability typography layout with code block highlights and back-navigation links.
  • /docs: Layout with a responsive sticky sidebar nav linking to individual command reference blocks.
  • /features: Grid expanding the homepage feature spotlight to show Budget Tracking and decentralized Team Mode.
  • /changelog: Automatically rendered root changelog, styled with version badges and green/red/blue status tags.
  • /about: Renders the synlynk mission statement, OS layer architectural definitions, and the roster of humans and agent archetypes.
• Blog Hero Pipeline: Created blogHeroes.json and documented the browser screenshot capture workflow in website/scripts/extract-heroes.js and website/README.md.

Brainstorm Visuals Used

• docs/brainstorm/bs5-website-redesign/hero-v4.html (layout and color alternation guidelines)
• docs/synlynk-quickstart-apple.html (prose and document styles reference)

What This Achieved on the Path to Autonomy

This PR completes the presentation layers of the synlynk ecosystem. By dynamically extracting information from active development documents (CHANGELOG.md and docs/blog/*.md), it demonstrates that presentation pages can be kept in sync with the codebase autonomously. Multi-agent coordination (where Grok owns animations and Agy owns styling/templates) operates within strict boundaries, allowing parallel contributions to coexist seamlessly.

Strategic Note: The Goal at the End of This PR

With all content and subpages in place, the website is feature-complete. The next phase (Phase 4) involves verifying the production build, checking link integrity across all subpages, and integrating the deployment workflow with GitHub Pages ahead of the v0.10.0 developer preview.