Files
awesome-copilot/website/astro.config.mjs
JoeVenner 10e717202f feat(ui): comprehensive UI/UX improvements (#1069)
* 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>
2026-03-23 10:13:29 +11:00

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,
},
},
});