Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- **Awesome GitHub Site: Complete Astro Rebuild** — Rebuilt the Awesome GitHub site from a React/Babel prototype into a production-ready Astro 5 static site. Includes: a fully-typed TypeScript data layer (`catalogue.ts`, `learn.ts`, `glossary.ts`) porting 110+ catalogue items across 8 categories; Svelte `SearchPalette` component with Cmd/Ctrl+K activation; 252 statically-generated pages (catalogue, learn tracks, glossary, cookbook, getting-started, why); detail pages with Install-in-VS-Code, copy-URL, copy-file, and View-on-GitHub action buttons; mobile hamburger navigation with animated X icon and keyboard Escape support; expanded footer with brand and navigation columns; and a `why.astro` editorial page.

- **LightSpeedWP Agency Homepage: Complete Component System** — Built a production-ready homepage for the LightSpeedWP Agency website with 9 modular Astro components (Nav, HeroPlanner, TrustStrip, SolutionPaths, WhyLightSpeed, FAQ, FinalCTA, Footer, ContactOverlay). Features include sticky navigation with scroll detection, mobile drawer with theme toggle, AI project planner with form validation, responsive stats grid, 4 solution path cards with highlighting, single-open accordion FAQ with 7 questions, contact modal with success state, and comprehensive design system with light/dark mode support across 9 responsive breakpoints. All components include WCAG 2.2 AA accessibility attributes, semantic HTML5, and CSS variable theming for consistent branding.
- **Awesome GitHub Navigation Redesign: Mega Menu & Accessibility Enhancements** — Redesigned header navigation with single "Browse" mega menu organizing 22 resources across 4 logical sections (Catalogues, More, Cook & Learn, Resources). Implemented comprehensive accessibility improvements including keyboard navigation (Tab+Enter/Space activation), proper ARIA attributes, semantic button elements replacing non-focusable anchors, centered menu positioning to prevent viewport clipping at 1025-1180px widths, and fixed drawer overflow for smooth scrolling. All changes comply with WCAG 2.2 AA+ contrast ratios in both light and dark modes.
- **Awesome GitHub Site Phase 2a: Three-Pillar Governance Framework** — Integrated PR #809's three-pillar design approach on top of Phase 2a's dynamic foundation by adding comprehensive CSS styling for the pillar section (`.pillar-grid`, `.pillar`, `.pillar-links`). Features 3-column responsive grid layout with hover effects, accent color styling, light/dark theme variants, and mobile collapse to single column. Completes visual integration of Automation, Governance, and AI Integration framework while preserving dynamic catalogue loading and conference messaging.
Expand Down
189 changes: 165 additions & 24 deletions website/src/components/AwesomeGithub/AwesomeGithubFooter.astro
Original file line number Diff line number Diff line change
@@ -1,63 +1,204 @@
---
// Footer component for Awesome GitHub site
const base = import.meta.env.BASE_URL;
---

<footer class="ag-footer">
<div class="ag-footer-container">
<div class="ag-footer-mark">
<span class="ag-footer-logo">✦</span>
<div class="ag-footer-brand">
<a href={`${base}`} class="ag-footer-logo-link">
<span class="ag-footer-logo" aria-hidden="true">✦</span>
<span class="ag-footer-brand-text">
<span>Awesome</span><span class="ag-footer-brand-em">GitHub</span>
</span>
</a>
<p class="ag-footer-tagline">Governance, not opinions.</p>
</div>
<p class="ag-footer-copy">Crafted with care in WordPress.</p>

<nav class="ag-footer-nav" aria-label="Footer navigation">
<div class="ag-footer-col">
<h3 class="ag-footer-col-title">Explore</h3>
<ul class="ag-footer-links">
<li><a href={`${base}c/agents/`}>Agents</a></li>
<li><a href={`${base}c/instructions/`}>Instructions</a></li>
<li><a href={`${base}c/prompts/`}>Prompts</a></li>
<li><a href={`${base}c/skills/`}>Skills</a></li>
<li><a href={`${base}c/hooks/`}>Hooks</a></li>
<li><a href={`${base}c/workflows/`}>Workflows</a></li>
</ul>
</div>

<div class="ag-footer-col">
<h3 class="ag-footer-col-title">Learn</h3>
<ul class="ag-footer-links">
<li><a href={`${base}learn/`}>Learning Centre</a></li>
<li><a href={`${base}learn/oriented/`}>Getting Oriented</a></li>
<li><a href={`${base}learn/governance/`}>Governance</a></li>
<li><a href={`${base}learn/quality/`}>Quality</a></li>
<li><a href={`${base}cookbook/`}>Cookbook</a></li>
<li><a href={`${base}glossary/`}>Glossary</a></li>
</ul>
</div>

<div class="ag-footer-col">
<h3 class="ag-footer-col-title">About</h3>
<ul class="ag-footer-links">
<li><a href={`${base}why/`}>Why This Exists</a></li>
<li><a href={`${base}references/`}>References</a></li>
<li><a href={`${base}getting-started/`}>Getting Started</a></li>
<li>
<a
href="https://github.com/lightspeedwp/.github"
target="_blank"
rel="noopener noreferrer"
>GitHub Repository ↗</a>
</li>
<li>
<a
href="https://github.com/lightspeedwp/.github/blob/develop/AGENTS.md"
target="_blank"
rel="noopener noreferrer"
>AGENTS.md ↗</a>
</li>
</ul>
</div>
</nav>
</div>

<div class="ag-footer-bottom">
<p>
Built by <a href="https://lightspeedwp.agency" target="_blank" rel="noopener noreferrer">LightSpeed WP Agency</a>.
Open source under the <a href="https://github.com/lightspeedwp/.github/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">GPL v3 Licence</a>.
</p>
Comment thread
ashleyshaw marked this conversation as resolved.
</div>
</footer>

<style>
.ag-footer {
background: var(--c-black);
color: var(--c-white);
padding: var(--space-16) var(--gutter);
text-align: center;
padding: var(--space-16) var(--gutter) 0;
}

.ag-footer-container {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-16);
padding-bottom: var(--space-16);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ag-footer-brand {
display: flex;
flex-direction: column;
gap: var(--space-3);
}

.ag-footer-logo-link {
display: inline-flex;
align-items: center;
gap: var(--space-4);
gap: var(--space-2);
text-decoration: none;
color: var(--c-white);
}

.ag-footer-logo {
display: inline-block;
font-size: 24px;
margin-bottom: var(--space-4);
animation: gentle-glow 3s ease-in-out infinite;
font-size: 20px;
}

.ag-footer-brand-text {
font-size: 16px;
font-weight: var(--weight-bold);
font-family: var(--font-display);
display: flex;
gap: var(--space-1);
}

.ag-footer-brand-em {
color: var(--c-light-blue);
}

.ag-footer-tagline {
font-size: var(--fs-body-sm);
color: var(--c-slate-400);
margin: 0;
font-style: italic;
}

.ag-footer-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}

.ag-footer-col-title {
font-size: var(--fs-eyebrow);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
color: var(--c-slate-300);
margin: 0 0 var(--space-4) 0;
}

.ag-footer-copy {
.ag-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}

.ag-footer-links a {
font-size: var(--fs-body-sm);
color: var(--c-slate-400);
font-weight: var(--weight-regular);
text-decoration: none;
transition: color var(--dur) var(--ease-out);
}

@keyframes gentle-glow {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
.ag-footer-links a:hover {
color: var(--c-white);
}

.ag-footer-bottom {
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-6) 0;
}

.ag-footer-bottom p {
font-size: var(--fs-body-sm);
color: var(--c-slate-500);
margin: 0;
}

.ag-footer-bottom a {
color: var(--c-slate-400);
text-decoration: none;
transition: color var(--dur) var(--ease-out);
}

.ag-footer-bottom a:hover {
color: var(--c-white);
}

@media (max-width: 900px) {
.ag-footer-container {
grid-template-columns: 1fr;
gap: var(--space-10);
}
}

@media (max-width: 768px) {
.ag-footer {
padding: var(--space-10) var(--gutter);
@media (max-width: 640px) {
.ag-footer-nav {
grid-template-columns: repeat(2, 1fr);
}
}

.ag-footer-copy {
font-size: var(--fs-body-sm);
@media (max-width: 480px) {
.ag-footer-nav {
grid-template-columns: 1fr;
}
}
</style>
Loading
Loading