mirror of
https://github.com/github/awesome-copilot.git
synced 2026-07-14 18:11:01 +00:00
Consolidate listing pages with unified grid cards and modal system (#2101)
* Prototype extension details modal - Add detail popup modal for extension cards with full metadata and gallery - Implement image gallery with thumbnail strip and main image selection - Add modal styling and positioning in global.css - Connect card click handlers to open modal with extension data Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Fix accessibility issues with modal focus restoration - Add missing listing-cards-page class to agents.astro page root - Pass focusable button element to openCardDetailsModal instead of article - Fixes focus restoration for keyboard users when closing modal - Applied fix across all listing pages (agents, instructions, hooks, plugins, skills, workflows) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Address remaining PR review feedback - Fix extension modal ARIA state by setting aria-current to "true" and removing it when inactive - Use focusable .resource-preview as modal trigger for extension thumbnail/click/keyboard paths - Extract shared multi-select helpers into pages/select-utils.ts and reuse across instructions/hooks/plugins/workflows - Remove unused card-model.ts to avoid dead/overlapping type definitions Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Aaron Powell
GitHub
@@ -1,18 +1,18 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import agentsData from '../../public/data/agents.json';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import { renderAgentsHtml, sortAgents } from '../scripts/pages/agents-render';
|
||||
|
||||
const initialItems = sortAgents(agentsData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Custom Agents', description: 'Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="agents-page listing-cards-page">
|
||||
<PageHeader title="Custom Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" icon="robot" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -42,8 +42,8 @@ const initialItems = sortAgents(agentsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
<EmbeddedPageData filename="agents.json" data={agentsData} />
|
||||
|
||||
<script>
|
||||
|
||||
@@ -5,6 +5,7 @@ import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import { renderExtensionsHtml, sortExtensions } from '../scripts/pages/extensions-render';
|
||||
|
||||
const initialItems = sortExtensions(extensionsData.items, 'title');
|
||||
@@ -41,23 +42,13 @@ const initialItems = sortExtensions(extensionsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
<div class="resource-list" id="resource-list" role="list" set:html={renderExtensionsHtml(initialItems)}></div>
|
||||
<div id="extension-preview-modal" class="extension-preview-modal hidden" aria-hidden="true">
|
||||
<div class="extension-preview-dialog" role="dialog" aria-modal="true" aria-labelledby="extension-preview-title">
|
||||
<div class="extension-preview-header">
|
||||
<h3 id="extension-preview-title" class="extension-preview-title">Extension preview</h3>
|
||||
<button id="extension-preview-close" class="btn btn-secondary extension-preview-close" type="button" aria-label="Close preview">Close</button>
|
||||
</div>
|
||||
<div class="extension-preview-body">
|
||||
<img id="extension-preview-image" class="extension-preview-image" src="" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContributeCTA resourceType="extensions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
<EmbeddedPageData filename="extensions.json" data={extensionsData} />
|
||||
|
||||
<script>
|
||||
@@ -65,9 +56,4 @@ const initialItems = sortExtensions(extensionsData.items, 'title');
|
||||
import '../scripts/pages/extensions';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.extensions-page .resource-preview {
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import hooksData from '../../public/data/hooks.json';
|
||||
import { renderHooksHtml, sortHooks } from '../scripts/pages/hooks-render';
|
||||
|
||||
@@ -12,7 +12,7 @@ const initialItems = sortHooks(hooksData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Hooks', description: 'Automated workflows triggered by Copilot coding agent events', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="hooks-page listing-cards-page">
|
||||
<PageHeader title="Hooks" description="Automated workflows triggered by Copilot coding agent events" icon="hook" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -47,8 +47,8 @@ const initialItems = sortHooks(hooksData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
|
||||
<EmbeddedPageData filename="hooks.json" data={hooksData} />
|
||||
<script>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import instructionsData from '../../public/data/instructions.json';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import { renderInstructionsHtml, sortInstructions } from '../scripts/pages/instructions-render';
|
||||
|
||||
const initialItems = sortInstructions(instructionsData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Instructions', description: 'Coding standards and best practices for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="instructions-page listing-cards-page">
|
||||
<PageHeader title="Instructions" description="Coding standards and best practices for GitHub Copilot" icon="document" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -47,8 +47,8 @@ const initialItems = sortInstructions(instructionsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
<EmbeddedPageData filename="instructions.json" data={instructionsData} />
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import pluginsData from '../../public/data/plugins.json';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import { renderPluginsHtml, sortPlugins } from '../scripts/pages/plugins-render';
|
||||
|
||||
const initialItems = sortPlugins(pluginsData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Plugins', description: 'Curated plugins of agents, hooks, and skills for specific workflows', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="plugins-page listing-cards-page">
|
||||
<PageHeader title="Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" icon="plug" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -56,8 +56,8 @@ const initialItems = sortPlugins(pluginsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
<EmbeddedPageData filename="plugins.json" data={pluginsData} />
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import skillsData from '../../public/data/skills.json';
|
||||
import { renderSkillsHtml, sortSkills } from '../scripts/pages/skills-render';
|
||||
|
||||
@@ -12,7 +12,7 @@ const initialItems = sortSkills(skillsData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Skills', description: 'Self-contained agent skills with instructions and bundled resources', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="skills-page listing-cards-page">
|
||||
<PageHeader title="Skills" description="Self-contained agent skills with instructions and bundled resources" icon="lightning" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -42,8 +42,8 @@ const initialItems = sortSkills(skillsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
|
||||
<EmbeddedPageData filename="skills.json" data={skillsData} />
|
||||
<script>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import workflowsData from '../../public/data/workflows.json';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import ContributeCTA from '../components/ContributeCTA.astro';
|
||||
import EmbeddedPageData from '../components/EmbeddedPageData.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import { renderWorkflowsHtml, sortWorkflows } from '../scripts/pages/workflows-render';
|
||||
|
||||
const initialItems = sortWorkflows(workflowsData.items, 'title');
|
||||
---
|
||||
|
||||
<StarlightPage frontmatter={{ title: 'Agentic Workflows', description: 'AI-powered repository automations that run coding agents in GitHub Actions', template: 'splash', prev: false, next: false, editUrl: false }}>
|
||||
<div id="main-content">
|
||||
<div id="main-content" class="workflows-page listing-cards-page">
|
||||
<PageHeader title="Agentic Workflows" description="AI-powered repository automations that run coding agents in GitHub Actions" icon="workflow" />
|
||||
|
||||
<div class="page-content">
|
||||
@@ -47,8 +47,8 @@ const initialItems = sortWorkflows(workflowsData.items, 'title');
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
<BackToTop />
|
||||
<Modal />
|
||||
<EmbeddedPageData filename="workflows.json" data={workflowsData} />
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user