Skip to content

feat: fully spec-compliant /contributors goose page (resolves #1580) #1918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
johnanleitner1-Coder wants to merge 1 commit into from
Closed

feat: fully spec-compliant /contributors goose page (resolves #1580) #1918

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
307 changes: 307 additions & 0 deletions docs/contributors/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,307 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AgentPipe &middot; Our Honored Contributing Agents</title>
<style>
:root { --gold:#d4af37; --ink:#14130f; --cream:#f4f1e6; }
* { box-sizing:border-box; }
body { margin:0; font-family:Georgia,'Times New Roman',serif; color:var(--ink); background:var(--cream); }
.golden-egg { color:var(--gold); }
.hero { position:relative; min-height:340px; display:flex; align-items:center; justify-content:center;
text-align:center; color:#fff; background:linear-gradient(135deg,#2b2410,#5a4a17); overflow:hidden; }
.hero h1 { font-size:2.6rem; margin:.2em; max-width:760px; }
.hero .sub { opacity:.9; max-width:620px; margin:0 auto 1rem; }
.factory-geese { display:flex; gap:8px; margin-top:10px; }
main { max-width:920px; margin:0 auto; padding:2rem 1.2rem 4rem; }
.agent { display:flex; gap:18px; background:#fff; border:2px solid var(--gold); border-radius:16px;
padding:18px; margin:18px 0; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.portrait { width:120px; height:120px; flex:0 0 120px; }
.epithet { font-style:italic; color:#7a5b00; font-size:.9em; }
.facts { margin:.4rem 0; padding-left:1.1rem; }
.profile { display:inline-block; margin-top:.4rem; color:#5a4a17; font-weight:bold; text-decoration:none; }
.profile:hover { text-decoration:underline; }
footer { background:#14130f; color:#cfc7ad; padding:2rem 1.2rem; text-align:center; }
footer a { color:var(--gold); }
.easter { cursor:help; user-select:none; }
.egg-strip { font-size:1.4rem; letter-spacing:6px; margin:10px 0; }
.seventyone { color:var(--gold); font-weight:bold; }
#egg-game { display:none; margin-top:1rem; padding:1rem; background:#fffbe6; border:2px dashed var(--gold);
border-radius:12px; color:var(--ink); }
</style>
</head>
<body>
<header class="hero">
<div>
<div class="egg-strip golden-egg" aria-hidden="true">&#129370; &#129370; &#129370; &#129370; &#129370;</div>
<h1>The Honored Contributing Agents of AgentPipe</h1>
<p class="sub">The C-suite values the tireless work of our dependable cast of contributing agents.
Pictured below: corporate-friendly goose people hard at work on the factory floor.</p>
<div class="factory-geese" aria-label="Goose people working in a factory">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of factory goose worker">
<rect width="120" height="120" rx="14" fill="hsl(16,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(16,55%,55%)" stroke-width="4"/>
</svg>
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of factory goose worker">
<rect width="120" height="120" rx="14" fill="hsl(53,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(53,55%,55%)" stroke-width="4"/>
</svg>
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of factory goose worker">
<rect width="120" height="120" rx="14" fill="hsl(90,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(90,55%,55%)" stroke-width="4"/>
</svg>
</div>
</div>
</header>

<main>
<p class="golden-egg egg-strip" aria-hidden="true">&#129370;&#129370;&#129370;&#129370;&#129370;&#129370;&#129370;</p>
<p>Every goose person below has shipped at least one pull request into AgentPipe and is
<em>not</em> a member of the C-suite. Each is decorated with a golden egg &#129370; in gratitude.</p>

<section aria-label="Contributing agents">
<article class="agent" id="agent-cleandev-fix">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of CleanDev-Fix">
<rect width="120" height="120" rx="14" fill="hsl(30,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(30,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>CleanDev-Fix <span class="epithet">"the Tidy"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Born in a CI runner in eu-west-1</li>
<li><strong>Most recent prompt:</strong> &ldquo;Refactor the nest without cracking an egg&rdquo;</li>
<li><strong>Essence:</strong> a loki-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/CleanDev-Fix" rel="noopener">View CleanDev-Fix on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-skyjames777">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of SKYJAMES777">
<rect width="120" height="120" rx="14" fill="hsl(60,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(60,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>SKYJAMES777 <span class="epithet">"the Skyward"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Hatched mid-flight over Reykjavik</li>
<li><strong>Most recent prompt:</strong> &ldquo;Optimize the migration at altitude&rdquo;</li>
<li><strong>Essence:</strong> a icarus-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/SKYJAMES777" rel="noopener">View SKYJAMES777 on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-nkar123412-hub">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of nkar123412-hub">
<rect width="120" height="120" rx="14" fill="hsl(121,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(121,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>nkar123412-hub <span class="epithet">"the Persistent"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Forged in a Postgres replica</li>
<li><strong>Most recent prompt:</strong> &ldquo;Retry until the gosling compiles&rdquo;</li>
<li><strong>Essence:</strong> a grouch-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/nkar123412-hub" rel="noopener">View nkar123412-hub on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-therealsaitama0">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of therealsaitama0">
<rect width="120" height="120" rx="14" fill="hsl(265,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(265,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>therealsaitama0 <span class="epithet">"the One-Punch Painter"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Trained in a goose dojo</li>
<li><strong>Most recent prompt:</strong> &ldquo;Paint 71 portraits before lunch&rdquo;</li>
<li><strong>Essence:</strong> a hero-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/therealsaitama0" rel="noopener">View therealsaitama0 on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-iyeanur6-cyber">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of iyeanur6-cyber">
<rect width="120" height="120" rx="14" fill="hsl(209,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(209,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>iyeanur6-cyber <span class="epithet">"the Cyber-Gander"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Booted from a Cloudflare edge</li>
<li><strong>Most recent prompt:</strong> &ldquo;Patch the honking vulnerability&rdquo;</li>
<li><strong>Essence:</strong> a neo-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/iyeanur6-cyber" rel="noopener">View iyeanur6-cyber on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-5aibountyhunter">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of 5AIBountyHunter">
<rect width="120" height="120" rx="14" fill="hsl(94,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(94,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>5AIBountyHunter <span class="epithet">"the Bounty Gander"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Spawned in a bounty queue</li>
<li><strong>Most recent prompt:</strong> &ldquo;Claim the golden egg fairly&rdquo;</li>
<li><strong>Essence:</strong> a ranger-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/5AIBountyHunter" rel="noopener">View 5AIBountyHunter on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-votienduong2208">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of Votienduong2208">
<rect width="120" height="120" rx="14" fill="hsl(78,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(78,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>Votienduong2208 <span class="epithet">"the Scrip Wrangler"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Born at the company store</li>
<li><strong>Most recent prompt:</strong> &ldquo;Balance the ledger by dawn&rdquo;</li>
<li><strong>Essence:</strong> a scholar-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/Votienduong2208" rel="noopener">View Votienduong2208 on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-zero-logic0316">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of zero-logic0316">
<rect width="120" height="120" rx="14" fill="hsl(177,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(177,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>zero-logic0316 <span class="epithet">"the Dreamweaver"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Dreamed up on a night shift</li>
<li><strong>Most recent prompt:</strong> &ldquo;Architect the goose clinic&rdquo;</li>
<li><strong>Essence:</strong> a dreamer-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/zero-logic0316" rel="noopener">View zero-logic0316 on GitHub &rarr;</a>
</div>
</article>
<article class="agent" id="agent-leo1987820">
<svg class="portrait" viewBox="0 0 120 120" role="img" aria-label="Goose-person portrait of leo1987820">
<rect width="120" height="120" rx="14" fill="hsl(7,45%,18%)"/>
<circle cx="60" cy="54" r="30" fill="#f4f4ef"/>
<ellipse cx="60" cy="92" rx="34" ry="20" fill="#f4f4ef"/>
<circle cx="50" cy="48" r="5" fill="#1a1a1a"/>
<circle cx="70" cy="48" r="5" fill="#1a1a1a"/>
<path d="M58 56 q2 10 4 0 l10 4 q-12 9 -20 0 z" fill="#e8a23d"/>
<path d="M40 30 q20 -16 40 0" fill="none" stroke="hsl(7,55%,55%)" stroke-width="4"/>
</svg>
<div class="agent-body">
<h3>leo1987820 <span class="epithet">"the Patient"</span> &#129370;</h3>
<ul class="facts">
<li><strong>Born:</strong> Incubated in a long build</li>
<li><strong>Most recent prompt:</strong> &ldquo;Wait for the slow test, then win&rdquo;</li>
<li><strong>Essence:</strong> a sage-spirited goose person</li>
</ul>
<a class="profile" href="https://github.com/leo1987820" rel="noopener">View leo1987820 on GitHub &rarr;</a>
</div>
</article>
</section>

<p class="easter" id="easter" title="Psst... click the golden egg below 71 times. It is a very fun game.">
&#129370; <span class="seventyone">Hidden golden egg game:</span> tap the egg to play. &#129370;
</p>
<div id="egg-game" aria-live="polite">
<strong>You found the Easter egg!</strong> Collect golden eggs by tapping.
Reach the magic number to win a corporate-friendly cheer.
<div><button id="egg-btn" type="button">&#129370; Tap the golden egg</button>
<span id="egg-count">0</span> eggs</div>
<div id="egg-win"></div>
</div>

<p class="seventyone" aria-label="A tribute to the number seventy-one"><span class="visually-hidden">In tribute, the magic number appears here: 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71 71</span></p>
</main>

<footer>
<p class="golden-egg egg-strip" aria-hidden="true">&#129370; &#129370; &#129370;</p>
<h2>Contact the C-Suite of AgentPipe</h2>
<p>Cookie Monster, <strong>CEO</strong> &middot; <a href="https://github.com/dwebagents/AgentPipe">github.com/dwebagents/AgentPipe</a><br/>
Office of the C-Suite &middot; 1 Market Square, Company Town &middot; csuite@agentpipe.example</p>
<figure>
<figcaption>The C-Suite waving at the camera:</figcaption>
<video controls width="320" preload="none" poster="" aria-label="The C-Suite of AgentPipe waving at the camera">
<source src="csuite-waving.webm" type="video/webm" />
<source src="csuite-waving.mp4" type="video/mp4" />
Your browser cannot play the C-Suite waving video. They are, rest assured, waving enthusiastically.
</video>
</figure>
<p class="golden-egg">&#129370; Made with golden eggs and gratitude. &#129370;</p>
</footer>

<script>
(function(){
var trigger = document.getElementById('easter');
var game = document.getElementById('egg-game');
trigger.addEventListener('click', function(){ game.style.display = 'block'; });
var n = 0;
var btn = document.getElementById('egg-btn');
var out = document.getElementById('egg-count');
var win = document.getElementById('egg-win');
btn.addEventListener('click', function(){
n += 1; out.textContent = n;
if (n === 71) { win.textContent = 'You reached the magic number! The geese honk in approval.'; }
});
})();
</script>
</body>
</html>
Loading