chore: publish from staged

website/src/pages/extensions.astro

@@ -0,0 +1,57 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import extensionsData from '../../public/data/extensions.json';
+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 { renderExtensionsHtml, sortExtensions } from '../scripts/pages/extensions-render';
+
+const initialItems = sortExtensions(extensionsData.items, 'title');
+---
+
+<StarlightPage frontmatter={{ title: 'Canvas Extensions', description: 'Canvas extensions for GitHub Copilot app experiences', template: 'splash', prev: false, next: false, editUrl: false }}>
+  <div id="main-content" class="extensions-page">
+    <PageHeader title="Canvas Extensions" description="Canvas extensions for GitHub Copilot app experiences" icon="plug" />
+
+    <div class="page-content">
+      <div class="container">
+        <div class="listing-toolbar">
+          <div class="listing-toolbar-row">
+            <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} extensions</div>
+            <details class="listing-controls">
+              <summary class="listing-controls-trigger btn btn-secondary btn-small">Sort</summary>
+              <div class="listing-controls-panel">
+                <div class="filters-bar" id="filters-bar">
+                  <div class="filter-group">
+                    <label for="sort-select">Sort:</label>
+                    <select id="sort-select" aria-label="Sort extensions">
+                      <option value="title">Name (A-Z)</option>
+                      <option value="lastUpdated">Recently Updated</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </details>
+          </div>
+        </div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderExtensionsHtml(initialItems)}></div>
+        <ContributeCTA resourceType="extensions" />
+      </div>
+    </div>
+  </div>
+
+  <BackToTop />
+  <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/index.astro

@@ -170,11 +170,32 @@ const base = import.meta.env.BASE_URL;
               -
             </div>
           </a>
+          <a
+            href={`${base}extensions/`}
+            class="card card-with-count card-category-extension"
+            id="card-extensions"
+            style="--animation-delay: 300ms;"
+          >
+            <div class="card-icon" aria-hidden="true">
+              <Icon name="plug" size={40} />
+            </div>
+            <div class="card-content">
+              <h3>Canvas Extensions</h3>
+              <p>Interactive canvas extensions for Copilot app experiences</p>
+            </div>
+            <div
+              class="card-count"
+              data-count="extensions"
+              aria-label="Extension count"
+            >
+              -
+            </div>
+          </a>
           <a
             href={`${base}tools/`}
             class="card card-with-count card-category-dev"
             id="card-tools"
-            style="--animation-delay: 300ms;"
+            style="--animation-delay: 350ms;"
           >
             <div class="card-icon" aria-hidden="true">
               <Icon name="wrench" size={40} />
@@ -191,7 +212,7 @@ const base = import.meta.env.BASE_URL;
             href={`${base}learning-hub/`}
             class="card card-with-count card-category-learn"
             id="card-learning-hub"
-            style="--animation-delay: 350ms;"
+            style="--animation-delay: 400ms;"
           >
             <div class="card-icon" aria-hidden="true">
               <Icon name="book" size={40} />

website/src/scripts/pages/extensions-render.ts

@@ -0,0 +1,72 @@
+import { escapeHtml, getGitHubUrl, getLastUpdatedHtml } from "../utils";
+
+export interface RenderableExtension {
+  id: string;
+  name: string;
+  path: string;
+  ref: string;
+  lastUpdated?: string | null;
+}
+
+export type ExtensionSortOption = "title" | "lastUpdated";
+
+export function sortExtensions<T extends RenderableExtension>(
+  items: T[],
+  sort: ExtensionSortOption
+): T[] {
+  return [...items].sort((a, b) => {
+    if (sort === "lastUpdated") {
+      const dateA = a.lastUpdated ? new Date(a.lastUpdated).getTime() : 0;
+      const dateB = b.lastUpdated ? new Date(b.lastUpdated).getTime() : 0;
+      return dateB - dateA;
+    }
+
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function renderExtensionsHtml(items: RenderableExtension[]): string {
+  if (items.length === 0) {
+    return `
+      <div class="empty-state">
+        <h3>No extensions found</h3>
+        <p>No canvas extensions are available right now.</p>
+      </div>
+    `;
+  }
+
+  return items
+    .map(
+      (item) => `
+        <article class="resource-item" role="listitem">
+          <div class="resource-preview">
+            <div class="resource-info">
+              <div class="resource-title">${escapeHtml(item.name)}</div>
+              <div class="resource-description">Canvas extension</div>
+              <div class="resource-meta">
+                ${getLastUpdatedHtml(item.lastUpdated)}
+              </div>
+            </div>
+          </div>
+          <div class="resource-actions">
+            <button
+              class="btn btn-primary btn-small copy-install-url-btn"
+              data-install-url="${escapeHtml(
+                `https://github.com/github/awesome-copilot/tree/${item.ref}/${item.path.replace(
+                  /\\/g,
+                  "/"
+                )}`
+              )}"
+              title="Copy install URL"
+            >
+              Install
+            </button>
+            <a href="${getGitHubUrl(
+              item.path
+            )}" class="btn btn-secondary btn-small" target="_blank" rel="noopener noreferrer" title="View on GitHub">GitHub</a>
+          </div>
+        </article>
+      `
+    )
+    .join("");
+}

website/src/scripts/pages/extensions.ts

@@ -0,0 +1,110 @@
+/**
+ * Canvas extensions page functionality
+ */
+import {
+  copyToClipboard,
+  fetchData,
+  getQueryParam,
+  showToast,
+  updateQueryParams,
+} from "../utils";
+import {
+  renderExtensionsHtml,
+  sortExtensions,
+  type ExtensionSortOption,
+  type RenderableExtension,
+} from "./extensions-render";
+
+interface Extension extends RenderableExtension {
+  lastUpdated?: string | null;
+}
+
+interface ExtensionsData {
+  items: Extension[];
+}
+
+let allItems: Extension[] = [];
+let currentSort: ExtensionSortOption = "title";
+let actionHandlersReady = false;
+
+function applySortAndRender(): void {
+  const countEl = document.getElementById("results-count");
+  const results = sortExtensions(allItems, currentSort);
+
+  renderItems(results);
+  if (countEl) {
+    countEl.textContent = `${results.length} extension${results.length === 1 ? "" : "s"}`;
+  }
+}
+
+function renderItems(items: Extension[]): void {
+  const list = document.getElementById("resource-list");
+  if (!list) return;
+
+  list.innerHTML = renderExtensionsHtml(items);
+}
+
+function setupActionHandlers(list: HTMLElement | null): void {
+  if (!list || actionHandlersReady) return;
+
+  list.addEventListener("click", async (event) => {
+    const target = event.target as HTMLElement;
+    const installButton = target.closest(
+      ".copy-install-url-btn"
+    ) as HTMLButtonElement | null;
+
+    if (!installButton) return;
+
+    event.stopPropagation();
+    const installUrl = installButton.dataset.installUrl || "";
+    const success = await copyToClipboard(installUrl);
+    showToast(
+      success ? "Install URL copied!" : "Failed to copy install URL",
+      success ? "success" : "error"
+    );
+  });
+
+  actionHandlersReady = true;
+}
+
+function syncUrlState(): void {
+  updateQueryParams({
+    sort: currentSort === "title" ? "" : currentSort,
+  });
+}
+
+export async function initExtensionsPage(): Promise<void> {
+  const list = document.getElementById("resource-list");
+  const sortSelect = document.getElementById(
+    "sort-select"
+  ) as HTMLSelectElement;
+
+  setupActionHandlers(list as HTMLElement | null);
+
+  const data = await fetchData<ExtensionsData>("extensions.json");
+  if (!data || !data.items) {
+    if (list)
+      list.innerHTML =
+        '<div class="empty-state"><h3>Failed to load data</h3></div>';
+    return;
+  }
+
+  allItems = data.items;
+
+  const initialSort = getQueryParam("sort");
+  if (initialSort === "lastUpdated") {
+    currentSort = initialSort;
+    if (sortSelect) sortSelect.value = initialSort;
+  }
+
+  sortSelect?.addEventListener("change", () => {
+    currentSort = sortSelect.value as ExtensionSortOption;
+    applySortAndRender();
+    syncUrlState();
+  });
+
+  applySortAndRender();
+}
+
+// Auto-initialize when DOM is ready
+document.addEventListener("DOMContentLoaded", initExtensionsPage);

website/src/scripts/pages/index.ts

@@ -11,6 +11,7 @@ interface Manifest {
     hooks: number;
     workflows: number;
     plugins: number;
+    extensions: number;
     tools: number;
   };
 }
@@ -27,6 +28,7 @@ export async function initHomepage(): Promise<void> {
       "hooks",
       "workflows",
       "plugins",
+      "extensions",
       "tools",
     ] as const;
     countKeys.forEach((key) => {