split block into its own file, add fonts, add fontawesome, get xterm styles, get xtermjs loaded

frontend/app.tsx

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import * as React from "react";
 import * as jotai from "jotai";
 import { Provider, createStore } from "jotai";
@@ -6,6 +9,7 @@ import { Greet } from "./bindings/main/GreetService.js";
 import { Events } from "@wailsio/runtime";
 import * as rx from "rxjs";
 import { clsx } from "clsx";
+import { Block } from "./block.tsx";
 
 import "/public/style.less";
 
@@ -41,14 +45,6 @@ const Tabs = () => {
     );
 };
 
-const Block = () => {
-    return (
-        <div className="block">
-            <div>Block Content</div>
-        </div>
-    );
-};
-
 const TabContent = () => {
     return (
         <div className="tabcontent">

frontend/block.less

@@ -0,0 +1,27 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.block .block-header {
+    display: flex;
+    height: 30px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--panel-bg-color);
+}
+
+.block .block-term-connectelem {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+    background-color: green;
+}

frontend/block.tsx

@@ -0,0 +1,83 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as jotai from "jotai";
+import { Terminal } from "@xterm/xterm";
+import type { ITheme } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+
+import "/public/xterm.css";
+import "./block.less";
+
+function getThemeFromCSSVars(el: Element): ITheme {
+    const theme: ITheme = {};
+    const elemStyle = getComputedStyle(el);
+    theme.foreground = elemStyle.getPropertyValue("--term-foreground");
+    theme.background = elemStyle.getPropertyValue("--term-background");
+    theme.black = elemStyle.getPropertyValue("--term-black");
+    theme.red = elemStyle.getPropertyValue("--term-red");
+    theme.green = elemStyle.getPropertyValue("--term-green");
+    theme.yellow = elemStyle.getPropertyValue("--term-yellow");
+    theme.blue = elemStyle.getPropertyValue("--term-blue");
+    theme.magenta = elemStyle.getPropertyValue("--term-magenta");
+    theme.cyan = elemStyle.getPropertyValue("--term-cyan");
+    theme.white = elemStyle.getPropertyValue("--term-white");
+    theme.brightBlack = elemStyle.getPropertyValue("--term-bright-black");
+    theme.brightRed = elemStyle.getPropertyValue("--term-bright-red");
+    theme.brightGreen = elemStyle.getPropertyValue("--term-bright-green");
+    theme.brightYellow = elemStyle.getPropertyValue("--term-bright-yellow");
+    theme.brightBlue = elemStyle.getPropertyValue("--term-bright-blue");
+    theme.brightMagenta = elemStyle.getPropertyValue("--term-bright-magenta");
+    theme.brightCyan = elemStyle.getPropertyValue("--term-bright-cyan");
+    theme.brightWhite = elemStyle.getPropertyValue("--term-bright-white");
+    theme.selectionBackground = elemStyle.getPropertyValue("--term-selection-background");
+    theme.selectionInactiveBackground = elemStyle.getPropertyValue("--term-selection-background");
+    theme.cursor = elemStyle.getPropertyValue("--term-selection-background");
+    theme.cursorAccent = elemStyle.getPropertyValue("--term-cursor-accent");
+    return theme;
+}
+
+const Block = () => {
+    const blockRef = React.useRef<HTMLDivElement>(null);
+    const connectElemRef = React.useRef<HTMLDivElement>(null);
+    const [dims, setDims] = React.useState({ width: 0, height: 0 });
+    if (blockRef.current) {
+        const rect = blockRef.current.getBoundingClientRect();
+        const newWidth = parseInt(rect.width);
+        const newHeight = parseInt(rect.height);
+        if (newWidth !== dims.width || newHeight !== dims.height) {
+            setDims({ width: newWidth, height: newHeight });
+        }
+    }
+    React.useEffect(() => {
+        const term = new Terminal({
+            theme: getThemeFromCSSVars(blockRef.current),
+            fontSize: 12,
+            fontFamily: "Hack",
+            drawBoldTextInBrightColors: false,
+            fontWeight: "normal",
+            fontWeightBold: "bold",
+        });
+        const fitAddon = new FitAddon();
+        term.loadAddon(fitAddon);
+        term.open(connectElemRef.current);
+        fitAddon.fit();
+        term.write("Hello, world!");
+        return () => {
+            term.dispose();
+        };
+    }, [connectElemRef.current]);
+    return (
+        <div className="block" ref={blockRef}>
+            <div key="header" className="block-header">
+                <div>
+                    Block {dims.width}x{dims.height}
+                </div>
+            </div>
+            <div key="conntectElem" className="block-term-connectelem" ref={connectElemRef}></div>
+        </div>
+    );
+};
+
+export { Block };

frontend/index.html

@@ -4,6 +4,11 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Wails App</title>
+        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css" />
+        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css" />
         <script type="module" src="/main.ts"></script>
     </head>
     <body>

frontend/main.ts

@@ -4,6 +4,9 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./app.tsx";
+import { loadFonts } from "./util/fontutil.ts";
+
+loadFonts();
 
 document.addEventListener("DOMContentLoaded", () => {
     let reactElem = React.createElement(App, null, null);

frontend/package.json

@@ -15,6 +15,8 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "clsx": "^2.1.1",
     "jotai": "^2.8.0",
     "react": "^18.3.1",

frontend/public/fontawesome/css/sharp-regular.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-sharp-regular-400.woff2) format("woff2"),url(../webfonts/fa-sharp-regular-400.ttf) format("truetype")}.fa-regular,.fasr{font-weight:400}

frontend/public/fontawesome/css/sharp-solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-solid,.fass{font-weight:900}

frontend/public/fontawesome/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}