feat: move samples into learning hub as Cookbook

- Rename samples page to /learning-hub/cookbook/
- Remove Samples from top navigation bar
- Add Cookbook to learning hub sidebar under Hands-on section
- Add Cookbook card to learning hub index page
- Add redirect from /samples/ to /learning-hub/cookbook/
- Add breadcrumb navigation back to Learning Hub

website/astro.config.mjs

@@ -7,6 +7,9 @@ export default defineConfig({
   base: "/awesome-copilot/",
   output: "static",
   integrations: [sitemap()],
+  redirects: {
+    "/samples/": "/learning-hub/cookbook/",
+  },
   build: {
     assets: "assets",
   },

website/src/layouts/ArticleLayout.astro

@@ -98,6 +98,20 @@ const currentSlug = Astro.url.pathname.replace(/\/$/, '').split('/').pop();
                 ))}
               </ul>
             </div>
+            <div class="sidebar-section">
+              <h3>Hands-on</h3>
+              <ul class="sidebar-nav-list">
+                <li>
+                  <a
+                    href={`${base}learning-hub/cookbook/`}
+                    class={currentSlug === 'cookbook' ? 'active' : ''}
+                    aria-current={currentSlug === 'cookbook' ? 'page' : undefined}
+                  >
+                    Cookbook
+                  </a>
+                </li>
+              </ul>
+            </div>
           </nav>
           <article class="article-content">
             <slot />

website/src/layouts/BaseLayout.astro

@@ -95,10 +95,6 @@ try {
               href={`${base}tools/`}
               class:list={[{ active: activeNav === "tools" }]}>Tools</a
             >
-            <a
-              href={`${base}samples/`}
-              class:list={[{ active: activeNav === "samples" }]}>Samples</a
-            >
             <a
               href={`${base}learning-hub/`}
               class:list={[{ active: activeNav === "learning-hub" }]}>Learning Hub</a

website/src/pages/learning-hub/cookbook/index.astro

@@ -1,15 +1,18 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
-import Modal from '../components/Modal.astro';
+import Modal from '../../../components/Modal.astro';
 
 const base = import.meta.env.BASE_URL;
 ---
 
-<BaseLayout title="Samples" description="Code samples, recipes, and examples for building with GitHub Copilot" activeNav="samples">
+<BaseLayout title="Cookbook" description="Code samples, recipes, and examples for building with GitHub Copilot" activeNav="learning-hub">
   <main id="main-content">
     <div class="page-header">
       <div class="container">
-        <h1>📚 Samples & Recipes</h1>
+        <nav class="breadcrumb" aria-label="Breadcrumb">
+          <a href={`${base}learning-hub/`}>← Learning Hub</a>
+        </nav>
+        <h1>🍳 Cookbook</h1>
         <p>Code samples, recipes, and examples for building with GitHub Copilot tools</p>
       </div>
     </div>
@@ -243,6 +246,6 @@ const base = import.meta.env.BASE_URL;
   </style>
 
   <script>
-    import '../scripts/pages/samples';
+    import '../../../scripts/pages/samples';
   </script>
 </BaseLayout>

website/src/pages/learning-hub/index.astro

@@ -93,6 +93,26 @@ const reference = articles
             ))}
           </div>
         </section>
+        <section class="learning-hub-section">
+          <h2>Hands-on</h2>
+          <p class="section-description">Interactive samples and recipes to learn by doing.</p>
+          <div class="article-list">
+            <a href={`${base}learning-hub/cookbook/`} class="article-card">
+              <div class="article-number" aria-hidden="true">🍳</div>
+              <div class="article-info">
+                <h3>Cookbook</h3>
+                <p>Code samples, recipes, and examples for building with GitHub Copilot tools</p>
+                <div class="article-meta">
+                  <span class="meta-item">
+                    <span class="tag">samples</span>
+                    <span class="tag">recipes</span>
+                    <span class="tag">sdk</span>
+                  </span>
+                </div>
+              </div>
+            </a>
+          </div>
+        </section>
       </div>
     </div>
   </main>