* 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>
Supplement Starlight's default head output with Twitter title, description, URL, and domain tags plus extra image metadata so social crawlers have a more complete card payload.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Some layout tweaks
* SSR resource listing pages
Render resource listing pages in Astro for first paint and hydrate client filtering/search behavior on top.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Fixing font path
* removing feature plugin reference as we don't track that anymore
* button alignment
* rendering markdown
* Improve skills modal file browsing
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Improving the layout of the search/filter section
---------
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Initial plan
* feat: add contributors page to website
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
* feat: add footer with contributors link and fix emoji-only display
- Add custom Starlight Footer component with 'Made with ❤️ by our
amazing contributors' linking to /contributors/
- Filter out contribution types without emoji mappings in the
contributor data generation so only emojis (🎭🎁🧭⌨️🧰) are
shown on the contributors page, not text labels like 'code' or 'doc'
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* feat: use all-contributors HTML output for contributors page
- Restyle all-contributors generated table as a responsive card grid
using CSS grid on tbody with card-styled td cells
- Remove old custom JS search/filter UI and contributors.ts script
- Remove generateContributorsData from data pipeline (no longer needed)
- Keep all-contributors markers for bot regeneration
- Include updated contributor data from .all-contributorsrc
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* fix: CSS fixes for contributors page Starlight compatibility
- Override Starlight table width/overflow to prevent clipping
- Force td width: 100% to counteract HTML width="14.28%" attribute
- Set emoji links to display: inline to prevent vertical stacking
- Improve border visibility with lighter gray color
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
Co-authored-by: Aaron Powell <me@aaron-powell.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Add instrumentation script for pageview analytics
* Only include analytics tags in production builds
Wrap hydro-marketing analytics meta tag and script in an
import.meta.env.PROD conditional so they are excluded during
local development and only rendered in production builds.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Add production-only analytics tags to Starlight Head component
Add hydro-marketing analytics meta tag and script to the custom
Head.astro component override, gated behind import.meta.env.PROD
so they only render in production builds (GitHub Pages deploy).
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* 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>
* Add contribution CTA to all listing/search pages
Add a reusable ContributeCTA component that encourages visitors to
contribute their own resources. The CTA appears at the bottom of every
resource listing page (agents, instructions, skills, hooks, workflows,
plugins, tools) with:
- Contextual text that adapts to the resource type
- 'Contribute yours' primary button linking to CONTRIBUTING.md
- 'Request a resource' outline button linking to new issue creation
- Gradient top bar matching existing card design patterns
- Responsive layout that stacks on mobile
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Add Contribute button to page header on all listing pages
Place an outlined Contribute button in each page-header section so it's
immediately visible without scrolling. Uses accent purple border that
fills on hover with a glow effect. Stacks below description on mobile
via a 600px breakpoint.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* Add screenshots for contribution CTA PR
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
* didn't mean to commit them
* Extract PageHeader component to deduplicate header markup
Address PR review feedback: the header Contribute link (URL, SVG icon,
classes) was duplicated across all 7 listing pages. Extract into a
reusable PageHeader.astro component that accepts title and description
props, with a slot for rich HTML descriptions (used by workflows page).
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add Download button to download file as .md file
- Add Share button to copy GitHub link to clipboard
- Both buttons appear in modal header and list view actions
- Use icon-only buttons in list view for cleaner UI
- Replace separate VS Code/Insiders buttons with single Install dropdown
- Primary 'Install' button opens in VS Code, dropdown chevron reveals options
- Dropdown shows 'VS Code' and 'VS Code Insiders' choices
- Add CSS for split button styling with glassmorphism dropdown
- Apply to modal and all list views (agents, prompts, instructions)
- Fix VS Code install URL format to match README links
- Add separate buttons for VS Code and VS Code Insiders
- Support install links for agents, prompts, and instructions
- Add VS Code icon SVG to buttons
