Commit Graph

24 Commits

Author SHA1 Message Date
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
Aaron Powell
39a1a0ce04 Update skill modal ZIP download (#1015)
Make the skill modal download button reuse the existing skill ZIP behavior so it downloads the full skill bundle instead of only the current file. Extract the ZIP creation into a shared utility and reuse it from the skills and hooks pages.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-16 11:51:41 +11:00
Aaron Powell
e65c8359b1 More website tweaks (#977)
* 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>
2026-03-12 11:48:54 +11:00
Aaron Powell
3efc4f3a5b feat: show external plugins on the website (#937)
* feat: show external plugins on the website

Read plugins/external.json during website data generation and include
external plugins alongside local ones in plugins.json. External plugins
are flagged with external:true and carry metadata (author, repository,
homepage, license, source).

On the website:
- Plugin cards show a '🔗 External' badge and author attribution
- The 'Repository' button links to the source path within the repo
- The modal shows metadata (author, repo, homepage, license) and a
  'View Repository' CTA instead of an items list
- External plugins are searchable and filterable by tags

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix: address PR #937 security and UX review comments

- Add sanitizeUrl() function to validate URLs and prevent XSS via javascript:/data: schemes
- Add rel="noopener noreferrer" to all target="_blank" links to prevent reverse-tabnabbing
- Change external plugin path from external/<name> to plugins/<name> for proper deep-linking
- Track actual count of external plugins added (after filtering/deduplication) in build logs

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-10 10:13:16 +11:00
Aaron Powell
3ab1d9dece Update website/src/scripts/utils.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-02-25 16:32:20 +11:00
Aaron Powell
f5ac976836 Add agentic workflows page to website
Add a new /workflows/ page for browsing agentic workflow definitions
with search, trigger/tag filters, and sorting. Follows the same
patterns as the existing hooks page.

New files:
- website/src/pages/workflows.astro
- website/src/scripts/pages/workflows.ts

Updated files:
- BaseLayout.astro: add Workflows nav link
- index.astro: add Workflows card to homepage
- pages/index.ts: add workflows to counts
- utils.ts: add workflow type to icons, labels, and getResourceType

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-02-25 16:12:56 +11:00
Aaron Powell
5bff7cadc0 Remove prompts from website
Remove the prompts page, navigation link, homepage card, and all
references to prompts across the website source code. The repo no
longer contains prompt files, so the website should not reference them.

Files removed:
- website/src/pages/prompts.astro
- website/src/scripts/pages/prompts.ts

Files updated:
- BaseLayout.astro: remove nav link and update description
- index.astro: remove prompts card and update text
- llms.txt.ts: remove prompts import and section
- plugins.astro: update description text
- utils.ts: remove prompt type from install config, icons, labels
- pages/index.ts: remove prompts from counts
- modal.ts: update JSDoc comment

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-02-25 15:54:09 +11:00
copilot-swe-agent[bot]
03aaae8dde Refactor plugin detection for better clarity
Split plugin detection into separate checks for plugin directories and plugin.json files to improve code readability and maintainability.

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
2026-02-13 04:51:10 +00:00
copilot-swe-agent[bot]
65cd7bac3f Fix plugin detection in getResourceType for deep-linking
Update getResourceType to detect plugin directories (plugins/<id>) and plugin.json files instead of .collection.yml files. This fixes deep-linking via #file=plugins/<id> which was previously resolving to 'unknown' and not opening the plugin modal.

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
2026-02-13 04:49:45 +00:00
Aaron Powell
7a003fc75a Deprecate Collections in favour of Plugins
Replace Collections with Plugins as first-class citizens in the repo.
With the Copilot CLI v0.409 release making plugins an on-by-default
marketplace, collections are redundant overhead.

## What changed

### Plugin Infrastructure
- Created eng/validate-plugins.mjs (replaces validate-collections.mjs)
- Created eng/create-plugin.mjs (replaces create-collection.mjs)
- Enhanced all 42 plugin.json files with tags, featured, display, and
  items metadata from their corresponding collection.yml files

### Build & Website
- Updated eng/update-readme.mjs to generate plugin docs
- Updated eng/generate-website-data.mjs to emit plugins.json with full
  items array for modal rendering
- Renamed website collections page to plugins (/plugins/)
- Fixed plugin modal to use <div> instead of <pre> for proper styling
- Updated README.md featured section from Collections to Plugins

### Documentation & CI
- Updated CONTRIBUTING.md, AGENTS.md, copilot-instructions.md, PR template
- Updated CI workflows to validate plugins instead of collections
- Replaced docs/README.collections.md with docs/README.plugins.md

### Cleanup
- Removed eng/validate-collections.mjs, eng/create-collection.mjs,
  eng/collection-to-plugin.mjs
- Removed entire collections/ directory (41 .collection.yml + .md files)
- Removed parseCollectionYaml from yaml-parser.mjs
- Removed COLLECTIONS_DIR from constants.mjs

Closes #711
2026-02-13 15:38:37 +11:00
Aaron Powell
e80e20b5ec Address PR review comments for hooks implementation
- Fix getResourceType() to match relative paths like hooks/<name>/README.md
  and skills/<name>/SKILL.md using regex instead of string includes
- Extract hook events from hooks.json via parseHookMetadata() instead of
  non-existent frontmatter.event field in plugin README generation
- Update AGENTS.md to describe hooks as folder-based (README.md + hooks.json)
  instead of .hook.md files
- Update session-logger README to accurately reflect what scripts log
  (remove references to sessionId, duration, prompt content)
2026-02-10 14:37:45 +11:00
copilot-swe-agent[bot]
f62a764683 Fix path matching in getResourceType to support relative paths
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
2026-02-10 03:31:09 +00:00
Aaron Powell
99a48a4020 Adding hooks to the website 2026-02-09 17:02:33 +11:00
Aaron Powell
46256b3a50 feat(website): Add last updated dates for agents, prompts, instructions, and skills
- Add git-dates.mjs utility to extract file modification dates from git history
- Include lastUpdated field in JSON data for all resource types
- Display relative time (e.g., '3 days ago') with full date on hover
- Add 'Recently Updated' sort option to agents, prompts, instructions, and skills pages
- Update deploy-website.yml to use fetch-depth: 0 for full git history

CI overhead: ~20-30s additional for full git checkout
2026-02-03 12:14:45 +11:00
Aaron Powell
a1da290d10 Refactor code for consistency and readability
- Standardized string quotes to double quotes across multiple files.
- Improved formatting and indentation for better readability.
- Added a function to format multiline text in tools rendering.
- Enhanced dropdown and action button handlers for better event management.
- Updated the theme application logic to initialize on page load.
- Refactored utility functions for consistency and clarity.
- Improved error handling and user feedback in download and share functionalities.
2026-02-02 16:42:22 +11:00
copilot-swe-agent[bot]
9e44173f94 Improve comment clarity for string escaping fix
Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
2026-02-02 05:07:06 +00:00
copilot-swe-agent[bot]
fb5f22a6b2 fix(website): properly escape backslashes and quotes in file paths
The previous implementation only escaped single quotes, which could allow
backslashes in file paths to break out of the JavaScript string context.
Now we escape backslashes first (\ -> \\), then single quotes (' -> \'),
preventing potential security issues.

Fixes CodeQL alert #26 for incomplete string escaping.

Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com>
2026-02-02 05:05:42 +00:00
Aaron Powell
9da53a279e feat: add deep linking support for file modal
- Update URL hash when opening/closing modal (#file=path)
- Handle browser back/forward navigation
- Open modal on page load if hash is present
- Share button now copies deep link URL instead of GitHub URL
2026-01-29 10:34:06 +11:00
Aaron Powell
d450d7d3d5 feat: add download and share buttons to list view and modal
- 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
2026-01-29 09:44:31 +11:00
Aaron Powell
009c6c72f8 style: remove VS Code icons from dropdown menu items 2026-01-29 09:37:32 +11:00
Aaron Powell
c378488ceb style: remove icon from install button 2026-01-29 09:35:41 +11:00
Aaron Powell
7e7b5c8610 feat: implement split button dropdown for install options
- 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)
2026-01-29 09:33:49 +11:00
Aaron Powell
d0bcc226ba feat: add VS Code and VS Code Insiders install buttons
- 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
2026-01-28 19:45:22 +11:00
Aaron Powell
aa42998e29 chore: rename website-astro to website, update gitignore
- Rename website-astro/ to website/
- Add website/dist/ and website/.astro/ to gitignore
- Update generate-website-data.mjs output path
2026-01-28 16:42:32 +11:00