refactor(frontend): inline CSS and minify HTML

Optimize first page loading time.

We only include variable and woff2 fonts, as they are widely supported.

5 files changed, 289 insertions, 13 deletions

diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index 92cc94c7..e14e8d30 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -12,6 +12,268 @@
     <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99">
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#21252b">
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa">
+    <style>
+      @import '@fontsource/jetbrains-mono/variable.css';
+      @import '@fontsource/jetbrains-mono/variable-italic.css';
+
+      /* roboto-cyrillic-ext-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2') format('woff2');
+        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+      }
+      /* roboto-cyrillic-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2') format('woff2');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* roboto-greek-ext-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2') format('woff2');
+        unicode-range: U+1F00-1FFF;
+      }
+      /* roboto-greek-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-greek-300-normal.woff2') format('woff2');
+        unicode-range: U+0370-03FF;
+      }
+      /* roboto-vietnamese-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2') format('woff2');
+        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+      }
+      /* roboto-latin-ext-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2') format('woff2');
+        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+      }
+      /* roboto-latin-300-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 300;
+        src: url('@fontsource/roboto/files/roboto-latin-300-normal.woff2') format('woff2');
+        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+      }
+      /* roboto-cyrillic-ext-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2') format('woff2');
+        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+      }
+      /* roboto-cyrillic-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2') format('woff2');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* roboto-greek-ext-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2') format('woff2');
+        unicode-range: U+1F00-1FFF;
+      }
+      /* roboto-greek-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-greek-400-normal.woff2') format('woff2');
+        unicode-range: U+0370-03FF;
+      }
+      /* roboto-vietnamese-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2') format('woff2');
+        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+      }
+      /* roboto-latin-ext-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2') format('woff2');
+        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+      }
+      /* roboto-latin-400-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 400;
+        src: url('@fontsource/roboto/files/roboto-latin-400-normal.woff2') format('woff2');
+        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+      }
+      /* roboto-cyrillic-ext-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2') format('woff2');
+        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+      }
+      /* roboto-cyrillic-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2') format('woff2');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* roboto-greek-ext-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2') format('woff2');
+        unicode-range: U+1F00-1FFF;
+      }
+      /* roboto-greek-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-greek-500-normal.woff2') format('woff2');
+        unicode-range: U+0370-03FF;
+      }
+      /* roboto-vietnamese-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2') format('woff2');
+        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+      }
+      /* roboto-latin-ext-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2') format('woff2');
+        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+      }
+      /* roboto-latin-500-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 500;
+        src: url('@fontsource/roboto/files/roboto-latin-500-normal.woff2') format('woff2');
+        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+      }
+      /* roboto-cyrillic-ext-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2') format('woff2');
+        unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+      }
+      /* roboto-cyrillic-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2') format('woff2');
+        unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+      }
+      /* roboto-greek-ext-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2') format('woff2');
+        unicode-range: U+1F00-1FFF;
+      }
+      /* roboto-greek-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-greek-700-normal.woff2') format('woff2');
+        unicode-range: U+0370-03FF;
+      }
+      /* roboto-vietnamese-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2') format('woff2');
+        unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+      }
+      /* roboto-latin-ext-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2') format('woff2');
+        unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+      }
+      /* roboto-latin-700-normal*/
+      @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-display: swap;
+        font-weight: 700;
+        src: url('@fontsource/roboto/files/roboto-latin-700-normal.woff2') format('woff2');
+        unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+      }
+
+      body {
+        color: #ebebff;
+        background: #282c34;
+      }
+    </style>
   </head>
   <body>
     <noscript>
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index 693f3d06..aa453cd0 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -55,7 +55,8 @@
   "devDependencies": {
     "@lezer/generator": "^1.1.1",
     "@types/eslint": "^8.4.6",
-    "@types/node": "^18.7.7",
+    "@types/html-minifier-terser": "^7.0.0",
+    "@types/node": "^18.7.8",
     "@types/prettier": "^2.7.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -73,6 +74,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "html-minifier-terser": "^7.0.0",
     "prettier": "^2.7.1",
     "typescript": "~4.7.4",
     "vite": "^3.0.9",
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index b108df6d..a65821ef 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,14 +1,4 @@
 import CssBaseline from '@mui/material/CssBaseline';
-import '@fontsource/jetbrains-mono/400.css';
-import '@fontsource/jetbrains-mono/400-italic.css';
-import '@fontsource/jetbrains-mono/700.css';
-import '@fontsource/jetbrains-mono/700-italic.css';
-import '@fontsource/jetbrains-mono/variable.css';
-import '@fontsource/jetbrains-mono/variable-italic.css';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
 import { SnackbarProvider } from 'notistack';
 import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 5bc14704..3a0703fe 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -64,7 +64,8 @@ declare module '@mui/material/styles' {
 
 const typography: TypographyVariantsOptions = {
   editor: {
-    fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+    fontFamily:
+      '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
     fontFeatureSettings: '"liga", "calt"',
     fontSize: '1rem',
     fontWeight: 400,
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index bb421788..6ec2d513 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -4,7 +4,8 @@ import { fileURLToPath } from 'node:url';
 
 import { lezer } from '@lezer/generator/rollup';
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { minify } from 'html-minifier-terser';
+import { defineConfig, PluginOption } from 'vite';
 import injectPreload from 'vite-plugin-inject-preload';
 import { VitePWA } from 'vite-plugin-pwa';
 
@@ -33,12 +34,32 @@ const { name: packageName, version: packageVersion } = JSON.parse(
 process.env.VITE_PACKAGE_NAME ??= packageName;
 process.env.VITE_PACKAGE_VERSION ??= packageVersion;
 
+const minifyPlugin: PluginOption = {
+  name: 'minify-html',
+  enforce: 'post',
+  async transformIndexHtml(html) {
+    if (isDevelopment) {
+      return html;
+    }
+    return minify(html, {
+      collapseWhitespace: true,
+      collapseBooleanAttributes: true,
+      minifyCSS: true,
+      removeComments: true,
+      removeAttributeQuotes: true,
+      removeRedundantAttributes: true,
+      sortAttributes: true,
+    });
+  },
+};
+
 export default defineConfig({
   logLevel: 'info',
   mode,
   root: thisDir,
   cacheDir: path.join(thisDir, 'build/vite/cache'),
   plugins: [
+    minifyPlugin,
     react({
       babel: {
         // Gets rid of deoptimization warnings for large chunks.