|
6 | 6 |
|
7 | 7 | let activeTab = $state('overview'); |
8 | 8 | let copied = $state(false); |
9 | | - let copiedCli = $state(false); |
10 | 9 | let showShareModal = $state(false); |
11 | 10 | let shareCopied = $state(false); |
12 | 11 | let forking = $state(false); |
13 | 12 | let forkError = $state(''); |
14 | 13 |
|
15 | 14 | function getInstallCommand() { |
16 | | - return `curl -fsSL https://openboot.dev/${data.configUser.username}/${data.config.slug} | bash`; |
17 | | - } |
18 | | -
|
19 | | - function getCliInstallCommand() { |
20 | 15 | return `openboot install ${data.configUser.username}/${data.config.slug}`; |
21 | 16 | } |
22 | 17 |
|
|
26 | 21 | setTimeout(() => (copied = false), 2000); |
27 | 22 | } |
28 | 23 |
|
29 | | - function copyCliCommand() { |
30 | | - navigator.clipboard.writeText(getCliInstallCommand()); |
31 | | - copiedCli = true; |
32 | | - setTimeout(() => (copiedCli = false), 2000); |
33 | | - } |
34 | | -
|
35 | 24 | function getShareUrl() { |
36 | 25 | return `https://openboot.dev/${data.configUser.username}/${data.config.slug}`; |
37 | 26 | } |
|
119 | 108 | ? data.config.packages.map((p: any) => (typeof p === 'string' ? { name: p, type: 'formula' } : p)) |
120 | 109 | : []); |
121 | 110 |
|
122 | | - const hasOpenBootPackage = $derived(configPkgs.some((p: any) => p.name === 'openboot')); |
123 | | -
|
124 | 111 | const configCli = $derived(configPkgs.filter((p: any) => p.type !== 'cask' && p.type !== 'npm')); |
125 | 112 | const configApps = $derived(configPkgs.filter((p: any) => p.type === 'cask')); |
126 | 113 | const configNpm = $derived(configPkgs.filter((p: any) => p.type === 'npm')); |
|
176 | 163 |
|
177 | 164 | <div class="install-box"> |
178 | 165 | <div class="install-label">Install with one command</div> |
179 | | - {#if hasOpenBootPackage} |
180 | | - <div class="install-command recommended"> |
181 | | - <div class="command-label"> |
182 | | - <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> |
183 | | - Recommended (with OpenBoot installed) |
184 | | - </div> |
185 | | - <div class="command-row"> |
186 | | - <code>{getCliInstallCommand()}</code> |
187 | | - <button class="copy-btn" onclick={copyCliCommand}> |
188 | | - {copiedCli ? 'Copied!' : 'Copy'} |
189 | | - </button> |
190 | | - </div> |
191 | | - </div> |
192 | | - <div class="install-command"> |
193 | | - <div class="command-label">First time installation</div> |
194 | | - <div class="command-row"> |
195 | | - <code>{getInstallCommand()}</code> |
196 | | - <button class="copy-btn" onclick={copyCommand}> |
197 | | - {copied ? 'Copied!' : 'Copy'} |
198 | | - </button> |
199 | | - </div> |
200 | | - </div> |
201 | | - {:else} |
202 | | - <div class="install-command single"> |
203 | | - <div class="command-row"> |
204 | | - <code>{getInstallCommand()}</code> |
205 | | - <button class="copy-btn" onclick={copyCommand}> |
206 | | - {copied ? 'Copied!' : 'Copy'} |
207 | | - </button> |
208 | | - </div> |
209 | | - </div> |
210 | | - {/if} |
| 166 | + <div class="install-command"> |
| 167 | + <code>{getInstallCommand()}</code> |
| 168 | + <button class="copy-btn" onclick={copyCommand}> |
| 169 | + {copied ? 'Copied!' : 'Copy'} |
| 170 | + </button> |
| 171 | + </div> |
211 | 172 | <button class="fork-btn" onclick={forkConfig} disabled={forking}> |
212 | 173 | <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg> |
213 | 174 | {forking ? 'Forking...' : 'Fork Config'} |
|
630 | 591 |
|
631 | 592 | .install-command { |
632 | 593 | display: flex; |
633 | | - flex-direction: column; |
634 | | - gap: 8px; |
| 594 | + align-items: center; |
| 595 | + gap: 12px; |
635 | 596 | background: var(--bg-tertiary); |
636 | 597 | border: 1px solid var(--border); |
637 | 598 | border-radius: 8px; |
638 | 599 | padding: 12px 16px; |
639 | | - margin-bottom: 12px; |
640 | | - } |
641 | | -
|
642 | | - .install-command.single { |
643 | | - flex-direction: row; |
644 | | - align-items: center; |
645 | | - gap: 12px; |
646 | | - } |
647 | | -
|
648 | | - .install-command:last-of-type { |
649 | | - margin-bottom: 16px; |
650 | | - } |
651 | | -
|
652 | | - .install-command.recommended { |
653 | | - background: color-mix(in srgb, var(--accent) 5%, var(--bg-tertiary)); |
654 | | - border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); |
655 | | - } |
656 | | -
|
657 | | - .command-label { |
658 | | - display: flex; |
659 | | - align-items: center; |
660 | | - gap: 6px; |
661 | | - font-size: 0.75rem; |
662 | | - color: var(--text-muted); |
663 | | - font-weight: 500; |
664 | | - text-transform: uppercase; |
665 | | - letter-spacing: 0.05em; |
666 | | - } |
667 | | -
|
668 | | - .command-label svg { |
669 | | - color: var(--accent); |
670 | | - } |
671 | | -
|
672 | | - .command-row { |
673 | | - display: flex; |
674 | | - align-items: center; |
675 | | - gap: 12px; |
676 | 600 | } |
677 | 601 |
|
678 | 602 | .install-command code { |
|
0 commit comments