feat: add terminology glossary and split learning hub into Fundamentals and Reference sections

This commit is contained in:
Aaron Powell
2026-02-11 12:12:41 +11:00
parent ba7f608a5f
commit 6bb024224b
2 changed files with 230 additions and 9 deletions

View File

@@ -5,7 +5,7 @@ import { getCollection } from 'astro:content';
const base = import.meta.env.BASE_URL;
const articles = await getCollection('learning-hub');
const recommendedOrder = [
const fundamentalsOrder = [
'what-are-agents-prompts-instructions',
'understanding-copilot-context',
'copilot-configuration-basics',
@@ -14,13 +14,17 @@ const recommendedOrder = [
'before-after-customization-examples',
];
const sortedArticles = articles.sort((a, b) => {
const aIndex = recommendedOrder.indexOf(a.id);
const bIndex = recommendedOrder.indexOf(b.id);
const aOrder = aIndex === -1 ? recommendedOrder.length : aIndex;
const bOrder = bIndex === -1 ? recommendedOrder.length : bIndex;
return aOrder - bOrder;
});
const referenceOrder = [
'github-copilot-terminology-glossary',
];
const fundamentals = articles
.filter((a) => fundamentalsOrder.includes(a.id))
.sort((a, b) => fundamentalsOrder.indexOf(a.id) - fundamentalsOrder.indexOf(b.id));
const reference = articles
.filter((a) => referenceOrder.includes(a.id))
.sort((a, b) => referenceOrder.indexOf(a.id) - referenceOrder.indexOf(b.id));
---
<BaseLayout title="Learning Hub" description="Curated articles and walkthroughs to help you unlock everything you can do with GitHub Copilot" activeNav="learning-hub">
@@ -38,7 +42,7 @@ const sortedArticles = articles.sort((a, b) => {
<h2>Fundamentals</h2>
<p class="section-description">Essential concepts to tailor GitHub Copilot beyond its default experience.</p>
<div class="article-list">
{sortedArticles.map((article, index) => (
{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">
@@ -61,6 +65,34 @@ const sortedArticles = articles.sort((a, b) => {
))}
</div>
</section>
<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>
</div>
</div>
</main>