sqlite-hub 0.9.1 → 0.9.4

package/frontend/js/components/connectionCard.js

@@ -13,92 +13,67 @@ export function renderConnectionCard(connection, activeConnectionId) {
     : Boolean(connection.isActive);
   const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const primaryActionLabel = isActive ? "Open Overview" : "Set Active";
+  const connectionId = escapeHtml(connection.id);
+  const logoMarkup = renderConnectionLogo(connection, {
+    containerClass: [
+      "clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors",
+      isActive ? "bg-primary-container" : "bg-surface-container-highest",
+    ].join(" "),
+    containerAttributes: ['style="--clip-path: ', clipPath, ';"'].join(""),
+    imageClassName: "h-full w-full object-cover",
+    iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
+  });
 
-  return `
-    <article
-      class="connection-card clipped-corner ${isActive ? "is-active" : ""}"
-      style="--clip-path: ${clipPath};"
-    >
-      <div class="flex-1 p-6">
-        <div class="mb-6 flex items-start justify-between">
-          ${renderConnectionLogo(connection, {
-            containerClass: `clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors ${
-              isActive ? "bg-primary-container" : "bg-surface-container-highest"
-            }`,
-            containerAttributes: `style="--clip-path: ${clipPath};"`,
-            imageClassName: "h-full w-full object-cover",
-            iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
-          })}
-          <div class="flex items-center gap-2">
-            ${renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted")}
-            ${connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : ""}
-          </div>
-        </div>
-        <h3 class="mb-1 font-headline text-xl font-bold uppercase ${
-          isActive ? "text-[#FCE300]" : "text-on-surface"
-        }">
-          ${escapeHtml(connection.label)}
-        </h3>
-        <p
-          class="block overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10px] text-outline-variant"
-          title="${escapeHtml(connection.path)}"
-        >
-          ${escapeHtml(truncateMiddle(connection.path, 68))}
-        </p>
-        <div class="mt-8 grid grid-cols-2 gap-4">
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatBytes(connection.sizeBytes)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Modified</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatDateTime(connection.lastModifiedAt)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div>
-            <div class="text-xs font-bold text-on-surface">${escapeHtml(
-              formatDateTime(connection.lastOpenedAt)
-            )}</div>
-          </div>
-          <div>
-            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div>
-            <div class="text-xs font-bold text-on-surface">${connection.readOnly ? "Read only" : "Read / Write"}</div>
-          </div>
-        </div>
-      </div>
-      <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
-        <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
-          <button
-            class="signature-button"
-            data-action="select-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-            title="${primaryActionLabel}"
-          >
-            ${primaryActionLabel}
-          </button>
-          <button
-            class="standard-button"
-            data-action="edit-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-          >
-            Edit
-          </button>
-          <button
-            class="delete-button"
-            data-action="remove-connection"
-            data-connection-id="${escapeHtml(connection.id)}"
-            type="button"
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    </article>
-  `;
+  return [
+    '<article class="connection-card clipped-corner ',
+    isActive ? "is-active" : "",
+    '" style="--clip-path: ',
+    clipPath,
+    ';">',
+    '<div class="flex-1 p-6"><div class="mb-6 flex items-start justify-between">',
+    logoMarkup,
+    '<div class="flex items-center gap-2">',
+    renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted"),
+    connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : "",
+    "</div></div>",
+    '<h3 class="mb-1 font-headline text-xl font-bold uppercase ',
+    isActive ? "text-[#FCE300]" : "text-on-surface",
+    '">',
+    escapeHtml(connection.label),
+    "</h3>",
+    '<p class="block overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10px] text-outline-variant" title="',
+    escapeHtml(connection.path),
+    '">',
+    escapeHtml(truncateMiddle(connection.path, 68)),
+    "</p>",
+    '<div class="mt-8 grid grid-cols-2 gap-4">',
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatBytes(connection.sizeBytes)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Modified</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatDateTime(connection.lastModifiedAt)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div><div class="text-xs font-bold text-on-surface">',
+    escapeHtml(formatDateTime(connection.lastOpenedAt)),
+    "</div></div>",
+    '<div><div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div><div class="text-xs font-bold text-on-surface">',
+    connection.readOnly ? "Read only" : "Read / Write",
+    "</div></div></div></div>",
+    '<div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">',
+    '<div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">',
+    '<button class="signature-button" data-action="select-connection" data-connection-id="',
+    connectionId,
+    '" type="button" title="',
+    primaryActionLabel,
+    '">',
+    primaryActionLabel,
+    "</button>",
+    '<button class="standard-button" data-action="edit-connection" data-connection-id="',
+    connectionId,
+    '" type="button">Edit</button>',
+    '<button class="delete-button" data-action="remove-connection" data-connection-id="',
+    connectionId,
+    '" type="button">Remove</button>',
+    "</div></div></article>",
+  ].join("");
 }

package/frontend/js/components/emptyState.js

@@ -6,6 +6,25 @@ import {
 } from "../utils/format.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 
+function renderRecentConnectionButton(connection) {
+  return [
+    '<button class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high" data-action="select-connection" data-connection-id="',
+    escapeHtml(connection.id),
+    '" type="button">',
+    renderConnectionLogo(connection, {
+      containerClass:
+        "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
+      imageClassName: "h-full w-full object-cover",
+      iconClassName: "text-sm text-primary-container",
+    }),
+    '<span class="min-w-0"><span class="block truncate font-mono text-xs">',
+    escapeHtml(connection.label),
+    '</span><span class="block truncate text-[10px] text-on-surface-variant/45">',
+    escapeHtml(truncateMiddle(connection.path, 34)),
+    "</span></span></button>",
+  ].join("");
+}
+
 function renderRecentConnections(recentConnections = []) {
   if (!recentConnections.length) {
     return `
@@ -19,29 +38,7 @@ function renderRecentConnections(recentConnections = []) {
     <div class="flex flex-wrap justify-center gap-4">
       ${recentConnections
         .slice(0, 4)
-        .map(
-          (connection) => `
-            <button
-              class="control-button flex items-center gap-2 border border-outline-variant/15 bg-surface-container-low px-4 text-left text-on-surface transition-colors hover:border-primary-container/30 hover:bg-surface-container-high"
-              data-action="select-connection"
-              data-connection-id="${escapeHtml(connection.id)}"
-              type="button"
-            >
-              ${renderConnectionLogo(connection, {
-                containerClass:
-                  "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
-                imageClassName: "h-full w-full object-cover",
-                iconClassName: "text-sm text-primary-container",
-              })}
-              <span class="min-w-0">
-                <span class="block truncate font-mono text-xs">${escapeHtml(connection.label)}</span>
-                <span class="block truncate text-[10px] text-on-surface-variant/45">${escapeHtml(
-                  truncateMiddle(connection.path, 34)
-                )}</span>
-              </span>
-            </button>
-          `
-        )
+        .map((connection) => renderRecentConnectionButton(connection))
         .join("")}
     </div>
   `;

package/frontend/js/components/modal.js

@@ -97,28 +97,37 @@ function renderFileField({
 }
 
 function renderSelectField({ label, name, value = "", options = [], bind = "" }) {
-  return `
-    <label class="block space-y-2">
-      <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
-        ${escapeHtml(label)}
-      </span>
-      <select
-        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-        ${bind ? `data-bind="${escapeHtml(bind)}"` : ""}
-        ${name ? `name="${escapeHtml(name)}"` : ""}
-      >
-        ${options
-          .map(
-            (option) => `
-              <option value="${escapeHtml(option.value)}" ${String(option.value) === String(value) ? "selected" : ""}>
-                ${escapeHtml(option.label)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-    </label>
-  `;
+  const attributes = [
+    bind ? ['data-bind="', escapeHtml(bind), '"'].join("") : "",
+    name ? ['name="', escapeHtml(name), '"'].join("") : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const optionMarkup = options
+    .map((option) =>
+      [
+        '<option value="',
+        escapeHtml(option.value),
+        '" ',
+        String(option.value) === String(value) ? "selected" : "",
+        ">",
+        escapeHtml(option.label),
+        "</option>",
+      ].join("")
+    )
+    .join("");
+
+  return [
+    '<label class="block space-y-2">',
+    '<span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">',
+    escapeHtml(label),
+    "</span>",
+    '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" ',
+    attributes,
+    ">",
+    optionMarkup,
+    "</select></label>",
+  ].join("");
 }
 
 function renderError(error) {
@@ -283,62 +292,55 @@ function renderCreateDatabaseForm(modal) {
 
 function renderImportTargetOptions(state) {
   const recentOptions = state.connections.recent
-    .map(
-      (connection) => `
-        <option value="${escapeHtml(connection.id)}">
-          ${escapeHtml(connection.label)} • ${escapeHtml(truncateMiddle(connection.path, 42))}
-        </option>
-      `
+    .map((connection) =>
+      [
+        '<option value="',
+        escapeHtml(connection.id),
+        '">',
+        escapeHtml(connection.label),
+        " • ",
+        escapeHtml(truncateMiddle(connection.path, 42)),
+        "</option>",
+      ].join("")
     )
     .join("");
-
-  return `
-    <label class="block space-y-2">
-      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
-        Import Target
-      </span>
-      <select
-        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-        name="targetMode"
-      >
-        ${
-          state.connections.active
-            ? '<option value="active">Use active database</option>'
-            : ""
-        }
-        ${state.connections.recent.length ? '<option value="recent">Use recent connection</option>' : ""}
-        <option value="create">Create new database from dump</option>
-        <option value="path">Open explicit target path</option>
-      </select>
-    </label>
-    ${
-      state.connections.recent.length
-        ? `
-          <label class="block space-y-2">
-            <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
-              Recent Connection
-            </span>
-            <select
-              class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-              name="targetConnectionId"
-            >
-              ${recentOptions}
-            </select>
-          </label>
-        `
-        : ""
-    }
-    ${renderField({
+  const activeOption = state.connections.active
+    ? '<option value="active">Use active database</option>'
+    : "";
+  const recentModeOption = state.connections.recent.length
+    ? '<option value="recent">Use recent connection</option>'
+    : "";
+  const recentConnectionSelect = state.connections.recent.length
+    ? [
+        '<label class="block space-y-2">',
+        '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Recent Connection</span>',
+        '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetConnectionId">',
+        recentOptions,
+        "</select></label>",
+      ].join("")
+    : "";
+
+  return [
+    '<label class="block space-y-2">',
+    '<span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Import Target</span>',
+    '<select class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container" name="targetMode">',
+    activeOption,
+    recentModeOption,
+    '<option value="create">Create new database from dump</option>',
+    '<option value="path">Open explicit target path</option>',
+    "</select></label>",
+    recentConnectionSelect,
+    renderField({
       label: "Target Path",
       name: "targetPath",
       placeholder: "/absolute/path/to/target.sqlite",
-    })}
-    ${renderField({
+    }),
+    renderField({
       label: "Target Label",
       name: "label",
       placeholder: "Optional display name",
-    })}
-  `;
+    }),
+  ].join("");
 }
 
 function renderImportSqlForm(modal, state) {
@@ -376,71 +378,51 @@ function renderImportSqlForm(modal, state) {
 
 function renderDeleteRowConfirmForm(modal) {
   const rowPreview = modal.rowPreview ?? [];
-
-  return `
-    <form class="space-y-5" data-form="delete-row-confirm">
-      <div class="space-y-3">
-        <p class="text-sm leading-7 text-on-surface">
-          Delete this row from <span class="font-bold text-primary-container">${escapeHtml(
-            modal.tableName ?? "the current table"
-          )}</span>?
-        </p>
-        <p class="text-sm leading-7 text-on-surface-variant/65">
-          This action cannot be undone.
-        </p>
-        ${
-          modal.rowLabel
-            ? `
-                <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
-                  ${escapeHtml(modal.rowLabel)}
-                </div>
-              `
-            : ""
-        }
-        ${
-          rowPreview.length
-            ? `
-                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                  ${rowPreview
-                    .map(
-                      (field) => `
-                        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
-                          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
-                            ${escapeHtml(field.label)}
-                          </div>
-                          <div
-                            class="mt-2 text-sm text-on-surface"
-                            title="${escapeHtml(field.fullValue ?? field.value ?? "")}"
-                          >
-                            ${escapeHtml(field.value ?? "")}
-                          </div>
-                        </div>
-                      `
-                    )
-                    .join("")}
-                </div>
-              `
-            : ""
-        }
-      </div>
-      ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
-        <button
-          class="standard-button"
-          data-action="close-modal"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="delete-button"
-          type="submit"
-        >
-          ${modal.submitting ? "Deleting..." : "Delete Row"}
-        </button>
-      </div>
-    </form>
-  `;
+  const rowLabelMarkup = modal.rowLabel
+    ? [
+        '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+        escapeHtml(modal.rowLabel),
+        "</div>",
+      ].join("")
+    : "";
+  const rowPreviewMarkup = rowPreview.length
+    ? [
+        '<div class="grid grid-cols-1 gap-3 md:grid-cols-2">',
+        rowPreview
+          .map((field) =>
+            [
+              '<div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">',
+              '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">',
+              escapeHtml(field.label),
+              "</div>",
+              '<div class="mt-2 text-sm text-on-surface" title="',
+              escapeHtml(field.fullValue ?? field.value ?? ""),
+              '">',
+              escapeHtml(field.value ?? ""),
+              "</div></div>",
+            ].join("")
+          )
+          .join(""),
+        "</div>",
+      ].join("")
+    : "";
+
+  return [
+    '<form class="space-y-5" data-form="delete-row-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete this row from <span class="font-bold text-primary-container">',
+    escapeHtml(modal.tableName ?? "the current table"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">This action cannot be undone.</p>',
+    rowLabelMarkup,
+    rowPreviewMarkup,
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Row",
+    "</button></div></form>",
+  ].join("");
 }
 
 function renderChartColumnOptions(analysis, { allowEmpty = false, includeNumericHint = false } = {}) {
@@ -481,13 +463,22 @@ function renderChartEditorForm(modal, state) {
           bind: "query-chart-draft-config:y_column",
         })}
       </div>
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+        ${renderSelectField({
+          label: "Sort By",
+          value: draft.config?.sort_by ?? "y",
+          options: [
+            { value: "x", label: "X column" },
+            { value: "y", label: "Y value" },
+          ],
+          bind: "query-chart-draft-config:sort_by",
+        })}
         ${renderSelectField({
           label: "Sort Direction",
-          value: draft.config?.sort_direction ?? "asc",
+          value: draft.config?.sort_direction ?? "desc",
           options: [
-            { value: "asc", label: "Ascending" },
-            { value: "desc", label: "Descending" },
+            { value: "asc", label: "Ascending / smallest first" },
+            { value: "desc", label: "Descending / largest first" },
           ],
           bind: "query-chart-draft-config:sort_direction",
         })}
@@ -684,69 +675,37 @@ function renderChartEditorForm(modal, state) {
 }
 
 function renderDeleteChartForm(modal) {
-  return `
-    <form class="space-y-5" data-form="delete-query-chart">
-      <div class="space-y-3">
-        <p class="text-sm leading-7 text-on-surface">
-          Delete chart <span class="font-bold text-primary-container">${escapeHtml(
-            modal.chartName ?? "Chart"
-          )}</span>?
-        </p>
-        <p class="text-sm leading-7 text-on-surface-variant/65">
-          The linked query-history entry stays intact. Only this chart definition is removed.
-        </p>
-      </div>
-      ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
-        <button
-          class="standard-button"
-          data-action="close-modal"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="delete-button"
-          type="submit"
-        >
-          ${modal.submitting ? "Deleting..." : "Delete Chart"}
-        </button>
-      </div>
-    </form>
-  `;
+  return [
+    '<form class="space-y-5" data-form="delete-query-chart"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete chart <span class="font-bold text-primary-container">',
+    escapeHtml(modal.chartName ?? "Chart"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">The linked query-history entry stays intact. Only this chart definition is removed.</p>',
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Chart",
+    "</button></div></form>",
+  ].join("");
 }
 
 function renderDeleteQueryHistoryForm(modal) {
-  return `
-    <form class="space-y-5" data-form="delete-query-history-confirm">
-      <div class="space-y-3">
-        <p class="text-sm leading-7 text-on-surface">
-          Delete query <span class="font-bold text-primary-container">${escapeHtml(
-            modal.queryTitle ?? "SQL query"
-          )}</span>?
-        </p>
-        <p class="text-sm leading-7 text-on-surface-variant/65">
-          This removes the query-history entry and all recorded runs linked to it.
-        </p>
-      </div>
-      ${renderError(modal.error)}
-      <div class="flex items-center justify-end gap-3 pt-2">
-        <button
-          class="standard-button"
-          data-action="close-modal"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="delete-button"
-          type="submit"
-        >
-          ${modal.submitting ? "Deleting..." : "Delete Query"}
-        </button>
-      </div>
-    </form>
-  `;
+  return [
+    '<form class="space-y-5" data-form="delete-query-history-confirm"><div class="space-y-3">',
+    '<p class="text-sm leading-7 text-on-surface">Delete query <span class="font-bold text-primary-container">',
+    escapeHtml(modal.queryTitle ?? "SQL query"),
+    "</span>?</p>",
+    '<p class="text-sm leading-7 text-on-surface-variant/65">This removes the query-history entry and all recorded runs linked to it.</p>',
+    "</div>",
+    renderError(modal.error),
+    '<div class="flex items-center justify-end gap-3 pt-2">',
+    '<button class="standard-button" data-action="close-modal" type="button">Cancel</button>',
+    '<button class="delete-button" type="submit">',
+    modal.submitting ? "Deleting..." : "Delete Query",
+    "</button></div></form>",
+  ].join("");
 }
 
 function renderCreateMediaTaggingMappingTableForm(modal, state) {

package/frontend/js/components/pageHeader.js

@@ -16,7 +16,7 @@ export function renderPageHeader({ eyebrow = "", title, subtitle = "", actions =
             `
             : ""
         }
-        <h1 class="text-5xl font-['Space_Grotesk'] font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(
+        <h1 class="text-5xl font-headline font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(
           title
         )}</h1>
         ${