Skip to content

feat: support multiple terminal fonts #17257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Apr 7, 2025
Merged

feat: support multiple terminal fonts #17257

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c309664
feat: switch terminal fonts
mtojek Apr 4, 2025
d9e9627
Rename GetAppearanceSettings to GetUserThemePreferences
mtojek Apr 4, 2025
fd6c9e4
GetUserTerminalFont
mtojek Apr 4, 2025
40ee863
ibm-plex-mono
mtojek Apr 4, 2025
6a6272b
form
mtojek Apr 4, 2025
40ee797
Terminal uses font
mtojek Apr 4, 2025
ae1cb12
Fix golden
mtojek Apr 4, 2025
8f9e313
fix version
mtojek Apr 4, 2025
94a3587
WIP
mtojek Apr 4, 2025
bdbae61
jest
mtojek Apr 4, 2025
33a6177
dbauthz_test.g
mtojek Apr 4, 2025
23a0768
check
mtojek Apr 4, 2025
9bed6bc
go tests
mtojek Apr 4, 2025
f4c24ef
fix
mtojek Apr 4, 2025
449e079
t.Parallel
mtojek Apr 4, 2025
2a68eeb
Review fixes
mtojek Apr 7, 2025
b9fa3fe
make gen
mtojek Apr 7, 2025
45245fc
fixes
mtojek Apr 7, 2025
922bac2
fix
mtojek Apr 7, 2025
59854a6
Fix
mtojek Apr 7, 2025
61fca63
Fix
mtojek Apr 7, 2025
b22e626
cleanup
mtojek Apr 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Terminal uses font
  • Loading branch information
@mtojek
mtojek committed Apr 4, 2025
commit 40ee7976eb2e1fa13e6cda648f395038654bb1bd
22 changes: 18 additions & 4 deletions site/src/pages/TerminalPage/TerminalPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,20 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
import { WebglAddon } from "@xterm/addon-webgl";
import { Terminal } from "@xterm/xterm";
import { deploymentConfig } from "api/queries/deployment";
import { appearanceSettings } from "api/queries/users";
import {
workspaceByOwnerAndName,
workspaceUsage,
} from "api/queries/workspaces";
import { useProxy } from "contexts/ProxyContext";
import { ThemeOverride } from "contexts/ThemeProvider";
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { type FC, useCallback, useEffect, useRef, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import themes from "theme";
import { MONOSPACE_FONT_FAMILY, TERMINAL_FONT_FAMILY_2 } from "theme/constants";
import themes, { DEFAULT_TERMINAL_FONT } from "theme";
import { terminalFonts } from "theme/constants";
import { pageTitle } from "utils/page";
import { openMaybePortForwardedURL } from "utils/portForward";
import { terminalWebsocketUrl } from "utils/terminal";
Expand Down Expand Up @@ -100,6 +102,13 @@ const TerminalPage: FC = () => {
handleWebLinkRef.current = handleWebLink;
}, [handleWebLink]);

const { metadata } = useEmbeddedMetadata();
const appearanceSettingsQuery = useQuery(
appearanceSettings(metadata.userAppearance),
);
const currentTerminalFont =
appearanceSettingsQuery.data?.terminal_font || DEFAULT_TERMINAL_FONT;

// Create the terminal!
const fitAddonRef = useRef<FitAddon>();
useEffect(() => {
Expand All @@ -110,7 +119,7 @@ const TerminalPage: FC = () => {
allowProposedApi: true,
allowTransparency: true,
disableStdin: false,
fontFamily: TERMINAL_FONT_FAMILY_2,
fontFamily: terminalFonts[currentTerminalFont],
fontSize: 16,
theme: {
background: theme.palette.background.default,
Expand Down Expand Up @@ -150,7 +159,12 @@ const TerminalPage: FC = () => {
window.removeEventListener("resize", listener);
terminal.dispose();
};
}, [config.isLoading, renderer, theme.palette.background.default]);
}, [
config.isLoading,
renderer,
theme.palette.background.default,
currentTerminalFont,
]);

// Updates the reconnection token into the URL if necessary.
useEffect(() => {
Expand Down
14 changes: 9 additions & 5 deletions site/src/theme/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import type { TerminalFontName } from "api/typesGenerated";

export const borderRadius = 8;
export const MONOSPACE_FONT_FAMILY =
"'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace";
export const TERMINAL_FONT_FAMILY_1 = MONOSPACE_FONT_FAMILY;
export const TERMINAL_FONT_FAMILY_2 = MONOSPACE_FONT_FAMILY.replace(
"IBM Plex Mono",
"Fira Code",
);
export const terminalFonts: Record<TerminalFontName, string> = {
"fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"),
"ibm-plex-mono": MONOSPACE_FONT_FAMILY,

"": MONOSPACE_FONT_FAMILY,
};

export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`;
export const navHeight = 62;
export const containerWidth = 1380;
Expand Down
Loading