|
8 | 8 | let copied = $state(false); |
9 | 9 |
|
10 | 10 | function getInstallCommand() { |
11 | | - return `curl -fsSL https://openboot.dev/${data.configUser.username}/${data.config.slug}/install | bash`; |
| 11 | + return `curl -fsSL https://openboot.dev/${data.configUser.username}/${data.config.slug} | bash`; |
12 | 12 | } |
13 | 13 |
|
14 | 14 | function copyCommand() { |
|
17 | 17 | setTimeout(() => (copied = false), 2000); |
18 | 18 | } |
19 | 19 |
|
| 20 | + function getPackageUrl(name: string, type: 'formula' | 'cask' | 'npm'): string { |
| 21 | + if (type === 'npm') return `https://www.npmjs.com/package/${name}`; |
| 22 | + if (type === 'cask') return `https://formulae.brew.sh/cask/${name}`; |
| 23 | + return `https://formulae.brew.sh/formula/${name}`; |
| 24 | + } |
| 25 | +
|
20 | 26 | const snapshot = data.config.snapshot || {}; |
21 | 27 | const snapshotPkgs = snapshot.packages || {}; |
22 | 28 | const macosPrefs = snapshot.macos_prefs || []; |
|
209 | 215 | {:else} |
210 | 216 | <div class="package-grid"> |
211 | 217 | {#each formulae as pkg} |
212 | | - <div class="package-item">{pkg}</div> |
| 218 | + <a href={getPackageUrl(pkg, 'formula')} target="_blank" rel="noopener noreferrer" class="package-item">{pkg}</a> |
213 | 219 | {/each} |
214 | 220 | </div> |
215 | 221 | {/if} |
|
220 | 226 | {:else} |
221 | 227 | <div class="package-grid"> |
222 | 228 | {#each casks as pkg} |
223 | | - <div class="package-item">{pkg}</div> |
| 229 | + <a href={getPackageUrl(pkg, 'cask')} target="_blank" rel="noopener noreferrer" class="package-item">{pkg}</a> |
224 | 230 | {/each} |
225 | 231 | </div> |
226 | 232 | {/if} |
|
231 | 237 | {:else} |
232 | 238 | <div class="package-grid"> |
233 | 239 | {#each configNpm as pkg} |
234 | | - <div class="package-item">{pkg.name}</div> |
| 240 | + <a href={getPackageUrl(pkg.name, 'npm')} target="_blank" rel="noopener noreferrer" class="package-item">{pkg.name}</a> |
235 | 241 | {/each} |
236 | 242 | </div> |
237 | 243 | {/if} |
|
619 | 625 | } |
620 | 626 |
|
621 | 627 | .package-item { |
| 628 | + display: block; |
622 | 629 | background: var(--bg-secondary); |
623 | 630 | border: 1px solid var(--border); |
624 | 631 | border-radius: 6px; |
625 | 632 | padding: 10px 14px; |
626 | 633 | font-family: 'JetBrains Mono', monospace; |
627 | 634 | font-size: 0.85rem; |
| 635 | + color: var(--text-primary); |
| 636 | + text-decoration: none; |
| 637 | + transition: border-color 0.2s, background 0.2s; |
| 638 | + } |
| 639 | +
|
| 640 | + .package-item:hover { |
| 641 | + border-color: var(--accent); |
| 642 | + background: var(--bg-tertiary); |
628 | 643 | } |
629 | 644 |
|
630 | 645 | .prefs-list { |
|
0 commit comments