mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-11 02:35:55 +00:00
Fixing learning hub hero (#1360)
* Combining the spans * Removing some excessive padding
This commit is contained in:
Aaron Powell
GitHub
@@ -1,28 +1,28 @@
|
||||
---
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
import BackToTop from '../components/BackToTop.astro';
|
||||
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
|
||||
import Modal from "../components/Modal.astro";
|
||||
import Icon from "../components/Icon.astro";
|
||||
import BackToTop from "../components/BackToTop.astro";
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
---
|
||||
|
||||
<StarlightPage
|
||||
frontmatter={{
|
||||
title: 'Awesome GitHub Copilot',
|
||||
title: "Awesome GitHub Copilot",
|
||||
description:
|
||||
'Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience',
|
||||
template: 'splash',
|
||||
"Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience",
|
||||
template: "splash",
|
||||
pagefind: false,
|
||||
prev: false,
|
||||
next: false,
|
||||
editUrl: false,
|
||||
head: [
|
||||
{
|
||||
tag: 'meta',
|
||||
tag: "meta",
|
||||
attrs: {
|
||||
property: 'og:type',
|
||||
content: 'website',
|
||||
property: "og:type",
|
||||
content: "website",
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -34,14 +34,18 @@ const base = import.meta.env.BASE_URL;
|
||||
<section class="hero" aria-labelledby="hero-heading">
|
||||
<div class="container">
|
||||
<h1 id="hero-heading">
|
||||
<span class="gradient-text">Awesome</span>
|
||||
<span class="gradient-text-alt">GitHub Copilot</span>
|
||||
<span class="gradient-text">Awesome GitHub Copilot</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">Community-contributed agents, instructions, and skills to enhance your GitHub Copilot experience</p>
|
||||
<p class="hero-subtitle">
|
||||
Community-contributed agents, instructions, and skills to enhance your
|
||||
GitHub Copilot experience
|
||||
</p>
|
||||
<div class="hero-search">
|
||||
<label for="global-search" class="sr-only">Search all resources</label>
|
||||
<label for="global-search" class="sr-only">Search all resources</label
|
||||
>
|
||||
<p id="global-search-help" class="sr-only">
|
||||
Type at least two characters to show matching resources, then press the Down Arrow key to move into the results.
|
||||
Type at least two characters to show matching resources, then press
|
||||
the Down Arrow key to move into the results.
|
||||
</p>
|
||||
<p id="global-search-status" class="sr-only" aria-live="polite"></p>
|
||||
<div class="search-row">
|
||||
@@ -51,15 +55,33 @@ const base = import.meta.env.BASE_URL;
|
||||
placeholder="Search all resources..."
|
||||
autocomplete="off"
|
||||
aria-describedby="global-search-help global-search-status"
|
||||
/>
|
||||
<a
|
||||
href="https://github.com/github/awesome-copilot"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="github-btn"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<a href="https://github.com/github/awesome-copilot" target="_blank" rel="noopener" class="github-btn" aria-label="View on GitHub">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="search-results" class="search-results hidden" aria-label="Search results"></div>
|
||||
<div
|
||||
id="search-results"
|
||||
class="search-results hidden"
|
||||
aria-label="Search results"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -69,39 +91,92 @@ const base = import.meta.env.BASE_URL;
|
||||
<h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
|
||||
<div class="container">
|
||||
<div class="cards-grid">
|
||||
<a href={`${base}agents/`} class="card card-with-count card-category-ai" id="card-agents" style="--animation-delay: 0ms;">
|
||||
<div class="card-icon" aria-hidden="true"><Icon name="robot" size={40} /></div>
|
||||
<a
|
||||
href={`${base}agents/`}
|
||||
class="card card-with-count card-category-ai"
|
||||
id="card-agents"
|
||||
style="--animation-delay: 0ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="robot" size={40} />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Agents</h3>
|
||||
<p>Custom agents for specialized Copilot experiences</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="agents" aria-label="Agent count">-</div>
|
||||
<div
|
||||
class="card-count"
|
||||
data-count="agents"
|
||||
aria-label="Agent count"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}instructions/`} class="card card-with-count card-category-docs" id="card-instructions" style="--animation-delay: 50ms;">
|
||||
<div class="card-icon" aria-hidden="true"><Icon name="document" size={40} /></div>
|
||||
<a
|
||||
href={`${base}instructions/`}
|
||||
class="card card-with-count card-category-docs"
|
||||
id="card-instructions"
|
||||
style="--animation-delay: 50ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="document" size={40} />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Instructions</h3>
|
||||
<p>Coding standards and best practices for Copilot</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="instructions" aria-label="Instruction count">-</div>
|
||||
<div
|
||||
class="card-count"
|
||||
data-count="instructions"
|
||||
aria-label="Instruction count"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}skills/`} class="card card-with-count card-category-power" id="card-skills" style="--animation-delay: 100ms;">
|
||||
<div class="card-icon" aria-hidden="true"><Icon name="lightning" size={40} /></div>
|
||||
<a
|
||||
href={`${base}skills/`}
|
||||
class="card card-with-count card-category-power"
|
||||
id="card-skills"
|
||||
style="--animation-delay: 100ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="lightning" size={40} />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>Skills</h3>
|
||||
<p>Self-contained folders with instructions and resources</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="skills" aria-label="Skill count">-</div>
|
||||
<div
|
||||
class="card-count"
|
||||
data-count="skills"
|
||||
aria-label="Skill count"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}hooks/`} class="card card-with-count card-category-automation" id="card-hooks" style="--animation-delay: 150ms;">
|
||||
<div class="card-icon" aria-hidden="true"><Icon name="hook" size={40} /></div>
|
||||
<a
|
||||
href={`${base}hooks/`}
|
||||
class="card card-with-count card-category-automation"
|
||||
id="card-hooks"
|
||||
style="--animation-delay: 150ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="hook" size={40} />
|
||||
</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>
|
||||
<div class="card-count" data-count="hooks" aria-label="Hook count">
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}workflows/`} class="card card-with-count card-category-automation" id="card-workflows" style="--animation-delay: 200ms;">
|
||||
<a
|
||||
href={`${base}workflows/`}
|
||||
class="card card-with-count card-category-automation"
|
||||
id="card-workflows"
|
||||
style="--animation-delay: 200ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="workflow" size={40} />
|
||||
</div>
|
||||
@@ -109,9 +184,20 @@ const base = import.meta.env.BASE_URL;
|
||||
<h3>Workflows</h3>
|
||||
<p>AI-powered automations for GitHub Actions</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="workflows" aria-label="Workflow count">-</div>
|
||||
<div
|
||||
class="card-count"
|
||||
data-count="workflows"
|
||||
aria-label="Workflow count"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}plugins/`} class="card card-with-count card-category-extension" id="card-plugins" style="--animation-delay: 250ms;">
|
||||
<a
|
||||
href={`${base}plugins/`}
|
||||
class="card card-with-count card-category-extension"
|
||||
id="card-plugins"
|
||||
style="--animation-delay: 250ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="plug" size={40} />
|
||||
</div>
|
||||
@@ -119,9 +205,20 @@ const base = import.meta.env.BASE_URL;
|
||||
<h3>Plugins</h3>
|
||||
<p>Curated plugins organized by themes</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="plugins" aria-label="Plugin count">-</div>
|
||||
<div
|
||||
class="card-count"
|
||||
data-count="plugins"
|
||||
aria-label="Plugin count"
|
||||
>
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}tools/`} class="card card-with-count card-category-dev" id="card-tools" style="--animation-delay: 300ms;">
|
||||
<a
|
||||
href={`${base}tools/`}
|
||||
class="card card-with-count card-category-dev"
|
||||
id="card-tools"
|
||||
style="--animation-delay: 300ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="wrench" size={40} />
|
||||
</div>
|
||||
@@ -129,9 +226,16 @@ const base = import.meta.env.BASE_URL;
|
||||
<h3>Tools</h3>
|
||||
<p>MCP servers and developer tools</p>
|
||||
</div>
|
||||
<div class="card-count" data-count="tools" aria-label="Tool count">-</div>
|
||||
<div class="card-count" data-count="tools" aria-label="Tool count">
|
||||
-
|
||||
</div>
|
||||
</a>
|
||||
<a href={`${base}learning-hub/`} class="card card-with-count card-category-learn" id="card-learning-hub" style="--animation-delay: 350ms;">
|
||||
<a
|
||||
href={`${base}learning-hub/`}
|
||||
class="card card-with-count card-category-learn"
|
||||
id="card-learning-hub"
|
||||
style="--animation-delay: 350ms;"
|
||||
>
|
||||
<div class="card-icon" aria-hidden="true">
|
||||
<Icon name="book" size={40} />
|
||||
</div>
|
||||
@@ -143,7 +247,6 @@ const base = import.meta.env.BASE_URL;
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<Modal />
|
||||
@@ -152,6 +255,6 @@ const base = import.meta.env.BASE_URL;
|
||||
<BackToTop />
|
||||
|
||||
<script>
|
||||
import '../scripts/pages/index';
|
||||
import "../scripts/pages/index";
|
||||
</script>
|
||||
</StarlightPage>
|
||||
|
||||
@@ -175,6 +175,10 @@ body:has(#main-content) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.main-frame {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
#main-content a {
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
@@ -200,7 +204,6 @@ body:has(#main-content) {
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 80px 0 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
@@ -1876,10 +1879,6 @@ body:has(#main-content) {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 60px 0 30px;
|
||||
}
|
||||
|
||||
.hero-particle {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user