clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-04-30 17:56:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): more startup efficiency (#19454)

Browse Source
This commit is contained in:
Adam
2026-03-27 20:26:57 -05:00
committed by GitHub
parent 82fc493520
commit f736116967
19 changed files with 251 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/ui/src/components/font.stories.tsx
View File

@@ -2,24 +2,24 @@
import * as mod from "./font"
const docs = `### Overview
Loads OpenCode typography assets and mono nerd fonts.
Uses native system font stacks for sans and mono typography.
Render once at the app root or Storybook preview.
Optional compatibility component. Existing roots can keep rendering it, but it does nothing.
### API
- No props.
### Variants and states
- Fonts include sans and multiple mono families.
- No variants.
### Behavior
- Injects @font-face rules and preload links into the document head.
- Compatibility wrapper only. No font assets are injected or preloaded.
### Accessibility
- Not applicable.
### Theming/tokens
- Provides font families used by theme tokens.
- Theme tokens come from CSS variables, not this component.
`

64
packages/ui/src/components/font.tsx
View File

@@ -1,63 +1 @@
import { Link, Style } from "@solidjs/meta"
import { Show } from "solid-js"
import inter from "../assets/fonts/inter.woff2"
import ibmPlexMonoBold from "../assets/fonts/ibm-plex-mono-bold.woff2"
import ibmPlexMonoMedium from "../assets/fonts/ibm-plex-mono-medium.woff2"
import ibmPlexMonoRegular from "../assets/fonts/ibm-plex-mono.woff2"
export const Font = () => {
return (
<>
<Style>{`
@font-face {
font-family: "Inter";
src: url("${inter}") format("woff2-variations");
font-display: swap;
font-style: normal;
font-weight: 100 900;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 97%;
descent-override: 25%;
line-gap-override: 1%;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("${ibmPlexMonoRegular}") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("${ibmPlexMonoMedium}") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 500;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("${ibmPlexMonoBold}") format("woff2");
font-display: swap;
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: "IBM Plex Mono Fallback";
src: local("Courier New");
size-adjust: 100%;
ascent-override: 97%;
descent-override: 25%;
line-gap-override: 1%;
}
`}</Style>
<Show when={typeof location === "undefined" || location.protocol !== "file:"}>
<Link rel="preload" href={inter} as="font" type="font/woff2" crossorigin="anonymous" />
<Link rel="preload" href={ibmPlexMonoRegular} as="font" type="font/woff2" crossorigin="anonymous" />
</Show>
</>
)
}
export const Font = () => null