Skip to content

Commit 88b7c9e

Browse files
mtojekmtojek
authored
feat: install more terminal fonts (coder#17289)
Related: coder#15024
1 parent 3487f37 commit 88b7c9e

File tree

11 files changed

+122
-20
lines changed

11 files changed

+122
-20
lines changed

‎coderd/apidoc/docs.go

Lines changed: 6 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎coderd/apidoc/swagger.json

Lines changed: 10 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎codersdk/users.go

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -192,12 +192,17 @@ type ValidateUserPasswordResponse struct {
192192
// TerminalFontName is the name of supported terminal font
193193
type TerminalFontName string
194194

195-
var TerminalFontNames = []TerminalFontName{TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode}
195+
var TerminalFontNames = []TerminalFontName{
196+
TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode,
197+
TerminalFontSourceCodePro, TerminalFontJetBrainsMono,
198+
}
196199

197200
const (
198-
TerminalFontUnknown TerminalFontName = ""
199-
TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono"
200-
TerminalFontFiraCode TerminalFontName = "fira-code"
201+
TerminalFontUnknown TerminalFontName = ""
202+
TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono"
203+
TerminalFontFiraCode TerminalFontName = "fira-code"
204+
TerminalFontSourceCodePro TerminalFontName = "source-code-pro"
205+
TerminalFontJetBrainsMono TerminalFontName = "jetbrains-mono"
201206
)
202207

203208
type UserAppearanceSettings struct {

‎docs/reference/api/schemas.md

Lines changed: 7 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
"@fontsource-variable/inter": "5.1.1",
4545
"@fontsource/fira-code": "5.2.5",
4646
"@fontsource/ibm-plex-mono": "5.1.1",
47+
"@fontsource/jetbrains-mono": "5.2.5",
48+
"@fontsource/source-code-pro": "5.2.5",
4749
"@monaco-editor/react": "4.6.0",
4850
"@mui/icons-material": "5.16.14",
4951
"@mui/lab": "5.0.0-alpha.175",

‎site/pnpm-lock.yaml

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/api/typesGenerated.ts

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@ import { Stack } from "components/Stack/Stack";
1616
import { ThemeOverride } from "contexts/ThemeProvider";
1717
import type { FC } from "react";
1818
import themes, { DEFAULT_THEME, type Theme } from "theme";
19-
import { DEFAULT_TERMINAL_FONT, terminalFontLabels } from "theme/constants";
19+
import {
20+
DEFAULT_TERMINAL_FONT,
21+
terminalFontLabels,
22+
terminalFonts,
23+
} from "theme/constants";
2024
import { Section } from "../Section";
2125

2226
export interface AppearanceFormProps {
@@ -115,7 +119,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
115119
value={name}
116120
control={<Radio />}
117121
label={
118-
<div css={{ fontFamily: terminalFontLabels[name] }}>
122+
<div css={{ fontFamily: terminalFonts[name] }}>
119123
{terminalFontLabels[name]}
120124
</div>
121125
}

‎site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ describe("appearance page", () => {
5151
theme_preference: "dark",
5252
});
5353

54-
const ibmPlex = await screen.findByText("Fira Code");
55-
await userEvent.click(ibmPlex);
54+
const firaCode = await screen.findByText("Fira Code");
55+
await userEvent.click(firaCode);
5656

5757
// Check if the API was called correctly
5858
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
@@ -61,4 +61,44 @@ describe("appearance page", () => {
6161
theme_preference: "dark",
6262
});
6363
});
64+
65+
it("changes font to fira code, then back to web terminal font", async () => {
66+
renderWithAuth(<AppearancePage />);
67+
68+
// given
69+
jest
70+
.spyOn(API, "updateAppearanceSettings")
71+
.mockResolvedValueOnce({
72+
...MockUser,
73+
terminal_font: "fira-code",
74+
theme_preference: "dark",
75+
})
76+
.mockResolvedValueOnce({
77+
...MockUser,
78+
terminal_font: "ibm-plex-mono",
79+
theme_preference: "dark",
80+
});
81+
82+
// when
83+
const firaCode = await screen.findByText("Fira Code");
84+
await userEvent.click(firaCode);
85+
86+
// then
87+
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
88+
expect(API.updateAppearanceSettings).toHaveBeenCalledWith({
89+
terminal_font: "fira-code",
90+
theme_preference: "dark",
91+
});
92+
93+
// when
94+
const ibmPlex = await screen.findByText("Web Terminal Font");
95+
await userEvent.click(ibmPlex);
96+
97+
// then
98+
expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(2);
99+
expect(API.updateAppearanceSettings).toHaveBeenNthCalledWith(2, {
100+
terminal_font: "ibm-plex-mono",
101+
theme_preference: "dark",
102+
});
103+
});
64104
});

‎site/src/theme/constants.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,23 @@ export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`;
77

88
export const terminalFonts: Record<TerminalFontName, string> = {
99
"fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"),
10+
"jetbrains-mono": MONOSPACE_FONT_FAMILY.replace(
11+
"IBM Plex Mono",
12+
"JetBrains Mono",
13+
),
14+
"source-code-pro": MONOSPACE_FONT_FAMILY.replace(
15+
"IBM Plex Mono",
16+
"Source Code Pro",
17+
),
1018
"ibm-plex-mono": MONOSPACE_FONT_FAMILY,
1119

1220
"": MONOSPACE_FONT_FAMILY,
1321
};
1422
export const terminalFontLabels: Record<TerminalFontName, string> = {
1523
"fira-code": "Fira Code",
16-
"ibm-plex-mono": "IBM Plex Mono",
24+
"jetbrains-mono": "JetBrains Mono",
25+
"source-code-pro": "Source Code Pro",
26+
"ibm-plex-mono": "Web Terminal Font",
1727
"": "", // needed for enum completeness, otherwise fails the build
1828
};
1929
export const DEFAULT_TERMINAL_FONT = "ibm-plex-mono";

‎site/src/theme/globalFonts.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import "@fontsource/ibm-plex-mono/400.css";
33
import "@fontsource/ibm-plex-mono/600.css";
44
// Main body copy font
55
import "@fontsource-variable/inter";
6-
// Alternative font for Terminal
6+
// Alternative fonts for Terminal
77
import "@fontsource/fira-code/400.css";
88
import "@fontsource/fira-code/600.css";
9+
import "@fontsource/source-code-pro/400.css";
10+
import "@fontsource/source-code-pro/600.css";
11+
import "@fontsource/jetbrains-mono/400.css";
12+
import "@fontsource/jetbrains-mono/600.css";

0 commit comments

Comments
 (0)