mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-09-14 08:45:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

docs: tweak lander

Browse source
This commit is contained in:
Jay V 2025-06-26 19:02:42 -04:00
parent 8ca713b737
commit dc3dd21cf3
1 changed files with 48 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

69
packages/web/src/components/Lander.astro
View file

@ -19,8 +19,10 @@ const imageAttrs = {
const github = config.social.filter(s => s.icon === 'github')[0]; const github = config.social.filter(s => s.icon === 'github')[0];
const command = "npm i -g"; const command = "curl -fsSL"
const pkg = "opencode-ai"; const protocol = "https://"
const url = "opencode.ai/install"
const bash = "| bash"
let darkImage: ImageMetadata | undefined; let darkImage: ImageMetadata | undefined;
let lightImage: ImageMetadata | undefined; let lightImage: ImageMetadata | undefined;
@ -51,11 +53,14 @@ if (image) {
<section class="cta"> <section class="cta">
<div class="col1"> <div class="col1">
<a href="/docs">View the docs</a> <a href="/docs">Docs</a>
</div> </div>
<div class="col2"> <div class="col2">
<button class="command" data-command={`${command} ${pkg}`}> <button class="command" data-command={`${command} ${protocol}${url} ${bash}`}>
<code>{command}&nbsp;<span class="highlight">{pkg}</span></code> <code>
<span>{command}&nbsp;</span>
<span class="protocol">{protocol}</span><span class="highlight">{url}</span>&nbsp;{bash}
</code>
<span class="copy"> <span class="copy">
<CopyIcon /> <CopyIcon />
<CheckIcon /> <CheckIcon />
@ -63,7 +68,7 @@ if (image) {
</button> </button>
</div> </div>
<div class="col3"> <div class="col3">
<a href={github.href}>Star on GitHub</a> <a href={github.href}>GitHub</a>
</div> </div>
</section> </section>
@ -133,39 +138,43 @@ section.top {
section.cta { section.cta {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: flex-start;
align-items: stretch;
border-top: 2px solid var(--sl-color-border); border-top: 2px solid var(--sl-color-border);
@media (max-width: 40rem) { @media (max-width: 50rem) {
flex-direction: column; flex-direction: column;
& > div.col1 { order: 1; }
& > div.col3 { order: 2; }
& > div.col2 { order: 3; }
} }
& > div { & > div {
flex: 1;
line-height: 1.4; line-height: 1.4;
padding: calc(var(--padding) / 2) 0.5rem; padding: calc(var(--padding) / 2) 1rem;
@media (max-width: 40rem) {
padding-bottom: calc(var(--padding) / 2 + 4px);
}
a { a {
font-size: 1rem; font-size: 1rem;
} }
} }
& > div.col2 { & > div.col1, & > div.col3 {
@media (max-width: 50rem) { flex: 1 1 auto;
flex: 0 0 auto;
}
}
& > div:not(.col2) {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@media (max-width: 50rem) {
padding-bottom: calc(var(--padding) / 2 + 4px);
}
}
& > div.col2 {
flex: 0 0 auto;
} }
& > div + div { & > div + div {
border-left: 2px solid var(--sl-color-border); border-left: 2px solid var(--sl-color-border);
@media (max-width: 40rem) {
@media (max-width: 50rem) {
border-left: none; border-left: none;
border-top: 2px solid var(--sl-color-border); border-top: 2px solid var(--sl-color-border);
} }
@ -183,6 +192,21 @@ section.cta {
code { code {
color: var(--sl-color-text-secondary); color: var(--sl-color-text-secondary);
font-size: 1.125rem; font-size: 1.125rem;
@media (max-width: 24rem) {
font-size: 0.875rem;
}
@media (max-width: 30rem) {
span.protocol {
display: none;
}
}
@media (max-width: 43rem) {
text-align: center;
span:first-child {
display: block;
}
}
} }
code .highlight { code .highlight {
color: var(--sl-color-text); color: var(--sl-color-text);
@ -192,6 +216,9 @@ section.cta {
.copy { .copy {
line-height: 1; line-height: 1;
padding: 0; padding: 0;
@media (max-width: 43rem) {
display: none;
}
} }
.copy svg { .copy svg {
width: 1rem; width: 1rem;