mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-13 04:35:12 +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
1804
website/src/styles/global.css
Normal file
1804
website/src/styles/global.css
Normal file
File diff suppressed because it is too large
Load Diff
181
website/src/styles/starlight-overrides.css
Normal file
181
website/src/styles/starlight-overrides.css
Normal file
@@ -0,0 +1,181 @@
|
||||
/* Brand color overrides for Starlight */
|
||||
/* Purple (#8534F3) and Orange (#FE4C25) theme */
|
||||
|
||||
/* ── Dark theme (default) ─────────────────────────────────── */
|
||||
:root {
|
||||
--sl-color-accent-low: #1a0d33;
|
||||
--sl-color-accent: #8534f3;
|
||||
--sl-color-accent-high: #c9a5fa;
|
||||
--sl-color-text-accent: #c9a5fa;
|
||||
|
||||
--sl-color-white: #f0f0f5;
|
||||
--sl-color-gray-1: #d0d0da;
|
||||
--sl-color-gray-2: #9898a6;
|
||||
--sl-color-gray-3: #60607a;
|
||||
--sl-color-gray-4: #30304a;
|
||||
--sl-color-gray-5: #1a1a2e;
|
||||
--sl-color-gray-6: #111120;
|
||||
--sl-color-black: #0a0a0f;
|
||||
|
||||
--sl-font-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Light theme ───────────────────────────────────────────── */
|
||||
/* Starlight inverts the gray scale for light mode.
|
||||
Because our customCss is unlayered it overrides Starlight's layered
|
||||
theme swap, so we must provide the inverted palette ourselves. */
|
||||
:root[data-theme="light"] {
|
||||
--sl-color-accent-low: #f0e6ff;
|
||||
--sl-color-accent: #6b21c8;
|
||||
--sl-color-accent-high: #3b0d7a;
|
||||
--sl-color-text-accent: #6b21c8;
|
||||
|
||||
--sl-color-white: #0a0a0f;
|
||||
--sl-color-gray-1: #111120;
|
||||
--sl-color-gray-2: #1a1a2e;
|
||||
--sl-color-gray-3: #30304a;
|
||||
--sl-color-gray-4: #60607a;
|
||||
--sl-color-gray-5: #9898a6;
|
||||
--sl-color-gray-6: #d0d0da;
|
||||
--sl-color-black: #f0f0f5;
|
||||
}
|
||||
|
||||
/* ── Sidebar active item ───────────────────────────────────── */
|
||||
nav[aria-label="Main"] a[aria-current="page"] {
|
||||
color: var(--sl-color-accent) !important;
|
||||
font-weight: 600;
|
||||
border-inline-start-color: var(--sl-color-accent) !important;
|
||||
}
|
||||
|
||||
/* ── Header brand styling ──────────────────────────────────── */
|
||||
.site-title {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
header .site-title:hover {
|
||||
color: var(--sl-color-accent-high) !important;
|
||||
}
|
||||
|
||||
/* ── Browse Resources sidebar group ────────────────────────── */
|
||||
nav[aria-label="Main"] > ul > li:first-child details summary,
|
||||
nav[aria-label="Main"] > ul > li:first-child > a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Hide Starlight's auto-generated page title on custom splash pages ── */
|
||||
/* Only affects pages that have their own #main-content (custom pages) */
|
||||
/* Starlight generates a title h1; custom pages render their own h1 */
|
||||
main:has(#main-content) > .content-panel:has(h1#_top) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── Pagefind search filter pills ──────────────────────────── */
|
||||
/* Restyle the default checkbox filters as horizontal pill toggles above results */
|
||||
|
||||
/* Stack filters above results instead of side-by-side */
|
||||
#starlight__search .pagefind-ui__drawer {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-panel {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-panel-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Remove the collapsible <details> wrapper — always show filters */
|
||||
#starlight__search .pagefind-ui__filter-block {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-block > summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the "type" group legend */
|
||||
#starlight__search .pagefind-ui__filter-group-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Lay out filter values as a horizontal pill row */
|
||||
#starlight__search .pagefind-ui__filter-group {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: center !important;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0 0.625rem;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Each pill: hide the checkbox, style the label as a pill */
|
||||
#starlight__search .pagefind-ui__filter-value {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Visually hidden but still focusable for keyboard a11y */
|
||||
#starlight__search .pagefind-ui__filter-checkbox {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-value::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-label {
|
||||
display: inline-flex !important;
|
||||
width: auto !important;
|
||||
align-items: center;
|
||||
padding: 0.2rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
border: 1px solid var(--sl-color-gray-5);
|
||||
color: var(--sl-color-gray-2);
|
||||
background: transparent;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-label:hover {
|
||||
border-color: var(--sl-color-accent);
|
||||
color: var(--sl-color-accent-high);
|
||||
}
|
||||
|
||||
/* Keyboard focus ring for pill filters */
|
||||
#starlight__search .pagefind-ui__filter-checkbox:focus-visible + .pagefind-ui__filter-label {
|
||||
outline: 2px solid var(--sl-color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Active/checked pill state */
|
||||
#starlight__search .pagefind-ui__filter-checkbox:checked + .pagefind-ui__filter-label {
|
||||
background: var(--sl-color-accent);
|
||||
border-color: var(--sl-color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#starlight__search .pagefind-ui__filter-checkbox:checked + .pagefind-ui__filter-label:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
Reference in New Issue
Block a user