Consolidate listing pages with unified grid cards and modal system

website/src/pages/agents.astro

@@ -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>

website/src/pages/extensions.astro

@@ -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,33 +42,18 @@ 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>
     import '../scripts/listing-flyouts';
     import '../scripts/pages/extensions';
   </script>
 
-  <style>
-    .extensions-page .resource-preview {
-      cursor: default;
-    }
-  </style>
 </StarlightPage>

website/src/pages/hooks.astro

@@ -1,18 +1,18 @@
 ---
 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';
 
 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>

website/src/pages/instructions.astro

@@ -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>

website/src/pages/plugins.astro

@@ -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>

website/src/pages/skills.astro

@@ -1,18 +1,18 @@
 ---
 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';
 
 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>

website/src/pages/workflows.astro

@@ -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>

website/src/scripts/modal.ts

@@ -2,7 +2,6 @@
  * Modal functionality for file viewing
  */
 
-import { marked } from "marked";
 import {
   fetchFileContent,
   fetchData,
@@ -18,7 +17,6 @@ import {
   sanitizeUrl,
   REPO_IDENTIFIER,
 } from "./utils";
-import fm from "front-matter";
 
 type ModalViewMode = "rendered" | "raw";
 
@@ -352,7 +350,11 @@ async function renderCurrentFileContent(): Promise<void> {
     const container = ensureDivContent("modal-rendered-content");
     if (!container) return;
 
-    const { body: markdownBody } = fm(currentFileContent);
+    const [{ marked }, { default: fm }] = await Promise.all([
+      import("marked"),
+      import("front-matter"),
+    ]);
+    const { body: markdownBody } = fm<string>(currentFileContent);
     container.innerHTML = marked(markdownBody, { async: false });
   } else {
     await renderHighlightedCode(currentFileContent, currentFilePath);
@@ -452,6 +454,19 @@ interface PluginsData {
 
 let pluginsCache: PluginsData | null = null;
 
+interface OpenCardDetailsRequest {
+  title: string;
+  description: string;
+  previewIcon?: string;
+  previewText?: string;
+  metaHtml?: string;
+  tagsHtml?: string;
+  actionsHtml?: string;
+  detailsHtml?: string;
+  contentClassName?: string;
+  trigger?: HTMLElement;
+}
+
 /**
  * Get all focusable elements within a container
  */
@@ -731,6 +746,19 @@ export function setupModal(): void {
     }
   });
 
+  document.addEventListener("click", async (event) => {
+    const target = event.target as HTMLElement;
+    const openFileButton = target.closest<HTMLElement>("[data-open-file-path]");
+    if (!openFileButton) return;
+
+    const filePath = openFileButton.dataset.openFilePath;
+    if (!filePath) return;
+
+    event.preventDefault();
+    const fileType = openFileButton.dataset.openFileType || getResourceType(filePath);
+    await openFileModal(filePath, fileType, true, openFileButton);
+  });
+
   // Check for deep link on initial load
   handleHashChange();
 }
@@ -894,6 +922,8 @@ export async function openFileModal(
   const closeBtn = document.getElementById("close-modal");
   if (!modal || !title) return;
 
+  modal.classList.remove("details-mode");
+
   currentFilePath = filePath;
   currentFileType = type;
   currentViewMode = "raw";
@@ -989,6 +1019,85 @@ export async function openFileModal(
   await renderCurrentFileContent();
 }
 
+export function openCardDetailsModal({
+  title,
+  description,
+  previewIcon = "📄",
+  previewText = "",
+  metaHtml = "",
+  tagsHtml = "",
+  actionsHtml = "",
+  detailsHtml = "",
+  contentClassName = "modal-card-details",
+  trigger,
+}: OpenCardDetailsRequest): void {
+  const modal = document.getElementById("file-modal");
+  const modalTitle = document.getElementById("modal-title");
+  const closeBtn = document.getElementById("close-modal");
+  const modalBody = getModalBody();
+
+  if (!modal || !modalTitle || !modalBody) return;
+
+  triggerElement = trigger || (document.activeElement as HTMLElement);
+  if (!originalDocumentTitle) {
+    originalDocumentTitle = document.title;
+  }
+
+  currentFilePath = null;
+  currentFileContent = null;
+  currentFileType = "details";
+  currentViewMode = "raw";
+  hideSkillFileSwitcher();
+
+  modal.classList.add("details-mode");
+  modalTitle.textContent = title;
+  document.title = `${title} | Awesome GitHub Copilot`;
+
+  const content = ensureDivContent(contentClassName);
+  if (!content) return;
+
+  content.innerHTML =
+    detailsHtml ||
+    `
+      <div class="resource-details-body modal-card-details-body">
+        <div class="resource-details-preview">
+          <div class="resource-details-preview-icon" aria-hidden="true">${escapeHtml(previewIcon)}</div>
+          ${
+            previewText
+              ? `<p class="resource-details-preview-text">${escapeHtml(previewText)}</p>`
+              : ""
+          }
+        </div>
+        <div class="resource-details-content">
+          <p class="resource-details-description">${escapeHtml(description)}</p>
+          ${
+            metaHtml
+              ? `<div class="resource-meta resource-details-meta">${metaHtml}</div>`
+              : ""
+          }
+          ${
+            tagsHtml
+              ? `<div class="resource-keywords resource-details-tags">${tagsHtml}</div>`
+              : ""
+          }
+          ${
+            actionsHtml
+              ? `<div class="resource-actions resource-details-actions">${actionsHtml}</div>`
+              : ""
+          }
+        </div>
+      </div>
+    `;
+
+  modalBody.scrollTop = 0;
+  modal.classList.remove("hidden");
+  modal.classList.add("visible");
+
+  setTimeout(() => {
+    closeBtn?.focus();
+  }, 0);
+}
+
 /**
  * Open plugin modal with item list
  */