BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Nerd Fonts support for terminal icons (#140)

Browse Source 
Co-authored-by: Jovines <jovines@qq.com>
This commit is contained in:
Jovines
2026-01-14 02:38:48 +02:00
committed by GitHub
co-authored by Jovines
parent 126cc366d7
commit d56eef8aa6
2 changed files with 77 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/index.css
+17
View File
@@ -1523,3 +1523,20 @@ html:not(.dark) .chat-scroll {
.terminal-viewport-container textarea {
caret-color: transparent !important;
}
/* Mobile Terminal Optimizations */
@media (max-width: 1024px) {
.terminal-viewport-container {
font-variant-ligatures: none;
font-feature-settings: "liga" 0, "calt" 0;
}
}
/* Font loading states */
.fonts-loading .terminal-viewport-container {
font-family: monospace;
}
.fonts-loaded .terminal-viewport-container {
font-family: "JetBrainsMono Nerd Font", "FiraCode Nerd Font", "Fira Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}
packages/web/index.html
+60 -1
View File
@@ -15,6 +15,12 @@
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<!-- Preload Nerd Fonts for terminal icon display -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2"
as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2"
as="font" type="font/woff2" crossorigin="anonymous">
<!-- Web app manifest (data URL to avoid nginx auth issues) -->
<script>
const baseUrl = location.origin;
@@ -119,8 +125,33 @@
<meta name="application-name" content="OpenChamber" />
<meta name="apple-mobile-web-app-title" content="OpenChamber" />
<!-- Inline CSS for loading screen (before Tailwind loads) -->
<!-- Inline CSS for loading screen and Nerd Fonts (before Tailwind loads) -->
<style>
/* Nerd Font @font-face declarations for terminal icon support */
@font-face {
font-family: 'JetBrainsMono Nerd Font';
src:
local('JetBrainsMono Nerd Font'),
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+E000-F8FF, U+F0000-FFFFF;
}
@font-face {
font-family: 'FiraCode Nerd Font';
src:
local('FiraCode Nerd Font'),
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+E000-F8FF, U+F0000-FFFFF;
}
:root {
--splash-background: #151313;
--splash-stroke: white;
@@ -239,6 +270,34 @@
}, 10000);
</script>
<!-- CSS Font Loading API for reliable Nerd Font loading -->
<script>
(function() {
const fonts = [
{
name: 'JetBrainsMono Nerd Font',
url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2'
},
{
name: 'FiraCode Nerd Font',
url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2'
}
];
const fontPromises = fonts.map(font => {
const fontFace = new FontFace(font.name, `url(${font.url}) format('woff2')`);
document.fonts.add(fontFace);
return fontFace.load().catch(err => {
console.warn(`Failed to load font: ${font.name}`, err);
});
});
Promise.allSettled(fontPromises).then(() => {
document.documentElement.classList.add('fonts-loaded');
});
})();
</script>
<!-- Polyfill for process before loading React -->
<script>
if (typeof process === 'undefined') {