mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-23 17:45:12 +00:00
* feat(ui): replace emoji icons with SVG icon system Replace all emoji icons with a consistent SVG icon system to improve: - Visual consistency across platforms - Design token control and theming - Professional appearance Changes: - Add new Icon.astro component with 16 custom SVG icons - Update index.astro to use SVG icons in resource cards - Update index.ts to render SVG icons in search results - Update utils.ts to return icon names instead of emojis - Update global.css with proper SVG icon styling - Remove emoji from Footer component Icons added: robot, document, lightning, hook, workflow, plug, wrench, book, plus action icons: close, copy, download, share, external, plus, search, chevron-down Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat(ui): enhance hero section, add animations and mobile responsiveness Phase 2 & 3 UI/UX improvements: Hero Section Enhancements: - Add gradient text effect for title (purple to orange gradient) - Add animated floating particles in hero background - Increase hero padding for better visual impact Card Category Colors: - Add category-specific accent colors (AI, docs, power, automation, etc.) - Each category has unique glow effect on hover - Category colors: purple (AI), orange (docs), red (power), etc. Entrance Animations: - Add staggered fade-in animation for cards (50ms delay each) - Cards animate in with translateY + opacity - Add slide-down animation for search results Mobile Responsiveness: - Responsive grid: 4 cols → 2 cols → 1 col - Adjust font sizes for mobile screens - Add safe-area-inset support for notched devices - Ensure touch targets ≥44px Accessibility: - Add prefers-reduced-motion support - Disable animations for users who prefer reduced motion - Smooth scroll with fallback Additional Improvements: - Add arrow indicator on card hover - Add loading animation for count numbers - Enhanced scrollbar styling - Print styles for better printing Co-Authored-By: Claude <noreply@anthropic.com> * feat(ui): add theme toggle, enhanced search, and back to top button Theme Toggle: - Create ThemeToggle.astro component with sun/moon icons - Add theme initialization in Head.astro to prevent flash - Store theme preference in localStorage - Keyboard shortcut: Cmd/Ctrl + Shift + L - Smooth icon transition animation Back to Top Button: - Create BackToTop.astro component - Appears after scrolling 400px - Smooth scroll to top on click - Fixed position bottom-right - Respects reduced motion preference Enhanced Search: - Recent searches functionality with localStorage - Show recent searches on focus when empty - Remove individual items or clear all - Enhanced empty state with icon and hint - Cmd/Ctrl + K keyboard shortcut to focus search - Add search to recent when getting results CSS Enhancements: - Theme toggle container styles - Recent searches section styling - Search empty state with icon - Search loading spinner - Keyboard shortcut hint styles - Print styles for new components Co-Authored-By: Claude <noreply@anthropic.com> * fix(ui): resolve header and theme toggle issues - Add Copilot logo to header via Starlight config with automatic theme switching - Fix theme toggle slider direction (was reversed) - Fix theme toggle active icon highlighting (was backwards) - Change theme toggle from purple circle slider to bold text indicator - Fix theme toggle slider overflow by adding overflow: hidden - Remove duplicate banner image from home page - Clean up conflicting logo CSS rules to prevent duplication The header now displays: [ Copilot Icon ] Awesome GitHub Copilot [ Search ] Theme toggle indicators are now visually clear with bold text for selected theme. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * fix(ui): address feedback on UI/UX improvements - Remove logo from header per brand guidance (logo config and CSS) - Fix back-to-top button visibility by moving to body level and using global styles - Fix modal visibility by adding 'visible' class for CSS animations - Fix theme toggle applying site-wide by using global styles and proper theme initialization - Update icons to use GitHub Primer SVG icons with proper fill-based styling - Fix plugin modal to render SVG icons instead of icon names - Add theme initialization script to prevent flash of unstyled content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: move modal to body level to fix z-index stacking context issue The modal was nested inside .main-pane which has isolation: isolate, creating a new stacking context. This caused the modal's z-index to be evaluated within that context, unable to stack above the header. This fix moves the modal to be a direct child of body on page load, allowing it to properly cover the entire viewport including navbar. --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
import sitemap from "@astrojs/sitemap";
|
|
import starlight from "@astrojs/starlight";
|
|
import { defineConfig } from "astro/config";
|
|
import pagefindResources from "./src/integrations/pagefind-resources";
|
|
|
|
const site = "https://awesome-copilot.github.com/";
|
|
const siteDescription =
|
|
"Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience";
|
|
const socialImageUrl = new URL("/images/social-image.png", site).toString();
|
|
|
|
// https://astro.build/config
|
|
export default defineConfig({
|
|
site,
|
|
base: "/",
|
|
output: "static",
|
|
integrations: [
|
|
starlight({
|
|
title: "Awesome GitHub Copilot",
|
|
description: siteDescription,
|
|
social: [],
|
|
head: [
|
|
{
|
|
tag: "meta",
|
|
attrs: {
|
|
property: "og:image",
|
|
content: socialImageUrl,
|
|
},
|
|
},
|
|
{
|
|
tag: "meta",
|
|
attrs: {
|
|
property: "og:image:alt",
|
|
content: siteDescription,
|
|
},
|
|
},
|
|
{
|
|
tag: "meta",
|
|
attrs: {
|
|
name: "twitter:image",
|
|
content: socialImageUrl,
|
|
},
|
|
},
|
|
],
|
|
customCss: ["./src/styles/starlight-overrides.css", "./src/styles/global.css"],
|
|
editLink: {
|
|
baseUrl:
|
|
"https://github.com/github/awesome-copilot/edit/staged/website/",
|
|
},
|
|
sidebar: [
|
|
{
|
|
label: "Browse Resources",
|
|
items: [
|
|
{ label: "Home", link: "/" },
|
|
{ label: "Agents", link: "/agents/" },
|
|
{ label: "Instructions", link: "/instructions/" },
|
|
{ label: "Skills", link: "/skills/" },
|
|
{ label: "Hooks", link: "/hooks/" },
|
|
{ label: "Workflows", link: "/workflows/" },
|
|
{ label: "Plugins", link: "/plugins/" },
|
|
{ label: "Tools", link: "/tools/" },
|
|
{ label: "Contributors", link: "/contributors/" },
|
|
],
|
|
},
|
|
{
|
|
label: "Fundamentals",
|
|
items: [
|
|
"learning-hub/what-are-agents-skills-instructions",
|
|
"learning-hub/understanding-copilot-context",
|
|
"learning-hub/copilot-configuration-basics",
|
|
"learning-hub/defining-custom-instructions",
|
|
"learning-hub/creating-effective-skills",
|
|
"learning-hub/building-custom-agents",
|
|
"learning-hub/understanding-mcp-servers",
|
|
"learning-hub/automating-with-hooks",
|
|
"learning-hub/agentic-workflows",
|
|
"learning-hub/using-copilot-coding-agent",
|
|
"learning-hub/installing-and-using-plugins",
|
|
"learning-hub/before-after-customization-examples",
|
|
],
|
|
},
|
|
{
|
|
label: "Reference",
|
|
items: ["learning-hub/github-copilot-terminology-glossary"],
|
|
},
|
|
{
|
|
label: "Hands-on",
|
|
items: [
|
|
{
|
|
label: "Cookbook",
|
|
link: "/learning-hub/cookbook/",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
disable404Route: true,
|
|
// pagefind: true is required so Starlight renders the search UI.
|
|
// Our pagefindResources() integration overwrites the index after build.
|
|
pagefind: true,
|
|
tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 3 },
|
|
components: {
|
|
Head: "./src/components/Head.astro",
|
|
Footer: "./src/components/Footer.astro",
|
|
},
|
|
}),
|
|
sitemap(),
|
|
pagefindResources(),
|
|
],
|
|
redirects: {
|
|
"/samples/": "/learning-hub/cookbook/",
|
|
},
|
|
build: {
|
|
assets: "assets",
|
|
},
|
|
trailingSlash: "always",
|
|
vite: {
|
|
build: {
|
|
sourcemap: true,
|
|
},
|
|
css: {
|
|
devSourcemap: true,
|
|
},
|
|
},
|
|
});
|