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.
*/
import "./terminal-dock-tab.scss";
import React from "react";
import { observer } from "mobx-react";
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
@font-face {
font-family: 'RobotoMono';
font-display: block;
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)
}
}
// 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">
<head>
<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>
<body>

15
webpack.renderer.ts
View File

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