feat(css): bundle CSS with JS and support themes (#24)

mkrl · web-flow · commit bc02e99a8fc3 · 2021-10-26T17:24:24.000+02:00
* feat(styling): bundle css with js

* fix(styling): add css variables with fallback

* chore(docs): add interactive styling examples

* chore(docs): remove css section from the docs

* chore(docs): add docs on custom styling
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -31,6 +31,13 @@ Contributing your first bit of code is simple:
 5. Push changes to your fork
 6. Open a pull request against `master` branch
 
+#### Make CSS changes
+
+We use a very simple CSS build system to ship raw CSS with the bundle.
+If you want to make visual changes to how the terminal looks, edit `src/ttty.css` and then run `npm run build:css` to apply your changes.
+
+If you want to edit the preview website look, head over to `preview/index.css` (no extra steps are nessesary). Some critical CSS can also be found in `index.html`, inlined for better FCP.
+
 #### Styleguides
 
 We use [standard js](https://standardjs.com/) (with minor tweaks) as our style set.
diff --git a/README.md b/README.md
@@ -43,11 +43,6 @@ const terminal = initTerminal({ /* settings */ })
 ttty.initTerminal({ /* settings */ })
 ```
 
-Don't forget to include / import the required css:
-```html
-<link rel="stylesheet" href="https://unpkg.com/ttty/dist/ttty.css">
-```
-
 Initialize with parameters:
 
 ```js
@@ -144,6 +139,20 @@ const term = document.getElementById('terminal');
 term.addEventListener('onCommand', e => console.log("known command executed!"));
 ```
 
+## Custom styling
+
+You can customize the look defining custom CSS variables. If you have multiple instances, you can even have each instance in its' own style!
+
+| Variable  | Description
+| ------------- | ------------- |
+| `--terminal-bg-color`  | Background color |
+| `--terminal-fg-color`  | Text color |
+| `--terminal-font`  | Terminal font-family |
+| `--terminal-accent-color`  | Accent color |
+| `--terminal-error-color`  | Error color |
+
 ## Browser compatibility
 
 ttty is built and distributed with ES6 in mind (including the minified package). You can always transpile & bundle it targeting your browser set of choice.
+
+Browsers that do not support CSS variables (IE < 11) might not be able to make use of custom themes. In order to use ttty with older browsers please rebuild this with custom properties removed.
diff --git a/index.html b/index.html
@@ -7,15 +7,26 @@
         <meta name="description" content="A lightweight (1kb) browser terminal powered by TypeScript" />
         <meta name="theme-color" content="#000000">
         <link rel="icon" href="favicon.svg">
-        <link rel="stylesheet" href="/ttty.css">
+        <style>
+            body {
+                height: 100vh;
+                margin: 0;
+                display: flex;
+            }
+            .terminal, aside {
+                width: 500px;
+                flex-shrink: 0;
+                background-color: black;
+            }
+        </style>
     </head>
 <body>
     <aside id="terminal">
     </aside>
     <main>
         <h1>ttty</h1>
         <hr/>
-        <h3>A tiny browser terminal "emulator"</h3>
+        <h2>A tiny browser terminal "emulator"</h2>
         <article>
             <p>
                 Unlike <a href="https://github.com/vercel/hyper" target="_blank" rel="noreferrer noopener">hyper</a>
@@ -25,15 +36,16 @@ <h3>A tiny browser terminal "emulator"</h3>
             <p>
                 Available on NPM or as a "drop-in" ES module / js file.
             </p>
-            <h4>
+            <h3>
                 Featuring:
-            </h4>
+            </h3>
             <ul>
                 <li>Tiny, dependency-free and built with modern JS</li>
                 <li>Easy-to-add custom commands</li>
+                <li data-exec="color random">Customizable look</li>
                 <li>Events</li>
                 <li>Command history</li>
-                <li data-exec="help">A help message</li>
+                <li data-exec="help">A built-in help message</li>
                 <li data-exec="multiply">Command arguments with validation</li>
                 <li data-exec="start">Interruptable "foreground process" imitation</li>
                 <li>Small but powerful API</li>
diff --git a/package.json b/package.json
@@ -18,9 +18,10 @@
   "sideEffects": false,
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build --config lib.config.js && npm run emit && rm dist/favicon.ico",
-    "build:site": "tsc && vite build --config site.config.js",
+    "build": "npm run build:css && tsc && vite build --config lib.config.js && npm run emit && rm dist/favicon.ico",
+    "build:site": "npm run build:css && tsc && vite build --config site.config.js",
     "emit": "tsc --declaration --module esnext --moduleResolution node --target esnext --outDir dist src/index.ts",
+    "build:css": "node scripts/buildCss.js",
     "typecheck": "tsc --noEmit --incremental false",
     "lint": "eslint \"{src,preview}/**/*.{ts,tsx}\""
   },
diff --git a/preview/colors.ts b/preview/colors.ts
@@ -0,0 +1,94 @@
+export const COLOR_SCHEMES = ['default', 'solarized', 'light', 'ubuntu', 'classic', 'borland', 'gotham', 'horizon', 'icorange', 'lavandula', 'lunaria', 'amber']
+
+const COLOR_MAP: Record<string, Record<string, string>> = {
+  default: {
+    '--terminal-bg-color': 'black',
+    '--terminal-fg-color': 'white',
+    '--terminal-accent-color': '#ffff7d',
+    '--terminal-error-color': '#cc1010'
+  },
+  solarized: {
+    '--terminal-bg-color': '#073642',
+    '--terminal-fg-color': '#fdf6e3',
+    '--terminal-accent-color': '#b58900',
+    '--terminal-error-color': '#dc322f'
+  },
+  light: {
+    '--terminal-bg-color': 'white',
+    '--terminal-fg-color': 'black',
+    '--terminal-accent-color': '#b58900',
+    '--terminal-error-color': '#9f211f'
+  },
+  ubuntu: {
+    '--terminal-bg-color': '#300B23',
+    '--terminal-fg-color': 'white',
+    '--terminal-accent-color': '#89DE49',
+    '--terminal-error-color': '#E0232C'
+  },
+  borland: {
+    '--terminal-bg-color': '#0015a0',
+    '--terminal-fg-color': '#ffff4e',
+    '--terminal-accent-color': '#a8ff60',
+    '--terminal-error-color': '#ff6c60'
+  },
+  gotham: {
+    '--terminal-bg-color': '#0a0f14',
+    '--terminal-fg-color': '#98d1ce',
+    '--terminal-accent-color': '#26a98b',
+    '--terminal-error-color': '#c33027'
+  },
+  horizon: {
+    '--terminal-bg-color': '#fdf0ed',
+    '--terminal-fg-color': '#1c1e26',
+    '--terminal-accent-color': '#1eb980',
+    '--terminal-error-color': '#da103f'
+  },
+  icorange: {
+    '--terminal-bg-color': '#262626',
+    '--terminal-fg-color': '#ffcb83',
+    '--terminal-accent-color': '#a4a900',
+    '--terminal-error-color': '#c13900'
+  },
+  lavandula: {
+    '--terminal-bg-color': '#050014',
+    '--terminal-fg-color': '#736e7d',
+    '--terminal-accent-color': '#337e6f',
+    '--terminal-error-color': '#7d1625'
+  },
+  lunaria: {
+    '--terminal-bg-color': '#ebe4e1',
+    '--terminal-fg-color': '#484646',
+    '--terminal-accent-color': '#497d46',
+    '--terminal-error-color': '#783c1f'
+  },
+  amber: {
+    '--terminal-bg-color': '#2b1900',
+    '--terminal-fg-color': '#ff9400',
+    '--terminal-accent-color': '#ff9400',
+    '--terminal-error-color': '#ff9400'
+  },
+  classic: {
+    '--terminal-bg-color': 'black',
+    '--terminal-fg-color': '#87DE47',
+    '--terminal-accent-color': '#87DE47',
+    '--terminal-error-color': '#ED262E'
+  }
+}
+
+let currentScheme = 'default'
+
+export const setColor = (color: string) => {
+  if (COLOR_SCHEMES.includes(color) || color === 'random') {
+    const colorSchemes = COLOR_SCHEMES.filter(c => c !== currentScheme)
+    const endColor = color === 'random' ? colorSchemes[Math.floor(Math.random() * colorSchemes.length)] : color
+    const scheme = COLOR_MAP[endColor]
+    Object.keys(scheme).forEach(key => {
+      document.documentElement.style
+        .setProperty(key, scheme[key])
+    })
+    currentScheme = endColor
+    return `Color scheme set to ${endColor}`
+  } else {
+    return `Color scheme "${color}" was not found. <br/><br/>Available schemes: ${[...COLOR_SCHEMES, 'random'].join(', ')}.`
+  }
+}
diff --git a/preview/index.css b/preview/index.css
@@ -1,18 +1,13 @@
-body {
-    height: 100vh;
-    margin: 0;
-    display: flex;
-}
-.terminal, aside {
-    width: 500px;
-    flex-shrink: 0;
-    background-color: black;
-}
 main {
     padding: 2rem;
     font-family: "Helvetica", sans-serif;
     max-width: 800px;
 }
+
+aside {
+    box-shadow: 8px 0 20px 0 #00000021;
+}
+
 h1,h3 { margin-top: 0 }
 hr {
     border: 0;
@@ -24,7 +19,7 @@ h1 {
     margin-bottom: 1rem;
     font-family: monospace;
 }
-h3 {
+h2 {
     color: #979797;
     font-size: 1.5rem;
 }
@@ -51,4 +46,7 @@ li[data-exec] {
         width: 100%;
         height: 30%;
     }
+    aside {
+        box-shadow: none;
+    }
 }
diff --git a/preview/main.ts b/preview/main.ts
@@ -1,5 +1,6 @@
 import initTerminal from '../src/api/init'
 import './index.css'
+import { setColor } from './colors'
 
 const docArea = document.querySelector('main')
 
@@ -9,17 +10,17 @@ const terminal = initTerminal({
      * Documentation:  <a href="https://github.com/mkrl/ttty/blob/master/README.md" target="_blank">https://github.com/mkrl/ttty</a><br/><br/>`,
   prompt: 'ttty:~$ ',
   commands: {
+    test: {
+      name: 'test',
+      description: 'a test command with no arguments that just prints some text',
+      func: ({ type }) => { type('The quick brown fox jumps over the lazy dog', 20) }
+    },
     echo: {
       name: 'echo',
-      description: 'a test command with one echo arg',
+      description: 'echo whatever you pass as an argument',
       argDescriptions: ['a string to be echoed in console'],
       func: ({ print }, argument) => { print(argument) }
     },
-    test: {
-      name: 'test',
-      description: 'A test command with no args that just prints some text',
-      func: ({ type }) => { type('foo') }
-    },
     multiply: {
       name: 'multiply',
       description: 'multiply two numbers',
@@ -39,6 +40,19 @@ const terminal = initTerminal({
         })
       }
     },
+    color: {
+      name: 'color',
+      description: 'set a terminal color scheme',
+      argDescriptions: ['color scheme'],
+      func: ({ print }, color) => {
+        print(setColor(color))
+      }
+    },
+    clear: {
+      name: 'clear',
+      description: 'clear the history',
+      func: ({ commandContainer }) => { commandContainer.innerHTML = '' }
+    },
     github: {
       name: 'github',
       description: 'gets a Github user\'s name and number of public repositories',
diff --git a/public/ttty.css b/public/ttty.css
diff --git a/scripts/buildCss.js b/scripts/buildCss.js
@@ -0,0 +1,32 @@
+const { exec } = require('child_process')
+const { writeFileSync } = require('fs')
+
+const INPUT_FILE = './src/ttty.css'
+const OUTPUT_FILE = './src/helpers/style.generated.ts'
+
+const NOTICE =
+  `/*
+  THIS FILE WAS AUTOMATICALLY GENERATED
+  Do not modify it directly. To make style changes please go to ${INPUT_FILE}
+*/`
+
+const getFile = style =>
+  `${NOTICE}
+const TERMINAL_STYLE =
+  '${style}'
+
+export default TERMINAL_STYLE
+`
+
+// Minifies one single css file and compiles it into a style.generated.ts module
+exec(`./node_modules/.bin/esbuild ${INPUT_FILE} --minify`, (error, stdout, stderr) => {
+  if (error) {
+    console.log(`ERR: ${error.message}`)
+    return
+  }
+  if (stderr) {
+    console.log(`ERR: ${stderr}`)
+    return
+  }
+  writeFileSync(OUTPUT_FILE, getFile(stdout.trim()))
+})
diff --git a/src/api/init.ts b/src/api/init.ts
@@ -7,6 +7,7 @@ import { startProcess, stopProcess } from './process'
 import { attachKeyboardListener } from '../helpers/keyboard'
 import { dispatchEvent, TerminalEvent } from '../helpers/events'
 import createHelp from '../helpers/help'
+import loadStyle from '../helpers/loadStyle'
 
 const initTerminal = ({
   host,
@@ -24,6 +25,7 @@ const initTerminal = ({
     enableHelp,
     commands
   }
+  loadStyle()
   const { commandContainer, input, inputContainer } = buildTree(host, prompt)
 
   const terminal: TerminalInstance = {
diff --git a/src/helpers/loadStyle.ts b/src/helpers/loadStyle.ts
diff --git a/src/helpers/style.generated.ts b/src/helpers/style.generated.ts
diff --git a/src/ttty.css b/src/ttty.css
