Sync.

make.py

@@ -0,0 +1,50 @@
+#!/bin/python
+
+from pathlib import Path
+from json import loads
+from shutil import rmtree
+from shutil import copytree
+
+from maketool import sass_compiler
+from maketool import esbuild_compiler
+from maketool import render
+from maketool import script
+from maketool import link
+
+root = Path(__file__).absolute().parent
+source = root / Path("./")
+build = root / Path("build/")
+
+styles = source / Path("styles/")
+scripts = source / Path("scripts/")
+
+scripts_loader = scripts / Path("core.js")
+theme_loader = styles / Path("core.sass")
+full_bundle = scripts / Path("bundle.js")
+
+script_bundle = build / Path("pack.js")
+theme_bundle = build / Path("pack.css")
+bundle_tmp_output = build / Path("bundle.tmp.js")
+bundle_output = build / Path("bundle.js")
+
+if build.exists():
+    rmtree(build)
+
+build.mkdir()
+
+sass_compiler(theme_loader).build(theme_bundle)
+esbuild_compiler(scripts_loader).build(script_bundle)
+
+with theme_bundle.open() as style:
+    with script_bundle.open() as script:
+        script = script.read().replace("\"", "\\\"").replace("`", "\\`")
+        style = style.read().replace("\"", "\\\"").replace("`", "\\`")
+
+        rendering = render(full_bundle)
+        rendering.add("style", style)
+        rendering.add("script", script)
+        
+        with bundle_tmp_output.open("w") as output:
+            output.write(rendering.finalize())
+
+esbuild_compiler(bundle_tmp_output).build(bundle_output)

maketool

@@ -0,0 +1 @@
+Subproject commit f90cef46cf5b2587acc1cba4e0a432cda8b4e34f

scripts/bundle.js

@@ -0,0 +1,12 @@
+const styles_content = `<< style >>`;
+const scripts_content = `<< script >>`;
+
+const style = document.createElement("style");
+style.innerHTML = styles_content;
+
+const script = document.createElement("script");
+script.defer = true;
+script.innerHTML = scripts_content;
+
+document.querySelector("head").appendChild(script);
+document.querySelector("head").appendChild(style);

scripts/core.js

@@ -0,0 +1,10 @@
+import { tui_window } from "./tui_window.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+    const windows = [];
+
+    /* Search windows */
+    Array.from(document.querySelectorAll(".tui-window")).forEach(count => {
+        windows.push(new tui_window(count));
+    });
+});

scripts/tui_window.js

@@ -0,0 +1,46 @@
+export class tui_window {
+    #target;
+    #title;
+
+    #initialize(title) {
+        const header = document.createElement("div");
+        header.classList.add("header");
+        header.appendChild(this.#title);
+
+        title ||= document.querySelector("title").innerText;
+        this.#title.innerText = title;
+
+        const close_button = document.createElement("p");
+        close_button.innerText = "X";
+        
+        const maximize_button = document.createElement("p");
+        maximize_button.innerText = "_";
+
+        const buttons = document.createElement("div");
+        buttons.classList.add("buttons");
+        buttons.appendChild(maximize_button);
+        buttons.appendChild(close_button);
+        
+        header.appendChild(buttons);
+        this.target.appendChild(header);
+    }
+
+    constructor(target, title = null) {
+        this.#target = target;
+        this.#title = document.createElement("p");
+
+        this.#initialize(title);
+    }
+
+    set title(target) {
+        this.#title.innerText = title;
+    }
+
+    get title() {
+        return this.#title.innerText;
+    }
+
+    get target() {
+        return this.#target;
+    }
+}

styles/core.sass

@@ -0,0 +1,2 @@
+@import font
+@import window

styles/font.sass

@@ -0,0 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap')
+
+body 
+    font-family: "JetBrains Mono", monospace
+    font-optical-sizing: auto
+    font-weight: normal
+    font-style: normal
+    font-size: 14px

styles/window.sass

@@ -0,0 +1,42 @@
+$tui-window-margin: 10px
+$tui-window-background: gray
+
+.tui-window
+    width: calc(60% - $tui-window-margin * 2)
+    height: calc(60% - $tui-window-margin * 2)
+    position: absolute
+    top: 20%
+    left: 20%
+    border: black double 5px
+
+    &::before 
+        content: ' ';
+        position: absolute
+        top: -$tui-window-margin
+        left: -$tui-window-margin
+        width: calc(100% + $tui-window-margin * 2);
+        height: calc(100% + $tui-window-margin * 2);
+        background-color: $tui-window-background
+        z-index: -1
+    
+    .header
+        position: absolute
+        top: -$tui-window-margin
+        width: 90%
+        left: 5%
+        display: flex
+        flex-direction: row
+        justify-content: space-between
+
+        .buttons
+            background-color: $tui-window-background
+            display: flex
+            flex-direction: row
+
+        p 
+            margin: 0px
+            padding: 0px
+            padding-left: 5px
+            padding-right: 5px
+            display: block
+            background-color: $tui-window-background

tests/00-sample.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Sample test.</title>
+
+        <script 
+            type="text/javascript" 
+            src="../build/bundle.js"
+        ></script>
+    </head>
+    
+    <body>
+
+    </body>
+</html>

tests/01-load.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Loading bundle test.</title>
+
+        <script 
+            type="text/javascript" 
+            src="../build/bundle.js"
+        ></script>
+    </head>
+    
+    <body>
+
+    </body>
+</html>

tests/02-window.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Sample test.</title>
+
+        <script 
+            type="text/javascript" 
+            src="../build/bundle.js"
+        ></script>
+    </head>
+    
+    <body>
+        <div class="tui-window">
+
+        </dIV>
+    </body>
+</html>