Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-21 10:55:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge resource counts into home page cards

Browse Source 
- Remove separate hero-stats section
- Add card-count element to each resource card
- Update JS to populate counts from manifest
- Add card-with-count CSS for layout with count badge
- Reduces vertical space on home page
This commit is contained in:
Aaron Powell
2026-02-02 10:09:36 +11:00
parent e9f2018ece
commit e3894a0b1b
3 changed files with 88 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
website/src/pages/index.astro
View File

@@ -16,9 +16,6 @@ const base = import.meta.env.BASE_URL;
<input type="text" id="global-search" placeholder="Search all resources..." autocomplete="off">
<div id="search-results" class="search-results hidden"></div>
</div>
<div class="hero-stats" id="stats">
<!-- Populated by JS -->
</div>
</div>
</section>
@@ -26,35 +23,53 @@ const base = import.meta.env.BASE_URL;
<section class="quick-links">
<div class="container">
<div class="cards-grid">
<a href={`${base}agents/`} class="card">
<a href={`${base}agents/`} class="card card-with-count" id="card-agents">
<div class="card-icon">🤖</div>
<h3>Agents</h3>
<p>Custom agents for specialized Copilot experiences</p>
<div class="card-content">
<h3>Agents</h3>
<p>Custom agents for specialized Copilot experiences</p>
</div>
<div class="card-count" data-count="agents">-</div>
</a>
<a href={`${base}prompts/`} class="card">
<a href={`${base}prompts/`} class="card card-with-count" id="card-prompts">
<div class="card-icon">🎯</div>
<h3>Prompts</h3>
<p>Ready-to-use prompt templates for development tasks</p>
<div class="card-content">
<h3>Prompts</h3>
<p>Ready-to-use prompt templates for development tasks</p>
</div>
<div class="card-count" data-count="prompts">-</div>
</a>
<a href={`${base}instructions/`} class="card">
<a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
<div class="card-icon">📋</div>
<h3>Instructions</h3>
<p>Coding standards and best practices for Copilot</p>
<div class="card-content">
<h3>Instructions</h3>
<p>Coding standards and best practices for Copilot</p>
</div>
<div class="card-count" data-count="instructions">-</div>
</a>
<a href={`${base}skills/`} class="card">
<a href={`${base}skills/`} class="card card-with-count" id="card-skills">
<div class="card-icon">⚡</div>
<h3>Skills</h3>
<p>Self-contained folders with instructions and resources</p>
<div class="card-content">
<h3>Skills</h3>
<p>Self-contained folders with instructions and resources</p>
</div>
<div class="card-count" data-count="skills">-</div>
</a>
<a href={`${base}collections/`} class="card">
<a href={`${base}collections/`} class="card card-with-count" id="card-collections">
<div class="card-icon">📦</div>
<h3>Collections</h3>
<p>Curated collections organized by themes</p>
<div class="card-content">
<h3>Collections</h3>
<p>Curated collections organized by themes</p>
</div>
<div class="card-count" data-count="collections">-</div>
</a>
<a href={`${base}tools/`} class="card">
<a href={`${base}tools/`} class="card card-with-count" id="card-tools">
<div class="card-icon">🔧</div>
<h3>Tools</h3>
<p>MCP servers and developer tools</p>
<div class="card-content">
<h3>Tools</h3>
<p>MCP servers and developer tools</p>
</div>
<div class="card-count" data-count="tools">-</div>
</a>
</div>
</div>

19
website/src/scripts/pages/index.ts
View File

@@ -12,6 +12,7 @@ interface Manifest {
instructions: number;
skills: number;
collections: number;
tools: number;
};
}
@@ -33,16 +34,14 @@ export async function initHomepage(): Promise<void> {
// Load manifest for stats
const manifest = await fetchData<Manifest>('manifest.json');
if (manifest && manifest.counts) {
const statsEl = document.getElementById('stats');
if (statsEl) {
statsEl.innerHTML = `
<div class="stat"><span class="stat-value">${manifest.counts.agents}</span><span class="stat-label">Agents</span></div>
<div class="stat"><span class="stat-value">${manifest.counts.prompts}</span><span class="stat-label">Prompts</span></div>
<div class="stat"><span class="stat-value">${manifest.counts.instructions}</span><span class="stat-label">Instructions</span></div>
<div class="stat"><span class="stat-value">${manifest.counts.skills}</span><span class="stat-label">Skills</span></div>
<div class="stat"><span class="stat-value">${manifest.counts.collections}</span><span class="stat-label">Collections</span></div>
`;
}
// Populate counts in cards
const countKeys = ['agents', 'prompts', 'instructions', 'skills', 'collections', 'tools'] as const;
countKeys.forEach(key => {
const countEl = document.querySelector(`.card-count[data-count="${key}"]`);
if (countEl && manifest.counts[key] !== undefined) {
countEl.textContent = manifest.counts[key].toString();
}
});
}
// Load search index