Eine Biene als Wappen, an allen vier Stellen

Aus dem Quadrat links in beiden Leisten wird eine Pixelbiene von der Seite:
braune Streifen, schwarze Beine, Fluegel mit Kerbe. Sie steht in genau einem
Raster (tools/biene.py, 16x16 Zeichen); daraus entstehen SVG, PNG und eine
Fassung aus Schriftzeichen.

SVG statt PNG in den Leisten: Die HoneyBar laeuft in fremden Apps, und ob ein
<img> dort laedt, entscheidet deren CSP. Markup kann niemand blockieren.

Im System-Fenster und ueber dem Startlauf steht die Biene aus Schriftzeichen —
beides sind Textflaechen, ein Bild darin waere ein Fremdkoerper.

Das Wappen liegt an drei Stellen (Datei, Modul, HoneyBar-Zeile), weil die
Leiste nichts nachladen kann. TestWappenIstUeberallDasselbe haelt sie gleich.

web/js/biene.js

@@ -0,0 +1,8 @@
+/* Erzeugt von tools/biene.py — nicht von Hand ändern.
+ *
+ * Das Wappen als Markup statt als Bilddatei: So kommt es ohne zweite
+ * Anfrage aus und lässt sich mit dem Text daneben ausrichten.
+ */
+export const BIENE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><rect x="4" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="9" y="0" width="2" height="1" fill="#f5f2e7"/><rect x="2" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="8" y="1" width="5" height="1" fill="#f5f2e7"/><rect x="2" y="2" width="11" height="1" fill="#f5f2e7"/><rect x="14" y="2" width="1" height="1" fill="#3b2412"/><rect x="3" y="3" width="9" height="1" fill="#f5f2e7"/><rect x="13" y="3" width="2" height="1" fill="#3b2412"/><rect x="3" y="4" width="11" height="1" fill="#ffd060"/><rect x="2" y="5" width="2" height="1" fill="#f2b33d"/><rect x="4" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="5" width="2" height="1" fill="#f2b33d"/><rect x="8" y="5" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="5" width="5" height="1" fill="#f2b33d"/><rect x="1" y="6" width="3" height="1" fill="#f2b33d"/><rect x="4" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="6" width="2" height="1" fill="#f2b33d"/><rect x="8" y="6" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="6" width="2" height="1" fill="#f2b33d"/><rect x="12" y="6" width="1" height="1" fill="#181410"/><rect x="13" y="6" width="1" height="1" fill="#63c7c0"/><rect x="14" y="6" width="1" height="1" fill="#f2b33d"/><rect x="0" y="7" width="1" height="1" fill="#5c3a1c"/><rect x="1" y="7" width="3" height="1" fill="#f2b33d"/><rect x="4" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="7" width="2" height="1" fill="#f2b33d"/><rect x="8" y="7" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="7" width="2" height="1" fill="#f2b33d"/><rect x="12" y="7" width="2" height="1" fill="#181410"/><rect x="14" y="7" width="1" height="1" fill="#f2b33d"/><rect x="1" y="8" width="3" height="1" fill="#f2b33d"/><rect x="4" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="6" y="8" width="2" height="1" fill="#f2b33d"/><rect x="8" y="8" width="2" height="1" fill="#5c3a1c"/><rect x="10" y="8" width="5" height="1" fill="#f2b33d"/><rect x="2" y="9" width="1" height="1" fill="#d2952a"/><rect x="3" y="9" width="2" height="1" fill="#462b14"/><rect x="5" y="9" width="2" height="1" fill="#d2952a"/><rect x="7" y="9" width="2" height="1" fill="#462b14"/><rect x="9" y="9" width="6" height="1" fill="#d2952a"/><rect x="3" y="10" width="2" height="1" fill="#181410"/><rect x="7" y="10" width="2" height="1" fill="#181410"/><rect x="11" y="10" width="2" height="1" fill="#181410"/><rect x="3" y="11" width="2" height="1" fill="#181410"/><rect x="7" y="11" width="2" height="1" fill="#181410"/><rect x="11" y="11" width="2" height="1" fill="#181410"/></svg>';
+
+export const BIENE_ASCII = "        ----      ----\n    ----------  ----------\n    ----------------------  ::\n      ------------------  ::::\n      ######################\n    ####::::####::::##########\n  ######::::####::::####::oo##\n::######::::####::::####::::##\n  ######::::####::::##########\n    ##::::####::::############\n      ::::    ::::    ::::\n      ::::    ::::    ::::";

web/js/os.js

@@ -4,6 +4,7 @@ import {
   SS_BOOTED, state,
 } from "./core.js";
 import { GLYPHS, glyphSvg } from "./glyphs.js";
+import { BIENE_ASCII, BIENE_SVG } from "./biene.js";
 import {
   widgetPlan, widgetPlanSetzen, widgetsLaden, widgetsOrdnen, widgetsStarten, widgetsZeichnen,
 } from "./widgets/rahmen.js";
@@ -79,6 +80,9 @@ function runBoot() {
   return new Promise((resolve) => {
     const log = $("bootLog");
     const el = $("boot");
+    // Über dem Protokoll die Biene — auch hier aus Schriftzeichen, denn der
+    // Startlauf ist Text und nichts anderes.
+    $("bootBiene").textContent = BIENE_ASCII;
     el.hidden = false;
     const lines = bootLines();
     let i = 0;
@@ -122,6 +126,9 @@ function runBoot() {
 
 function renderShell() {
   $("desktop").hidden = false;
+  // Das Wappen steht im Markup, nicht als Bilddatei — dieselbe Zeile wie in
+  // der HoneyBar fremder Apps, damit beide Leisten wirklich dasselbe zeigen.
+  $("logoBiene").innerHTML = BIENE_SVG;
   renderMenubarApps();
   renderMode();
   tickClock();

web/js/widgets/system.js

@@ -1,4 +1,5 @@
 import { escapeHtml, state } from "../core.js";
+import { BIENE_ASCII } from "../biene.js";
 import { widgetAnmelden } from "./rahmen.js";
 
 /* ── Systemzustand ─────────────────────────────────────────────────────────
@@ -6,6 +7,11 @@ import { widgetAnmelden } from "./rahmen.js";
  * Nur im Terminal-Modus ein Widget. Auf dem Schreibtisch gibt es dieselben
  * Zahlen als Fenster über das Startmenü — ein Schild, das dauerhaft „modus:
  * desktop" behauptet, während man im Desktop-Modus steht, sagt niemandem etwas.
+ *
+ * Die Biene steht hier **aus Schriftzeichen**, nicht als Bild: Das Fenster
+ * besteht aus lauter Textzeilen, und ein Bild darin wäre ein Fremdkörper — wie
+ * ein Foto in einer Tabelle. Als Text gehört sie dazu, und das Ganze wird zu
+ * dem, was man bei so einem Fenster ohnehin im Kopf hat: einem neofetch.
  */
 export function statsHtml() {
   const up = Object.values(state.probes).filter((s) => s === "up").length;
@@ -25,5 +31,5 @@ widgetAnmelden({
   id: "system",
   titel: "system",
   wo: ["terminal"],
-  inhalt: statsHtml,
+  inhalt: () => `<pre class="biene-text">${BIENE_ASCII}</pre>${statsHtml()}`,
 });