impr: optimise standalone pages (@fehmer)

frontend/src/404.html

@@ -63,6 +63,5 @@ <h1 class="text">
         <load src="html/pages/404.html" />
       </main>
     </div>
-    <link rel="stylesheet" href="/styles/standalone.scss" />
   </body>
 </html>

frontend/src/email-handler.html

@@ -14,7 +14,6 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta

frontend/src/privacy-policy.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta

frontend/src/security-policy.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta

frontend/src/styles/standalone.scss

@@ -1,5 +1,23 @@
 @import "balloon-css/balloon.min.css";
+@import "core.scss";
+
+@font-face {
+  font-family: Roboto Mono;
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(/webfonts/RobotoMono-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-family: Lexend Deca;
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url(/webfonts/LexendDeca-Regular.woff2) format("woff2");
+}
+
 :root {
+  --font: "Roboto Mono", monospace;
   --bg-color: #323437;
   --main-color: #e2b714;
   --caret-color: #e2b714;
@@ -11,3 +29,70 @@
   --colorful-error-color: #ca4754;
   --colorful-error-extra-color: #7e2a33;
 }
+
+header {
+  grid-template-areas: "logo menu";
+  line-height: 2.3rem;
+  font-size: 2.3rem;
+  /* text-align: center; */
+  // transition: 0.25s;
+  // padding: 0 5px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 1fr;
+  z-index: 3;
+  align-items: center;
+  gap: 0.5rem;
+  -webkit-user-select: none;
+  user-select: none;
+
+  #logo {
+    // margin-bottom: 0.6rem;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+    transition: none;
+    text-decoration: none;
+    color: var(--text-color);
+    padding: 0.35rem 0.25rem;
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+
+    .icon {
+      width: 2.5rem;
+      display: grid;
+      align-items: center;
+      background-color: transparent;
+      // margin-bottom: 0.15rem;
+      svg path {
+        transition: 0.25s;
+        fill: var(--main-color);
+      }
+    }
+    .text {
+      .top {
+        position: absolute;
+        left: 0.35em;
+        font-size: 0.325em;
+        line-height: 0.325em;
+        color: var(--sub-color);
+        transition:
+          color 0.125s,
+          opacity 0.125s;
+      }
+      position: relative;
+      font-size: 2rem;
+      line-height: 2rem;
+      font-family: "Lexend Deca", sans-serif;
+      transition: color 0.25s;
+      font-weight: unset;
+      margin-block-start: unset;
+      margin-block-end: unset;
+      margin-top: -0.23em;
+    }
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}

frontend/src/terms-of-service.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="styles/standalone.scss" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
-    <link rel="stylesheet" href="styles/index.scss" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta

frontend/vite-plugins/inject-preload.ts

@@ -0,0 +1,48 @@
+import { IndexHtmlTransformContext, Plugin } from "vite";
+// eslint-disable-next-line import/no-unresolved
+import UnpluginInjectPreload from "unplugin-inject-preload/vite";
+import { basename } from "node:path";
+export function injectPreload(): Plugin {
+  const base = UnpluginInjectPreload({
+    files: [
+      {
+        outputMatch: /css\/.*\.css$/,
+        attributes: {
+          as: "style",
+          type: "text/css",
+          rel: "preload",
+          crossorigin: true,
+        },
+      },
+      {
+        outputMatch: /.*\.woff2$/,
+        attributes: {
+          as: "font",
+          type: "font/woff2",
+          rel: "preload",
+          crossorigin: true,
+        },
+      },
+    ],
+    injectTo: "head-prepend",
+  }) as {
+    name: string;
+    vite: {
+      transformIndexHtml: {
+        handler: (html: string, ctx: IndexHtmlTransformContext) => string;
+      };
+    };
+  };
+
+  return {
+    name: base.name,
+    ...base.vite,
+    transformIndexHtml(html, ctx) {
+      //only add preload to the index.html file
+      if (basename(ctx.filename) !== "index.html") {
+        return html;
+      }
+      return base.vite.transformIndexHtml.handler(html, ctx);
+    },
+  };
+}

frontend/vite.config.ts

@@ -19,13 +19,12 @@ import { languageHashes } from "./vite-plugins/language-hashes";
 import { minifyJson } from "./vite-plugins/minify-json";
 import { versionFile } from "./vite-plugins/version-file";
 import { oxlintChecker } from "./vite-plugins/oxlint-checker";
+import { injectPreload } from "./vite-plugins/inject-preload";
 import Inspect from "vite-plugin-inspect";
 import { ViteMinifyPlugin } from "vite-plugin-minify";
 import { VitePWA } from "vite-plugin-pwa";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import replace from "vite-plugin-filter-replace";
-// eslint-disable-next-line import/no-unresolved
-import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 import { KnownFontName } from "@monkeytype/schemas/fonts";
 import solidPlugin from "vite-plugin-solid";
 import tailwindcss from "@tailwindcss/vite";
@@ -178,29 +177,7 @@ function getPlugins({
         },
       },
     ]),
-    UnpluginInjectPreload({
-      files: [
-        {
-          outputMatch: /css\/.*\.css$/,
-          attributes: {
-            as: "style",
-            type: "text/css",
-            rel: "preload",
-            crossorigin: true,
-          },
-        },
-        {
-          outputMatch: /.*\.woff2$/,
-          attributes: {
-            as: "font",
-            type: "font/woff2",
-            rel: "preload",
-            crossorigin: true,
-          },
-        },
-      ],
-      injectTo: "head-prepend",
-    }),
+    injectPreload(),
     minifyJson(),
   ];