Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-03-13 12:45:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add sticky sidebar navigation to Learning Hub index

Browse Source 
Add a left sidebar to the Learning Hub index page matching the pattern
already used on individual article pages. The sidebar lists all articles
grouped by section (Fundamentals, Reference, Hands-on) and stays sticky
while scrolling, reducing vertical scroll for the now 10-article list.

Also update ArticleLayout.astro fundamentalsOrder to include the 4 new
articles added in the previous commit.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
2026-02-26 12:50:19 +11:00
parent 48ca6b237f
commit 2d75b4429f
2 changed files with 118 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/src/layouts/ArticleLayout.astro
View File

@@ -16,11 +16,15 @@ const base = import.meta.env.BASE_URL;
const articles = await getCollection('learning-hub'); const articles = await getCollection('learning-hub');
const fundamentalsOrder = [ const fundamentalsOrder = [
'what-are-agents-prompts-instructions', 'what-are-agents-skills-instructions',
'understanding-copilot-context', 'understanding-copilot-context',
'copilot-configuration-basics', 'copilot-configuration-basics',
'defining-custom-instructions', 'defining-custom-instructions',
'creating-effective-prompts', 'creating-effective-skills',
'building-custom-agents',
'understanding-mcp-servers',
'automating-with-hooks',
'using-copilot-coding-agent',
'before-after-customization-examples', 'before-after-customization-examples',
]; ];

184
website/src/pages/learning-hub/index.astro
View File

@@ -42,81 +42,121 @@ const reference = articles
<div class="page-content"> <div class="page-content">
<div class="container"> <div class="container">
<section class="learning-hub-section"> <div class="learning-hub-layout">
<h2>Fundamentals</h2> <nav class="learning-hub-sidebar" aria-label="Learning Hub sections">
<p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p> <div class="sidebar-section">
<div class="article-list"> <h3>Fundamentals</h3>
{fundamentals.map((article, index) => ( <ol class="sidebar-nav-list">
<a href={`${base}learning-hub/${article.id}/`} class="article-card"> {fundamentals.map((article) => (
<div class="article-number" aria-hidden="true">{index + 1}</div> <li>
<div class="article-info"> <a href={`${base}learning-hub/${article.id}/`}>
<h3>{article.data.title}</h3> {article.data.title}
<p>{article.data.description}</p> </a>
<div class="article-meta"> </li>
{article.data.estimatedReadingTime && ( ))}
<span class="meta-item">📖 {article.data.estimatedReadingTime}</span> </ol>
)} </div>
{article.data.tags && article.data.tags.length > 0 && ( <div class="sidebar-section">
<span class="meta-item"> <h3>Reference</h3>
{article.data.tags.map((tag) => ( <ul class="sidebar-nav-list">
<span class="tag">{tag}</span> {reference.map((article) => (
))} <li>
</span> <a href={`${base}learning-hub/${article.id}/`}>
)} {article.data.title}
</div> </a>
</div> </li>
</a> ))}
))} </ul>
</div> </div>
</section> <div class="sidebar-section">
<h3>Hands-on</h3>
<ul class="sidebar-nav-list">
<li>
<a href={`${base}learning-hub/cookbook/`}>Cookbook</a>
</li>
</ul>
</div>
</nav>
<section class="learning-hub-section"> <div class="learning-hub-index-content">
<h2>Reference</h2> <section class="learning-hub-section" id="fundamentals">
<p class="section-description">Quick-lookup resources to keep handy while you work.</p> <h2>Fundamentals</h2>
<div class="article-list"> <p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
{reference.map((article) => ( <div class="article-list">
<a href={`${base}learning-hub/${article.id}/`} class="article-card"> {fundamentals.map((article, index) => (
<div class="article-number" aria-hidden="true">📖</div> <a href={`${base}learning-hub/${article.id}/`} class="article-card">
<div class="article-info"> <div class="article-number" aria-hidden="true">{index + 1}</div>
<h3>{article.data.title}</h3> <div class="article-info">
<p>{article.data.description}</p> <h3>{article.data.title}</h3>
<div class="article-meta"> <p>{article.data.description}</p>
{article.data.estimatedReadingTime && ( <div class="article-meta">
<span class="meta-item">📖 {article.data.estimatedReadingTime}</span> {article.data.estimatedReadingTime && (
)} <span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
{article.data.tags && article.data.tags.length > 0 && ( )}
<span class="meta-item"> {article.data.tags && article.data.tags.length > 0 && (
{article.data.tags.map((tag) => ( <span class="meta-item">
<span class="tag">{tag}</span> {article.data.tags.map((tag) => (
))} <span class="tag">{tag}</span>
</span> ))}
)} </span>
</div> )}
</div> </div>
</a> </div>
))} </a>
</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> </div>
</a> </section>
<section class="learning-hub-section" id="reference">
<h2>Reference</h2>
<p class="section-description">Quick-lookup resources to keep handy while you work.</p>
<div class="article-list">
{reference.map((article) => (
<a href={`${base}learning-hub/${article.id}/`} class="article-card">
<div class="article-number" aria-hidden="true">📖</div>
<div class="article-info">
<h3>{article.data.title}</h3>
<p>{article.data.description}</p>
<div class="article-meta">
{article.data.estimatedReadingTime && (
<span class="meta-item">📖 {article.data.estimatedReadingTime}</span>
)}
{article.data.tags && article.data.tags.length > 0 && (
<span class="meta-item">
{article.data.tags.map((tag) => (
<span class="tag">{tag}</span>
))}
</span>
)}
</div>
</div>
</a>
))}
</div>
</section>
<section class="learning-hub-section" id="hands-on">
<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>
</section> </div>
</div> </div>
</div> </div>
</main> </main>