Improve lookup samples

Author: webpro

apps/web/src/css/sample.css

@@ -0,0 +1,105 @@
+.sample-shadow {
+  text-shadow: 0.05em 0.05em 0 currentColor;
+}
+
+.sample-overstrike {
+  text-decoration-line: line-through;
+}
+
+.sample-underline-none {
+  text-decoration: none;
+}
+
+.sample-underline-double {
+  text-decoration-line: underline;
+  text-decoration-style: double;
+}
+
+.sample-underline-wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+}
+
+.sample-underline-dotted {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+.sample-underline-dashed {
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+}
+
+.sample-foreground-colored-24bit {
+  color: #ff69b4;
+}
+
+.sample-foreground-colored-8bit {
+  color: #ff8700;
+}
+
+.sample-background-colored-24bit {
+  background-color: #ff69b4;
+}
+
+.sample-background-colored-8bit {
+  background-color: #ff8700;
+}
+
+.sample-underline-colored-24bit {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 0.15em;
+  text-decoration-color: #ff69b4;
+  text-decoration-skip-ink: none;
+}
+
+.sample-underline-colored-8bit {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: 0.15em;
+  text-decoration-color: #ff8700;
+  text-decoration-skip-ink: none;
+}
+
+.sample-superscript {
+  position: relative;
+  top: -0.17em;
+  font-size: 0.83em;
+}
+
+.sample-subscript {
+  position: relative;
+  top: 0.17em;
+  font-size: 0.83em;
+}
+
+.sample-blink-slow {
+  animation: ansi-blink-slow 1s steps(1, end) infinite;
+}
+
+.sample-blink-fast {
+  animation: ansi-blink-fast 0.5s steps(1, end) infinite;
+}
+
+@keyframes ansi-blink-slow {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes ansi-blink-fast {
+  0%,
+  24% {
+    opacity: 1;
+  }
+  25%,
+  100% {
+    opacity: 0;
+  }
+}

apps/web/src/lookup.ts

@@ -1,9 +1,13 @@
 import { computed, document, effect, html, raw, render, signal } from "isum/preactive";
 import { createRowsFromCodes, sortControlCodes } from "./util/table.ts";
+import { theme } from "ansi-to-pre";
 import "./css/global.css";
 import "./css/input.css";
 import "./css/lookup.css";
 import "./css/table.css";
+import "./css/sample.css";
+
+theme({ defaultColor: "#ffffff" });
 
 const getSearchParams = () => new URLSearchParams(typeof location === "undefined" ? "" : location.search);
 const getSearchParam = (param: string): string => (getSearchParams().get(param) ?? "").trim().toLowerCase();

apps/web/src/util/sgr-map.ts

@@ -0,0 +1,26 @@
+import { ansiToPre } from "ansi-to-pre";
+
+const SGR_SAMPLE_TEXT = "Sample";
+const SGR_SAMPLE_HTML = ansiToPre(SGR_SAMPLE_TEXT);
+export const SGR_MAP: Record<string, string> = {
+  "1:2": "sample-shadow",
+  "4:0": "sample-underline-none",
+  "4:1": "sample-underline-single",
+  "4:2": "sample-underline-double",
+  "4:3": "sample-underline-wavy",
+  "4:4": "sample-underline-dotted",
+  "4:5": "sample-underline-dashed",
+  "5": "sample-blink-slow",
+  "6": "sample-blink-fast",
+  "8:7": "sample-overstrike",
+  "21": "sample-underline-double",
+  "58;2": "sample-underline-colored-24bit",
+  "58;5": "sample-underline-colored-8bit",
+  "73": "sample-superscript",
+  "74": "sample-subscript",
+};
+
+export function render(className: string) {
+  const span = `<span class="${className}">${SGR_SAMPLE_TEXT}</span>`;
+  return SGR_SAMPLE_HTML.replace(SGR_SAMPLE_TEXT, span);
+}

apps/web/src/util/table.ts

@@ -4,6 +4,7 @@ import { ansiToPre } from "ansi-to-pre";
 import { controlCodes, codeMaps } from "../codes.ts";
 import { getColorName } from "./color.ts";
 import { ESC, ST } from "./string.ts";
+import { SGR_MAP, render } from "./sgr-map.ts";
 
 interface TableRow {
   type: CONTROL_CODE["type"];
@@ -208,8 +209,8 @@ export function createRowsFromCodes() {
       case CODE_TYPES.SGR: {
         const { description, template } = item;
         const code = `${PREFIX}[${item.code}${template ?? ""}m`;
-        const raw = `${PREFIX_RAW}[${item.code}${tpl(item.template, item.example)}m`;
-        const example = item.code.includes(":") ? "" : ansiToPre(`${raw}Sample\u001b[0m`);
+        const raw = `${PREFIX_RAW}[${item.code}${tpl(template, item.example)}m`;
+        const example = item.code in SGR_MAP ? render(SGR_MAP[item.code]) : ansiToPre(`${raw}Sample\u001b[0m`);
         rows.push({ type, sort: item.code, code, mnemonic: "", description, example });
         break;
       }