Adding hooks to the website

This commit is contained in:
Aaron Powell
2026-02-09 17:02:33 +11:00
parent acb5ad4ce8
commit 99a48a4020
7 changed files with 421 additions and 1 deletions

View File

@@ -0,0 +1,54 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Modal from '../components/Modal.astro';
---
<BaseLayout title="Hooks" description="Automated workflows triggered by Copilot coding agent events" activeNav="hooks">
<main id="main-content">
<div class="page-header">
<div class="container">
<h1>🪝 Hooks</h1>
<p>Automated workflows triggered by Copilot coding agent events</p>
</div>
</div>
<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>
<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>
</div>
</main>
<Modal />
<script>
import '../scripts/pages/hooks';
</script>
</BaseLayout>

View File

@@ -57,6 +57,14 @@ const base = import.meta.env.BASE_URL;
</div>
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
</a>
<a href={`${base}hooks/`} class="card card-with-count" id="card-hooks">
<div class="card-icon" aria-hidden="true">🪝</div>
<div class="card-content">
<h3>Hooks</h3>
<p>Automated workflows triggered by agent events</p>
</div>
<div class="card-count" data-count="hooks" aria-label="Hook count">-</div>
</a>
<a href={`${base}collections/`} class="card card-with-count" id="card-collections">
<div class="card-icon" aria-hidden="true">📦</div>
<div class="card-content">