Refactor server and templates package

internal/dis/component/server/assets/assets.go

@@ -0,0 +1,48 @@
+package assets
+
+import (
+	"html/template"
+)
+
+// Assets represents a group of assets to be included inside a template.
+//
+// Assets are generated using the 'build.mjs' script.
+// The script is called using 'go:generate', which stores variables in the form of 'Assets{{Name}}' inside this package.
+//
+// The build script roughly works as follows:
+// - Delete any previously generated distribution directory.
+// - Bundle the entrypoint sources under 'src/entry/{{Name}}/index.{ts,css}' together with the base './src/base/index.{ts,css}'
+// - Store the output inside the 'dist' directory
+// - Generate new constants of the form Assets{{Name}}
+//
+// Each asset group should be registered as a parameter to the 'go:generate' line.
+type Assets struct {
+	Scripts string // <script> tags inserted by the asset
+	Styles  string // <link> tags inserted by the asset
+}
+
+//go:generate node build.mjs Default User Admin
+
+// MustParse parses a new template from the given source
+// and calls [RegisterAssoc] on it.
+func (assets *Assets) MustParse(t *template.Template, value string) *template.Template {
+	t = template.Must(t.Parse(value))
+	assets.RegisterAssoc(t)
+	return t
+}
+
+// MustParseShared is like [MustParse], but creates a new SharedTemplate instead
+func (assets *Assets) MustParseShared(name string, value string) *template.Template {
+	return assets.MustParse(NewSharedTemplate(name), value)
+}
+
+// RegisterAssoc registers two new associated templates with t.
+//
+// The template "scripts" will render all script tags required.
+// The template "styles" will render all style tags required.
+//
+// If either template already exists, it will be overwritten.
+func (assets *Assets) RegisterAssoc(t *template.Template) {
+	t.New("scripts").Parse(assets.Scripts)
+	t.New("styles").Parse(assets.Styles)
+}

internal/dis/component/server/assets/assets_dist.go

@@ -0,0 +1,29 @@
+package assets
+
+import _ "embed"
+
+// This file was automatically generated. Do not edit.
+
+//go:embed "assets_disclaimer.txt"
+var Disclaimer string
+
+// Public holds the path to the public route 
+const Public = "/this-is-fine/"
+
+// AssetsDefault contains assets for the 'Default' entrypoint.
+var AssetsDefault = Assets{
+	Scripts: `<script type="module" src="/this-is-fine/Default.38d394c2.js"></script><script src="/this-is-fine/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/this-is-fine/Default.38d394c2.js"></script><script src="/this-is-fine/Default.38d394c2.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/this-is-fine/Default.db26a303.css"><link rel="stylesheet" href="/this-is-fine/Default.f9675eae.css">`,	
+}
+
+// AssetsUser contains assets for the 'User' entrypoint.
+var AssetsUser = Assets{
+	Scripts: `<script type="module" src="/this-is-fine/Default.38d394c2.js"></script><script src="/this-is-fine/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/this-is-fine/User.e0367d79.js"></script><script src="/this-is-fine/User.b2f9a57c.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/this-is-fine/Default.db26a303.css"><link rel="stylesheet" href="/this-is-fine/User.68febbf8.css"><link rel="stylesheet" href="/this-is-fine/User.840de3b4.css">`,	
+}
+
+// AssetsAdmin contains assets for the 'Admin' entrypoint.
+var AssetsAdmin = Assets{
+	Scripts: `<script nomodule="" defer src="/this-is-fine/User.b2f9a57c.js"></script><script type="module" src="/this-is-fine/User.e0367d79.js"></script><script type="module" src="/this-is-fine/Default.38d394c2.js"></script><script src="/this-is-fine/Default.38d394c2.js" nomodule="" defer></script><script type="module" src="/this-is-fine/Admin.1a380f6f.js"></script><script src="/this-is-fine/Admin.cb58d290.js" nomodule="" defer></script>`,
+	Styles:  `<link rel="stylesheet" href="/this-is-fine/Default.db26a303.css"><link rel="stylesheet" href="/this-is-fine/Admin.6d59e220.css"><link rel="stylesheet" href="/this-is-fine/User.840de3b4.css"><link rel="stylesheet" href="/this-is-fine/User.68febbf8.css"><link rel="stylesheet" href="/this-is-fine/Admin.6d2ae968.css">`,	
+}

internal/dis/component/server/assets/build.mjs

@@ -0,0 +1,164 @@
+import { Parcel } from "@parcel/core"
+import { mkdir, rm, writeFile, readFile, unlink, rmdir, } from "fs/promises"
+import { join } from "path"
+import { parse as parseHTML } from 'node-html-parser';
+import { spawnSync } from 'child_process'
+
+//
+// PARAMETERS
+//
+
+const ENTRYPOINTS = process.argv.slice(2)
+const ENTRY_DIR = join('.', '.entry-cache') // directory to place entries into
+const DIST_DIR = join('.', 'dist')
+const PUBLIC_DIR = '/this-is-fine/'
+
+const DEST_PACKAGE = process.env.GOPACKAGE ?? 'static'
+const DEST_DISCLAIMER = (() => {
+    const source = (process.env.GOFILE ?? 'assets.go')
+    const base = source.substring(0, source.length - '.go'.length)
+    return base + '_disclaimer.txt'
+})()
+const DEST_FILE = (() => {
+    const source = (process.env.GOFILE ?? 'assets.go')
+    const base = source.substring(0, source.length - '.go'.length)
+    return base + '_dist.go'
+})()
+
+//
+// PREPARE DIRECTORIES
+//
+
+process.stdout.write('Preparing directories ...')
+await Promise.all([
+    mkdir(ENTRY_DIR, { recursive: true }),
+    rm(DIST_DIR, { recursive: true, force: true })
+])
+console.log(' Done.')
+
+
+//
+// Write the disclaimer
+//
+
+process.stdout.write('Generating legal disclaimer ...')
+
+const disclaimer = await new Promise((r, e) => {
+    var child = spawnSync("yarn", ["licenses", "generate-disclaimer"], { encoding : 'utf8' });
+    if (child.error) {
+        e(child.stderr)
+        return
+    }
+
+    r(child.stdout)
+});
+
+console.log(' Done.')
+
+
+process.stdout.write(`Writing ${DEST_DISCLAIMER} ...`)
+await writeFile(DEST_DISCLAIMER, disclaimer)
+console.log(' Done.')
+
+
+//
+// WRITE ENTRY POINTS
+//
+
+process.stdout.write('Collecting entry points ')
+const entries = await Promise.all(ENTRYPOINTS.map(async (name) => {
+    const entry = {
+        'name': name,
+        'bundleName': name + '.html',
+        'src': join(ENTRY_DIR, name + '.html'),
+    }
+
+    const content = `
+<script type='module' src='../src/base/index.ts'></script>
+<script type='module' src='../src/entry/${name}/index.ts'></script>
+<link rel='stylesheet' href='../src/entry/${name}/index.css'>
+`;
+    await writeFile(entry.src, content)
+
+    process.stdout.write('.')
+    return entry;
+}))
+console.log(' Done.')
+
+//
+// BUNDLEING
+//
+
+process.stdout.write('Bundleing assets ...')
+const bundler = new Parcel({
+    entries: entries.map(e => e.src),
+    defaultConfig: '@parcel/config-default',
+    shouldDisableCache: true,
+    shouldContentHash: true,
+    defaultTargetOptions: {
+        shouldOptimize: true,
+        shouldScopeHoist: true,
+        sourceMaps: false,
+        distDir: DIST_DIR,
+        publicUrl: PUBLIC_DIR,
+        engines: {
+            browsers: "defaults",
+        }
+    }
+});
+const { bundleGraph } = await bundler.run()
+console.log(' Done.')
+
+//
+// FIND ASSETS IN OUTPUT
+//
+
+process.stdout.write('Find Assets in Output ')
+const bundles = bundleGraph.getBundles()
+const assets = await Promise.all(entries.map(async (entry) => {
+    const mainBundle = bundles.find(b => b.name === entry.bundleName)
+    if (mainBundle === undefined) throw new Error('Unable to find bundle for ' + entry.name)
+
+    // read, then delete the generated output file
+    const { filePath } = mainBundle
+    const html = parseHTML(await readFile(filePath))
+    await unlink(filePath)
+
+    const scripts = html.querySelectorAll('script').map(script => script.outerHTML).join('')
+    const links = html.querySelectorAll('link').map(link => link.outerHTML).join('')
+
+    process.stdout.write('.')
+    return { ...entry, scripts, links }
+}))
+console.log(' Done.')
+
+//
+// GENERATE GO
+//
+
+process.stdout.write(`Writing ${DEST_FILE} ...`)
+const goAssets = assets.map(({ name, scripts, links }) => {
+    return `
+// Assets${name} contains assets for the '${name}' entrypoint.
+var Assets${name} = Assets{
+\tScripts: \`${scripts}\`,
+\tStyles:  \`${links}\`,\t
+}`.trim()
+}).join('\n\n')
+const goSource = `package ${DEST_PACKAGE}
+
+import _ "embed"
+
+// This file was automatically generated. Do not edit.
+
+//go:embed ${JSON.stringify(DEST_DISCLAIMER)}
+var Disclaimer string
+
+// Public holds the path to the public route 
+const Public = ${JSON.stringify(PUBLIC_DIR)}
+
+${goAssets}
+`;
+
+await writeFile(DEST_FILE, goSource)
+console.log(' Done.')

internal/dis/component/server/assets/dist/Admin.6d2ae968.css

@@ -0,0 +1 @@
+.wisski{padding:1em}.wisski h3{padding:0}.wisski a.pure-button{float:right;position:relative;bottom:1em}.wisski.running{background-color:#9ada07}.wisski.stopped{background-color:#ff7a7a}

internal/dis/component/server/assets/dist/Admin.6d59e220.css

@@ -0,0 +1 @@
+.modal-terminal{width:66vw;height:66vh;background-color:#fff;background-clip:padding-box;-webkit-background-clip:padding-box;z-index:1000;border:17vh solid #000c;border-width:17vh 17vw;margin:-17vh -17vw;position:fixed;top:17vh;left:17vw;overflow:auto}.modal-terminal button{z-index:1001;position:fixed;top:17vh;right:17vw}.modal-terminal pre,.modal-terminal button{margin:5px}

internal/dis/component/server/assets/dist/Default.f9675eae.css

@@ -0,0 +1 @@
+a.wisskilink{color:#00f!important}

internal/dis/component/server/assets/dist/User.68febbf8.css

@@ -0,0 +1 @@
+.copy{-webkit-user-select:all;user-select:all}

internal/dis/component/server/assets/dist/User.840de3b4.css

@@ -0,0 +1 @@
+textarea#key{width:50%;height:10em;resize:both}

internal/dis/component/server/assets/dist/User.b2f9a57c.js

@@ -0,0 +1 @@
+!function(){var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r={},n={},o=e.parcelRequireafa4;null==o&&((o=function(e){if(e in r)return r[e].exports;if(e in n){var o=n[e];delete n[e];var t={id:e,exports:{}};return r[e]=t,o.call(t.exports,t,t.exports),t.exports}var i=new Error("Cannot find module '"+e+"'");throw i.code="MODULE_NOT_FOUND",i}).register=function(e,r){n[e]=r},e.parcelRequireafa4=o),o.register("kEAtK",(function(e,r){o("15EWx")})),o.register("15EWx",(function(e,r){document.querySelectorAll(".copy").forEach((e=>{e.addEventListener("click",(()=>{navigator.clipboard&&navigator.clipboard.writeText(e.innerText)}))}))})),o("kEAtK")}();

internal/dis/component/server/assets/dist/User.e0367d79.js

@@ -0,0 +1 @@
+var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},r={},n={},o=e.parcelRequireafa4;null==o&&((o=function(e){if(e in r)return r[e].exports;if(e in n){var o=n[e];delete n[e];var i={id:e,exports:{}};return r[e]=i,o.call(i.exports,i,i.exports),i.exports}var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}).register=function(e,r){n[e]=r},e.parcelRequireafa4=o),o.register("gkpdw",(function(e,r){o("hZNgY")})),o.register("hZNgY",(function(e,r){document.querySelectorAll(".copy").forEach((e=>{e.addEventListener("click",(()=>{navigator.clipboard&&navigator.clipboard.writeText(e.innerText)}))}))})),o("gkpdw");

internal/dis/component/server/assets/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "wisski-distillery-frontend",
+  "version": "1.0.0",
+  "license": "AGPL-3.0-only",
+  "private": true,
+  "dependencies": {
+    "dayjs": "^1.11.5",
+    "latex.css": "^1.8.0",
+    "node-html-parser": "^6.1.1",
+    "parcel": "^2.7.0",
+    "purecss": "^2.1.0"
+  }
+}

internal/dis/component/server/assets/src/base/index.css

@@ -0,0 +1,123 @@
+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;
+}
+
+nav.pure-menu, nav.breadcrumbs {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid black;
+}
+
+nav.breadcrumbs {
+    padding-left: 1em;
+    font-size: small;
+}
+
+nav.breadcrumbs a:not(:last-child)::after {
+    cursor: default;
+    content: " > ";
+    color: black;
+}
+nav.breadcrumbs a {
+    text-decoration: none;
+    color: blue !important;
+}
+nav.breadcrumbs a.active {
+    font-weight: bold;
+}
+
+footer {
+    font-size: small;
+    border-top: 1px solid black;
+    padding-top: 1em;
+}
+
+footer a {
+    color: blue !important;
+}
+
+time {
+    font-style: italic;
+}
+
+.padding {
+    padding: 1em;
+}
+
+.overflow {
+    overflow-x: auto;
+}
+
+.overflow table {
+    width: 100%;
+}
+
+.overflow table td,
+.overflow table th {
+    padding: .5em .5em;
+}
+
+.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: 1em;
+}
+.pure-form-group {
+    display: inline;
+}
+
+.pure-button-action {
+    background-color: rgb(66, 184, 221) !important;
+}
+
+.pure-button-success {
+    background-color: rgb(28, 184, 65) !important;
+}
+
+.pure-button-danger {
+    background: rgb(202, 60, 60) !important;
+}
+
+.pure-button-warning {
+    background: rgb(223, 117, 20) !important;
+}
+
+.pure-button-xsmall {
+    font-size: 70%;
+}
+
+.pure-button-small {
+    font-size: 85%;
+}
+
+.pure-button-large {
+    font-size: 110%;
+}
+
+.pure-button-xlarge {
+    font-size: 125%;
+}
+
+.error-message {
+    background-color: pink;
+    border: 1px solid red;
+    padding: 2px;
+    color: red;
+}

internal/dis/component/server/assets/src/base/index.ts

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

internal/dis/component/server/assets/src/entry/Admin/index.css

@@ -0,0 +1,21 @@
+.wisski {
+    padding: 1em;
+}
+
+.wisski h3 {
+    padding: 0;
+}
+
+.wisski a.pure-button {
+    float: right;
+    position: relative;
+    bottom: 1em;
+}
+
+.wisski.running {
+    background-color: #9ADA07;
+}
+
+.wisski.stopped {
+    background-color: #ff7a7a;
+}

internal/dis/component/server/assets/src/entry/Admin/index.ts

@@ -0,0 +1,6 @@
+import "~/src/lib/remote"
+import "~/src/lib/highlight"
+
+// include the user styles!
+import "../User/index.ts"
+import "../User/index.css"

internal/dis/component/server/assets/src/entry/Default/index.css

@@ -0,0 +1,3 @@
+a.wisskilink {
+    color: blue !important;
+}

internal/dis/component/server/assets/src/entry/User/index.css

@@ -0,0 +1,6 @@
+/* textarea on the /user/ssh/add form */
+textarea#key {
+    width: 50%;
+    height: 10em;
+    resize: both; 
+}

internal/dis/component/server/assets/src/entry/User/index.ts

@@ -0,0 +1 @@
+import "~/src/lib/copy"

internal/dis/component/server/assets/src/lib/autolink/index.css

@@ -0,0 +1,22 @@
+.header-link {
+    position: relative;
+    left: 0.5em;
+    opacity: 0;
+    font-size: 0.8em;
+
+    transition: opacity 0.2s ease-in-out 0.1s;
+    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+    -moz-transition: opacity 0.2s ease-in-out 0.1s;
+    -ms-transition: opacity 0.2s ease-in-out 0.1s;
+
+    text-decoration: none;
+}
+
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+    color: black !important;
+    opacity: 1;
+}

internal/dis/component/server/assets/src/lib/autolink/index.ts

@@ -0,0 +1,21 @@
+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: string) => {
+    const anchor = document.createElement("a")
+    anchor.className = "header-link"
+    anchor.href = "#" + id
+    anchor.innerHTML = "#"
+    return anchor
+}
+
+const linkifyAnchors = (level: number) => {
+    const headers = document.getElementsByTagName("h" + level);
+    Array.from(headers).forEach((header) => {
+        if (typeof header.id === "undefined" || header.id === "") return
+        header.appendChild(anchorForId(header.id))
+    })
+}
+
+// linkify all the anchors from 1 ... 6
+(new Array(6)).fill(0).forEach((_, i) => linkifyAnchors(i + 1))

internal/dis/component/server/assets/src/lib/copy/index.css

@@ -0,0 +1,3 @@
+.copy {
+    user-select: all;
+}

internal/dis/component/server/assets/src/lib/copy/index.ts

@@ -0,0 +1,8 @@
+import "./index.css"
+
+document.querySelectorAll('.copy').forEach((elem: Element) => {
+    elem.addEventListener('click', () => {
+        if (!navigator.clipboard) return;
+         navigator.clipboard.writeText((elem as HTMLElement).innerText);
+    })
+})

internal/dis/component/server/assets/src/lib/highlight/index.ts

@@ -0,0 +1,61 @@
+import dayjs from "dayjs"
+const types: Record<string, (element: HTMLElement) => HTMLElement | string> = {
+    "date": (element) => {
+        const value =  dayjs(element.innerText);
+        const text = value.format('YYYY-MM-DD HH:mm:ss ([UTC]Z)')
+
+        // if the date is the zero date, then it is assumed to be invalid
+        if (value.unix() === 0) {
+            const code = document.createElement('code')
+            code.style.color = 'gray'
+            code.append(text)
+            return code
+        }
+        return text
+    },
+    "path": (element) => {
+        const text = element.innerText.split("/");
+        return text[text.length - 1];
+    },
+    "pathbuilder": (element) => {
+        // create a link and get the blob
+        const filename = (element.getAttribute('data-name') ?? 'pathbuilder') + ".xml"
+        const [link, blob] = make_download_link(filename, element.innerText, "application/xml")
+
+        link.className = "pure-button"
+        const title = filename + ' (' + blob.size + ' Bytes)';
+        link.append(title)
+        return link
+    }
+}
+
+const make_download_link = (filename: string, content: string, type: string): [HTMLAnchorElement, Blob] => {
+    const blob = new Blob(
+        [content],
+        {
+            type: type ?? "text/plain"
+        }
+    );
+
+    const link = document.createElement("a")
+    link.target = "_blank"
+    link.download = filename
+    link.href = URL.createObjectURL(blob)
+
+    return [link, blob]
+}
+
+Object.keys(types).forEach(key => {
+    const f = types[key];
+    const elements = document.querySelectorAll("code." + key) as NodeListOf<HTMLElement>
+    elements.forEach(element => {
+        const newElement = f(element)
+        if (typeof newElement === 'string') {
+            element.innerHTML = ""
+            element.appendChild(document.createTextNode(newElement))
+            return
+        }
+
+        element.parentNode!.replaceChild(newElement, element)
+    })
+})

internal/dis/component/server/assets/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/dis/component/server/assets/src/lib/remote/index.ts

@@ -0,0 +1,208 @@
+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 remote_action = document.getElementsByClassName('remote-action')
+Array.from(remote_action).forEach((element) => {
+    const action = element.getAttribute('data-action') as string;
+    const reload = element.getAttribute('data-force-reload');
+    const param = element.getAttribute('data-param') as string | undefined;
+    
+    const confirmElementName = element.getAttribute('data-confirm-param');
+    const confirmElement = (confirmElementName ? document.querySelector(confirmElementName) : null) as HTMLInputElement | null;
+
+    const bufferSize = (function () {
+        const number = parseInt(element.getAttribute('data-buffer') ?? "", 10) ?? 0;
+        return (isFinite(number) && number > 0) ? number : 0;
+    })()
+
+    const validate = function() {
+        if (!confirmElement) return true
+        return confirmElement.value === param;
+    }
+
+    if (confirmElement) {
+        const runValidation = () => {
+            if (validate()) {
+                element.removeAttribute('disabled')
+            } else {
+                element.setAttribute('disabled', 'disabled')
+            }
+        }
+        confirmElement.addEventListener('change', runValidation)
+        runValidation()
+    }
+
+    element.addEventListener('click', function (ev) {
+        ev.preventDefault();
+
+        // do nothing if the validation fails
+        if (!validate()) return;
+
+        // 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 pure-button-success"
+        button.append(typeof reload === 'string' ? "Close & Reload" : "Close")
+        button.addEventListener('click', function (event) {
+            event.preventDefault();
+
+            if (typeof reload === 'string') {
+                button.setAttribute('disabled', 'disabled')
+                target.innerHTML = 'Reloading page ...'
+                if (reload === '') {
+                    location.reload()
+                } else {
+                    location.href = reload
+                }
+                return;
+            }
+
+            modal.parentNode?.removeChild(modal);
+        })
+        
+        const onbeforeunload = window.onbeforeunload;
+        window.onbeforeunload = () => "A remote session is in progress. Are you sure you want to leave?";
+
+        // when closing, add a button to the modal!
+        let didClose = false
+        const close = function () {
+            if (didClose) return
+            didClose = true
+
+            window.onbeforeunload = onbeforeunload;
+            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();
+        });
+    });
+})
+
+const remote_link = document.getElementsByClassName('remote-link')
+Array.from(remote_link).forEach((element) => {
+    const action = element.getAttribute('data-action') as string;
+    const param = element.getAttribute('data-params') as string | undefined;
+    const params = param?.split(" ");
+
+    element.addEventListener('click', function (ev) {
+        ev.preventDefault();
+
+        getValue(action, params).then(v => {
+            window.open(v);
+        }).catch(e => {
+            console.error(e);
+        })
+    });
+})
+
+async function getValue(action: string, params?: Array<string>): Promise<any> {
+    return new Promise((rs, rj) => {
+        let buffer = "";
+        var resolve = function() {
+            const index = buffer.indexOf('\n')
+            if (index < 0) {
+                rj("invalid buffer");
+                return
+            }
+            
+            // check that the server sent back true
+            const ok = buffer.substring(0, index) === 'true';
+            if(!ok) {
+                rj(buffer);
+                return
+            }
+
+            // parse the rest as json
+            const value = JSON.parse(buffer.substring(index+1))
+            rs(value);
+        }
+
+        connectSocket((socket) => {
+            socket.send(action);
+            if (params) {
+                params.forEach(p => socket.send(p))
+            }
+        }, (data) => {
+            buffer += data + "\n";
+        }).then(() => {
+            resolve();
+        }).catch(() => {
+            buffer = "false\n";
+            resolve();
+        });
+    })
+}

internal/dis/component/server/assets/src/lib/remote/socket.ts

@@ -0,0 +1,11 @@
+export default function connectSocket(onOpen: (socket: WebSocket) => void, onData: (data: any) => void): Promise<CloseEvent> {
+    return new Promise((rs, rj) => {
+        const socket = new WebSocket(location.href.replace('http', 'ws'));
+
+        socket.onclose = rs;
+        socket.onerror = rj;
+
+        socket.onmessage = (ev) => onData(ev.data)
+        socket.onopen = () => onOpen(socket);
+    });
+}

internal/dis/component/server/assets/static.go

@@ -0,0 +1,41 @@
+// Package static implements serving of fully static resources
+package assets
+
+import (
+	"context"
+	"embed"
+	"io/fs"
+	"net/http"
+
+	"github.com/FAU-CDI/wisski-distillery/internal/dis/component"
+)
+
+type Static struct {
+	component.Base
+}
+
+var (
+	_ component.Routeable = (*Static)(nil)
+)
+
+func (*Static) Routes() component.Routes {
+	return component.Routes{
+		Prefix: Public,
+
+		CSRF: false,
+	}
+}
+
+//go:embed dist
+var staticFS embed.FS
+
+func (static *Static) HandleRoute(ctx context.Context, route string) (http.Handler, error) {
+	// take the filesystem
+	fs, err := fs.Sub(staticFS, "dist")
+	if err != nil {
+		return nil, err
+	}
+
+	// and serve it
+	return http.StripPrefix(route, http.FileServer(http.FS(fs))), nil
+}

internal/dis/component/server/assets/templates.go

@@ -0,0 +1,23 @@
+package assets
+
+import (
+	"embed"
+	"html/template"
+)
+
+//go:embed "templates/*.html"
+var templates embed.FS
+
+var (
+	shared *template.Template = template.Must(template.ParseFS(templates, "templates/*.html"))
+)
+
+// NewSharedTemplate creates a new template with the given name.
+// It will be able to make use of shared templates as well as functions.
+func NewSharedTemplate(name string) *template.Template {
+	new := template.New(name)
+	for _, template := range shared.Templates() {
+		new.AddParseTree(template.Tree.Name, template.Tree.Copy())
+	}
+	return new
+}

internal/dis/component/server/assets/templates/_anal.html

@@ -0,0 +1,139 @@
+<div class="pure-u-1-1">
+    <h2 id="structs">Structs</h2>
+</div>
+
+{{ range $name, $comp := .Components }}
+<div class="pure-u-1-1" id="{{ $name }}">
+    <div class="padding">
+        <div class="overflow">
+            <table class="pure-table pure-table-bordered">
+                <thead>
+                    <tr>
+                        <th colspan="3">
+                            {{ $name }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{ range .Groups }}
+                    <tr>
+                        <td>
+                            Implements
+                        </td>
+                        <td colspan="2">
+                            <code><a href="#{{.}}">{{ . }}</a></code><br />
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $name, $comp := .CFields }}
+                    <tr>
+                        <td>Component Pointer</td>
+                        <td>
+                            <code>{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code><a href="#{{ $comp }}">{{ $comp }}</a></code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $name, $comp := .DCFields }}
+                    <tr>
+                        <td>Component Pointer</td>
+                        <td>
+                            <code>Dependencies/{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code><a href="#{{ $comp }}">{{ $comp }}</a></code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $name, $iface := .IFields }}
+                    <tr>
+                        <td>Interface Slice</td>
+                        <td>
+                            <code>{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code><a href="#{{ $iface }}">[]{{ $iface }}</a></code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $name, $iface := .DIFields }}
+                    <tr>
+                        <td>Interface Slice</td>
+                        <td>
+                            <code>Dependencies/{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code><a href="#{{ $iface }}">[]{{ $iface }}</a></code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $name, $sig := $comp.Methods }}
+                    <tr>
+                        <td>
+                            Method
+                        </td>
+                        <td>
+                            <code>{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code>{{ $sig }}</code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</div>
+{{ end }}
+
+<div class="pure-u-1-1">
+    <h2 id="interfaces">Interfaces</h2>
+</div>
+
+{{ range $name, $group := .Groups }}
+<div class="pure-u-1-1" id="{{ $name }}">
+    <div class="padding">
+
+        <div class="overflow">
+            <table class="pure-table pure-table-bordered">
+                <thead>
+                    <tr>
+                        <th colspan="3">
+                            {{ $name }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{ range $name, $sig := $group.Methods }}
+                    <tr>
+                        <td>
+                            Method
+                        </td>
+                        <td>
+                            <code>{{ $name }}</code>
+                        </td>
+                        <td>
+                            <code>{{ $sig }}</code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                    {{ range $group.Components }}
+                    <tr>
+                        <td>
+                            Implemented By
+                        </td>
+                        <td colspan="2">
+                            <code><a href="#{{.}}">{{ . }}</a></code>
+                        </td>
+                    </tr>
+                    {{ end }}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{{ end }}

internal/dis/component/server/assets/templates/_base.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+
+        <title>{{ block "title" . }}WissKI Distillery{{ end }}</title>
+        {{ block "styles" . }}styles{{ end }}
+    </head>
+
+    <body>
+        {{ .BaseContext.DoInitCheck }}
+        <nav class="pure-menu pure-menu-horizontal">
+            <ul class="pure-menu-list" role="menubar">
+                {{ range .BaseContext.Menu }}
+                <li class="pure-menu-item{{ if .Active }} pure-menu-selected{{ end }}">
+                    <a href="{{ .Path }}" class="pure-menu-link">{{ .Title }}</a>
+                </li>
+                {{ end }}
+            </ul>
+        </nav>
+        <nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
+            {{ range .BaseContext.Crumbs }}
+            <a class="{{ if .Active }}active{{ end }}" href="{{ .Path }}">{{ .Title }}</a>
+            {{ end }}
+        </nav>
+
+        <header>
+            <h1 id="top">{{ template "title" . }}</h1>
+            {{ if .BaseContext.Actions }}
+                <div class="pure-button-group" role="group" aria-label="Actions">
+                    {{ range .BaseContext.Actions }}
+                        <a href="{{ .Path }}" class="pure-button{{ if eq .Priority -1 }} pure-button-small{{end}}">{{ .Title }}</a>
+                    {{ end }}
+                </div>
+            {{ end }}
+        </header>
+        <main>
+            <div class="pure-g">
+                {{ block "content" . }}content{{ end }}
+            </div>
+        </main>
+
+        <footer>
+            {{ block "@custom/footer" .BaseContext }}
+            <div style="z-index:10000;position:fixed;top:0;left:0;width:100vh;height:100vw;background:red;text-align:center;padding:10vh 10vw;font-size:xx-large;font-weight:bold">
+                <code>.Templating.Template()</code> not called
+            </div>
+            {{ end }}
+        </footer>
+
+
+        {{ block "scripts" . }}scripts{{ end }}
+    </body>
+
+</html>

internal/dis/component/server/assets/templates/_form.html

@@ -0,0 +1,30 @@
+{{ template "_base.html" . }}
+{{ define "title" }}{{ block "form/title" . }}Form{{ end }}{{ end }}
+
+{{ define "content" }}
+<div class="pure-u-1">
+    {{ block "form/extra" . }}<!-- no extra -->{{ end }}
+
+    <form class="pure-form pure-form-aligned" method="POST">
+        <fieldset>
+            <legend>{{ template "form/title" . }}</legend>
+
+            {{ block "form/message" . }}
+                {{ $E := .Error }}
+                {{ if not (eq $E "") }}
+                    <div class="pure-form-group">
+                        <p class="error-message">
+                            {{ $E }}
+                        </p>
+                    </div>
+                {{ end }}
+            {{ end }}
+
+            {{ block "form/inside" . }}<!-- no inside -->{{ end }}
+            {{ .Form }}
+            <input type="submit" value="{{ block "form/button" .}}Submit{{ end }}" class="pure-button">
+        </fieldset>
+    </form>
+</div>
+
+{{ end }}

internal/dis/component/server/assets/tsconfig.json

@@ -0,0 +1,105 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    "paths": {
+      "~/*": ["./*"],
+    },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}