mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-17 14:45:13 +00:00
Migrate website to Starlight with full-text resource search (#883)
* Add search functionality to Learning Hub index page Add a client-side search bar that filters articles by title, description, and tags. Sections with no matching results are hidden automatically. Uses the existing .search-bar CSS pattern from the cookbook page. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * chore: remove deprecated layouts, theme script, and learning-hub config Phase 5 cleanup of Starlight migration: - Delete BaseLayout.astro (replaced by StarlightPage) - Delete ArticleLayout.astro (replaced by Starlight docs rendering) - Delete theme.ts (Starlight has built-in theme toggle) - Delete src/config/learning-hub.ts (sidebar order now in astro.config.mjs) - Replace learning-hub glob collection with Starlight docs collection in content.config.ts - Keep search.ts (still used by homepage and all resource page scripts) Build verified: 23 pages, no errors. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Migrate website to Starlight with full-text resource search - Replace bespoke Astro layouts with Starlight integration - Homepage and resource pages use StarlightPage wrapper - Learning Hub articles rendered via Starlight docs collection - Starlight provides search, theme toggle, sidebar, ToC, a11y - Add custom Pagefind integration for resource search - All 614 agents/skills/instructions/hooks/workflows/plugins indexed as custom records with deep-link URLs - Type filter pills (horizontal pill toggles) above results - Search results link directly to resource modals via #file= hash - Move global.css to src/styles/ for Vite processing - Scope CSS reset to #main-content to avoid Starlight conflicts - Full-width page gradient via body:has(#main-content) - Light/dark theme support with Starlight gray scale inversion - Delete old layouts (BaseLayout, ArticleLayout), theme.ts, config Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Address PR review feedback - Fix pagefind-resources.ts header comment (pagefind:true not false) - Remove unused base variable in cookbook/index.astro - Replace hardcoded /awesome-copilot/ paths with relative links in index.md - Delete stale public/styles/global.css (source of truth is src/styles/) - Replace fragile getBasePath() with Astro config base in pagefind integration - Document pagefind:true reasoning in astro.config.mjs - Use proper visually-hidden pattern + :focus-visible ring for filter pills - Remove dead header/nav/theme CSS from global.css (~160 lines) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
GitHub
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" activeNav="agents">
|
||||
<StarlightPage frontmatter={{ title: 'Custom Agents', description: 'Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="🤖 Custom Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" />
|
||||
|
||||
@@ -56,4 +56,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/agents';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Hooks" description="Automated workflows triggered by Copilot coding agent events" activeNav="hooks">
|
||||
<StarlightPage frontmatter={{ title: 'Hooks', description: 'Automated workflows triggered by Copilot coding agent events', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="🪝 Hooks" description="Automated workflows triggered by Copilot coding agent events" />
|
||||
|
||||
@@ -49,4 +49,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/hooks';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
---
|
||||
|
||||
<BaseLayout title="Home" activeNav="">
|
||||
<StarlightPage frontmatter={{ title: 'Awesome GitHub Copilot', template: 'splash', pagefind: false, prev: false, next: false, editUrl: false }} hasSidebar={false}>
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" aria-labelledby="hero-heading">
|
||||
@@ -132,4 +132,4 @@ const base = import.meta.env.BASE_URL;
|
||||
<script>
|
||||
import '../scripts/pages/index';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Instructions" description="Coding standards and best practices for GitHub Copilot" activeNav="instructions">
|
||||
<StarlightPage frontmatter={{ title: 'Instructions', description: 'Coding standards and best practices for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="📋 Instructions" description="Coding standards and best practices for GitHub Copilot" />
|
||||
|
||||
@@ -45,4 +45,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/instructions';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
import ArticleLayout from '../../layouts/ArticleLayout.astro';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const articles = await getCollection('learning-hub');
|
||||
return articles.map((article) => ({
|
||||
params: { slug: article.id },
|
||||
props: { article },
|
||||
}));
|
||||
}
|
||||
|
||||
const { article } = Astro.props;
|
||||
const { Content } = await render(article);
|
||||
---
|
||||
|
||||
<ArticleLayout
|
||||
title={article.data.title}
|
||||
description={article.data.description}
|
||||
estimatedReadingTime={article.data.estimatedReadingTime}
|
||||
lastUpdated={article.data.lastUpdated}
|
||||
tags={article.data.tags}
|
||||
>
|
||||
<Content />
|
||||
</ArticleLayout>
|
||||
@@ -1,51 +1,35 @@
|
||||
---
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../../../components/Modal.astro';
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
---
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<StarlightPage frontmatter={{ title: 'Cookbook', description: 'Code samples, recipes, and examples for building with GitHub Copilot' }}>
|
||||
<div class="cookbook-page">
|
||||
<div class="search-bar">
|
||||
<label for="search-input" class="sr-only">Search recipes</label>
|
||||
<input type="text" id="search-input" placeholder="Search recipes..." autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<div class="search-bar">
|
||||
<label for="search-input" class="sr-only">Search recipes</label>
|
||||
<input type="text" id="search-input" placeholder="Search recipes..." autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="filters-bar" id="filters-bar">
|
||||
<div class="filter-group">
|
||||
<label for="filter-language">Language:</label>
|
||||
<select id="filter-language" aria-label="Filter by language">
|
||||
<option value="">All Languages</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-tag">Tags:</label>
|
||||
<select id="filter-tag" multiple aria-label="Filter by tags"></select>
|
||||
</div>
|
||||
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
|
||||
</div>
|
||||
|
||||
<div class="results-count" id="results-count" aria-live="polite"></div>
|
||||
|
||||
<div id="samples-list" role="list">
|
||||
<div class="loading" aria-live="polite">Loading samples...</div>
|
||||
</div>
|
||||
<div class="filters-bar" id="filters-bar">
|
||||
<div class="filter-group">
|
||||
<label for="filter-language">Language:</label>
|
||||
<select id="filter-language" aria-label="Filter by language">
|
||||
<option value="">All Languages</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-tag">Tags:</label>
|
||||
<select id="filter-tag" multiple aria-label="Filter by tags"></select>
|
||||
</div>
|
||||
<button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="results-count" id="results-count" aria-live="polite"></div>
|
||||
|
||||
<div id="samples-list" role="list">
|
||||
<div class="loading" aria-live="polite">Loading samples...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
|
||||
@@ -281,4 +265,4 @@ const base = import.meta.env.BASE_URL;
|
||||
<script>
|
||||
import '../../../scripts/pages/samples';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,158 +0,0 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { fundamentalsOrder, referenceOrder } from '../../config/learning-hub';
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
const articles = await getCollection('learning-hub');
|
||||
|
||||
const createOrderIndexMap = (order) => {
|
||||
const map = new Map();
|
||||
order.forEach((id, index) => {
|
||||
map.set(id, index);
|
||||
});
|
||||
return map;
|
||||
};
|
||||
|
||||
const fundamentalsOrderIndex = createOrderIndexMap(fundamentalsOrder);
|
||||
const referenceOrderIndex = createOrderIndexMap(referenceOrder);
|
||||
|
||||
const fundamentals = articles
|
||||
.filter((a) => fundamentalsOrder.includes(a.id))
|
||||
.sort((a, b) => fundamentalsOrderIndex.get(a.id) - fundamentalsOrderIndex.get(b.id));
|
||||
|
||||
const reference = articles
|
||||
.filter((a) => referenceOrder.includes(a.id))
|
||||
.sort((a, b) => referenceOrderIndex.get(a.id) - referenceOrderIndex.get(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">
|
||||
<main id="main-content">
|
||||
<div class="page-header">
|
||||
<div class="container">
|
||||
<h1>📚 Learning Hub</h1>
|
||||
<p>Curated articles, walkthroughs, and reference material to help you unlock everything you can do with GitHub Copilot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" activeNav="plugins">
|
||||
<StarlightPage frontmatter={{ title: 'Plugins', description: 'Curated plugins of agents, hooks, and skills for specific workflows', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="🔌 Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" />
|
||||
|
||||
@@ -44,4 +44,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/plugins';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Skills" description="Self-contained agent skills with instructions and bundled resources" activeNav="skills">
|
||||
<StarlightPage frontmatter={{ title: 'Skills', description: 'Self-contained agent skills with instructions and bundled resources', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="⚡ Skills" description="Self-contained agent skills with instructions and bundled resources" />
|
||||
|
||||
@@ -51,4 +51,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/skills';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import ContributeCTA from "../components/ContributeCTA.astro";
|
||||
import PageHeader from "../components/PageHeader.astro";
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Tools"
|
||||
description="MCP servers and developer tools for GitHub Copilot"
|
||||
activeNav="tools"
|
||||
>
|
||||
<StarlightPage frontmatter={{ title: 'Tools', description: 'MCP servers and developer tools for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="🔧 Tools" description="MCP servers and developer tools for GitHub Copilot" />
|
||||
|
||||
@@ -306,4 +302,4 @@ import PageHeader from "../components/PageHeader.astro";
|
||||
import { initToolsPage } from "../scripts/pages/tools";
|
||||
initToolsPage();
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Workflows" description="AI-powered repository automations that run coding agents in GitHub Actions" activeNav="workflows">
|
||||
<StarlightPage frontmatter={{ title: 'Agentic Workflows', description: 'AI-powered repository automations that run coding agents in GitHub Actions', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<main id="main-content">
|
||||
<PageHeader title="⚡ Agentic Workflows" description="">
|
||||
AI-powered repository automations that run coding agents in <a href="https://gh.io/gh-aw" target="_blank" rel="noopener">GitHub Actions</a>
|
||||
@@ -47,4 +47,4 @@ import PageHeader from '../components/PageHeader.astro';
|
||||
<script>
|
||||
import '../scripts/pages/workflows';
|
||||
</script>
|
||||
</BaseLayout>
|
||||
</StarlightPage>
|
||||
|
||||
Reference in New Issue
Block a user