188 lines
9.7 KiB
TypeScript
188 lines
9.7 KiB
TypeScript
/**
|
|
* rCred landing page — SourceCred-inspired contribution recognition.
|
|
*
|
|
* An ode to SourceCred (2018-2022) and a re-enlivening of the
|
|
* PageRank-for-community-contribution protocol.
|
|
*/
|
|
export function renderLanding(): string {
|
|
return `
|
|
<!-- Hero -->
|
|
<div class="rl-hero">
|
|
<span class="rl-tagline" style="color:#fbbf24;background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.2)">
|
|
Part of the rSpace Ecosystem
|
|
</span>
|
|
<h1 class="rl-heading" style="background:linear-gradient(to right,#fbbf24,#f59e0b,#d97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
|
|
Contribution<br>Recognition
|
|
</h1>
|
|
<p class="rl-subtitle">
|
|
<strong style="color:#e2e8f0">CredRank</strong> builds a living graph of every contribution
|
|
across your community — docs written, tasks completed, events attended, votes cast —
|
|
and runs <strong style="color:#fbbf24">PageRank</strong> to surface who's actually creating value.
|
|
Then it pays them in <strong style="color:#fbbf24">Grain</strong>.
|
|
</p>
|
|
<div class="rl-cta-row">
|
|
<a href="https://demo.rspace.online/rcred" class="rl-cta-primary"
|
|
style="background:linear-gradient(to right,#f59e0b,#d97706);color:white">
|
|
<span style="display:inline-flex;align-items:center;gap:0.5rem">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
|
|
Try the Demo
|
|
</span>
|
|
</a>
|
|
<a href="/create-space" class="rl-cta-secondary">Create a Space</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- In Memoriam -->
|
|
<section class="rl-section" style="border-top:none">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">Origin Story</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Standing on the Shoulders of SourceCred
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
|
|
<strong style="color:#fbbf24">SourceCred</strong> (2018–2022) pioneered the idea that
|
|
community contributions could be measured through a weighted graph and PageRank.
|
|
The project is gone, but the algorithm endures. rCred carries the torch —
|
|
adapted for local-first CRDT communities where every action is already a document.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How it Works -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">How It Works</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
From Actions to Grain in Three Steps
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="rl-grid-3">
|
|
<div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
|
|
<span style="font-size:0.9rem">1</span>
|
|
</div>
|
|
<h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Graph Collection</h3>
|
|
</div>
|
|
<p>
|
|
Every action across <strong style="color:#e2e8f0">8 rApps</strong> becomes a node
|
|
in your contribution graph — tasks, docs, chats, calendar events, proposals,
|
|
flows, time commitments, and wallet activity. Contributors are connected to their work
|
|
through weighted edges.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
|
|
<span style="font-size:0.9rem">2</span>
|
|
</div>
|
|
<h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">CredRank</h3>
|
|
</div>
|
|
<p>
|
|
Modified <strong style="color:#e2e8f0">PageRank</strong> runs on the graph via
|
|
power iteration. High-value contributions (settled commitments, completed tasks)
|
|
carry more weight. Cred flows from contributions to their authors, normalized
|
|
to a 0–1000 scale. Community-configurable weights.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-card" style="border:2px solid rgba(251,191,36,0.35);background:linear-gradient(to bottom right,rgba(251,191,36,0.08),rgba(251,191,36,0.03))">
|
|
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
|
|
<div style="width:2rem;height:2rem;border-radius:9999px;background:#f59e0b;display:flex;align-items:center;justify-content:center">
|
|
<span style="font-size:0.9rem">3</span>
|
|
</div>
|
|
<h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Grain Distribution</h3>
|
|
</div>
|
|
<p>
|
|
<strong style="color:#e2e8f0">GRAIN tokens</strong> are minted proportional to Cred.
|
|
80% goes to <em>lifetime equity</em> (catch-up for long-term contributors) and
|
|
20% to <em>current epoch</em> (recent activity). Non-transferable, visible in rWallet.
|
|
Your community decides the emission rate.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contribution Types -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">16 Types</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Every Action Counts
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
|
|
From chat messages (0.5x) to settled time commitments (4x), each contribution type
|
|
has a configurable weight. Space admins tune the weights; the algorithm does the rest.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rl-grid-2" style="max-width:720px;margin:0 auto">
|
|
<div class="rl-card" style="border-color:rgba(34,197,94,0.25)">
|
|
<h3 style="color:#22c55e;font-size:0.95rem;margin-bottom:0.5rem">High Impact (3–4x)</h3>
|
|
<ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
|
|
<li>Settlement completed — 4.0x</li>
|
|
<li>Task completed — 3.0x</li>
|
|
<li>Proposal authored — 3.0x</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card" style="border-color:rgba(59,130,246,0.25)">
|
|
<h3 style="color:#3b82f6;font-size:0.95rem;margin-bottom:0.5rem">Medium Impact (1.5–2x)</h3>
|
|
<ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
|
|
<li>Doc authored — 2.0x</li>
|
|
<li>Flow created — 2.0x</li>
|
|
<li>Event scheduled — 2.0x</li>
|
|
<li>Commitment created — 2.0x</li>
|
|
<li>Event attended — 1.5x</li>
|
|
<li>Budget allocated — 1.5x</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card" style="border-color:rgba(251,191,36,0.25)">
|
|
<h3 style="color:#fbbf24;font-size:0.95rem;margin-bottom:0.5rem">Standard (1x)</h3>
|
|
<ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
|
|
<li>Task created — 1.0x</li>
|
|
<li>Comment authored — 1.0x</li>
|
|
<li>Vote cast — 1.0x</li>
|
|
<li>Address added — 1.0x</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rl-card" style="border-color:rgba(148,163,184,0.25)">
|
|
<h3 style="color:#94a3b8;font-size:0.95rem;margin-bottom:0.5rem">Light Touch (0.2–0.5x)</h3>
|
|
<ul style="color:#94a3b8;font-size:0.85rem;line-height:1.8;padding-left:1rem;margin:0">
|
|
<li>Message sent — 0.5x</li>
|
|
<li>TX annotated — 0.5x</li>
|
|
<li>Reaction given — 0.2x</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy -->
|
|
<section class="rl-section">
|
|
<div class="rl-container">
|
|
<div style="text-align:center;margin-bottom:2rem">
|
|
<span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">Philosophy</span>
|
|
<h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
|
|
Emergent Value Recognition
|
|
</h2>
|
|
<p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0.5rem auto 0">
|
|
Traditional organizations allocate rewards top-down. CredRank works bottom-up:
|
|
value emerges from the structure of contributions themselves. When someone's work
|
|
becomes a dependency for others, their cred rises naturally — no manager needed.
|
|
</p>
|
|
<p style="font-size:0.95rem;color:#64748b;max-width:640px;margin:1rem auto 0;font-style:italic">
|
|
"Make contributions visible. Let the graph speak." — SourceCred ethos
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
`;
|
|
}
|