Refactor installation page state/layout to fix dynamic TOC, mobile responsiveness, and hydration overhead

[Copilot]

/installation had two coupled issues: guide switching was DOM-driven and left TOC state stale (preparedGuides[0]), and heavy inline styling caused brittle responsive behavior. This PR moves guide/TOC coordination into a single client state boundary, removes inline layout styling in favor of Tailwind utilities, and tightens semantics/a11y without changing SEO metadata wiring.

• Guide state + TOC synchronization

  • Added InstallationSidebarClient to own activeGuideId (desktop links + mobile select).
  • TableOfContentsClient now receives active guide context and rebinds to that guide’s headings.
  • TOC active-section highlighting uses scoped IntersectionObserver against the currently visible guide article.

• Responsive layout refactor (Tailwind-first)

  • Removed inline styles from src/pages/installation.astro.
  • Replaced static sidebar behavior with responsive UI:
    • desktop: app link list
    • mobile: app <select> control
  • Article visibility now uses class toggling (hidden / flex) + aria-hidden instead of style mutation.

• Performance and hydration

  • Changed MainNavbar hydration on installation page from client:load → client:idle.
  • Preserved ShowcaseViewer hydration as client:visible.
  • Added decoding="async" to showcase images (lazy loading already in place).

• SEO + accessibility

  • Kept <PageSEO routeKey="/installation" /> and BaseLayout unchanged.
  • Added/updated aria-current usage for active app links and TOC location.
  • Improved interactive control labeling and removed redundant ARIA.
  • Hardened selector usage with CSS.escape(...) for safe DOM queries.

// sidebar-driven guide switch now updates both content and TOC source
<InstallationSidebarClient
  client:idle
  guides={sidebarLinks}
  initialGuideId={preparedGuides[0]?.guide.id ?? ''}
/>

// dynamic TOC, scoped to currently active guide
<TableOfContentsClient headings={activeGuide.headings} activeGuideId={activeGuideId} />

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	posterium-frontend	2922104	Commit Preview URL Branch Preview URL	Apr 05 2026, 12:15 PM