hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix: preloading fonts via <link preload> (terminal font issue)

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2022-02-15 17:08:06 +02:00
parent d656a9e289
commit 5a4ca321a0
6 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/dock/terminal/dock-tab.tsx
View File

@ -3,6 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import "./terminal-dock-tab.scss";
import React from "react"; import React from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { boundMethod, cssNames } from "../../../utils"; import { boundMethod, cssNames } from "../../../utils";

10
src/renderer/components/dock/terminal/terminal-dock-tab.scss Normal file
View File

@ -0,0 +1,10 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
.TerminalTab {
@include font-preload {
font-family: "RobotoMono", monospace;
}
}

1
src/renderer/components/fonts.scss
View File

@ -22,5 +22,6 @@
// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
@font-face { @font-face {
font-family: 'RobotoMono'; font-family: 'RobotoMono';
font-display: block;
src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype'); src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
} }

12
src/renderer/components/mixins.scss
View File

@ -59,3 +59,15 @@
@content; // css-modules (*.module.scss) @content; // css-modules (*.module.scss)
} }
} }
// Makes custom font available at earlier stages (start preloading)
// Element must be in DOM and contain some text of loading font.
@mixin font-preload() {
&:before {
width: 0;
display: block;
overflow: hidden;
content: "x"; // required
@content; // must contain `font-family`
}
}

2
src/renderer/template.html
View File

@ -2,6 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="preload" href="<%= assetPath %>/MaterialIcons-Regular.ttf" as="font" crossorigin>
<link rel="preload" href="<%= assetPath %>/roboto-mono-nerd.ttf" as="font" crossorigin>
</head> </head>
<body> <body>

15
webpack.renderer.ts
View File

@ -17,14 +17,8 @@ import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
export function webpackLensRenderer(): webpack.Configuration { export function webpackLensRenderer(): webpack.Configuration {
console.info("WEBPACK:renderer", vars); console.info("WEBPACK:renderer", vars);
const { const assetsFolderName = "assets";
appName, const { appName, buildDir, htmlTemplate, isDevelopment, publicPath, rendererDir } = vars;
buildDir,
htmlTemplate,
isDevelopment,
publicPath,
rendererDir,
} = vars;
return { return {
target: "electron-renderer", target: "electron-renderer",
@ -42,7 +36,7 @@ export function webpackLensRenderer(): webpack.Configuration {
path: buildDir, path: buildDir,
filename: "[name].js", filename: "[name].js",
chunkFilename: "chunks/[name].js", chunkFilename: "chunks/[name].js",
assetModuleFilename: "assets/[name][ext][query]", assetModuleFilename: `${assetsFolderName}/[name][ext][query]`,
}, },
watchOptions: { watchOptions: {
ignored: /node_modules/, // https://webpack.js.org/configuration/watch/ ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
@ -97,6 +91,9 @@ export function webpackLensRenderer(): webpack.Configuration {
template: htmlTemplate, template: htmlTemplate,
inject: true, inject: true,
hash: true, hash: true,
templateParameters: {
assetPath: `${publicPath}${assetsFolderName}`,
},
}), }),
new CircularDependencyPlugin({ new CircularDependencyPlugin({