Highlight regular expression syntax in Exclusions Table (#341)

frontend/index.d.ts

@@ -1 +1,2 @@
 declare module "*.svg";
+declare module "regex-colorize";

frontend/package.json

@@ -18,6 +18,7 @@
     "lodash": "^4.17.21",
     "path-parser": "^6.1.0",
     "pretty-ms": "^7.0.1",
+    "regex-colorize": "^0.0.3",
     "tailwindcss": "^3.1.8",
     "yaml": "^2.0.0-11"
   },

frontend/src/components/queue-exclusion-table.ts

@@ -1,5 +1,7 @@
 import { state, property } from "lit/decorators.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import { msg, localized } from "@lit/localize";
+import RegexColorize from "regex-colorize";
 
 import type { CrawlConfig } from "../pages/archive/types";
 import LiteElement, { html } from "../utils/LiteElement";
@@ -52,7 +54,7 @@ export class QueueExclusionTable extends LiteElement {
             <th class="font-normal px-2 pb-1">${msg("Exclusion Value")}</th>
           </tr>
         </thead>
-        <tbody class="text-neutral-500">
+        <tbody class="text-neutral-600">
           ${this.exclusions.map(this.renderItem)}
         </tbody>
       </table>
@@ -72,10 +74,14 @@ export class QueueExclusionTable extends LiteElement {
     }
 
     let typeLabel: string = exclusion.type;
+    let value: any = exclusion.value;
 
     switch (exclusion.type) {
       case "regex":
         typeLabel = msg("Regex");
+        value = staticHtml`<span class="regex">${unsafeStatic(
+          new RegexColorize().colorizeText(exclusion.value)
+        )}</span>`;
         break;
       case "text":
         typeLabel = msg("Matches Text");
@@ -90,7 +96,7 @@ export class QueueExclusionTable extends LiteElement {
           ${typeLabel}
         </td>
         <td class="border-t border-r p-2 font-mono${valueColClass}">
-          ${exclusion.value}
+          ${value}
         </td>
       </tr>
     `;

frontend/src/index.ts

@@ -22,6 +22,7 @@ import "./components";
 import "./pages";
 import "./assets/fonts/Inter/inter.css";
 import "./assets/fonts/Recursive/recursive.css";
+import "./styles.css";
 
 type DialogContent = {
   label?: TemplateResult | string;
@@ -188,10 +189,6 @@ export class App extends LiteElement {
   render() {
     return html`
       <style>
-        .uppercase {
-          letter-spacing: 0.06em;
-        }
-
         ${theme}
       </style>
 

frontend/src/styles.css

@@ -0,0 +1,58 @@
+/* Global styles */
+.uppercase {
+  letter-spacing: 0.06em;
+}
+
+/* Regex Colorizer no bg theme */
+/* https://stevenlevithan.com/regex/colorizer/themes/nobg.css */
+
+.regex {
+  color: var(--sl-color-neutral-500);
+}
+/* metasequence */
+.regex b {
+  color: var(--sl-color-blue-500);
+}
+/* char class */
+.regex i {
+  color: var(--sl-color-lime-500);
+}
+/* char class: metasequence */
+.regex i b {
+  color: var(--sl-color-green-500);
+}
+/* char class: range-hyphen */
+.regex i u {
+  color: var(--sl-color-green-500);
+}
+/* group: depth 1 */
+.regex b.g1 {
+  color: var(--sl-color-orange-500);
+}
+/* group: depth 2 */
+.regex b.g2 {
+  color: var(--sl-color-amber-500);
+}
+/* group: depth 3 */
+.regex b.g3 {
+  color: var(--sl-color-rose-500);
+}
+/* group: depth 4 */
+.regex b.g4 {
+  color: var(--sl-color-teal-500);
+}
+/* group: depth 5 */
+.regex b.g5 {
+  color: var(--sl-color-fuchsia-500);
+}
+/* error */
+.regex b.err {
+  color: var(--sl-color-danger-500);
+}
+.regex b,
+.regex i,
+.regex u {
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: none;
+}

frontend/src/theme.ts

@@ -1,5 +1,5 @@
 /**
- * Shoelace CSS theming variables
+ * Shoelace CSS theming variables and component overrides
  * https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css
  *
  * To make new variables available to Tailwind, update

frontend/yarn.lock

@@ -4571,6 +4571,11 @@ reduce-flatten@^2.0.0:
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
   integrity sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==
 
+regex-colorize@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/regex-colorize/-/regex-colorize-0.0.3.tgz#33aabc607b08aa45f26e70c03b7f4066d6fff441"
+  integrity sha512-y+GIlZUqhLQ48T1dZ/FRax14lkVZD1NE3/f7xKuBaasiiMLF5T26Ahjym+vswKPDrtMSfElRr+XPAIHx0AT2Hw==
+
 regexp.prototype.flags@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"