Astro Knots Landing Page and Toolkit Timeline Improvements

Summary

Created a landing page for the Astro Knots project and made several improvements to the toolkit timeline display. Also wired Astro Knots into the header navigation's project popover menu.

Why Care

Astro Knots is our pseudomonorepo for developing and maintaining multiple Astro/Svelte content-driven websites. It now has a public-facing landing page that articulates the project's philosophy -- co-located development with independent deployment, context vigilance for AI-assisted workflows, and packages born from authentic developer need. The toolkit timeline improvements make the tool discovery experience cleaner with better title context and balanced visual spacing.

Implementation

Astro Knots Landing Page (/projects/gallery/astro-knots)

Page structure:
  1. Hero with "pseudomonorepo" as the highlighted term -- defining the concept for visitors unfamiliar with the approach
  2. "Why a Pseudomonorepo?" section with four value proposition cards in a 2x2 grid:
    • Accelerate with Shared Patterns -- co-locate projects, abstract reusable patterns (markdown pipelines, CSS tokens, OG/SEO techniques)
    • Context Vigilance -- structured, AI-friendly documentation that travels with the workspace
    • Build in Public, Ship in Private -- open learnings, private client projects, independent deployment
    • Packages from Authentic Need -- real packages only when proven (e.g., @lossless-group/lfm)
  3. Sites grid -- 8 cards showing workspace sites with status badges and repo links
  4. Alternating feature sections -- 4 deep-dive blocks covering LFM, pattern strategy, independent deployment, and context-v documentation
Design details:
  • Value cards have left-edge accent gradient bars (lossless accent → aquamarine)
  • Hero subtitle highlights "pseudomonorepo" in accent color
  • Sites grid shows Active/WIP status with color-coded badges
  • Follows the same component patterns as the Content Farm gallery page
Files created:
  • src/pages/projects/gallery/astro-knots.astro -- landing page
  • src/content/messages/projectAstroKnots.json -- feature section data

Header Navigation Update

Added href: "/projects/gallery/astro-knots" to the astro-turf entry in src/config/project-gallery.json. The header's project popover now links directly to the new landing page instead of the default fallback.

Toolkit Timeline Improvements

Title display (site_name: title prefix):
  • When a tool has a site_name property that isn't already contained in the title, it now displays as "Site Name: Title" for better context
  • Handles edge cases: no duplication when site_name is already part of the title, graceful fallback when site_name is absent
  • Applied consistently across all four timeline views: main, yearly, monthly, weekly
Visual spacing:
  • Balanced week container padding -- equal spacing above first week, between weeks, and below last week (was previously jammed against the month header)
  • Switched from margin-bottom per week to gap on the flex container
Typography:
  • Reduced month header font size from 1.75rem to 1.3rem for better proportion with week headers at 1.15rem

Timeline Button in Toolkit Header

Added a "Timeline" link button to the TagShareHeader component, sitting next to the existing share button. Matches the existing button styling (blue tint, rounded, hover effects) with a timeline icon and text label.

Files Changed

text
Created:
  src/pages/projects/gallery/astro-knots.astro
  src/content/messages/projectAstroKnots.json

Modified:
  src/config/project-gallery.json (added href for astro-knots)
  src/components/toolkit/TagShareHeader.astro (added Timeline button)
  src/pages/toolkit/timeline.astro (site_name prefix, spacing, font size)
  src/pages/toolkit/timeline/yearly.astro (site_name prefix)
  src/pages/toolkit/timeline/monthly.astro (site_name prefix)
  src/pages/toolkit/timeline/weekly.astro (site_name prefix)

Build Verification

  • Production build completes successfully
  • Dev server renders all new and modified pages without errors
  • Header navigation correctly links to new Astro Knots landing page