dis: Rework styling and build procedure

internal/component/static/src/base/base.css

@@ -1,55 +0,0 @@
-/* This file is included globally into every frontend page */
-html {
-    line-height: 1.5;
-    font-family: Roboto;
-    font-size: 20px;
-    color: #1a1a1a;
-    background-color: #fdfdfd;
-}
-body {
-    margin: 0 auto;
-    max-width: 36em;
-    padding-left: 50px;
-    padding-right: 50px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    hyphens: auto;
-    overflow-wrap: break-word;
-    text-rendering: optimizeLegibility;
-    font-kerning: normal;
-}
-
-@media (max-width: 600px) {
-    body {
-        font-size: 0.9em;
-        padding: 1em;
-    }
-}
-
-h1 {
-    margin-top: 1.4em;
-}
-
-h2,h3 {
-    margin-top: 1em;    
-}
-
-code {
-    font-family: Roboto Mono;
-    color: blue;
-}
-
-p {
-    margin: 1em 0;
-    text-align: justify;
-}
-
-a, a:visited {
-    color: #1a1a1a;
-}
-
-footer {
-    border-top: 1px solid #1a1a1a;
-    font-size: small;
-    text-align: center;
-}

internal/component/static/src/base/base.ts

@@ -1 +0,0 @@
-// This file is included globally into every distillery frontend page

internal/component/static/src/base/index.css

@@ -0,0 +1,34 @@
+body {
+    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+header, main, footer {
+    margin: 2em;
+}
+
+.padding {
+    padding: 1em;
+}
+
+.overflow {
+    overflow-x:auto;
+}
+
+.overflow table {
+    width: 100%;
+}
+
+.overflow table td:not(:last-child), 
+.overflow table th:not(:last-child) {
+    width:1px;
+    text-align:left;
+    white-space: nowrap;
+}
+.overflow table td:last-child, 
+.overflow table th:last-child {
+    white-space: nowrap;
+}
+
+.hspace {
+    display: block;
+    height: 2em;
+}

internal/component/static/src/base/index.ts

@@ -0,0 +1,4 @@
+import "purecss/build/pure.css"
+import "purecss/build/grids-responsive.css"
+
+import "./index.css"

internal/component/static/src/control/index.ts

@@ -1,5 +0,0 @@
-import '../global.ts';
-import './index.css';
-
-import './highlight.ts';
-import './remote.ts';

internal/component/static/src/control/remote.ts

@@ -1,62 +0,0 @@
-import connectSocket from '../socket/socket';
-
-const elements = document.getElementsByClassName('remote-action')
-Array.from(elements).forEach((element) => {
-    const action = element.getAttribute('data-action') as string;
-    const param = element.getAttribute('data-param') as string | undefined;
-    const target = document.querySelector(element.getAttribute('data-target')!) as HTMLElement;
-    const bufferSize = (function() {
-        const number = parseInt(element.getAttribute('data-buffer') ?? "", 10) ?? 0;
-        return (isFinite(number) && number > 0) ? number : 0; 
-    })()
-
-    let running = false
-    element.addEventListener('click', function(ev) {
-        ev.preventDefault();
-        
-        // already running
-        if (running) return
-
-        running = true
-        element.setAttribute('disabled', 'disabled');
-        const close = function() {
-            element.removeAttribute('disabled');
-            running = false;
-        }
-
-        target.innerText = "";
-
-        const buffer: Array<string> = [];
-        const println = function(line: string) {
-            if(bufferSize === 0) {
-                target.innerText += line + "\n";
-                return;
-            }
-            
-            buffer.push(line);
-            if(buffer.length > bufferSize) {
-                buffer.splice(0, buffer.length - bufferSize)
-            }
-            target.innerText = buffer.join("\n");
-        }
-        
-        println("Connecting ...")
-
-        // connect to the socket and send the action
-        connectSocket((socket) => {
-            println("Connected")
-            socket.send(action);
-            if (typeof param === 'string') {
-                socket.send(param);
-            }
-        }, (data) => {
-            println(data);
-        }).then(() => {
-            println("Connection closed.\n")
-            close();
-        }).catch(() => {
-            println("Connection errored.\n")
-            close();
-        });
-    });
-})

internal/component/static/src/entry/control/index.css

@@ -1,5 +1,3 @@
-@import '../global.css';
-
 .wisski {
     padding-left: 5px;
 }
@@ -11,7 +9,3 @@
 .wisski.stopped {
     background-color: #ff7a7a;
 }
-
-.remote-action-out {
-    font-size: small;
-}

internal/component/static/src/entry/control/index.html

@@ -0,0 +1 @@
+<script type="module" src="./index.ts"></script>

internal/component/static/src/entry/control/index.ts

@@ -0,0 +1,5 @@
+import "~/src/base/index"
+
+import "./index.css"
+import "~/src/lib/remote"
+import "~/src/lib/highlight"

internal/component/static/src/entry/control/instance.html

@@ -0,0 +1 @@
+<script type="module" src="./index.ts"></script>

internal/component/static/src/entry/home/index.html

@@ -0,0 +1 @@
+<script type="module" src="./index.ts"></script>

internal/component/static/src/entry/home/index.ts

@@ -0,0 +1 @@
+import "~/src/base/index"

internal/component/static/src/global.css

@@ -1,2 +0,0 @@
-@import './base/base.css';
-@import './autolink/autolink.css';

internal/component/static/src/global.ts

@@ -1,2 +0,0 @@
-import './base/base.ts';
-import './autolink/autolink.ts';

internal/component/static/src/home/index.css

@@ -1 +0,0 @@
-@import '../global.css';

internal/component/static/src/home/index.ts

@@ -1,2 +0,0 @@
-import '../global.ts';
-import './index.css';

internal/component/static/src/lib/autolink/index.ts

@@ -1,3 +1,5 @@
+import "./index.css"
+
 /** Adapted from http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/ */
 const anchorForId = (id) => {
     const anchor = document.createElement("a")

internal/component/static/src/lib/highlight/index.ts

@@ -1,7 +1,7 @@
-
+import dayjs from "dayjs"
 const types: Record<string, (element: HTMLElement) => HTMLElement | string> = {
     "date": (element) => {
-        return (new Date(element.innerText)).toISOString()
+        return dayjs(element.innerText).format('YYYY-MM-DD HH:mm:ss ([UTC]Z)')
     },
     "path": (element) => {
         const text = element.innerText.split("/");

internal/component/static/src/lib/remote/index.css

@@ -0,0 +1,42 @@
+.modal-terminal {
+    width: 66vw;
+    height: 66vh;
+
+    position: fixed;
+    left: 17vw;
+    top: 17vh;
+
+    background-color: white;
+
+    background-clip: padding-box;
+    -webkit-background-clip: padding-box;
+
+    border-left: 17vw solid rgba(0, 0, 0, 0.8);
+    border-right: 17vw solid rgba(0, 0, 0, 0.8);
+    margin-left: -17vw;
+    margin-right: -17vw;
+
+    border-top: 17vh solid rgba(0, 0, 0, 0.8);
+    border-bottom: 17vh solid rgba(0, 0, 0, 0.8);
+    margin-top: -17vh;
+    margin-bottom: -17vh;
+
+    overflow: auto;
+
+    z-index: 1000;
+}
+
+.modal-terminal button {
+    position: fixed;
+    top: 17vh;
+    right: 17vw;
+
+    z-index: 1001;
+}
+
+.modal-terminal pre,
+.modal-terminal button
+{
+    margin: 5px;
+}
+

internal/component/static/src/lib/remote/index.ts

@@ -0,0 +1,112 @@
+import "./index.css"
+import connectSocket from './socket';
+
+type Println = ((line: string, flush?: boolean) => void) & {
+    paintedFrames: number;
+    missedFrames: number;
+}
+
+/**
+ * makeTextBuffer returns a println() function that efficiently writes text into target, and keeps at most size elements in the traceback.
+ * scrollContainer is used to scroll on every painted update.
+ */
+function makeTextBuffer(target: HTMLElement, scrollContainer: HTMLElement, size: number): Println {
+    let lastAnimationFrame: number | null = null; // last scheduled animation frame
+
+    const buffer: Array<string> = []; // the internal buffer of lines
+    const paint = () => {
+        println.paintedFrames++
+        target.innerText = buffer.join("\n")
+        scrollContainer.scrollTop = scrollContainer.scrollHeight
+        lastAnimationFrame = null
+    }
+
+    const println = (line: string, flush?: boolean) => {
+        // add the line 
+        buffer.push(line)
+        if (size !== 0 && buffer.length > size) {
+            buffer.splice(0, buffer.length - size)
+        }
+
+        // and update the browser in the next animation frame
+        if (lastAnimationFrame !== null) {
+            println.missedFrames++
+            window.cancelAnimationFrame(lastAnimationFrame)
+        }
+
+        // force a repaint!
+        if(flush) return paint(); 
+
+        // schedule an animation frame
+        lastAnimationFrame = window.requestAnimationFrame(paint);
+    }
+    println.paintedFrames = 0;
+    println.missedFrames = 0;
+
+    return println;
+}
+
+const elements = document.getElementsByClassName('remote-action')
+Array.from(elements).forEach((element) => {
+    const action = element.getAttribute('data-action') as string;
+    const param = element.getAttribute('data-param') as string | undefined;
+    const bufferSize = (function () {
+        const number = parseInt(element.getAttribute('data-buffer') ?? "", 10) ?? 0;
+        return (isFinite(number) && number > 0) ? number : 0;
+    })()
+
+    element.addEventListener('click', function (ev) {
+        ev.preventDefault();
+
+        // create a modal dialog and append it to the body
+        const modal = document.createElement("div")
+        modal.className = "modal-terminal"
+        document.body.append(modal)
+
+        // create a <pre> to write stuff into
+        const target = document.createElement("pre")
+        const println = makeTextBuffer(target, modal, bufferSize)
+        modal.append(target)
+
+        
+        // create a button to eventually close everything
+        const button = document.createElement("button")
+        button.className = "pure-button"
+        button.append("Close")
+        button.addEventListener('click', function (event) {
+            event.preventDefault();
+            modal.parentNode?.removeChild(modal);
+        })
+
+        // when closing, add a button to the modal!
+        let didClose = false
+        const close = function () {
+            if (didClose) return
+            didClose = true
+
+            modal.append(button)
+            // DEBUG: print terminal stats!
+            // const quota = (println.paintedFrames / (println.missedFrames + println.paintedFrames)) * 100
+            // println(`Terminal: painted=${println.paintedFrames} missed=${println.missedFrames} (${quota}%)`, true)
+        }
+
+        println("Connecting ...", true)
+
+        // connect to the socket and send the action
+        connectSocket((socket) => {
+            println("Connected", true)
+            socket.send(action);
+            if (typeof param === 'string') {
+                socket.send(param);
+            }
+        }, (data) => {
+            println(data);
+        }).then(() => {
+            println("Connection closed.", true)
+            close();
+        }).catch(() => {
+            println("Connection errored.", true)
+            close();
+        });
+    });
+})