add mode7 font

+ can now inject custom theme styles

website/src/components/HeadCommon.astro

@@ -46,12 +46,14 @@ const base = BASE_URL;
 {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
 
 <script>
-  import { settings } from '../repl/themes.mjs';
+  import { settings, injectStyle } from '../repl/themes.mjs';
   import { settingsMap } from '../settings.mjs';
   import { listenKeys } from 'nanostores';
   const themeStyle = document.createElement('style');
   themeStyle.id = 'strudel-theme';
   document.head.append(themeStyle);
+
+  let resetThemeStyle;
   function activateTheme(name) {
     if (!settings[name]) {
       console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
@@ -70,6 +72,11 @@ const base = BASE_URL;
     } else {
       document.documentElement.classList.add('dark');
     }
+    resetThemeStyle?.();
+    resetThemeStyle = undefined;
+    if (themeSettings.customStyle) {
+      resetThemeStyle = injectStyle(themeSettings.customStyle);
+    }
   }
 
   activateTheme(settingsMap.get().theme);

website/src/repl/Footer.jsx

@@ -377,6 +377,7 @@ const fontFamilyOptions = {
   'FiraCode-SemiBold': 'FiraCode SemiBold',
   protracker3: 'protracker3',
   teletext: 'teletext',
+  mode7: 'mode7',
 };
 
 function SettingsTab({ scheduler }) {

website/src/repl/themes.mjs

@@ -475,3 +475,11 @@ function getCircularReplacer() {
 function stringifySafe(json) {
   return JSON.stringify(json, getCircularReplacer());
 }
+
+export function injectStyle(rule) {
+  const newStyle = document.createElement('style');
+  document.head.appendChild(newStyle);
+  const styleSheet = newStyle.sheet;
+  const ruleIndex = styleSheet.insertRule(rule, 0);
+  return () => styleSheet.deleteRule(ruleIndex);
+}

website/src/styles/index.css

@@ -34,6 +34,10 @@
   font-family: 'teletext';
   src: url('/fonts/teletext/EuropeanTeletext.ttf');
 }
+@font-face {
+  font-family: 'mode7';
+  src: url('/fonts/mode7/MODE7GX3.TTF');
+}
 
 .prose > h1:not(:first-child) {
   margin-top: 30px;