add mode7 font

+ can now inject custom theme styles

packages/react/src/themes/algoboy.js

@@ -12,6 +12,7 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: '#0f380f',
   light: true,
+  customStyle: '.cm-line { line-height: 1 }',
 };
 export default createTheme({
   theme: 'light',

packages/react/src/themes/teletext.js

@@ -8,7 +8,7 @@ let colorC = 'red';
 let colorD = '#f8fc55';
 
 export const settings = {
-  background: '#00000f',
+  background: '#000000',
   foreground: colorA, // whats that?
   caret: colorC,
   selection: colorD,
@@ -17,6 +17,7 @@ export const settings = {
   lineBackground: '#00000080',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
+  customStyle: '.cm-line { line-height: 1 }',
 };
 
 let punctuation = colorD;

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;