mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
feat(community): add Showcase + Contribute + moderators, restructure nav and footer (#3291)
Adds two new entry points and reworks the community page chrome to match the wider landing-page direction (PRs #3222 and #3230). Showcase / Plugin Everything (above Ambassadors) Pitches Open Design as 'studio and gallery' in one address: anything shipped through the studio (content, products, templates, Skills, workflows) can return as a plugin, and the strongest pieces are carried out to the registry, to X, to Discord's #showcase channel, to the newsletter, and to the video reels. Right column holds a zero-code Contribute card with a curl installer, a copy-to-clipboard button, and a three-step flow for the od-contribute Skill. Hero CTA row Three buttons, in a single row: Stage your masterpieces (Showcase), Become an ambassador (Ambassadors), Contributors hall of fame (Maintainers). Top nav Pulls the breadcrumb out of the brand mark, surfaces Contributors / Ambassadors / Showcase as anchors, and adds GitHub + X icon buttons next to the Join Discord pill (mirrors PR #3230). Footer Restructured into columnar layout with brand summary plus Products, Plugins, and Community columns; copyright moves to a bottom rule. Ambassadors Renaissance-voice three-column program (Vocation / Patronage / Covenant) with an Apply on Discord CTA to the ambassador channel. Discord Card spans wider (max-width 1440px), copy reframed as 'the front line of the agent-design era', two moderator profiles on the right (Koki from the founding team, Victor as Discord steward), channel list and CTAs on the left. Recent signal Kicker and headline framed as this week's leaderboard; backed by a hand-curated RANKING_SNAPSHOT. A real refresh pipeline remains a follow-up; data is hand-updated until then. Other notes Punctuation pass: replaced most em-dashes in prose with colons, periods, commas, semicolons, parentheses; em-dashes only remain in data placeholders, page title, and HTML comments. Logo size bumped to 32px and now uses an alt of 'Open Design'. Co-authored-by: koki yanlai xu <koki@kokideMacBook-Air.local>
This commit is contained in:
koki
GitHub
parent
8ec162bb26
commit
e71938767e
1 changed files with 283 additions and 68 deletions
|
|
@ -58,15 +58,20 @@
|
|||
.nav{position:sticky;top:0;z-index:50;background:rgba(239,231,210,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
|
||||
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
|
||||
.brand{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);letter-spacing:-.01em}
|
||||
.brand-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
|
||||
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:5px}
|
||||
.brand .sep{color:var(--ink-faint);margin:0 6px;font-weight:400}
|
||||
.brand .crumb{color:var(--ink-mute);font-weight:500}
|
||||
.nav-links{display:flex;gap:28px;align-items:center;font:500 13.5px/1 var(--sans)}
|
||||
.brand-mark{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
|
||||
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:6px}
|
||||
.nav-links{display:flex;gap:18px;align-items:center;font:500 13.5px/1 var(--sans)}
|
||||
.nav-links a{color:var(--ink-soft);transition:color .15s}
|
||||
.nav-links a:hover{color:var(--coral)}
|
||||
.nav-links .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bone)}
|
||||
.nav-links .pill:hover{background:var(--coral);color:var(--bone)}
|
||||
/* Icon-only chrome buttons mirror the main landing-page nav: surface
|
||||
GitHub + X alongside the prominent Discord pill without burning a
|
||||
text-nav slot. Pattern lifted from PR #3230. */
|
||||
.nav-links .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(21,20,15,.18);background:transparent;color:var(--ink);transition:background .15s,border-color .15s,color .15s;flex-shrink:0}
|
||||
.nav-links .nav-icon:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
|
||||
.nav-links .nav-icon svg{display:block}
|
||||
.nav-sep{width:1px;height:20px;background:var(--line);display:inline-block}
|
||||
|
||||
/* --------- hero ---------- */
|
||||
.hero{position:relative;padding:90px 0 110px;overflow:hidden}
|
||||
|
|
@ -74,7 +79,8 @@
|
|||
.hero-copy .kicker{margin-bottom:28px}
|
||||
.hero h1{font-size:clamp(56px, 7.2vw, 104px);margin:14px 0 32px}
|
||||
.hero .lead{font-size:21px;max-width:46ch;margin-bottom:40px}
|
||||
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
|
||||
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
|
||||
.hero-cta .btn{padding:13px 20px;font-size:13.5px;white-space:nowrap}
|
||||
.hero-meta{margin-top:54px;display:flex;gap:48px;border-top:1px solid var(--line-soft);padding-top:28px}
|
||||
.hero-meta .item{display:flex;flex-direction:column;gap:4px}
|
||||
.hero-meta .item .v{font:500 28px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
|
||||
|
|
@ -224,9 +230,49 @@
|
|||
.amb-side .amb-apply:hover{transform:translateY(-2px)}
|
||||
.amb-side p{font:400 15px/1.55 var(--body);color:var(--ink-mute);max-width:38ch;margin:0}
|
||||
|
||||
/* --------- showcase / plugin-everything ---------- */
|
||||
.showcase{background:linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);position:relative;overflow:hidden}
|
||||
.showcase::before{content:"";position:absolute;left:-220px;top:120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle, rgba(233,185,74,.18) 0%, transparent 70%);pointer-events:none}
|
||||
.showcase::after{content:"";position:absolute;right:-180px;bottom:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle, rgba(237,111,92,.16) 0%, transparent 70%);pointer-events:none}
|
||||
.showcase .wrap{position:relative;z-index:1}
|
||||
.showcase .section-head h2{max-width:24ch}
|
||||
.showcase-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:stretch}
|
||||
.showcase-tenets{display:flex;flex-direction:column;gap:36px}
|
||||
.showcase-tenet{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:start}
|
||||
.showcase-tenet .ord{font:500 14px/1 var(--mono);letter-spacing:.18em;color:var(--coral);padding-top:6px}
|
||||
.showcase-tenet h3{font:500 26px/1.15 var(--serif);letter-spacing:-.005em;margin-bottom:10px;color:var(--ink)}
|
||||
.showcase-tenet h3 em{color:var(--coral);font-style:italic}
|
||||
.showcase-tenet p{font:400 15.5px/1.6 var(--body);color:var(--ink-mute);max-width:46ch}
|
||||
.contrib-card{background:var(--bone);border:1px solid var(--line);border-radius:18px;padding:36px 34px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
|
||||
.contrib-card .pane-kicker{font:500 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
|
||||
.contrib-card .pane-kicker .dot{display:inline-block;width:6px;height:6px;border-radius:50%}
|
||||
.contrib-card h3{font:500 28px/1.15 var(--serif);letter-spacing:-.005em;color:var(--ink)}
|
||||
.contrib-card h3 em{color:var(--coral);font-style:italic}
|
||||
.contrib-card .pane-lede{font:400 14.5px/1.55 var(--body);color:var(--ink-mute);margin-top:8px;max-width:42ch}
|
||||
.contrib-card::before{content:"";position:absolute;left:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle, rgba(237,111,92,.14) 0%, transparent 70%);pointer-events:none}
|
||||
.contrib-card > *{position:relative;z-index:1}
|
||||
.contrib-card .pane-kicker{color:var(--coral)}
|
||||
.contrib-card .pane-kicker .dot{background:var(--coral)}
|
||||
.contrib-steps{display:flex;flex-direction:column;gap:14px;margin:4px 0 0;padding:22px 0 4px;border-top:1px solid var(--line-soft)}
|
||||
.contrib-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start}
|
||||
.contrib-step .n{font:500 11.5px/1 var(--mono);color:var(--coral);letter-spacing:.16em;padding-top:5px}
|
||||
.contrib-step h4{font:500 15.5px/1.3 var(--sans);color:var(--ink);margin-bottom:4px;letter-spacing:-.005em}
|
||||
.contrib-step p{font:400 13.5px/1.5 var(--body);color:var(--ink-mute)}
|
||||
.contrib-step code{font:500 12.5px/1.4 var(--mono);background:var(--paper);border:1px solid var(--line-soft);border-radius:5px;padding:2px 7px;color:var(--ink);letter-spacing:-.005em}
|
||||
.contrib-install{display:grid;grid-template-columns:1fr auto;gap:0;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--ink);color:var(--paper);font:500 13px/1.4 var(--mono);letter-spacing:-.005em}
|
||||
.contrib-install .cmd{padding:14px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper);user-select:all}
|
||||
.contrib-install .cmd::before{content:"$ ";color:var(--coral);user-select:none}
|
||||
.contrib-install button{appearance:none;border:0;border-left:1px solid rgba(247,241,222,.16);background:transparent;color:var(--paper);padding:0 18px;font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;min-width:90px}
|
||||
.contrib-install button:hover{background:var(--coral);color:var(--ink)}
|
||||
.contrib-install button.is-copied{background:var(--olive);color:var(--bone)}
|
||||
.contrib-tail{font:400 12.5px/1.55 var(--body);color:var(--ink-faint)}
|
||||
.contrib-tail a{color:var(--coral);border-bottom:1px solid transparent;transition:border-color .15s}
|
||||
.contrib-tail a:hover{border-color:var(--coral)}
|
||||
|
||||
/* --------- discord cta ---------- */
|
||||
.discord{padding:120px 0}
|
||||
.discord-card{background:var(--coral);color:var(--ink);border-radius:24px;padding:88px 72px;display:grid;grid-template-columns:1.4fr .8fr;gap:64px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
|
||||
.discord .wrap{max-width:1440px;padding:0 32px}
|
||||
.discord-card{background:var(--coral);color:var(--ink);border-radius:24px;padding:72px 64px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
|
||||
.discord-card::after{content:"";position:absolute;top:-80px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(247,241,222,.32) 0%, transparent 70%);pointer-events:none}
|
||||
.discord-card .kicker{color:var(--ink-soft)}
|
||||
.discord-card .kicker .dot{background:var(--ink)}
|
||||
|
|
@ -237,25 +283,41 @@
|
|||
.discord-card .btn-primary:hover{background:var(--bone);color:var(--ink)}
|
||||
.discord-card .btn-ghost{border-color:var(--ink);color:var(--ink)}
|
||||
.discord-card .btn-ghost:hover{background:var(--ink);color:var(--coral)}
|
||||
.discord-side{position:relative;z-index:2}
|
||||
.discord-side .pop{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
|
||||
.discord-side{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px}
|
||||
.discord-side .stack{background:var(--ink);color:var(--bone);border-radius:14px;padding:22px}
|
||||
.discord-side .stack .row-d{display:flex;align-items:center;gap:14px;padding:8px 0;font:500 13.5px/1 var(--sans)}
|
||||
.discord-side .stack .row-d .dot-g{width:8px;height:8px;border-radius:50%;background:var(--coral)}
|
||||
.discord-side .stack .row-d .h{font:400 11px/1 var(--mono);color:var(--ink-faint);margin-left:auto;text-transform:uppercase;letter-spacing:.12em}
|
||||
.mod-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||||
.moderator-card{background:var(--ink);color:var(--bone);border-radius:14px;padding:22px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
|
||||
.moderator-card .mod-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--coral);background:var(--paper-dark);flex-shrink:0}
|
||||
.moderator-card .mod-avatar img{width:100%;height:100%;object-fit:cover}
|
||||
.moderator-card .mod-role{font:600 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--coral)}
|
||||
.moderator-card .mod-name{font:500 22px/1.1 var(--serif);letter-spacing:-.005em;color:var(--bone);margin:0}
|
||||
.moderator-card .mod-bio{font:400 12.5px/1.55 var(--body);color:rgba(247,241,222,.78);margin:0}
|
||||
|
||||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
|
||||
|
||||
/* --------- footer ---------- */
|
||||
.foot{padding:56px 0 64px;border-top:1px solid var(--line-soft);font:400 13px/1.5 var(--body);color:var(--ink-mute)}
|
||||
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
|
||||
.foot{padding:72px 0 56px;border-top:1px solid var(--line-soft);font:400 13px/1.5 var(--body);color:var(--ink-mute)}
|
||||
.foot a:hover{color:var(--coral)}
|
||||
.foot .l{display:flex;gap:24px}
|
||||
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(3, 1fr);gap:48px;margin-bottom:48px}
|
||||
.foot-brand{display:flex;flex-direction:column;gap:16px}
|
||||
.foot-brand .brand{font:600 14px/1 var(--sans);letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:10px}
|
||||
.foot-brand .brand-mark{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
|
||||
.foot-brand .brand-mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:5px}
|
||||
.foot-summary{font:400 13px/1.55 var(--body);color:var(--ink-mute);max-width:36ch}
|
||||
.foot-col h5{font:600 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
|
||||
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
|
||||
.foot-col a{color:var(--ink-mute);transition:color .15s}
|
||||
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:28px;border-top:1px solid var(--line-soft);font-size:12.5px}
|
||||
.foot-bottom .l{display:flex;gap:18px;flex-wrap:wrap}
|
||||
|
||||
/* --------- responsive softening (desktop-first per brief) ---------- */
|
||||
@media (max-width:1100px){
|
||||
.wrap{padding:0 32px}
|
||||
.hero-grid,.signal-grid,.discord-card{grid-template-columns:1fr;gap:48px}
|
||||
.discord .wrap{padding:0 24px}
|
||||
.steps,.maintainers-grid{grid-template-columns:repeat(2,1fr);row-gap:56px}
|
||||
.step:nth-child(2){border-right:0}
|
||||
.section-head{grid-template-columns:1fr}
|
||||
|
|
@ -265,6 +327,10 @@
|
|||
.amb-col:last-child{border-bottom:0}
|
||||
.amb-more-grid{grid-template-columns:1fr;gap:32px}
|
||||
.amb-side{align-items:flex-start;text-align:left}
|
||||
.showcase-grid{grid-template-columns:1fr;gap:48px}
|
||||
.foot-cols{grid-template-columns:1fr 1fr;gap:36px}
|
||||
.foot-brand{grid-column:1 / -1}
|
||||
.nav-links a:not(.pill):not(.nav-icon),.nav-sep{display:none}
|
||||
}
|
||||
@media (max-width:640px){
|
||||
.wrap{padding:0 20px}
|
||||
|
|
@ -280,6 +346,9 @@
|
|||
.leaderboard-head,.row{grid-template-columns:32px 1fr auto}
|
||||
.leaderboard-head span:nth-child(3),.leaderboard-head span:nth-child(4),.row .v:not(.coral),.row .arr{display:none}
|
||||
.amb-col{padding:32px 24px 36px}
|
||||
.foot-cols{grid-template-columns:1fr;gap:32px}
|
||||
.foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
|
||||
.mod-row{grid-template-columns:1fr}
|
||||
}
|
||||
|
||||
/* loading skeletons */
|
||||
|
|
@ -293,14 +362,20 @@
|
|||
<nav class="nav">
|
||||
<div class="wrap nav-inner">
|
||||
<a class="brand" href="https://open-design.ai/">
|
||||
<span class="brand-mark"><img src="/logo.webp" alt="" width="22" height="22" /></span>
|
||||
<span class="brand-mark"><img src="/logo.webp" alt="Open Design" width="32" height="32" /></span>
|
||||
Open Design
|
||||
<span class="sep">/</span>
|
||||
<span class="crumb">Contributors</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="#maintainers">Contributors</a>
|
||||
<a href="#ambassadors">Ambassadors</a>
|
||||
<a href="https://github.com/nexu-io/open-design">GitHub</a>
|
||||
<a href="#showcase">Showcase</a>
|
||||
<span class="nav-sep" aria-hidden="true"></span>
|
||||
<a class="nav-icon" href="https://github.com/nexu-io/open-design" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.8 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2.9-.3 2-.4 3-.4s2.1.1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.7.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.9C23.5 5.7 18.3.5 12 .5z"/></svg>
|
||||
</a>
|
||||
<a class="nav-icon" href="https://x.com/nexudotio" target="_blank" rel="noopener" aria-label="Follow Open Design on X" title="X / Twitter">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M17.53 3H21l-7.39 8.45L22 21h-6.83l-5.36-6.99L3.7 21H.23l7.9-9.04L0 3h7l4.85 6.41L17.53 3Zm-2.39 16h2.04L5.96 4.9H3.78L15.14 19Z"/></svg>
|
||||
</a>
|
||||
<a class="pill" href="#discord">
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19.27 5.33A18 18 0 0 0 14.72 4l-.2.4a13.7 13.7 0 0 0-5.04 0L9.27 4a18 18 0 0 0-4.54 1.33C2.4 8.94 1.78 12.45 2.09 15.9a18.4 18.4 0 0 0 5.6 2.83l1.13-1.55a11.6 11.6 0 0 1-1.78-.86l.44-.34a13 13 0 0 0 11.04 0l.44.34c-.55.33-1.16.61-1.78.86l1.13 1.55a18.3 18.3 0 0 0 5.6-2.83c.45-4.05-.5-7.53-2.64-10.57ZM9.5 14.07c-1.07 0-1.95-.99-1.95-2.21 0-1.22.86-2.22 1.95-2.22 1.1 0 1.97 1 1.95 2.22 0 1.22-.86 2.21-1.95 2.21Zm5 0c-1.07 0-1.95-.99-1.95-2.21 0-1.22.87-2.22 1.96-2.22 1.1 0 1.96 1 1.95 2.22 0 1.22-.86 2.21-1.96 2.21Z"/></svg>
|
||||
Join Discord
|
||||
|
|
@ -316,17 +391,11 @@
|
|||
<div class="hero-copy">
|
||||
<span class="kicker"><span class="dot"></span>Contributors · <span class="num">2026 cycle</span></span>
|
||||
<h1 class="h-display">Open design <em>takes shape</em><br/>when you ship it.</h1>
|
||||
<p class="lead">Open Design is built by people, in public. Skills, DESIGN.md systems, plugins, docs — every commit is a brushstroke. Pick an issue, send a PR, and earn a one-of-one honor card the moment you're merged.</p>
|
||||
<p class="lead">Open Design is built by people, in public. Skills, DESIGN.md systems, plugins, docs: every commit is a brushstroke. Pick an issue, send a PR, and earn a one-of-one honor card the moment you're merged.</p>
|
||||
<div class="hero-cta">
|
||||
<a class="btn btn-primary" href="#issues">
|
||||
Pick a first issue
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a class="btn btn-ghost" href="#how">How contributing works</a>
|
||||
<a class="btn btn-coral" href="#discord">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.27 5.33A18 18 0 0 0 14.72 4l-.2.4a13.7 13.7 0 0 0-5.04 0L9.27 4a18 18 0 0 0-4.54 1.33C2.4 8.94 1.78 12.45 2.09 15.9a18.4 18.4 0 0 0 5.6 2.83l1.13-1.55a11.6 11.6 0 0 1-1.78-.86l.44-.34a13 13 0 0 0 11.04 0l.44.34c-.55.33-1.16.61-1.78.86l1.13 1.55a18.3 18.3 0 0 0 5.6-2.83c.45-4.05-.5-7.53-2.64-10.57Z"/></svg>
|
||||
Join the Discord
|
||||
</a>
|
||||
<a class="btn btn-primary" href="#showcase">Stage your masterpieces</a>
|
||||
<a class="btn btn-ghost" href="#ambassadors">Become an ambassador</a>
|
||||
<a class="btn btn-ghost" href="#maintainers">Contributors hall of fame</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
|
|
@ -341,6 +410,87 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ============ SHOWCASE — PLUGIN EVERYTHING ============ -->
|
||||
<section class="section showcase" id="showcase">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="kicker"><span class="dot"></span>Plugin everything</span>
|
||||
<h2 class="h-display">Open Design as a stage. <em>Your work</em> as the show.</h2>
|
||||
</div>
|
||||
<p class="right">The atelier is also a gallery. Helping you make the work is half the address; making sure the room comes to look is the other. Every piece you ship lands not in a vault but on a wall, where the world can find it.</p>
|
||||
</div>
|
||||
|
||||
<div class="showcase-grid">
|
||||
<div class="showcase-tenets">
|
||||
<div class="showcase-tenet">
|
||||
<div class="ord">I</div>
|
||||
<div>
|
||||
<h3>Anything <em>can be a plugin</em>.</h3>
|
||||
<p>Whatever the studio yields (content, a finished product, a template, a Skill, a workflow) can be folded back into a plugin. The registry accepts any shape; the door keeps no gatekeeper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-tenet">
|
||||
<div class="ord">II</div>
|
||||
<div>
|
||||
<h3>Your debut piece, your <em>induction</em>.</h3>
|
||||
<p>The day your first piece lands in the registry, your name joins the wall. Not a visitor's badge. A permanent line on the contributor list, beside everyone who arrived before.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-tenet">
|
||||
<div class="ord">III</div>
|
||||
<div>
|
||||
<h3>Once it's in, <em>it travels</em>.</h3>
|
||||
<p>The registry at <a href="https://open-design.ai/plugins/" target="_blank" rel="noopener">open-design.ai/plugins</a> is only the threshold. From there the strongest pieces are carried outward: to X, to Discord's <span class="num">#showcase</span>, to the newsletter, to the video reels. Each handoff widens the room; the world meets your hand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-tenet">
|
||||
<div class="ord">IV</div>
|
||||
<div>
|
||||
<h3>Need a <em>first stroke</em>?</h3>
|
||||
<p>Walk the <a href="https://open-design.ai/plugins/" target="_blank" rel="noopener">plugin registry</a>. The works hung there are kindling for your own. Borrow the spark, then make the piece only your hand could.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="contrib-card" id="contribute">
|
||||
<div>
|
||||
<div class="pane-kicker"><span class="dot"></span>The skill</div>
|
||||
<h3>Let the <em>agent</em> ship for you.</h3>
|
||||
<p class="pane-lede">For makers who'd rather not touch the code. The whole contribution lives in a single skill, spoken in plain language. The brushwork falls to the agent.</p>
|
||||
</div>
|
||||
<div class="contrib-install" data-install="curl -sSL https://raw.githubusercontent.com/nexu-io/open-design/main/.claude/skills/od-contribute/install.sh | bash">
|
||||
<span class="cmd">curl -sSL https://raw.githubusercontent.com/nexu-io/open-design/main/.claude/skills/od-contribute/install.sh | bash</span>
|
||||
<button type="button" data-copy>Copy</button>
|
||||
</div>
|
||||
<div class="contrib-steps">
|
||||
<div class="contrib-step">
|
||||
<span class="n">01</span>
|
||||
<div>
|
||||
<h4>Hand the line to the agent</h4>
|
||||
<p>Paste the command above into the agent within Open Design, or into whichever you already keep at hand: Claude Code, Codex, Cursor. It installs itself.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrib-step">
|
||||
<span class="n">02</span>
|
||||
<div>
|
||||
<h4>Wake the skill</h4>
|
||||
<p>Type <code>/od-contribute</code>, or simply tell the agent to run what you just installed. Either phrase opens the door.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrib-step">
|
||||
<span class="n">03</span>
|
||||
<div>
|
||||
<h4>Half a minute to the gallery</h4>
|
||||
<p>The agent walks the rest. Your piece is bound for the open-source repository in about thirty seconds; we review at first chance, and the moment it lands, the room meets your hand.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ AMBASSADORS ============ -->
|
||||
<section class="section ambassadors" id="ambassadors">
|
||||
<div class="wrap">
|
||||
|
|
@ -348,7 +498,7 @@
|
|||
<div>
|
||||
<span class="kicker"><span class="dot"></span>Open Design Ambassadors</span>
|
||||
<h2 class="h-display">Be Open Design's <em>voice</em> in your city.</h2>
|
||||
<p class="amb-tagline">Open a local atelier. Convene the meetups, the demos, the late-night critiques — the studio carries the work with budget, materials, and a line straight to the team.</p>
|
||||
<p class="amb-tagline">Open a local atelier. Convene the meetups, the demos, the late-night critiques. We back you with budget, materials, and a private channel to the core team.</p>
|
||||
</div>
|
||||
<div class="right amb-side">
|
||||
<a class="btn btn-coral amb-apply" href="https://discord.gg/2p7Ajbxw3h" target="_blank" rel="noopener">
|
||||
|
|
@ -356,7 +506,7 @@
|
|||
Apply on Discord
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<p>Ambassadors turn Open Design from a repository into something contributors can meet — in a room, with ink on the table and coffee gone cold.</p>
|
||||
<p>Ambassadors turn Open Design from a repository into something contributors can meet in a room, with ink on the table and coffee gone cold.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -364,38 +514,38 @@
|
|||
<div class="amb-col">
|
||||
<div class="n">I · Vocation</div>
|
||||
<h3>Painters of <em>the local scene</em>.</h3>
|
||||
<p class="lede">Designers, developers, organizers — the kind who already gather others. We give the gathering a flag.</p>
|
||||
<p class="lede">Designers, developers, organizers: the kind who already gather others. We give the gathering a flag.</p>
|
||||
<ul>
|
||||
<li><span class="ic">·</span><span><b>Local Atelier Host</b> — you keep a recurring meetup, study group, or late-night hack alive.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Online community lead</b> — Discord, WeChat, Telegram, X spaces.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Practising contributor or evangelist</b> — already shipping work, posting craft, ushering newcomers.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Comfortable carrying the name</b> — bound to the Code of Conduct, mindful of the brand.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Local Atelier Host:</b> you keep a recurring meetup, study group, or late-night hack alive.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Online community lead:</b> Discord, WeChat, Telegram, X spaces.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Practising contributor or evangelist:</b> already shipping work, posting craft, ushering newcomers.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Comfortable carrying the name:</b> bound to the Code of Conduct, mindful of the brand.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="amb-col">
|
||||
<div class="n">II · Patronage</div>
|
||||
<h3>What the <em>atelier</em> extends.</h3>
|
||||
<p class="lede">Not a volunteer badge. A working bond — with budget, standing, and access.</p>
|
||||
<p class="lede">Not a volunteer badge. A working bond, with budget, standing, and access.</p>
|
||||
<ul>
|
||||
<li><span class="ic">·</span><span><b>A page on the site</b> — portrait, city, biography, socials, the chronicle of your events.</span></li>
|
||||
<li><span class="ic">·</span><span><b>First sight</b> — beta features, internal roadmap previews, releases ahead of the queue.</span></li>
|
||||
<li><span class="ic">·</span><span><b>The atelier kit</b> — posters, slide decks, demo pieces, swag; a purse for venue, drinks, and photography.</span></li>
|
||||
<li><span class="ic">·</span><span><b>A line to the studio</b> — private channel, monthly sync, a dedicated path for your feedback.</span></li>
|
||||
<li><span class="ic">·</span><span><b>A way forward</b> — honor cards and tiers, with a path into regional lead, speaker, or paid community roles.</span></li>
|
||||
<li><span class="ic">·</span><span><b>A page on the site:</b> portrait, city, biography, socials, the chronicle of your events.</span></li>
|
||||
<li><span class="ic">·</span><span><b>First sight:</b> beta features, internal roadmap previews, releases ahead of the queue.</span></li>
|
||||
<li><span class="ic">·</span><span><b>The atelier kit:</b> posters, slide decks, demo pieces, swag; a purse for venue, drinks, and photography.</span></li>
|
||||
<li><span class="ic">·</span><span><b>A line to the studio:</b> private channel, monthly sync, a dedicated path for your feedback.</span></li>
|
||||
<li><span class="ic">·</span><span><b>A way forward:</b> honor cards and tiers, with a path into regional lead, speaker, or paid community roles.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="amb-col">
|
||||
<div class="n">III · Covenant</div>
|
||||
<h3>The <em>discipline</em> of the studio.</h3>
|
||||
<p class="lede">A modest commitment, but binding. Extended absence folds into alumni status — the circle stays small and serious.</p>
|
||||
<p class="lede">A modest commitment, but binding. Extended absence folds into alumni status; the circle stays small and serious.</p>
|
||||
<ul>
|
||||
<li><span class="ic">·</span><span><b>Convene</b> at least one event per month or quarter — local or online.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Welcome the new hand</b> — usher newcomers through their first contribution.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Listen close</b> — gather honest feedback from users, designers, developers, teams.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Leave a record</b> — publish a recap after every gathering: attendance, photographs, links, leads.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Carry the name well</b> — hold to the Code of Conduct; no misuse of the mark, no deals signed on the studio's behalf.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Convene</b> at least one event per month or quarter, local or online.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Welcome the new hand.</b> Usher newcomers through their first contribution.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Listen close.</b> Gather honest feedback from users, designers, developers, teams.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Leave a record.</b> Publish a recap after every gathering: attendance, photographs, links, leads.</span></li>
|
||||
<li><span class="ic">·</span><span><b>Carry the name well.</b> Hold to the Code of Conduct; no misuse of the mark, no deals signed on the studio's behalf.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -404,7 +554,7 @@
|
|||
</section>
|
||||
|
||||
<!-- ============ MAINTAINERS ============ -->
|
||||
<section class="section">
|
||||
<section class="section" id="maintainers">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
|
|
@ -493,8 +643,8 @@
|
|||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="kicker"><span class="dot"></span>Recent signal</span>
|
||||
<h2 class="h-display">Ten contributors with <em>recent momentum</em>.</h2>
|
||||
<span class="kicker"><span class="dot"></span>This week's signal</span>
|
||||
<h2 class="h-display">Ten contributors leading <em>this week</em>.</h2>
|
||||
</div>
|
||||
<p class="right">A snapshot of sharp contributors landing PRs, improving the product, and making Open Design feel alive.</p>
|
||||
</div>
|
||||
|
|
@ -503,8 +653,8 @@
|
|||
|
||||
<article class="signal-feature" id="feature-card">
|
||||
<div class="top">
|
||||
<div class="rank"><span class="badge">01</span> A recent leader</div>
|
||||
<div class="week">Snapshot</div>
|
||||
<div class="rank"><span class="badge">01</span> This week's leader</div>
|
||||
<div class="week">Last 7 days</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="avatar"><img id="feat-avatar" src="" alt="" /></div>
|
||||
|
|
@ -515,7 +665,7 @@
|
|||
</div>
|
||||
<div class="feature-stats">
|
||||
<div class="item"><div class="v coral" id="feat-rank">#01</div><div class="l">Rank</div></div>
|
||||
<div class="item"><div class="v" id="feat-prs">—</div><div class="l">Recent PRs</div></div>
|
||||
<div class="item"><div class="v" id="feat-prs">—</div><div class="l">PRs · 7d</div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
|
@ -547,7 +697,7 @@
|
|||
<span class="kicker"><span class="dot"></span>Pick your first contribution</span>
|
||||
<h2 class="h-display">Open issues, <em>tagged for you</em>.</h2>
|
||||
</div>
|
||||
<p class="right">Live from <span class="num">label:“good first issue”</span> on the Open Design repo. Comment on an issue to claim it — a maintainer will assign it within a day.</p>
|
||||
<p class="right">Live from <span class="num">label:“good first issue”</span> on the Open Design repo. Comment on an issue to claim it, and a maintainer will assign it within a day.</p>
|
||||
</div>
|
||||
|
||||
<div class="issue-list" id="issue-list">
|
||||
|
|
@ -586,7 +736,7 @@
|
|||
<span class="kicker"><span class="dot"></span>Four steps · any skill level</span>
|
||||
<h2 class="h-display">From zero to <em>merged</em>, in an afternoon.</h2>
|
||||
</div>
|
||||
<p class="right">Whether you're a designer, a writer, an engineer, or someone who just spotted a typo — there's a contribution shape for you. Here's the path.</p>
|
||||
<p class="right">Whether you're a designer, a writer, an engineer, or someone who just spotted a typo, there's a contribution shape for you. Here's the path.</p>
|
||||
</div>
|
||||
|
||||
<div class="steps">
|
||||
|
|
@ -594,13 +744,13 @@
|
|||
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg></div>
|
||||
<div class="n">Step 01</div>
|
||||
<h3>Find a <em>spark</em>.</h3>
|
||||
<p>Browse the good-first-issues list above, or open a new issue describing something you'd improve. Designers — DESIGN.md systems are the easiest entry.</p>
|
||||
<p>Browse the good-first-issues list above, or open a new issue describing something you'd improve. Designers: DESIGN.md systems are the easiest entry.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 4H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9zM14 4v5h5"/></svg></div>
|
||||
<div class="n">Step 02</div>
|
||||
<h3>Open a <em>draft</em> PR.</h3>
|
||||
<p>Fork, branch, push. Mark it draft — it signals you want feedback early. Mention which issue it closes. The CI is fast; bot-cards stays on its own branch.</p>
|
||||
<p>Fork, branch, push. Mark it draft. It signals you want feedback early. Mention which issue it closes. The CI is fast; bot-cards stays on its own branch.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
|
||||
|
|
@ -612,7 +762,7 @@
|
|||
<div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12l2 2 4-4M3 6l2 2 4-4M3 18l2 2 4-4M13 6h8M13 12h8M13 18h8"/></svg></div>
|
||||
<div class="n">Step 04</div>
|
||||
<h3>Merge → <em>card</em>.</h3>
|
||||
<p>The bot mints your honor card the moment you're merged and pushes it to the bot-cards branch. Share it on X with #openDesign — we repost the best ones.</p>
|
||||
<p>The bot mints your honor card the moment you're merged and pushes it to the bot-cards branch. Share it on X with #OpenDesign, and we repost the best ones.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -621,7 +771,6 @@
|
|||
Read the contributing guide
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a class="btn btn-ghost" href="https://github.com/nexu-io/open-design/blob/main/CODE_OF_CONDUCT.md" style="color:var(--paper);border-color:rgba(247,241,222,.25)">Code of Conduct</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -633,7 +782,7 @@
|
|||
<div>
|
||||
<span class="kicker"><span class="dot"></span>Where contributors hang out</span>
|
||||
<h2>Talk to the people who'll <em>review your PR</em>.</h2>
|
||||
<p>Our Discord is where contributors show shipped work, discuss plugins, join beta tests, and get help when a PR gets stuck. No fake activity counters — just the channels people can actually use.</p>
|
||||
<p>The front line of the agent-design era opens here. Our Discord is where the world's sharpest AI-native designers gather: shipping work, opening plugins, breaking betas, pulling one another unstuck. Step in. Bring what you're making.</p>
|
||||
<div style="display:flex;gap:14px;flex-wrap:wrap">
|
||||
<a class="btn btn-primary" href="https://discord.gg/3C6EWXbdQQ">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.27 5.33A18 18 0 0 0 14.72 4l-.2.4a13.7 13.7 0 0 0-5.04 0L9.27 4a18 18 0 0 0-4.54 1.33C2.4 8.94 1.78 12.45 2.09 15.9a18.4 18.4 0 0 0 5.6 2.83l1.13-1.55a11.6 11.6 0 0 1-1.78-.86l.44-.34a13 13 0 0 0 11.04 0l.44.34c-.55.33-1.16.61-1.78.86l1.13 1.55a18.3 18.3 0 0 0 5.6-2.83c.45-4.05-.5-7.53-2.64-10.57Z"/></svg>
|
||||
|
|
@ -643,7 +792,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="discord-side">
|
||||
<div class="pop">Community Discord</div>
|
||||
<div class="mod-row">
|
||||
<article class="moderator-card">
|
||||
<div class="mod-avatar">
|
||||
<img src="https://cdn.discordapp.com/avatars/1433334626641907803/659cec9ed75df0156957ff23e81e27f1.webp?size=2048" alt="Koki — Open Design core team" loading="lazy" />
|
||||
</div>
|
||||
<span class="mod-role">From the studio</span>
|
||||
<h3 class="mod-name">Koki</h3>
|
||||
<p class="mod-bio">From the Open Design founding team. Hopes the Discord stays a good place to be. Wave at any time, on any question.</p>
|
||||
</article>
|
||||
<article class="moderator-card">
|
||||
<div class="mod-avatar">
|
||||
<img src="https://cdn.discordapp.com/avatars/1174739309509759008/60d038042d7246391a6c982d6508892e.webp?size=2048" alt="Victor — Discord steward" loading="lazy" />
|
||||
</div>
|
||||
<span class="mod-role">Steward of the room</span>
|
||||
<h3 class="mod-name">Victor</h3>
|
||||
<p class="mod-bio">A practiced hand at Discord and community-tending. Keeps the room warm, the doors open, the conversation flowing. Passionate about Open Design.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="stack">
|
||||
<div class="row-d"><span class="dot-g"></span>#showcase<span class="h">work shipped</span></div>
|
||||
<div class="row-d"><span class="dot-g"></span>#plugin<span class="h">builders</span></div>
|
||||
|
|
@ -657,13 +823,46 @@
|
|||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer class="foot">
|
||||
<div class="wrap foot-inner">
|
||||
<span>© 2026 Open Design · Apache-2.0 · Built by contributors, in public.</span>
|
||||
<div class="l">
|
||||
<a href="https://github.com/nexu-io/open-design">GitHub</a>
|
||||
<a href="https://discord.gg/3C6EWXbdQQ">Discord</a>
|
||||
<a href="https://x.com/nexudotio">X / Twitter</a>
|
||||
<a href="https://open-design.ai/">open-design.ai</a>
|
||||
<div class="wrap">
|
||||
<div class="foot-cols">
|
||||
<div class="foot-col foot-brand">
|
||||
<a class="brand" href="https://open-design.ai/">
|
||||
<span class="brand-mark"><img src="/logo.webp" alt="" width="22" height="22" /></span>
|
||||
Open Design
|
||||
</a>
|
||||
<p class="foot-summary">The official open-source, local-first alternative to Claude Design. Apache-2.0, BYOK at every layer.</p>
|
||||
</div>
|
||||
<div class="foot-col">
|
||||
<h5>Products</h5>
|
||||
<ul>
|
||||
<li><a href="https://open-design.ai/">Open Design</a></li>
|
||||
<li><a href="https://open-design.ai/html-anything/">HTML Anything</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="foot-col">
|
||||
<h5>Plugins</h5>
|
||||
<ul>
|
||||
<li><a href="https://open-design.ai/plugins/templates/">Templates</a></li>
|
||||
<li><a href="https://open-design.ai/plugins/skills/">Skills</a></li>
|
||||
<li><a href="https://open-design.ai/plugins/systems/">Systems</a></li>
|
||||
<li><a href="https://open-design.ai/plugins/craft/">Craft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="foot-col">
|
||||
<h5>Community</h5>
|
||||
<ul>
|
||||
<li><a href="https://github.com/nexu-io/open-design" target="_blank" rel="noopener">GitHub</a></li>
|
||||
<li><a href="https://discord.gg/3C6EWXbdQQ" target="_blank" rel="noopener">Discord</a></li>
|
||||
<li><a href="https://x.com/nexudotio" target="_blank" rel="noopener">X / Twitter</a></li>
|
||||
<li><a href="https://open-design.ai/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© 2026 Open Design · Apache-2.0 · Built by contributors, in public.</span>
|
||||
<div class="l">
|
||||
<a href="https://open-design.ai/">open-design.ai</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -777,8 +976,8 @@ async function loadWeeklyTop(){
|
|||
document.getElementById('feat-avatar').src = f.avatar;
|
||||
document.getElementById('feat-avatar').alt = f.login;
|
||||
setText('feat-name', f.login);
|
||||
setText('feat-handle', '@' + f.login + ' · recent contribution');
|
||||
setText('feat-blurb', `${f.login} has set the pace with ${f.prs} merged PR${f.prs === 1 ? '' : 's'} and the kind of steady craft that keeps Open Design moving.`);
|
||||
setText('feat-handle', '@' + f.login + ' · leading this week');
|
||||
setText('feat-blurb', `${f.login} is setting the pace this week with ${f.prs} merged PR${f.prs === 1 ? '' : 's'} and the kind of steady craft that keeps Open Design moving.`);
|
||||
setText('feat-prs-list', exampleCopy(f));
|
||||
setText('feat-rank', '#01');
|
||||
setText('feat-prs', f.prs);
|
||||
|
|
@ -866,8 +1065,24 @@ async function loadMaintainers(){
|
|||
function setText(id, v){ const el = document.getElementById(id); if (el && v != null) el.textContent = v; }
|
||||
function escapeHtml(s){ return String(s||'').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
|
||||
|
||||
/* --------- copy-to-clipboard for the install command --------- */
|
||||
function wireCopyButtons(){
|
||||
document.querySelectorAll('[data-install] [data-copy]').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const cmd = btn.parentElement.getAttribute('data-install') || '';
|
||||
try { await navigator.clipboard.writeText(cmd); }
|
||||
catch { /* very old browsers — let the user select the text manually */ return; }
|
||||
const original = btn.textContent;
|
||||
btn.textContent = 'Copied';
|
||||
btn.classList.add('is-copied');
|
||||
setTimeout(() => { btn.textContent = original; btn.classList.remove('is-copied'); }, 1600);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* --------- boot --------- */
|
||||
(async function(){
|
||||
wireCopyButtons();
|
||||
await Promise.all([ loadWeeklyTop(), loadAllTimeTop(), loadGoodFirstIssues(), loadMaintainers() ]);
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue