Skip to content

Commit 88b7c9e

Browse files
mtojekmtojek
authored
feat: install more terminal fonts (#17289)
Related: #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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy