website tweaks (#952)

* Adding nav to learning hub

* Simplifying the home page

* Fixing footer spacing

website/src/components/Footer.astro

@@ -1,22 +1,76 @@
 ---
-import type { Props } from '@astrojs/starlight/props';
-import Default from '@astrojs/starlight/components/Footer.astro';
+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";
 ---
 
-<Default {...Astro.props}><slot /></Default>
-
-<div class="made-by">
-  <p>Made with ❤️ by our amazing <a href="/contributors/">contributors</a></p>
+<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 ❤️ by our amazing <a href="/contributors/">contributors</a></p>
+</footer>
 
 <style>
+  footer {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .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;
-    padding: 1rem 0 1.5rem;
+    margin: 0 auto 0.75rem;
     font-size: var(--sl-text-xs);
     color: var(--sl-color-gray-3);
   }
 
+  .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);
+  }
+
+  .kudos:hover {
+    color: var(--sl-color-white);
+  }
+
+  .kudos :global(svg) {
+    color: var(--sl-color-orange);
+  }
+
   .made-by a {
     color: var(--sl-color-gray-3);
     text-decoration: underline;

website/src/content/docs/learning-hub/index.md

@@ -1,15 +1,6 @@
 ---
 title: Learning Hub
 description: 'Curated articles, walkthroughs, and reference material to help you unlock everything you can do with GitHub Copilot'
-template: splash
-hero:
-  tagline: 'Curated articles, walkthroughs, and reference material to help you unlock everything you can do with GitHub Copilot'
-  actions:
-    - text: Start with Fundamentals
-      link: what-are-agents-skills-instructions/
-      icon: right-arrow
-sidebar:
-  hidden: true
 tableOfContents: false
 ---
 

website/src/pages/index.astro

@@ -92,39 +92,6 @@ const base = import.meta.env.BASE_URL;
       </div>
     </section>
 
-    <!-- Featured Plugins -->
-    <section class="featured" aria-labelledby="featured-heading">
-      <div class="container">
-        <h2 id="featured-heading">Featured Plugins</h2>
-        <div id="featured-plugins" class="cards-grid" aria-live="polite">
-          <!-- Populated by JS -->
-        </div>
-      </div>
-    </section>
-
-    <!-- Getting Started -->
-    <section class="getting-started" aria-labelledby="getting-started-heading">
-      <div class="container">
-        <h2 id="getting-started-heading">Getting Started</h2>
-        <div class="steps">
-          <div class="step">
-            <div class="step-number" aria-hidden="true">1</div>
-            <h3>Browse</h3>
-            <p>Explore agents, instructions, skills, and plugins</p>
-          </div>
-          <div class="step">
-            <div class="step-number" aria-hidden="true">2</div>
-            <h3>Preview</h3>
-            <p>Click any item to view its full content</p>
-          </div>
-          <div class="step">
-            <div class="step-number" aria-hidden="true">3</div>
-            <h3>Install</h3>
-            <p>One-click install to VS Code or copy to clipboard</p>
-          </div>
-        </div>
-      </div>
-    </section>
   </main>
 
   <Modal />

website/src/scripts/pages/index.ts

@@ -97,37 +97,6 @@ export async function initHomepage(): Promise<void> {
     }
   }
 
-  // Load featured plugins
-  const pluginsData = await fetchData<PluginsData>('plugins.json');
-  if (pluginsData && pluginsData.items) {
-    const featured = pluginsData.items.filter(c => c.featured).slice(0, 6);
-    const featuredEl = document.getElementById('featured-plugins');
-    if (featuredEl) {
-      if (featured.length > 0) {
-        featuredEl.innerHTML = featured.map(c => `
-          <div class="card" data-path="${escapeHtml(c.path)}">
-            <h3>${escapeHtml(c.name)}</h3>
-            <p>${escapeHtml(truncate(c.description, 80))}</p>
-            <div class="resource-meta">
-              <span class="resource-tag">${c.itemCount} items</span>
-              ${c.tags?.slice(0, 3).map(t => `<span class="resource-tag">${escapeHtml(t)}</span>`).join('') || ''}
-            </div>
-          </div>
-        `).join('');
-
-        // Add click handlers
-        featuredEl.querySelectorAll('.card').forEach(el => {
-          el.addEventListener('click', () => {
-            const path = (el as HTMLElement).dataset.path;
-            if (path) openFileModal(path, 'plugin');
-          });
-        });
-      } else {
-        featuredEl.innerHTML = '<p style="text-align: center; color: var(--color-text-muted);">No featured plugins yet</p>';
-      }
-    }
-  }
-
   // Setup modal
   setupModal();
 }