opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: install more terminal fonts (#17289)

Browse Source 
Related: https://github.com/coder/coder/issues/15024
This commit is contained in:
Marcin Tojek
2025-04-08 14:36:15 +02:00
committed by GitHub
parent 3487f37f9a
commit 88b7c9ef5d
11 changed files with 122 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
coderd/apidoc/docs.go
Generated
+6 -2
View File
@@ -15605,12 +15605,16 @@ const docTemplate = `{
"enum": [
"",
"ibm-plex-mono",
"fira-code"
"fira-code",
"source-code-pro",
"jetbrains-mono"
],
"x-enum-varnames": [
"TerminalFontUnknown",
"TerminalFontIBMPlexMono",
"TerminalFontFiraCode"
"TerminalFontFiraCode",
"TerminalFontSourceCodePro",
"TerminalFontJetBrainsMono"
]
},
"codersdk.TimingStage": {
coderd/apidoc/swagger.json
Generated
+10 -2
View File
@@ -14187,11 +14187,19 @@
},
"codersdk.TerminalFontName": {
"type": "string",
"enum": ["", "ibm-plex-mono", "fira-code"],
"enum": [
"",
"ibm-plex-mono",
"fira-code",
"source-code-pro",
"jetbrains-mono"
],
"x-enum-varnames": [
"TerminalFontUnknown",
"TerminalFontIBMPlexMono",
"TerminalFontFiraCode"
"TerminalFontFiraCode",
"TerminalFontSourceCodePro",
"TerminalFontJetBrainsMono"
]
},
"codersdk.TimingStage": {
codersdk/users.go
+9 -4
View File
@@ -192,12 +192,17 @@ type ValidateUserPasswordResponse struct {
// TerminalFontName is the name of supported terminal font
type TerminalFontName string
var TerminalFontNames = []TerminalFontName{TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode}
var TerminalFontNames = []TerminalFontName{
TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode,
TerminalFontSourceCodePro, TerminalFontJetBrainsMono,
}
const (
TerminalFontUnknown TerminalFontName = ""
TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono"
TerminalFontFiraCode TerminalFontName = "fira-code"
TerminalFontUnknown TerminalFontName = ""
TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono"
TerminalFontFiraCode TerminalFontName = "fira-code"
TerminalFontSourceCodePro TerminalFontName = "source-code-pro"
TerminalFontJetBrainsMono TerminalFontName = "jetbrains-mono"
)
type UserAppearanceSettings struct {
docs/reference/api/schemas.md
Generated
+7 -5
View File
@@ -6723,11 +6723,13 @@ Restarts will only happen on weekdays in this list on weeks which line up with W
#### Enumerated Values
| Value |
|-----------------|
| `` |
| `ibm-plex-mono` |
| `fira-code` |
| Value |
|-------------------|
| `` |
| `ibm-plex-mono` |
| `fira-code` |
| `source-code-pro` |
| `jetbrains-mono` |
## codersdk.TimingStage
site/package.json
+2
View File
@@ -44,6 +44,8 @@
"@fontsource-variable/inter": "5.1.1",
"@fontsource/fira-code": "5.2.5",
"@fontsource/ibm-plex-mono": "5.1.1",
"@fontsource/jetbrains-mono": "5.2.5",
"@fontsource/source-code-pro": "5.2.5",
"@monaco-editor/react": "4.6.0",
"@mui/icons-material": "5.16.14",
"@mui/lab": "5.0.0-alpha.175",
site/pnpm-lock.yaml
Generated
+16
View File
@@ -46,6 +46,12 @@ importers:
'@fontsource/ibm-plex-mono':
specifier: 5.1.1
version: 5.1.1
'@fontsource/jetbrains-mono':
specifier: 5.2.5
version: 5.2.5
'@fontsource/source-code-pro':
specifier: 5.2.5
version: 5.2.5
'@monaco-editor/react':
specifier: 4.6.0
version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1049,6 +1055,12 @@ packages:
'@fontsource/ibm-plex-mono@5.1.1':
resolution: {integrity: sha512-1aayqPe/ZkD3MlvqpmOHecfA3f2B8g+fAEkgvcCd3lkPP0pS1T0xG5Zmn2EsJQqr1JURtugPUH+5NqvKyfFZMQ==, tarball: https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.1.1.tgz}
'@fontsource/jetbrains-mono@5.2.5':
resolution: {integrity: sha512-TPZ9b/uq38RMdrlZZkl0RwN8Ju9JxuqMETrw76pUQFbGtE1QbwQaNsLlnUrACNNBNbd0NZRXiJJSkC8ajPgbew==, tarball: https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.5.tgz}
'@fontsource/source-code-pro@5.2.5':
resolution: {integrity: sha512-1k7b9IdhVSdK/rJ8CkqqGFZ01C3NaXNynPZqKaTetODog/GPJiMYd6E8z+LTwSUTIX8dm2QZORDC+Uh91cjXSg==, tarball: https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-5.2.5.tgz}
'@humanwhocodes/config-array@0.11.14':
resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==, tarball: https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz}
engines: {node: '>=10.10.0'}
@@ -7022,6 +7034,10 @@ snapshots:
'@fontsource/ibm-plex-mono@5.1.1': {}
'@fontsource/jetbrains-mono@5.2.5': {}
'@fontsource/source-code-pro@5.2.5': {}
'@humanwhocodes/config-array@0.11.14':
dependencies:
'@humanwhocodes/object-schema': 2.0.3
site/src/api/typesGenerated.ts
Generated
+8 -1
View File
@@ -2658,11 +2658,18 @@ export interface TemplateVersionsByTemplateRequest extends Pagination {
}
// From codersdk/users.go
export type TerminalFontName = "fira-code" | "ibm-plex-mono" | "";
export type TerminalFontName =
| "fira-code"
| "ibm-plex-mono"
| "jetbrains-mono"
| "source-code-pro"
| "";
export const TerminalFontNames: TerminalFontName[] = [
"fira-code",
"ibm-plex-mono",
"jetbrains-mono",
"source-code-pro",
"",
];
site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+6 -2
View File
@@ -16,7 +16,11 @@ import { Stack } from "components/Stack/Stack";
import { ThemeOverride } from "contexts/ThemeProvider";
import type { FC } from "react";
import themes, { DEFAULT_THEME, type Theme } from "theme";
import { DEFAULT_TERMINAL_FONT, terminalFontLabels } from "theme/constants";
import {
DEFAULT_TERMINAL_FONT,
terminalFontLabels,
terminalFonts,
} from "theme/constants";
import { Section } from "../Section";
export interface AppearanceFormProps {
@@ -115,7 +119,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
value={name}
control={<Radio />}
label={
<div css={{ fontFamily: terminalFontLabels[name] }}>
<div css={{ fontFamily: terminalFonts[name] }}>
{terminalFontLabels[name]}
</div>
}
site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
+42 -2
View File
@@ -51,8 +51,8 @@ describe("appearance page", () => {
theme_preference: "dark",
});
const ibmPlex = await screen.findByText("Fira Code");
await userEvent.click(ibmPlex);
const firaCode = await screen.findByText("Fira Code");
await userEvent.click(firaCode);
// Check if the API was called correctly
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
@@ -61,4 +61,44 @@ describe("appearance page", () => {
theme_preference: "dark",
});
});
it("changes font to fira code, then back to web terminal font", async () => {
renderWithAuth(<AppearancePage />);
// given
jest
.spyOn(API, "updateAppearanceSettings")
.mockResolvedValueOnce({
...MockUser,
terminal_font: "fira-code",
theme_preference: "dark",
})
.mockResolvedValueOnce({
...MockUser,
terminal_font: "ibm-plex-mono",
theme_preference: "dark",
});
// when
const firaCode = await screen.findByText("Fira Code");
await userEvent.click(firaCode);
// then
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
expect(API.updateAppearanceSettings).toHaveBeenCalledWith({
terminal_font: "fira-code",
theme_preference: "dark",
});
// when
const ibmPlex = await screen.findByText("Web Terminal Font");
await userEvent.click(ibmPlex);
// then
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(2);
expect(API.updateAppearanceSettings).toHaveBeenNthCalledWith(2, {
terminal_font: "ibm-plex-mono",
theme_preference: "dark",
});
});
});
site/src/theme/constants.ts
+11 -1
View File
@@ -7,13 +7,23 @@ export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`;
export const terminalFonts: Record<TerminalFontName, string> = {
"fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"),
"jetbrains-mono": MONOSPACE_FONT_FAMILY.replace(
"IBM Plex Mono",
"JetBrains Mono",
),
"source-code-pro": MONOSPACE_FONT_FAMILY.replace(
"IBM Plex Mono",
"Source Code Pro",
),
"ibm-plex-mono": MONOSPACE_FONT_FAMILY,
"": MONOSPACE_FONT_FAMILY,
};
export const terminalFontLabels: Record<TerminalFontName, string> = {
"fira-code": "Fira Code",
"ibm-plex-mono": "IBM Plex Mono",
"jetbrains-mono": "JetBrains Mono",
"source-code-pro": "Source Code Pro",
"ibm-plex-mono": "Web Terminal Font",
"": "", // needed for enum completeness, otherwise fails the build
};
export const DEFAULT_TERMINAL_FONT = "ibm-plex-mono";
site/src/theme/globalFonts.ts
+5 -1
View File
@@ -3,6 +3,10 @@ import "@fontsource/ibm-plex-mono/400.css";
import "@fontsource/ibm-plex-mono/600.css";
// Main body copy font
import "@fontsource-variable/inter";
// Alternative font for Terminal
// Alternative fonts for Terminal
import "@fontsource/fira-code/400.css";
import "@fontsource/fira-code/600.css";
import "@fontsource/source-code-pro/400.css";
import "@fontsource/source-code-pro/600.css";
import "@fontsource/jetbrains-mono/400.css";
import "@fontsource/jetbrains-mono/600.css";