Skip to content

Commit 659991d

Browse files
brunoborgesbrunoborges
authored
Merge pull request #165 from javaevolved/brunoborges-polish-install-commands
Polish agent installation commands
2 parents c1b60bb + 6dce687 commit 659991d

3 files changed

Lines changed: 109 additions & 35 deletions

File tree

‎site/app.js‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -445,24 +445,32 @@
445445
4. Copy-to-Clipboard (article pages)
446446
========================================================== */
447447
const initCopyButtons = () => {
448-
document.querySelectorAll('.copy-btn').forEach(btn => {
448+
document.querySelectorAll('.copy-btn, .command-copy-btn').forEach(btn => {
449449
btn.addEventListener('click', () => {
450-
// Find adjacent code block
451-
const codeBlock = btn.closest('.code-header')?.nextElementSibling
450+
const codeBlock = btn.closest('.install-command')?.querySelector('code')
451+
|| btn.closest('.code-header')?.nextElementSibling
452452
|| btn.closest('.compare-panel-header')?.nextElementSibling?.querySelector('pre, code, .code-text')
453453
|| btn.parentElement?.querySelector('pre, code, .code-text');
454454
if (!codeBlock) return;
455455

456456
const text = codeBlock.textContent;
457-
navigator.clipboard.writeText(text).then(() => {
457+
const originalContent = btn.innerHTML;
458+
const originalLabel = btn.getAttribute('aria-label');
459+
const showCopied = () => {
458460
btn.classList.add('copied');
459-
const original = btn.textContent;
460-
btn.textContent = (window.i18n && window.i18n.copied) || 'Copied!';
461+
if (btn.classList.contains('command-copy-btn')) {
462+
btn.innerHTML = '<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="m3 8.25 3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>';
463+
btn.setAttribute('aria-label', 'Command copied');
464+
} else {
465+
btn.textContent = (window.i18n && window.i18n.copied) || 'Copied!';
466+
}
461467
setTimeout(() => {
462468
btn.classList.remove('copied');
463-
btn.textContent = original;
469+
btn.innerHTML = originalContent;
470+
if (originalLabel) btn.setAttribute('aria-label', originalLabel);
464471
}, 2000);
465-
}).catch(() => {
472+
};
473+
const fallbackCopy = () => {
466474
// Fallback for older browsers
467475
const textarea = document.createElement('textarea');
468476
textarea.value = text;
@@ -472,14 +480,14 @@
472480
textarea.select();
473481
document.execCommand('copy');
474482
document.body.removeChild(textarea);
475-
btn.classList.add('copied');
476-
const original = btn.textContent;
477-
btn.textContent = (window.i18n && window.i18n.copied) || 'Copied!';
478-
setTimeout(() => {
479-
btn.classList.remove('copied');
480-
btn.textContent = original;
481-
}, 2000);
482-
});
483+
showCopied();
484+
};
485+
486+
if (navigator.clipboard && window.isSecureContext) {
487+
navigator.clipboard.writeText(text).then(showCopied).catch(fallbackCopy);
488+
} else {
489+
fallbackCopy();
490+
}
483491
});
484492
});
485493
};

‎site/styles.css‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1851,8 +1851,8 @@ footer a:hover {
18511851
.install-option {
18521852
display: grid;
18531853
grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
1854-
gap: 10px 40px;
1855-
padding: 32px 0;
1854+
gap: 14px 48px;
1855+
padding: 36px 0;
18561856
border-bottom: 1px solid rgba(255, 247, 237, 0.3);
18571857
}
18581858

@@ -1866,25 +1866,61 @@ footer a:hover {
18661866
font-size: 1.15rem;
18671867
}
18681868

1869-
.install-option > div {
1869+
.install-option-copy {
18701870
grid-row: 1 / span 4;
18711871
}
18721872

1873-
.install-option > div p,
1873+
.install-option-copy p,
18741874
.install-option .install-scope {
18751875
color: #fed7aa;
18761876
font-size: 0.88rem;
18771877
}
18781878

1879-
.install-option > code {
1879+
.install-command {
1880+
display: grid;
1881+
grid-template-columns: minmax(0, 1fr) 44px;
1882+
min-width: 0;
1883+
overflow: hidden;
1884+
border: 1px solid #2f3039;
1885+
border-radius: 8px;
1886+
background: #101117;
1887+
}
1888+
1889+
.install-command code {
18801890
display: block;
1891+
min-width: 0;
18811892
overflow-x: auto;
1882-
padding: 12px 14px;
1883-
border-radius: 6px;
1884-
background: #101117;
1893+
padding: 15px 18px;
18851894
color: #fb923c;
18861895
font: 0.78rem/1.55 'JetBrains Mono', monospace;
18871896
white-space: nowrap;
1897+
scrollbar-color: #52525b transparent;
1898+
scrollbar-width: thin;
1899+
}
1900+
1901+
.command-copy-btn {
1902+
display: grid;
1903+
place-items: center;
1904+
width: 44px;
1905+
min-height: 44px;
1906+
border-left: 1px solid #2f3039;
1907+
background: #191a21;
1908+
color: #a1a1aa;
1909+
transition: background 0.15s, color 0.15s;
1910+
}
1911+
1912+
.command-copy-btn:hover {
1913+
background: #24252d;
1914+
color: #fff;
1915+
}
1916+
1917+
.command-copy-btn:focus-visible {
1918+
outline: 2px solid #fff;
1919+
outline-offset: -4px;
1920+
}
1921+
1922+
.command-copy-btn.copied {
1923+
color: #34d399;
18881924
}
18891925

18901926
.plugin-install a {
@@ -2002,7 +2038,7 @@ footer a:hover {
20022038
gap: 12px;
20032039
}
20042040

2005-
.install-option > div {
2041+
.install-option-copy {
20062042
grid-row: auto;
20072043
}
20082044
}

‎templates/agent-plugin.html‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -150,31 +150,61 @@ <h2 id="install-title">Install it in your agent.</h2>
150150
</div>
151151
<div class="install-options">
152152
<article class="install-option">
153-
<div>
154-
<h3>GitHub Copilot CLI</h3>
153+
<div class="install-option-copy">
154+
<h3>GitHub Copilot</h3>
155155
<p>Add the java.evolved marketplace once, then install the plugin.</p>
156156
</div>
157-
<code>copilot plugin marketplace add javaevolved/javaevolved.github.io</code>
158-
<code>copilot plugin install modern-java-development@javaevolved</code>
157+
<div class="install-command">
158+
<code>copilot plugin marketplace add javaevolved/javaevolved.github.io</code>
159+
<button class="command-copy-btn" type="button" aria-label="Copy command">
160+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
161+
</button>
162+
</div>
163+
<div class="install-command">
164+
<code>copilot plugin install modern-java-development@javaevolved</code>
165+
<button class="command-copy-btn" type="button" aria-label="Copy command">
166+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
167+
</button>
168+
</div>
159169
<a href="https://docs.github.com/en/copilot/reference/copilot-cli-reference/cli-plugin-reference" target="_blank" rel="noopener">Copilot plugin documentation <span aria-hidden="true">↗</span></a>
160170
</article>
161171
<article class="install-option">
162-
<div>
172+
<div class="install-option-copy">
163173
<h3>Claude Code</h3>
164174
<p>Clone the repository, then install the skill for your user account.</p>
165175
</div>
166-
<code>git clone --depth 1 https://github.com/javaevolved/javaevolved.github.io.git</code>
167-
<code>mkdir -p ~/.claude/skills &amp;&amp; cp -R javaevolved.github.io/agent-plugins/modern-java-development/skills/modern-java ~/.claude/skills/</code>
176+
<div class="install-command">
177+
<code>git clone --depth 1 https://github.com/javaevolved/javaevolved.github.io.git</code>
178+
<button class="command-copy-btn" type="button" aria-label="Copy command">
179+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
180+
</button>
181+
</div>
182+
<div class="install-command">
183+
<code>mkdir -p ~/.claude/skills &amp;&amp; cp -R javaevolved.github.io/agent-plugins/modern-java-development/skills/modern-java ~/.claude/skills/</code>
184+
<button class="command-copy-btn" type="button" aria-label="Copy command">
185+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
186+
</button>
187+
</div>
168188
<p class="install-scope">For one project, copy it to <code>.claude/skills/modern-java</code> instead.</p>
169189
<a href="https://code.claude.com/docs/en/skills" target="_blank" rel="noopener">Claude Code skill documentation <span aria-hidden="true">↗</span></a>
170190
</article>
171191
<article class="install-option">
172-
<div>
192+
<div class="install-option-copy">
173193
<h3>OpenAI Codex CLI</h3>
174194
<p>Clone the repository, then install the skill for your user account.</p>
175195
</div>
176-
<code>git clone --depth 1 https://github.com/javaevolved/javaevolved.github.io.git</code>
177-
<code>mkdir -p ~/.agents/skills &amp;&amp; cp -R javaevolved.github.io/agent-plugins/modern-java-development/skills/modern-java ~/.agents/skills/</code>
196+
<div class="install-command">
197+
<code>git clone --depth 1 https://github.com/javaevolved/javaevolved.github.io.git</code>
198+
<button class="command-copy-btn" type="button" aria-label="Copy command">
199+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
200+
</button>
201+
</div>
202+
<div class="install-command">
203+
<code>mkdir -p ~/.agents/skills &amp;&amp; cp -R javaevolved.github.io/agent-plugins/modern-java-development/skills/modern-java ~/.agents/skills/</code>
204+
<button class="command-copy-btn" type="button" aria-label="Copy command">
205+
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M5.75 1.5h6.75a2 2 0 0 1 2 2v6.75a2 2 0 0 1-2 2h-1V9.5a5 5 0 0 0-5-5H3.5v-1a2 2 0 0 1 2-2h.25Zm-2.25 4h3a4 4 0 0 1 4 4v3a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
206+
</button>
207+
</div>
178208
<p class="install-scope">For one project, copy it to <code>.agents/skills/modern-java</code> instead.</p>
179209
<a href="https://developers.openai.com/codex/skills/" target="_blank" rel="noopener">Codex skill documentation <span aria-hidden="true">↗</span></a>
180210
</article>

0 commit comments

Comments
 (0)