chore: publish from staged

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) => {