mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-07-08 00:25:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

ignore: share page polish

Browse source
This commit is contained in:
Jay V 2025-06-17 20:26:09 -04:00
parent 1c58023df9
commit d1f9311931
8 changed files with 368 additions and 587 deletions
Download patch file Download diff file Expand all files Collapse all files

4
bun.lock
View file

@ -75,7 +75,7 @@
"sharp": "0.32.5",
"shiki": "3.4.2",
"solid-js": "1.9.7",
"toolbeam-docs-theme": "0.2.4",
"toolbeam-docs-theme": "0.3.0",
},
"devDependencies": {
"@types/node": "catalog:",
@ -1494,7 +1494,7 @@
"token-types": ["token-types@6.0.0", "", { "dependencies": { "@tokenizer/token": "^0.3.0", "ieee754": "^1.2.1" } }, "sha512-lbDrTLVsHhOMljPscd0yitpozq7Ga2M5Cvez5AjGg8GASBjtt6iERCAJ93yommPmz62fb45oFIXHEZ3u9bfJEA=="],
"toolbeam-docs-theme": ["toolbeam-docs-theme@0.2.4", "", { "peerDependencies": { "@astrojs/starlight": "^0.34.3", "astro": "^5.7.13" } }, "sha512-W5mdbcgRpTBDFyEdcU81USs3MFZoXMInpSznc/AFZCwqz8atk4iBNDIlhvihpGHY54Nf5crKmZwJjxVojkHFvA=="],
"toolbeam-docs-theme": ["toolbeam-docs-theme@0.3.0", "", { "peerDependencies": { "@astrojs/starlight": "^0.34.3", "astro": "^5.7.13" } }, "sha512-qlBkKRp8HVYV7p7jaG9lT2lvQY7c8b9czZ0tnsJUrN2TBTtEyFJymCdkhhpZNC9U4oGZ7lLk0glRJHrndWvVsg=="],
"tr46": ["tr46@0.0.3", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],

2
packages/web/package.json
View file

@ -27,7 +27,7 @@
"sharp": "0.32.5",
"shiki": "3.4.2",
"solid-js": "1.9.7",
"toolbeam-docs-theme": "0.2.4"
"toolbeam-docs-theme": "0.3.0"
},
"devDependencies": {
"@types/node": "catalog:",

6
packages/web/src/components/CodeBlock.tsx
View file

@ -18,9 +18,9 @@ function CodeBlock(props: CodeBlockProps) {
const [local, rest] = splitProps(props, ["code", "lang", "onRendered"])
let containerRef!: HTMLDivElement
const [html] = createResource(async () => {
return (await codeToHtml(local.code, {
lang: local.lang || "text",
const [html] = createResource(() => [local.code, local.lang], async ([code, lang]) => {
return (await codeToHtml(code || "", {
lang: lang || "text",
themes: {
light: "github-light",
dark: "github-dark",

6
packages/web/src/components/Header.astro
View file

@ -54,9 +54,3 @@ const links = config.social || [];
}
}
</style>
<style is:global>
body > div.page > header {
border-color: var(--sl-color-divider);
}
</style>

808
packages/web/src/components/Share.tsx
View file

File diff suppressed because it is too large Load diff

4
packages/web/src/components/codeblock.module.css
View file

@ -1,7 +1,7 @@
.codeblock {
pre {
--shiki-dark-bg: var(--sl-color-bg) !important;
background-color: var(--sl-color-bg) !important;
--shiki-dark-bg: var(--sl-color-bg-surface) !important;
background-color: var(--sl-color-bg-surface) !important;
}
}

4
packages/web/src/components/markdownview.module.css
View file

@ -12,6 +12,10 @@
margin-bottom: 1rem;
}
strong {
font-weight: 600;
}
ol {
list-style-position: inside;
padding-left: 0.75rem;

121
packages/web/src/components/share.module.css
View file

@ -5,6 +5,10 @@
gap: 2.5rem;
line-height: 1;
--sm-tool-width: 28rem;
--md-tool-width: 40rem;
--lg-tool-width: 56rem;
--term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
}
@ -37,7 +41,7 @@
[data-element-label] {
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: -0.5px;
color: var(--sl-color-text-dimmed);
}
@ -164,30 +168,6 @@
}
}
}
[data-section="system-prompt"] {
display: flex;
gap: 0.3125rem;
[data-section="icon"] {
flex: 0 0 auto;
color: var(--sl-color-text-dimmed);
opacity: 0.85;
svg {
display: block;
}
}
[data-section="content"] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
button {
line-height: 1rem;
font-size: 0.875rem;
}
}
}
.parts {
@ -227,6 +207,7 @@
}
& > [data-section="content"] {
flex: 1 1 auto;
min-width: 0;
padding: 0 0 0.375rem;
display: flex;
@ -236,20 +217,28 @@
[data-part-tool-body] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.375rem;
}
span[data-part-title] {
[data-part-title] {
line-height: 18px;
font-size: 0.75rem;
font-size: 0.875rem;
color: var(--sl-color-text-secondary);
max-wdith: var(--sm-tool-width);
b {
word-break: break-all;
font-weight: 500;
display: flex;
align-items: flex-start;
gap: 0.375rem;
span[data-element-label] {
color: var(--sl-color-text-secondary);
}
&[data-size="md"] {
font-size: 0.875rem;
b {
color: var(--sl-color-text);
word-break: break-all;
font-weight: 500;
}
}
@ -267,7 +256,7 @@
display: inline-grid;
align-items: center;
grid-template-columns: max-content max-content minmax(0, 1fr);
max-width: 100%;
max-width: var(--md-tool-width);
gap: 0.25rem 0.375rem;
& > div:nth-child(3n + 1) {
@ -279,16 +268,14 @@
& > div:nth-child(3n + 2),
& > div:nth-child(3n + 3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.75rem;
line-height: 1.5;
}
& > div:nth-child(3n + 3) {
padding-left: 0.125rem;
color: var(--sl-color-text-dimmed);
word-break: break-word;
color: var(--sl-color-text-secondary);
}
}
@ -302,6 +289,11 @@
font-size: 0.75rem;
}
}
[data-part-tool-edit] {
width: 100%;
max-width: var(--lg-tool-width);
}
}
}
@ -325,16 +317,6 @@
& > [data-section="content"] > [data-part-tool-body] {
gap: 0.5rem;
}
[data-part-title] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
b {
color: var(--sl-color-text);
word-break: break-all;
}
}
}
[data-part-type="tool-grep"] {
@ -342,16 +324,6 @@
> [data-section="content"] > [data-part-tool-body] {
gap: 0.5rem;
}
[data-part-title] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
b {
color: var(--sl-color-text);
word-break: break-all;
}
}
}
[data-part-type="tool-write"],
@ -359,7 +331,9 @@
[data-part-type="tool-fetch"] {
[data-part-tool-result] {
[data-part-tool-code] {
width: var(--md-tool-width);
border: 1px solid var(--sl-color-divider);
background-color: var(--sl-color-bg-surface);
border-radius: 0.25rem;
padding: 0.5rem calc(0.5rem + 3px);
@ -372,8 +346,6 @@
}
}
}
[data-part-type="tool-edit"] {
}
}
.message-text {
@ -384,6 +356,8 @@
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
&[data-size="sm"] {
pre {
@ -411,7 +385,7 @@
font-size: 0.75rem;
}
&[data-highlight="true"] {
&[data-invert="true"] {
background-color: var(--sl-color-blue-high);
pre {
@ -428,6 +402,10 @@
}
}
&[data-highlight="true"] {
background-color: var(--sl-color-blue-low);
}
&[data-expanded="true"] {
pre {
display: block;
@ -450,6 +428,7 @@
gap: 0.5rem;
& > [data-section="body"] {
width: var(--sm-tool-width);
border: 1px solid var(--sl-color-divider);
border-radius: 0.25rem;
max-width: 100%;
@ -460,7 +439,7 @@
width: 100%;
height: 1.625rem;
text-align: center;
padding: 0 0.75rem 0 3.25rem;
padding: 0 3.25rem;
& > span {
max-width: min(100%, 140ch);
@ -491,12 +470,10 @@
[data-section="content"] {
padding: 0.5rem calc(0.5rem + 3px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
pre {
--shiki-dark-bg: var(--sl-color-bg) !important;
background-color: var(--sl-color-bg) !important;
line-height: 1.6;
font-size: 0.75rem;
white-space: pre-wrap;
@ -533,6 +510,8 @@
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: flex-start;
max-width: var(--md-tool-width);
button {
flex: 0 0 auto;
@ -540,6 +519,10 @@
font-size: 0.75rem;
}
&[data-highlight="true"] {
background-color: var(--sl-color-blue-low);
}
&[data-expanded="true"] {
[data-elment-markdown] {
display: block;
@ -566,6 +549,7 @@
list-style-type: none;
padding: 0;
margin: 0;
width: var(--sm-tool-width);
border: 1px solid var(--sl-color-divider);
border-radius: 0.25rem;
@ -577,6 +561,7 @@
padding: 0.375rem 0.625rem 0.375rem 1.75rem;
border-bottom: 1px solid var(--sl-color-divider);
line-height: 1.5;
word-break: break-word;
&:last-child {
border-bottom: none;
@ -614,9 +599,9 @@
}
}
&[data-status="completed"] {
color: var(--sl-color-text-dimmed);
color: var(--sl-color-text-secondary);
& > span { border-color: var(--sl-color-hairline); }
& > span { border-color: var(--sl-color-green-low); }
& > span::before {
content: "";
position: absolute;
@ -624,7 +609,7 @@
left: 2px;
width: calc(0.75rem - 2px - 4px);
height: calc(0.75rem - 2px - 4px);
box-shadow: inset 1rem 1rem var(--sl-color-divider);
box-shadow: inset 1rem 1rem var(--sl-color-green);
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);