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>

website/src/pages/agents.astro

@@ -1,8 +1,13 @@
 ---
 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 { 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 }}>
@@ -11,47 +16,48 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search agents</label>
-          <input type="text" id="search-input" placeholder="Search agents..." autocomplete="off">
-        </div>
-        
-        <!-- Filters -->
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-model">Model:</label>
-            <select id="filter-model" multiple aria-label="Filter by model"></select>
-          </div>
-          <div class="filter-group">
-            <label for="filter-tool">Tool:</label>
-            <select id="filter-tool" multiple aria-label="Filter by tool"></select>
-          </div>
-          <div class="filter-group">
-            <label class="checkbox-label">
-              <input type="checkbox" id="filter-handoffs">
-              Has Handoffs
-            </label>
-          </div>
-          <div class="filter-group">
-            <label for="sort-select">Sort:</label>
-            <select id="sort-select" aria-label="Sort by">
-              <option value="title">Name (A-Z)</option>
-              <option value="lastUpdated">Recently Updated</option>
-            </select>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-        
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading agents...</div>
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search agents</label>
+            <input type="text" id="search-input" placeholder="Search agents..." autocomplete="off">
+          </div>
+
+          <!-- Filters -->
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-model">Model:</label>
+              <select id="filter-model" multiple aria-label="Filter by model"></select>
+            </div>
+            <div class="filter-group">
+              <label for="filter-tool">Tool:</label>
+              <select id="filter-tool" multiple aria-label="Filter by tool"></select>
+            </div>
+            <div class="filter-group">
+              <label class="checkbox-label">
+                <input type="checkbox" id="filter-handoffs">
+                Has Handoffs
+              </label>
+            </div>
+            <div class="filter-group">
+              <label for="sort-select">Sort:</label>
+              <select id="sort-select" aria-label="Sort by">
+                <option value="title">Name (A-Z)</option>
+                <option value="lastUpdated">Recently Updated</option>
+              </select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
+
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} agents</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderAgentsHtml(initialItems)}></div>
         <ContributeCTA resourceType="agents" />
       </div>
     </div>
   </main>
 
   <Modal />
+  <EmbeddedPageData filename="agents.json" data={agentsData} />
 
   <script>
     import '../scripts/pages/agents';

website/src/pages/hooks.astro

@@ -3,6 +3,11 @@ 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 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 }}>
@@ -11,34 +16,34 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search hooks</label>
-          <input type="text" id="search-input" placeholder="Search hooks..." autocomplete="off">
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search hooks</label>
+            <input type="text" id="search-input" placeholder="Search hooks..." autocomplete="off">
+          </div>
+          
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-hook">Hook Event:</label>
+              <select id="filter-hook" multiple aria-label="Filter by hook event"></select>
+            </div>
+            <div class="filter-group">
+              <label for="filter-tag">Tag:</label>
+              <select id="filter-tag" multiple aria-label="Filter by tag"></select>
+            </div>
+            <div class="filter-group">
+              <label for="sort-select">Sort:</label>
+              <select id="sort-select" aria-label="Sort by">
+                <option value="title">Name (A-Z)</option>
+                <option value="lastUpdated">Recently Updated</option>
+              </select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
         
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-hook">Hook Event:</label>
-            <select id="filter-hook" multiple aria-label="Filter by hook event"></select>
-          </div>
-          <div class="filter-group">
-            <label for="filter-tag">Tag:</label>
-            <select id="filter-tag" multiple aria-label="Filter by tag"></select>
-          </div>
-          <div class="filter-group">
-            <label for="sort-select">Sort:</label>
-            <select id="sort-select" aria-label="Sort by">
-              <option value="title">Name (A-Z)</option>
-              <option value="lastUpdated">Recently Updated</option>
-            </select>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-        
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading hooks...</div>
-        </div>
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} hooks</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderHooksHtml(initialItems)}></div>
         <ContributeCTA resourceType="hooks" />
       </div>
     </div>
@@ -46,6 +51,7 @@ import PageHeader from '../components/PageHeader.astro';
 
   <Modal />
 
+  <EmbeddedPageData filename="hooks.json" data={hooksData} />
   <script>
     import '../scripts/pages/hooks';
   </script>

website/src/pages/instructions.astro

@@ -1,8 +1,13 @@
 ---
 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 { 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 }}>
@@ -11,36 +16,37 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search instructions</label>
-          <input type="text" id="search-input" placeholder="Search instructions..." autocomplete="off">
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search instructions</label>
+            <input type="text" id="search-input" placeholder="Search instructions..." autocomplete="off">
+          </div>
+          
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-extension">File Extension:</label>
+              <select id="filter-extension" multiple aria-label="Filter by file extension"></select>
+            </div>
+            <div class="filter-group">
+              <label for="sort-select">Sort:</label>
+              <select id="sort-select" aria-label="Sort by">
+                <option value="title">Name (A-Z)</option>
+                <option value="lastUpdated">Recently Updated</option>
+              </select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
         
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-extension">File Extension:</label>
-            <select id="filter-extension" multiple aria-label="Filter by file extension"></select>
-          </div>
-          <div class="filter-group">
-            <label for="sort-select">Sort:</label>
-            <select id="sort-select" aria-label="Sort by">
-              <option value="title">Name (A-Z)</option>
-              <option value="lastUpdated">Recently Updated</option>
-            </select>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-        
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading instructions...</div>
-        </div>
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} instructions</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderInstructionsHtml(initialItems)}></div>
         <ContributeCTA resourceType="instructions" />
       </div>
     </div>
   </main>
 
   <Modal />
+  <EmbeddedPageData filename="instructions.json" data={instructionsData} />
 
   <script>
     import '../scripts/pages/instructions';

website/src/pages/learning-hub/cookbook/index.astro

@@ -1,37 +1,63 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import samplesData from '../../../../public/data/samples.json';
 import Modal from '../../../components/Modal.astro';
+import EmbeddedPageData from '../../../components/EmbeddedPageData.astro';
+import {
+  getRecipeResultsCountText,
+  renderCookbookSectionsHtml,
+} from '../../../scripts/pages/samples-render';
+
+const initialRecipeMatches = samplesData.cookbooks.flatMap((cookbook) =>
+  cookbook.recipes.map((recipe) => ({ cookbook, recipe }))
+);
+
+const languageOptions = Array.from(
+  new Map(
+    samplesData.cookbooks.flatMap((cookbook) =>
+      cookbook.languages.map((language) => [language.id, language])
+    )
+  ).values()
+);
 ---
 
 <StarlightPage frontmatter={{ title: 'Cookbook', description: 'Code samples, recipes, and examples for building with GitHub Copilot' }}>
   <div class="cookbook-page">
-    <div class="search-bar">
-      <label for="search-input" class="sr-only">Search recipes</label>
-      <input type="text" id="search-input" placeholder="Search recipes..." autocomplete="off">
-    </div>
-
-    <div class="filters-bar" id="filters-bar">
-      <div class="filter-group">
-        <label for="filter-language">Language:</label>
-        <select id="filter-language" aria-label="Filter by language">
-          <option value="">All Languages</option>
-        </select>
+    <div class="listing-toolbar">
+      <div class="search-bar">
+        <label for="search-input" class="sr-only">Search recipes</label>
+        <input type="text" id="search-input" placeholder="Search recipes..." autocomplete="off">
       </div>
-      <div class="filter-group">
-        <label for="filter-tag">Tags:</label>
-        <select id="filter-tag" multiple aria-label="Filter by tags"></select>
+
+      <div class="filters-bar" id="filters-bar">
+        <div class="filter-group">
+          <label for="filter-language">Language:</label>
+          <select id="filter-language" aria-label="Filter by language">
+            <option value="">All Languages</option>
+            {languageOptions.map((language) => (
+              <option value={language.id}>{language.name}</option>
+            ))}
+          </select>
+        </div>
+        <div class="filter-group">
+          <label for="filter-tag">Tags:</label>
+          <select id="filter-tag" multiple aria-label="Filter by tags">
+            {samplesData.filters.tags.map((tag) => (
+              <option value={tag}>{tag}</option>
+            ))}
+          </select>
+        </div>
+        <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
       </div>
-      <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
     </div>
 
-    <div class="results-count" id="results-count" aria-live="polite"></div>
+    <div class="results-count" id="results-count" aria-live="polite">{getRecipeResultsCountText(samplesData.totalRecipes, samplesData.totalRecipes)}</div>
 
-    <div id="samples-list" role="list">
-      <div class="loading" aria-live="polite">Loading samples...</div>
-    </div>
+    <div id="samples-list" role="list" set:html={renderCookbookSectionsHtml(initialRecipeMatches)}></div>
   </div>
 
   <Modal />
+  <EmbeddedPageData filename="samples.json" data={samplesData} />
 
   <style is:global>
     /* Cookbook Section */

website/src/pages/plugins.astro

@@ -1,8 +1,13 @@
 ---
 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 { renderPluginsHtml } from '../scripts/pages/plugins-render';
+
+const initialItems = pluginsData.items;
 ---
 
 <StarlightPage frontmatter={{ title: 'Plugins', description: 'Curated plugins of agents, hooks, and skills for specific workflows', template: 'splash', prev: false, next: false, editUrl: false }}>
@@ -20,35 +25,30 @@ import PageHeader from '../components/PageHeader.astro';
           <p>Install any plugin with: <code>copilot plugin install &lt;plugin-name&gt;@awesome-copilot</code></p>
         </div>
 
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search plugins</label>
-          <input type="text" id="search-input" placeholder="Search plugins..." autocomplete="off">
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search plugins</label>
+            <input type="text" id="search-input" placeholder="Search plugins..." autocomplete="off">
+          </div>
+
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-tag">Tag:</label>
+              <select id="filter-tag" multiple aria-label="Filter by tag"></select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
 
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-tag">Tag:</label>
-            <select id="filter-tag" multiple aria-label="Filter by tag"></select>
-          </div>
-          <div class="filter-group">
-            <label class="checkbox-label">
-              <input type="checkbox" id="filter-featured">
-              Featured Only
-            </label>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading plugins...</div>
-        </div>
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} plugins</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderPluginsHtml(initialItems)}></div>
         <ContributeCTA resourceType="plugins" />
       </div>
     </div>
   </main>
 
   <Modal />
+  <EmbeddedPageData filename="plugins.json" data={pluginsData} />
 
   <script>
     import '../scripts/pages/plugins';

website/src/pages/skills.astro

@@ -3,6 +3,11 @@ 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 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 }}>
@@ -11,36 +16,36 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search skills</label>
-          <input type="text" id="search-input" placeholder="Search skills..." autocomplete="off">
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search skills</label>
+            <input type="text" id="search-input" placeholder="Search skills..." autocomplete="off">
+          </div>
+          
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-category">Category:</label>
+              <select id="filter-category" multiple aria-label="Filter by category"></select>
+            </div>
+            <div class="filter-group">
+              <label class="checkbox-label">
+                <input type="checkbox" id="filter-has-assets">
+                Has Bundled Assets
+              </label>
+            </div>
+            <div class="filter-group">
+              <label for="sort-select">Sort:</label>
+              <select id="sort-select" aria-label="Sort by">
+                <option value="title">Name (A-Z)</option>
+                <option value="lastUpdated">Recently Updated</option>
+              </select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
         
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-category">Category:</label>
-            <select id="filter-category" multiple aria-label="Filter by category"></select>
-          </div>
-          <div class="filter-group">
-            <label class="checkbox-label">
-              <input type="checkbox" id="filter-has-assets">
-              Has Bundled Assets
-            </label>
-          </div>
-          <div class="filter-group">
-            <label for="sort-select">Sort:</label>
-            <select id="sort-select" aria-label="Sort by">
-              <option value="title">Name (A-Z)</option>
-              <option value="lastUpdated">Recently Updated</option>
-            </select>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-        
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading skills...</div>
-        </div>
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} skills</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderSkillsHtml(initialItems)}></div>
         <ContributeCTA resourceType="skills" />
       </div>
     </div>
@@ -48,6 +53,7 @@ import PageHeader from '../components/PageHeader.astro';
 
   <Modal />
 
+  <EmbeddedPageData filename="skills.json" data={skillsData} />
   <script>
     import '../scripts/pages/skills';
   </script>

website/src/pages/tools.astro

@@ -1,7 +1,15 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import toolsData from '../../public/data/tools.json';
 import ContributeCTA from "../components/ContributeCTA.astro";
+import EmbeddedPageData from "../components/EmbeddedPageData.astro";
 import PageHeader from "../components/PageHeader.astro";
+import { renderToolsHtml } from "../scripts/pages/tools-render";
+
+const initialItems = toolsData.items.map((item) => ({
+  ...item,
+  title: item.name,
+}));
 ---
 
 <StarlightPage frontmatter={{ title: 'Tools', description: 'MCP servers and developer tools for GitHub Copilot', template: 'splash', prev: false, next: false, editUrl: false }}>
@@ -24,15 +32,18 @@ import PageHeader from "../components/PageHeader.astro";
             <label for="filter-category" class="sr-only">Filter by category</label>
             <select id="filter-category" class="filter-select" aria-label="Filter by category">
               <option value="">All Categories</option>
+              {toolsData.filters.categories.map((category) => (
+                <option value={category}>{category}</option>
+              ))}
             </select>
             <button id="clear-filters" class="btn btn-secondary btn-small"
               >Clear</button
             >
           </div>
-          <div id="results-count" class="results-count" aria-live="polite"></div>
+          <div id="results-count" class="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} tools</div>
         </div>
 
-        <div id="tools-list" role="list"></div>
+        <div id="tools-list" role="list" set:html={renderToolsHtml(initialItems)}></div>
 
         <div class="coming-soon">
           <h2>More Tools Coming Soon</h2>
@@ -46,6 +57,8 @@ import PageHeader from "../components/PageHeader.astro";
     </div>
   </main>
 
+  <EmbeddedPageData filename="tools.json" data={toolsData} />
+
   <style is:global>
     .search-section {
       margin-bottom: 24px;
@@ -94,12 +107,6 @@ import PageHeader from "../components/PageHeader.astro";
       color: var(--color-text-muted);
     }
 
-    .loading {
-      text-align: center;
-      padding: 48px;
-      color: var(--color-text-muted);
-    }
-
     .empty-state {
       text-align: center;
       padding: 48px;
@@ -299,7 +306,6 @@ import PageHeader from "../components/PageHeader.astro";
   </style>
 
   <script>
-    import { initToolsPage } from "../scripts/pages/tools";
-    initToolsPage();
+    import '../scripts/pages/tools';
   </script>
 </StarlightPage>

website/src/pages/workflows.astro

@@ -1,8 +1,13 @@
 ---
 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 { 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 }}>
@@ -13,36 +18,37 @@ import PageHeader from '../components/PageHeader.astro';
 
     <div class="page-content">
       <div class="container">
-        <div class="search-bar">
-          <label for="search-input" class="sr-only">Search workflows</label>
-          <input type="text" id="search-input" placeholder="Search workflows..." autocomplete="off">
+        <div class="listing-toolbar">
+          <div class="search-bar">
+            <label for="search-input" class="sr-only">Search workflows</label>
+            <input type="text" id="search-input" placeholder="Search workflows..." autocomplete="off">
+          </div>
+          
+          <div class="filters-bar" id="filters-bar">
+            <div class="filter-group">
+              <label for="filter-trigger">Trigger:</label>
+              <select id="filter-trigger" multiple aria-label="Filter by trigger"></select>
+            </div>
+            <div class="filter-group">
+              <label for="sort-select">Sort:</label>
+              <select id="sort-select" aria-label="Sort by">
+                <option value="title">Name (A-Z)</option>
+                <option value="lastUpdated">Recently Updated</option>
+              </select>
+            </div>
+            <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
+          </div>
         </div>
         
-        <div class="filters-bar" id="filters-bar">
-          <div class="filter-group">
-            <label for="filter-trigger">Trigger:</label>
-            <select id="filter-trigger" multiple aria-label="Filter by trigger"></select>
-          </div>
-          <div class="filter-group">
-            <label for="sort-select">Sort:</label>
-            <select id="sort-select" aria-label="Sort by">
-              <option value="title">Name (A-Z)</option>
-              <option value="lastUpdated">Recently Updated</option>
-            </select>
-          </div>
-          <button id="clear-filters" class="btn btn-secondary btn-small">Clear Filters</button>
-        </div>
-        
-        <div class="results-count" id="results-count" aria-live="polite"></div>
-        <div class="resource-list" id="resource-list" role="list">
-          <div class="loading" aria-live="polite">Loading workflows...</div>
-        </div>
+        <div class="results-count" id="results-count" aria-live="polite">{initialItems.length} of {initialItems.length} workflows</div>
+        <div class="resource-list" id="resource-list" role="list" set:html={renderWorkflowsHtml(initialItems)}></div>
         <ContributeCTA resourceType="workflows" />
       </div>
     </div>
   </main>
 
   <Modal />
+  <EmbeddedPageData filename="workflows.json" data={workflowsData} />
 
   <script>
     import '../scripts/pages/workflows';