mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-12 12:15:12 +00:00
feat: add sticky sidebar navigation to Learning Hub index
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
@@ -16,11 +16,15 @@ const base = import.meta.env.BASE_URL;
|
||||
const articles = await getCollection('learning-hub');
|
||||
|
||||
const fundamentalsOrder = [
|
||||
'what-are-agents-prompts-instructions',
|
||||
'what-are-agents-skills-instructions',
|
||||
'understanding-copilot-context',
|
||||
'copilot-configuration-basics',
|
||||
'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',
|
||||
];
|
||||
|
||||
|
||||
@@ -42,81 +42,121 @@ const reference = articles
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<section class="learning-hub-section">
|
||||
<h2>Fundamentals</h2>
|
||||
<p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
|
||||
<div class="article-list">
|
||||
{fundamentals.map((article, index) => (
|
||||
<a href={`${base}learning-hub/${article.id}/`} class="article-card">
|
||||
<div class="article-number" aria-hidden="true">{index + 1}</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>
|
||||
<div class="learning-hub-layout">
|
||||
<nav class="learning-hub-sidebar" aria-label="Learning Hub sections">
|
||||
<div class="sidebar-section">
|
||||
<h3>Fundamentals</h3>
|
||||
<ol class="sidebar-nav-list">
|
||||
{fundamentals.map((article) => (
|
||||
<li>
|
||||
<a href={`${base}learning-hub/${article.id}/`}>
|
||||
{article.data.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
<div class="sidebar-section">
|
||||
<h3>Reference</h3>
|
||||
<ul class="sidebar-nav-list">
|
||||
{reference.map((article) => (
|
||||
<li>
|
||||
<a href={`${base}learning-hub/${article.id}/`}>
|
||||
{article.data.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<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 class="learning-hub-index-content">
|
||||
<section class="learning-hub-section" id="fundamentals">
|
||||
<h2>Fundamentals</h2>
|
||||
<p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
|
||||
<div class="article-list">
|
||||
{fundamentals.map((article, index) => (
|
||||
<a href={`${base}learning-hub/${article.id}/`} class="article-card">
|
||||
<div class="article-number" aria-hidden="true">{index + 1}</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>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user