github · joeVenner · Jun 14, 2026 · Jun 14, 2026 · Jun 14, 2026 · Jun 14, 2026
@@ -58,4 +58,4 @@ ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afte
 
 # Skip certain files and directories
 
-skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/*.json,./skills/geofeed-tuner/references/*.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/*.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/*.txt
+skip = .git,node_modules,package-lock.json,*.lock,*.min.js,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/*.json,./skills/geofeed-tuner/references/*.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/*.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/*.txt
@@ -24,3 +24,6 @@ website/public/llms.txt
 *.sln
 obj/
 bin/
+
+# Local dev logs
+website/ws.log
@@ -0,0 +1,45 @@
+# Project Discoveries
+
+A living log of architectural decisions, patterns, and hard-learned lessons for the Awesome GitHub Copilot website.
+
+## [2026-06-15] macOS glass theme direction and reusable glass-card surface
+
+- **What changed:** Introduced a `.glass-card` utility in `website/src/styles/global.css` and simplified the theme toggle to an explicit dark/light toggle while still defaulting first-time visits to the system preference.
+- **Why:** We want a consistent, big-tech-grade translucent glass aesthetic across landing and content pages without rebuilding every card component from scratch. Removing the `auto` toggle state reduces UI ambiguity while still respecting the OS default on first paint.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/ThemeToggle.astro`, `website/src/components/Head.astro`, plus new `.astro` pages (`how-to-use.astro`, `contribute.astro`) and sidebar entries.
+- **Reference:** `feature/website-polish` branch commits around `a27fa743`–`fc354282`.
+
+## [2026-06-15] Landing-page restructure into intent-driven sections
+
+- **What changed:** Rewrote `website/src/pages/index.astro` using new components (`Hero`, `HomeCategoryCard`, `QuickLinks`, `StatsRibbon`) and moved the flat 9-card grid into three clusters: *Code smarter*, *Automate workflows*, and *Extend and learn*.
+- **Why:** A directory-style grid surfaces taxonomy before user intent. Grouping cards by what the user wants to do makes the landing page feel like a product destination rather than an awesome-list index.
+- **Impact:** `website/src/pages/index.astro`, `website/src/components/home/*`, `website/src/scripts/pages/index.ts`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `3bd10087`–`3e724813`.
+
+## [2026-06-15] Extended glass theme to listing pages and completed landing page sections
+
+- **What changed:** Applied the glass-card surface to resource listing pages (resource items, listing toolbar, search/filter inputs, ContributeCTA) and added the final landing-page sections: *How it works*, *Install in seconds*, and *Built by developers, for developers*. Also added an optional `class` prop to the `Icon` component.
+- **Why:** Consistency across the site reinforces the product-site aesthetic and gives users a clear path from discovery → installation → contribution.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/PageHeader.astro`, `website/src/components/ContributeCTA.astro`, `website/src/components/Icon.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/InstallCard.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/pages/index.astro`.
+- **Reference:** `feature/website-polish` branch commits around `5a0f0e20`–`a32d148b`.
+
+## [2026-06-15] UI refinements based on feedback
+
+- **What changed:** Removed the hero animated background, simplified the theme toggle to a minimalist icon button, cleaned up button colors (removed purple glow primary), fixed GitHub icon alignment, aligned stats baselines, increased search results height, and redesigned *How it works* as a commit-history timeline.
+- **Why:** The first iteration had visual noise (orbs, purple buttons, misaligned icons) and inconsistent card sizing. Simplifying the palette and aligning elements gives the page the calm, big-tech finish requested.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/ThemeToggle.astro`, `website/src/components/home/Hero.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/components/home/InstallCard.astro`, `website/src/scripts/pages/index.ts`.
+- **Reference:** `feature/website-polish` branch commits around `7b306c03`–`04f7b7c2`.
+
+## [2026-06-15] Final alignment and icon polish
+
+- **What changed:** Fixed stats ribbon alignment so all items line up, bumped the hero GitHub button icon to 22px with proper vertical centering, redesigned *How it works* into a true GitHub-style vertical commit history, aligned the *Install in seconds* icon with its title, and enlarged the GitHub logo in the *Built by developers* CTA.
+- **Why:** The previous commit-history timeline was still card-like; a vertical line with connected commit dots reads more authentically like a GitHub history and balances the page.
+- **Impact:** `website/src/components/home/StatsRibbon.astro`, `website/src/components/home/Hero.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/InstallCard.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `04809234`–`1c0aaee3`.
+
+## [2026-06-15] Site footer and resource-modal text rendering
+
+- **What changed:** Replaced the minimal Starlight footer with a proper site footer (`website/src/components/Footer.astro`) containing brand links, browse and resource columns, the theme toggle, and copyright/credits. Also fixed resource-listing modal text rendering by styling `.modal-body` (scrollable, flex-fill, proper background) and both raw (`#modal-content pre`) and rendered (`.modal-rendered-content`) markdown views with readable colors, typography, and code blocks.
+- **Why:** A custom footer completes the product-site experience and gives users persistent navigation to every resource type. The modal was missing body/content styles entirely, so long files could overflow and rendered markdown had no typography or contrast guarantees.
+- **Impact:** `website/src/components/Footer.astro`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `6a8aecec`–`e914f6d0`.
@@ -71,6 +71,21 @@ export default defineConfig({
           "https://github.com/github/awesome-copilot/edit/staged/website/",
       },
       sidebar: [
+        {
+          label: "Browse Resources",
+          items: [
+            { label: "Home", link: "/" },
+            { label: "Agents", link: "/agents/" },
+            { label: "Instructions", link: "/instructions/" },
+            { label: "Skills", link: "/skills/" },
+            { label: "Hooks", link: "/hooks/" },
+            { label: "Workflows", link: "/workflows/" },
+            { label: "Canvas Extensions", link: "/extensions/" },
+            { label: "Plugins", link: "/plugins/" },
+            { label: "Tools", link: "/tools/" },
+            { label: "Contributors", link: "/contributors/" },
+          ],
+        },
         {
           label: "Fundamentals",
           items: [

@@ -8,8 +8,8 @@ const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CON
 const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
 ---
 
-<aside class="contribute-cta" aria-label="Contribute">
-  <div class="contribute-cta-inner">
+<aside class="contribute-cta reveal" aria-label="Contribute">
+  <div class="contribute-cta-inner glass-card">
     <div class="contribute-cta-content">
       <h2 class="contribute-cta-title">Don't see what you're looking for?</h2>
       <p class="contribute-cta-description">This collection is community-driven. Share your own {resourceType} to help others get more out of GitHub Copilot.</p>
@@ -40,8 +40,6 @@ const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
     justify-content: space-between;
     gap: 32px;
     padding: 32px 40px;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
     border-radius: var(--border-radius-lg);
     position: relative;
     overflow: hidden;

@@ -1,87 +1,85 @@
 ---
-import EditLink from "@astrojs/starlight/components/EditLink.astro";
-import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
-import Pagination from "@astrojs/starlight/components/Pagination.astro";
-import config from "virtual:starlight/user-config";
-import { Icon } from "@astrojs/starlight/components";
 import ThemeToggle from "./ThemeToggle.astro";
----
-
-<footer class="sl-flex">
-  <div class="meta sl-flex">
-    <EditLink />
-    <LastUpdated />
-  </div>
-  <Pagination />
-
-  {
-    config.credits && (
-      <a class="kudos sl-flex" href="https://starlight.astro.build">
-        <Icon name={"starlight"} /> {Astro.locals.t("starlight:builtWithStarlight.label")}
-      </a>
-    )
-  }
-
-  <p class="made-by">Made with love by our amazing <a href="/contributors/">contributors</a></p>
-</footer>
 
-<ThemeToggle />
+const base = import.meta.env.BASE_URL;
+const githubUrl = "https://github.com/github/awesome-copilot";
+const currentYear = new Date().getFullYear();
 
-<style>
-  footer {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
+const browseLinks = [
+  { label: "Agents", href: `${base}agents/` },
+  { label: "Skills", href: `${base}skills/` },
+  { label: "Instructions", href: `${base}instructions/` },
+  { label: "Plugins", href: `${base}plugins/` },
+  { label: "Hooks", href: `${base}hooks/` },
+  { label: "Workflows", href: `${base}workflows/` },
+  { label: "Tools", href: `${base}tools/` },
+  { label: "Learning Hub", href: `${base}learning-hub/` },
+];
 
-  .meta {
-    gap: 0.75rem 3rem;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 0.75rem;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
-  }
-
-  .meta > :global(p:only-child) {
-    margin-inline-start: auto;
-  }
-
-  :global(.pagination-links:empty) {
-    display: none;
-  }
-
-  .made-by {
-    text-align: center;
-    margin: 0 auto 0.75rem;
-    font-size: var(--sl-text-xs);
-    color: var(--sl-color-gray-3);
-  }
+const resourceLinks = [
+  { label: "How to Use", href: `${base}how-to-use/` },
+  { label: "Contribute", href: `${base}contribute/` },
+  { label: "Contributors", href: `${base}contributors/` },
+  { label: "GitHub", href: githubUrl },
+  { label: "License", href: `${githubUrl}/blob/main/LICENSE` },
+];
+---
 
-  .kudos {
-    align-items: center;
-    gap: 0.5em;
-    margin: 0 auto;
-    font-size: var(--sl-text-xs);
-    text-decoration: none;
-    color: var(--sl-color-gray-3);
-  }
+<footer class="site-footer" aria-labelledby="footer-heading">
+  <h2 id="footer-heading" class="sr-only">Site footer</h2>
 
-  .kudos:hover {
-    color: var(--sl-color-white);
-  }
+  <div class="footer-inner">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <a href={base} class="footer-brand-link" aria-label="Awesome GitHub Copilot home">
+          <span class="footer-title">Awesome GitHub Copilot</span>
+        </a>
+        <p class="footer-tagline">
+          Community-contributed agents, instructions, and skills to supercharge
+          your Copilot experience.
+        </p>
+        <div class="footer-theme-toggle">
+          <ThemeToggle />
+        </div>
+      </div>
 
-  .kudos :global(svg) {
-    color: var(--sl-color-orange);
-  }
+      <nav class="footer-nav footer-nav--compact" aria-label="Browse resources">
+        <h3>Browse</h3>
+        <ul>
+          {
+            browseLinks.map((link) => (
+              <li>
+                <a href={link.href}>{link.label}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
 
-  .made-by a {
-    color: var(--sl-color-gray-3);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-    transition: color 0.2s ease;
-  }
+      <nav class="footer-nav footer-nav--compact" aria-label="Project resources">
+        <h3>Resources</h3>
+        <ul>
+          {
+            resourceLinks.map((link) => (
+              <li>
+                <a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel={link.href.startsWith("http") ? "noopener" : undefined}>
+                  {link.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+    </div>
 
-  .made-by a:hover {
-    color: var(--sl-color-accent);
-  }
-</style>
+    <div class="footer-legal">
+      <p class="footer-copyright">
+        © {currentYear} GitHub, Inc. Licensed under the MIT License.
+      </p>
+      <p class="footer-credits">
+        Made with love by our amazing{" "}
+        <a href={`${base}contributors/`}>contributors</a>.
+      </p>
+    </div>
+  </div>
+</footer>
@@ -51,13 +51,21 @@ const twitterDomain =
     const STORAGE_KEY = 'awesome-copilot-theme';
     const stored = localStorage.getItem(STORAGE_KEY);
 
-    // Theme handling:
-    // - 'dark' or 'light' → set data-theme attribute to that value
-    // - 'auto' or unset → don't set data-theme (CSS media query handles system preference)
+    // Resolve the effective theme as early as possible so the first paint
+    // already uses the right palette. The ThemeToggle component mirrors this
+    // logic at runtime; keep them in sync.
     if (stored === 'dark' || stored === 'light') {
       document.documentElement.setAttribute('data-theme', stored);
+      // Keep Starlight's own theme key in sync so Starlight's bundled script does
+      // not override our explicit choice on hydration.
+      localStorage.setItem('starlight-theme', stored);
+    } else {
+      // No explicit preference yet: follow the system, defaulting to light.
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const systemTheme = prefersDark ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-theme', systemTheme);
+      localStorage.setItem('starlight-theme', systemTheme);
     }
-    // For 'auto' or unset, no attribute means CSS media query controls theme
   })();
 </script>
 

@@ -4,7 +4,8 @@
 // GitHub Primer icons are sourced from https://primer.style/foundations/icons/
 
 export interface Props {
-  name: 'agents' | 'instructions' | 'skills' | 'hooks' | 'workflows' | 'plugins' | 'tools' | 'learning' | 'close' | 'copy' | 'download' | 'share' | 'external' | 'plus' | 'search' | 'chevron-down' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'robot' | 'sync';
+  name: 'agents' | 'instructions' | 'skills' | 'hooks' | 'workflows' | 'plugins' | 'tools' | 'learning' | 'close' | 'copy' | 'download' | 'share' | 'external' | 'plus' | 'search' | 'chevron-down' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'robot' | 'sync' | 'mark-github';
+  class?: string;
   size?: number;
   class?: string;
 }
@@ -69,6 +70,12 @@ const icons: Record<string, { path: string; fill?: boolean }> = {
     path: `<path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
   },
 
+  // GitHub mark icon - Primer / Octicons
+  'mark-github': {
+    fill: true,
+    path: `<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>`
+  },
+
   'copy': {
     path: `<path d="M8 4h8a2 2 0 0 1 2 2v8M8 4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 4v10a2 2 0 0 0 2 2h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
   },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,4 +58,4 @@ ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afte

		# Skip certain files and directories

		skip = .git,node_modules,package-lock.json,.lock,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/.json,./skills/geofeed-tuner/references/.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/*.txt
		skip = .git,node_modules,package-lock.json,.lock,.min.js,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/.json,./skills/geofeed-tuner/references/.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/.txt
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,3 +24,6 @@ website/public/llms.txt @@
     *.sln
     obj/
     bin/
+    # Local dev logs
+    website/ws.log