Add contribution CTA to all listing pages (#850)

* Add contribution CTA to all listing/search pages Add a reusable ContributeCTA component that encourages visitors to contribute their own resources. The CTA appears at the bottom of every resource listing page (agents, instructions, skills, hooks, workflows, plugins, tools) with: - Contextual text that adapts to the resource type - 'Contribute yours' primary button linking to CONTRIBUTING.md - 'Request a resource' outline button linking to new issue creation - Gradient top bar matching existing card design patterns - Responsive layout that stacks on mobile Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Add Contribute button to page header on all listing pages Place an outlined Contribute button in each page-header section so it's immediately visible without scrolling. Uses accent purple border that fills on hover with a glow effect. Stacks below description on mobile via a 600px breakpoint. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Add screenshots for contribution CTA PR Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * didn't mean to commit them * Extract PageHeader component to deduplicate header markup Address PR review feedback: the header Contribute link (URL, SVG icon, classes) was duplicated across all 7 listing pages. Extract into a reusable PageHeader.astro component that accepts title and description props, with a slot for rich HTML descriptions (used by workflows page). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-12 04:05:12 +00:00 · 2026-03-02 16:21:22 +11:00
parent 1f3192b2ad
commit 4cf83b0161
10 changed files with 205 additions and 42 deletions
--- a/website/public/styles/global.css
+++ b/website/public/styles/global.css
@@ -1076,6 +1076,49 @@ a:hover {
  color: var(--color-text-muted);
 }

+.page-header-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.page-header-row > div:first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.page-header .contribute-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-accent);
+  border: 1px solid var(--color-accent);
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: var(--transition);
+  flex-shrink: 0;
+}
+
+.page-header .contribute-link:hover {
+  background: var(--color-accent);
+  color: #fff;
+  box-shadow: var(--shadow-glow);
+  transform: translateY(-1px);
+}
+
+@media (max-width: 600px) {
+  .page-header-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
 .page-content {
  padding: 40px 0 80px;
 }
--- a/website/src/components/ContributeCTA.astro
+++ b/website/src/components/ContributeCTA.astro
@@ -0,0 +1,108 @@
+---
+interface Props {
+  resourceType: string;
+}
+
+const { resourceType } = Astro.props;
+const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md';
+const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
+---
+
+<aside class="contribute-cta" aria-label="Contribute">
+  <div class="contribute-cta-inner">
+    <div class="contribute-cta-content">
+      <h2 class="contribute-cta-title">Don't see what you're looking for?</h2>
+      <p class="contribute-cta-description">This collection is community-driven. Share your own {resourceType} to help others get more out of GitHub Copilot.</p>
+    </div>
+    <div class="contribute-cta-actions">
+      <a href={contributingUrl} class="btn btn-primary" target="_blank" rel="noopener">
+        Contribute yours
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+          <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/>
+        </svg>
+      </a>
+      <a href={newIssueUrl} class="btn btn-outline" target="_blank" rel="noopener">
+        Request a resource
+      </a>
+    </div>
+  </div>
+</aside>
+
+<style>
+  .contribute-cta {
+    margin-top: 48px;
+    padding: 0 0 16px;
+  }
+
+  .contribute-cta-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 32px;
+    padding: 32px 40px;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-lg);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .contribute-cta-inner::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
+  }
+
+  .contribute-cta-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .contribute-cta-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-text-emphasis);
+    margin: 0 0 8px;
+  }
+
+  .contribute-cta-description {
+    color: var(--color-text-muted);
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
+
+  .contribute-cta-actions {
+    display: flex;
+    gap: 12px;
+    flex-shrink: 0;
+  }
+
+  .contribute-cta-actions .btn {
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  @media (max-width: 768px) {
+    .contribute-cta-inner {
+      flex-direction: column;
+      text-align: center;
+      padding: 28px 24px;
+    }
+
+    .contribute-cta-actions {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .contribute-cta-actions .btn {
+      justify-content: center;
+    }
+  }
+</style>
--- a/website/src/components/PageHeader.astro
+++ b/website/src/components/PageHeader.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md';
+---
+
+<div class="page-header">
+  <div class="container">
+    <div class="page-header-row">
+      <div>
+        <h1><Fragment set:html={title} /></h1>
+        <p><slot><Fragment set:html={description} /></slot></p>
+      </div>
+      <a href={contributingUrl} class="contribute-link" target="_blank" rel="noopener">
+        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/></svg>
+        Contribute
+      </a>
+    </div>
+  </div>
+</div>
--- a/website/src/pages/agents.astro
+++ b/website/src/pages/agents.astro
@@ -1,16 +1,13 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.astro';
 ---

 <BaseLayout title="Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" activeNav="agents">
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>🤖 Custom Agents</h1>
-        <p>Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains</p>
-      </div>
-    </div>
+    <PageHeader title="🤖 Custom Agents" description="Specialized agents that enhance GitHub Copilot for specific technologies, workflows, and domains" />

    <div class="page-content">
      <div class="container">
@@ -49,6 +46,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading agents...</div>
        </div>
+        <ContributeCTA resourceType="agents" />
      </div>
    </div>
  </main>
--- a/website/src/pages/hooks.astro
+++ b/website/src/pages/hooks.astro
@@ -1,16 +1,13 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.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>
+    <PageHeader title="🪝 Hooks" description="Automated workflows triggered by Copilot coding agent events" />

    <div class="page-content">
      <div class="container">
@@ -42,6 +39,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading hooks...</div>
        </div>
+        <ContributeCTA resourceType="hooks" />
      </div>
    </div>
  </main>
--- a/website/src/pages/instructions.astro
+++ b/website/src/pages/instructions.astro
@@ -1,16 +1,13 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.astro';
 ---

 <BaseLayout title="Instructions" description="Coding standards and best practices for GitHub Copilot" activeNav="instructions">
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>📋 Instructions</h1>
-        <p>Coding standards and best practices for GitHub Copilot</p>
-      </div>
-    </div>
+    <PageHeader title="📋 Instructions" description="Coding standards and best practices for GitHub Copilot" />

    <div class="page-content">
      <div class="container">
@@ -38,6 +35,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading instructions...</div>
        </div>
+        <ContributeCTA resourceType="instructions" />
      </div>
    </div>
  </main>
--- a/website/src/pages/plugins.astro
+++ b/website/src/pages/plugins.astro
@@ -1,16 +1,13 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.astro';
 ---

 <BaseLayout title="Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" activeNav="plugins">
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>🔌 Plugins</h1>
-        <p>Curated plugins of agents, hooks, and skills for specific workflows</p>
-      </div>
-    </div>
+    <PageHeader title="🔌 Plugins" description="Curated plugins of agents, hooks, and skills for specific workflows" />

    <div class="page-content">
      <div class="container">
@@ -37,6 +34,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading plugins...</div>
        </div>
+        <ContributeCTA resourceType="plugins" />
      </div>
    </div>
  </main>
--- a/website/src/pages/skills.astro
+++ b/website/src/pages/skills.astro
@@ -1,16 +1,13 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.astro';
 ---

 <BaseLayout title="Skills" description="Self-contained agent skills with instructions and bundled resources" activeNav="skills">
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>⚡ Skills</h1>
-        <p>Self-contained agent skills with instructions and bundled resources</p>
-      </div>
-    </div>
+    <PageHeader title="⚡ Skills" description="Self-contained agent skills with instructions and bundled resources" />

    <div class="page-content">
      <div class="container">
@@ -44,6 +41,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading skills...</div>
        </div>
+        <ContributeCTA resourceType="skills" />
      </div>
    </div>
  </main>
--- a/website/src/pages/tools.astro
+++ b/website/src/pages/tools.astro
@@ -1,5 +1,7 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import ContributeCTA from "../components/ContributeCTA.astro";
+import PageHeader from "../components/PageHeader.astro";
 ---

 <BaseLayout
@@ -8,12 +10,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
  activeNav="tools"
 >
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>🔧 Tools</h1>
-        <p>MCP servers and developer tools for GitHub Copilot</p>
-      </div>
-    </div>
+    <PageHeader title="🔧 Tools" description="MCP servers and developer tools for GitHub Copilot" />

    <div class="page-content">
      <div class="container">
@@ -48,6 +45,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
            experience. Check back soon!
          </p>
        </div>
+        <ContributeCTA resourceType="tools" />
      </div>
    </div>
  </main>
--- a/website/src/pages/workflows.astro
+++ b/website/src/pages/workflows.astro
@@ -1,16 +1,15 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import Modal from '../components/Modal.astro';
+import ContributeCTA from '../components/ContributeCTA.astro';
+import PageHeader from '../components/PageHeader.astro';
 ---

 <BaseLayout title="Workflows" description="AI-powered repository automations that run coding agents in GitHub Actions" activeNav="workflows">
  <main id="main-content">
-    <div class="page-header">
-      <div class="container">
-        <h1>⚡ Agentic Workflows</h1>
-        <p>AI-powered repository automations that run coding agents in <a href="https://gh.io/gh-aw" target="_blank" rel="noopener">GitHub Actions</a></p>
-      </div>
-    </div>
+    <PageHeader title="⚡ Agentic Workflows" description="">
+      AI-powered repository automations that run coding agents in <a href="https://gh.io/gh-aw" target="_blank" rel="noopener">GitHub Actions</a>
+    </PageHeader>

    <div class="page-content">
      <div class="container">
@@ -38,6 +37,7 @@ import Modal from '../components/Modal.astro';
        <div class="resource-list" id="resource-list" role="list">
          <div class="loading" aria-live="polite">Loading workflows...</div>
        </div>
+        <ContributeCTA resourceType="workflows" />
      </div>
    </div>
  </main>