mirror of
https://github.com/github/awesome-copilot.git
synced 2026-06-19 22:17:43 +00:00
JoeVenner
10e717202f
* 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>
87 lines
1.8 KiB
Plaintext
87 lines
1.8 KiB
Plaintext
---
|
|
import EditLink from "@astrojs/starlight/components/EditLink.astro";
|
|
import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
|
|
import Pagination from "@astrojs/starlight/components/Pagination.astro";
|
|
import config from "virtual:starlight/user-config";
|
|
import { Icon } from "@astrojs/starlight/components";
|
|
import ThemeToggle from "./ThemeToggle.astro";
|
|
---
|
|
|
|
<footer class="sl-flex">
|
|
<div class="meta sl-flex">
|
|
<EditLink />
|
|
<LastUpdated />
|
|
</div>
|
|
<Pagination />
|
|
|
|
{
|
|
config.credits && (
|
|
<a class="kudos sl-flex" href="https://starlight.astro.build">
|
|
<Icon name={"starlight"} /> {Astro.locals.t("starlight:builtWithStarlight.label")}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
<p class="made-by">Made with love by our amazing <a href="/contributors/">contributors</a></p>
|
|
</footer>
|
|
|
|
<ThemeToggle />
|
|
|
|
<style>
|
|
footer {
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.meta {
|
|
gap: 0.75rem 3rem;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-top: 0.75rem;
|
|
font-size: var(--sl-text-sm);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
.meta > :global(p:only-child) {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
:global(.pagination-links:empty) {
|
|
display: none;
|
|
}
|
|
|
|
.made-by {
|
|
text-align: center;
|
|
margin: 0 auto 0.75rem;
|
|
font-size: var(--sl-text-xs);
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
.kudos {
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin: 0 auto;
|
|
font-size: var(--sl-text-xs);
|
|
text-decoration: none;
|
|
color: var(--sl-color-gray-3);
|
|
}
|
|
|
|
.kudos:hover {
|
|
color: var(--sl-color-white);
|
|
}
|
|
|
|
.kudos :global(svg) {
|
|
color: var(--sl-color-orange);
|
|
}
|
|
|
|
.made-by a {
|
|
color: var(--sl-color-gray-3);
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15em;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.made-by a:hover {
|
|
color: var(--sl-color-accent);
|
|
}
|
|
</style> |