@jjlmoya/utils-developer 1.14.0 → 1.16.0

package/src/tool/readabilityCalculator/visual-readability-calculator-wcag-apca.css

@@ -1,14 +1,17 @@
 .rc-root {
     width: 100%;
+    min-width: 0;
   }
 
   .rc-container {
+    container-type: inline-size;
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     max-width: 1200px;
     margin: 0 auto;
     padding: 1.5rem;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -28,6 +31,7 @@
     flex-direction: column;
     gap: 2rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+    min-width: 0;
   }
 
   .theme-dark .rc-card {
@@ -61,7 +65,7 @@
 
   .rc-inputs-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
     gap: 1.5rem;
   }
 
@@ -90,6 +94,7 @@
     padding: 0.5rem;
     border-radius: 0.75rem;
     transition: all 0.2s ease;
+    min-width: 0;
   }
 
   .theme-dark .rc-color-input-container {
@@ -127,6 +132,8 @@
     font-weight: 600;
     color: rgb(71, 85, 105);
     flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .theme-dark .rc-hex-text {
@@ -193,7 +200,7 @@
 
   .rc-comparison-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
     gap: 1rem;
   }
 
@@ -206,6 +213,7 @@
     gap: 0.5rem;
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid rgba(0, 0, 0, 0.05);
+    min-width: 0;
   }
 
   .theme-dark .rc-score-card {
@@ -232,6 +240,8 @@
     padding: 0.2rem 0.6rem;
     border-radius: 0.5rem;
     text-transform: uppercase;
+    text-align: center;
+    overflow-wrap: anywhere;
   }
 
   .rc-status-pass {
@@ -274,6 +284,7 @@
   .rc-preview-text {
     line-height: 1.5;
     margin: 0;
+    overflow-wrap: anywhere;
   }
 
   .rc-apca-breakdown {
@@ -292,6 +303,7 @@
   .rc-breakdown-item {
     display: flex;
     justify-content: space-between;
+    gap: 1rem;
     font-size: 0.875rem;
   }
 
@@ -309,6 +321,8 @@
     display: flex;
     align-items: center;
     gap: 0.4rem;
+    text-align: right;
+    white-space: nowrap;
   }
 
   .rc-check-yes {
@@ -317,4 +331,74 @@
 
   .rc-check-no {
     color: rgb(239, 68, 68);
-  }
+  }
+
+  @container (max-width: 520px) {
+    .rc-container {
+      gap: 1rem;
+      padding: 0;
+    }
+
+    .rc-card {
+      border-radius: 1rem;
+      gap: 1.25rem;
+      padding: 1rem;
+    }
+
+    .rc-control-section {
+      gap: 1.25rem;
+    }
+
+    .rc-group-title {
+      margin-bottom: 0.75rem;
+    }
+
+    .rc-inputs-grid,
+    .rc-comparison-grid {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .rc-color-input-container {
+      align-items: stretch;
+    }
+
+    .rc-color-picker {
+      flex: 0 0 2.5rem;
+    }
+
+    .rc-score-card,
+    .rc-apca-breakdown {
+      padding: 1rem;
+      border-radius: 0.75rem;
+    }
+
+    .rc-main-preview-box {
+      min-height: 120px;
+      padding: 1.25rem;
+      border-radius: 0.875rem;
+    }
+
+    .rc-breakdown-item {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.35rem;
+    }
+
+    .rc-item-check {
+      text-align: left;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .rc-container {
+      gap: 1rem;
+      padding: 0;
+    }
+
+    .rc-card {
+      border-radius: 1rem;
+      gap: 1.25rem;
+      padding: 1rem;
+    }
+  }

package/src/tool/serpPixelSimulator/bibliography.astro

@@ -0,0 +1,7 @@
+---
+import { bibliography } from './bibliography';
+---
+
+<ul>
+  {bibliography.map((item) => <li><a href={item.url} rel="nofollow noopener" target="_blank">{item.name}</a></li>)}
+</ul>

package/src/tool/serpPixelSimulator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Google Search Central: Control your snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/snippet',
+  },
+  {
+    name: 'Google Search Central: Influencing title links in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link',
+  },
+  {
+    name: 'Google Search Central: Create good titles and snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link#best-practices',
+  },
+];

package/src/tool/serpPixelSimulator/component.astro

@@ -0,0 +1,84 @@
+---
+import type { SerpPixelSimulatorUI } from './ui';
+import './serp-pixel-simulator.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SerpPixelSimulatorUI;
+---
+
+<div id="sps-root" class="sps-root" data-i18n={JSON.stringify(t)}>
+  <section class="sps-card">
+    <div class="sps-shell">
+      <div class="sps-panel" aria-label={t.titleLabel}>
+        <div class="sps-field">
+          <label class="sps-label" for="sps-title">{t.titleLabel}</label>
+          <input id="sps-title" class="sps-input" type="text" maxlength="180" placeholder={t.titlePlaceholder} value={t.defaultTitle} />
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-url">{t.urlLabel}</label>
+          <div class="sps-url-control">
+            <input id="sps-url" class="sps-input sps-url-input" type="url" placeholder={t.urlPlaceholder} value={t.defaultUrl} />
+            <button id="sps-fetch" class="sps-fetch-button" type="button">{t.fetchButtonLabel}</button>
+          </div>
+          <p id="sps-fetch-message" class="sps-fetch-message" aria-live="polite"></p>
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-description">{t.descriptionLabel}</label>
+          <textarea id="sps-description" class="sps-textarea" maxlength="360" placeholder={t.descriptionPlaceholder}>{t.defaultDescription}</textarea>
+        </div>
+
+        <div class="sps-device">
+          <span class="sps-device-label">{t.deviceLabel}</span>
+          <div class="sps-segment" role="group" aria-label={t.deviceLabel}>
+            <button id="sps-desktop" type="button" aria-pressed="true">{t.desktopLabel}</button>
+            <button id="sps-mobile" type="button" aria-pressed="false">{t.mobileLabel}</button>
+          </div>
+        </div>
+
+        <div id="sps-title-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.titlePixelsLabel}</span>
+            <span id="sps-title-count">0 {t.pixelUnit} / 580 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-title-fill" class="sps-fill"></span></div>
+          <span id="sps-title-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+
+        <div id="sps-description-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.descriptionPixelsLabel}</span>
+            <span id="sps-description-count">0 {t.pixelUnit} / 920 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-description-fill" class="sps-fill"></span></div>
+          <span id="sps-description-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+      </div>
+
+      <div class="sps-preview-wrap" aria-label={t.previewLabel}>
+        <h2 class="sps-preview-title">{t.previewLabel}</h2>
+        <article id="sps-serp" class="sps-serp">
+          <div class="sps-url-line">
+            <span id="sps-favicon-fallback" class="sps-favicon" aria-hidden="true">{t.fallbackFaviconText}</span>
+            <img id="sps-favicon-image" class="sps-favicon-image sps-hidden" alt="" />
+            <div id="sps-preview-url" class="sps-url-text">{t.fallbackUrl}</div>
+          </div>
+          <h3 id="sps-preview-title" class="sps-serp-title">{t.emptyTitle}</h3>
+          <p id="sps-preview-description" class="sps-description">{t.emptyDescription}</p>
+        </article>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { initSerpPixelSimulator } from './controller';
+
+  const root = document.getElementById('sps-root') as HTMLElement;
+  initSerpPixelSimulator(root);
+</script>

package/src/tool/serpPixelSimulator/controller.ts

@@ -0,0 +1,323 @@
+import { DESCRIPTION_LIMIT, getTitleLimit, ratioToPercent, type SerpDevice } from './logic';
+import type { SerpPixelSimulatorUI } from './ui';
+
+interface StoredState {
+  title?: string;
+  url?: string;
+  description?: string;
+  device?: SerpDevice;
+  favicon?: string;
+}
+
+interface Elements {
+  titleInput: HTMLInputElement;
+  urlInput: HTMLInputElement;
+  fetchButton: HTMLButtonElement;
+  fetchMessage: HTMLElement;
+  descriptionInput: HTMLTextAreaElement;
+  desktopButton: HTMLButtonElement;
+  mobileButton: HTMLButtonElement;
+  serpCard: HTMLElement;
+  faviconFallback: HTMLElement;
+  faviconImage: HTMLImageElement;
+  previewTitle: HTMLElement;
+  previewUrl: HTMLElement;
+  previewDescription: HTMLElement;
+  titleMeter: HTMLElement;
+  descriptionMeter: HTMLElement;
+  titleFill: HTMLElement;
+  descriptionFill: HTMLElement;
+  titleCount: HTMLElement;
+  descriptionCount: HTMLElement;
+  titleStatus: HTMLElement;
+  descriptionStatus: HTMLElement;
+}
+
+interface MeterParts {
+  meter: HTMLElement;
+  fill: HTMLElement;
+  count: HTMLElement;
+  status: HTMLElement;
+}
+
+interface FetchResult {
+  response: Response;
+  url: string;
+}
+
+const storageKey = 'serpPixelSimulator:lastState';
+const titleFont = '20px Arial, Helvetica, sans-serif';
+const descriptionFont = '14px Arial, Helvetica, sans-serif';
+
+function getElement<T extends HTMLElement>(id: string): T {
+  return document.getElementById(id) as T;
+}
+
+function collectElements(): Elements {
+  return {
+    titleInput: getElement<HTMLInputElement>('sps-title'),
+    urlInput: getElement<HTMLInputElement>('sps-url'),
+    fetchButton: getElement<HTMLButtonElement>('sps-fetch'),
+    fetchMessage: getElement('sps-fetch-message'),
+    descriptionInput: getElement<HTMLTextAreaElement>('sps-description'),
+    desktopButton: getElement<HTMLButtonElement>('sps-desktop'),
+    mobileButton: getElement<HTMLButtonElement>('sps-mobile'),
+    serpCard: getElement('sps-serp'),
+    faviconFallback: getElement('sps-favicon-fallback'),
+    faviconImage: getElement<HTMLImageElement>('sps-favicon-image'),
+    previewTitle: getElement('sps-preview-title'),
+    previewUrl: getElement('sps-preview-url'),
+    previewDescription: getElement('sps-preview-description'),
+    titleMeter: getElement('sps-title-meter'),
+    descriptionMeter: getElement('sps-description-meter'),
+    titleFill: getElement('sps-title-fill'),
+    descriptionFill: getElement('sps-description-fill'),
+    titleCount: getElement('sps-title-count'),
+    descriptionCount: getElement('sps-description-count'),
+    titleStatus: getElement('sps-title-status'),
+    descriptionStatus: getElement('sps-description-status'),
+  };
+}
+
+function measure(context: CanvasRenderingContext2D, text: string, font: string): number {
+  context.font = font;
+  return context.measureText(text).width;
+}
+
+function trimToPixels(context: CanvasRenderingContext2D, text: string, limit: number, font: string, suffix: string): string {
+  if (measure(context, text, font) <= limit) return text;
+  let low = 0;
+  let high = text.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    const candidate = `${text.slice(0, middle).trimEnd()}${suffix}`;
+    if (measure(context, candidate, font) <= limit) low = middle;
+    else high = middle - 1;
+  }
+  return `${text.slice(0, low).trimEnd()}${suffix}`;
+}
+
+function displayUrl(rawUrl: string, fallbackUrl: string): string {
+  if (!rawUrl.trim()) return fallbackUrl;
+  try {
+    const url = new URL(rawUrl);
+    return `${url.hostname}${url.pathname === '/' ? '' : url.pathname}`;
+  } catch {
+    return rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') || fallbackUrl;
+  }
+}
+
+function setMessage(el: HTMLElement, message: string, tone: string): void {
+  el.textContent = message;
+  el.dataset.tone = tone;
+}
+
+function normalizedUrl(rawUrl: string): string | null {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return null;
+  const value = /^[a-z][a-z\d+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  try {
+    return new URL(value).toString();
+  } catch {
+    return null;
+  }
+}
+
+function candidateUrls(rawUrl: string): string[] {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return [];
+  if (/^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)) {
+    const url = normalizedUrl(trimmed);
+    return url ? [url] : [];
+  }
+  return ['https://', 'http://'].flatMap((protocol) => {
+    try {
+      return [new URL(`${protocol}${trimmed}`).toString()];
+    } catch {
+      return [];
+    }
+  });
+}
+
+function extractMetaDescription(doc: Document): string {
+  const selectors = ['meta[name="description"]', 'meta[property="og:description"]', 'meta[name="twitter:description"]'];
+  for (const selector of selectors) {
+    const value = doc.querySelector(selector)?.getAttribute('content')?.trim();
+    if (value) return value;
+  }
+  return '';
+}
+
+function extractFavicon(doc: Document, pageUrl: string): string {
+  const selectors = ['link[rel~="icon"][href]', 'link[rel="shortcut icon"][href]', 'link[rel="apple-touch-icon"][href]', 'link[rel="apple-touch-icon-precomposed"][href]'];
+  for (const selector of selectors) {
+    const href = doc.querySelector(selector)?.getAttribute('href')?.trim();
+    if (!href) continue;
+    try {
+      return new URL(href, pageUrl).toString();
+    } catch {
+      return '';
+    }
+  }
+  return new URL('/favicon.ico', pageUrl).toString();
+}
+
+function stateFromElements(elements: Elements, device: SerpDevice): StoredState {
+  return {
+    title: elements.titleInput.value,
+    url: elements.urlInput.value,
+    description: elements.descriptionInput.value,
+    device,
+    favicon: elements.faviconImage.classList.contains('sps-hidden') ? '' : elements.faviconImage.src,
+  };
+}
+
+function saveState(elements: Elements, device: SerpDevice): void {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(stateFromElements(elements, device)));
+  } catch {
+    return;
+  }
+}
+
+function readState(): StoredState | null {
+  try {
+    const rawState = localStorage.getItem(storageKey);
+    return rawState ? (JSON.parse(rawState) as StoredState) : null;
+  } catch {
+    localStorage.removeItem(storageKey);
+    return null;
+  }
+}
+
+function setDevice(elements: Elements, device: SerpDevice): void {
+  elements.desktopButton.setAttribute('aria-pressed', String(device === 'desktop'));
+  elements.mobileButton.setAttribute('aria-pressed', String(device === 'mobile'));
+  elements.serpCard.classList.toggle('sps-mobile', device === 'mobile');
+}
+
+function setFavicon(elements: Elements, src: string): void {
+  elements.faviconImage.src = src;
+  elements.faviconImage.hidden = false;
+  elements.faviconImage.removeAttribute('hidden');
+  elements.faviconImage.classList.remove('sps-hidden');
+  elements.faviconFallback.hidden = false;
+  elements.faviconFallback.removeAttribute('hidden');
+  elements.faviconFallback.classList.add('sps-hidden');
+}
+
+function restoreState(elements: Elements): SerpDevice {
+  const state = readState();
+  if (!state) return 'desktop';
+  if (typeof state.title === 'string') elements.titleInput.value = state.title;
+  if (typeof state.url === 'string') elements.urlInput.value = state.url;
+  if (typeof state.description === 'string') elements.descriptionInput.value = state.description;
+  if (typeof state.favicon === 'string' && state.favicon) setFavicon(elements, state.favicon);
+  return state.device === 'mobile' ? 'mobile' : 'desktop';
+}
+
+function updateMeter(parts: MeterParts, width: number, limit: number, unit: string, okText: string, tooLongText: string): void {
+  const isOver = width > limit;
+  parts.meter.classList.toggle('sps-over', isOver);
+  parts.fill.style.width = `${ratioToPercent(width, limit)}%`;
+  parts.count.textContent = `${Math.round(width)} ${unit} / ${Math.round(limit)} ${unit}`;
+  parts.status.textContent = isOver ? tooLongText : okText;
+}
+
+function updatePreview(elements: Elements, context: CanvasRenderingContext2D, ui: SerpPixelSimulatorUI, device: SerpDevice): void {
+  const title = elements.titleInput.value.trim() || ui.emptyTitle;
+  const description = elements.descriptionInput.value.trim() || ui.emptyDescription;
+  const titleLimit = getTitleLimit(device);
+  elements.previewTitle.textContent = trimToPixels(context, title, titleLimit, titleFont, ui.ellipsis);
+  elements.previewDescription.textContent = trimToPixels(context, description, DESCRIPTION_LIMIT, descriptionFont, ui.ellipsis);
+  elements.previewUrl.textContent = displayUrl(elements.urlInput.value, ui.fallbackUrl);
+  updateMeter({ meter: elements.titleMeter, fill: elements.titleFill, count: elements.titleCount, status: elements.titleStatus }, measure(context, title, titleFont), titleLimit, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+  updateMeter({ meter: elements.descriptionMeter, fill: elements.descriptionFill, count: elements.descriptionCount, status: elements.descriptionStatus }, measure(context, description, descriptionFont), DESCRIPTION_LIMIT, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+}
+
+async function fetchFirst(urls: string[]): Promise<FetchResult> {
+  let lastError: unknown = null;
+  for (const url of urls) {
+    try {
+      return { response: await fetch(url, { method: 'GET', mode: 'cors', credentials: 'omit' }), url };
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError instanceof Error ? lastError : new TypeError('Fetch failed');
+}
+
+function applyFetched(elements: Elements, doc: Document, url: string): boolean {
+  const title = doc.querySelector('title')?.textContent?.trim() ?? '';
+  const description = extractMetaDescription(doc);
+  if (!title && !description) return false;
+  if (title) elements.titleInput.value = title;
+  if (description) elements.descriptionInput.value = description;
+  setFavicon(elements, extractFavicon(doc, url));
+  elements.urlInput.value = url;
+  return true;
+}
+
+export function initSerpPixelSimulator(root: HTMLElement): void {
+  const ui = JSON.parse(root.dataset.i18n ?? '{}') as SerpPixelSimulatorUI;
+  const elements = collectElements();
+  const context = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+  let device = restoreState(elements);
+  const render = () => updatePreview(elements, context, ui, device);
+  const persistAndRender = () => {
+    setMessage(elements.fetchMessage, '', 'neutral');
+    saveState(elements, device);
+    render();
+  };
+
+  setDevice(elements, device);
+  elements.titleInput.addEventListener('input', persistAndRender);
+  elements.urlInput.addEventListener('input', persistAndRender);
+  elements.descriptionInput.addEventListener('input', persistAndRender);
+  elements.desktopButton.addEventListener('click', () => {
+    device = 'desktop';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.mobileButton.addEventListener('click', () => {
+    device = 'mobile';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.faviconImage.addEventListener('error', () => {
+    elements.faviconImage.removeAttribute('src');
+    elements.faviconImage.classList.add('sps-hidden');
+    elements.faviconFallback.classList.remove('sps-hidden');
+    saveState(elements, device);
+  });
+  elements.fetchButton.addEventListener('click', () => {
+    void fetchMetadata(elements, ui, device, context);
+  });
+  render();
+}
+
+async function fetchMetadata(elements: Elements, ui: SerpPixelSimulatorUI, device: SerpDevice, context: CanvasRenderingContext2D): Promise<void> {
+  const urls = candidateUrls(elements.urlInput.value);
+  if (urls.length === 0) {
+    setMessage(elements.fetchMessage, ui.fetchInvalidUrlError, 'error');
+    saveState(elements, device);
+    return;
+  }
+  elements.fetchButton.disabled = true;
+  elements.fetchButton.textContent = ui.fetchLoadingLabel;
+  setMessage(elements.fetchMessage, '', 'neutral');
+  try {
+    const result = await fetchFirst(urls);
+    if (!result.response.ok) throw new Error(`HTTP ${result.response.status}`);
+    const doc = new DOMParser().parseFromString(await result.response.text(), 'text/html');
+    if (!applyFetched(elements, doc, result.url)) setMessage(elements.fetchMessage, ui.fetchNoMetadataError, 'error');
+    else setMessage(elements.fetchMessage, ui.fetchSuccessLabel, 'success');
+  } catch (error) {
+    setMessage(elements.fetchMessage, error instanceof TypeError ? ui.fetchCorsError : ui.fetchGenericError, 'error');
+  } finally {
+    elements.fetchButton.disabled = false;
+    elements.fetchButton.textContent = ui.fetchButtonLabel;
+    saveState(elements, device);
+    updatePreview(elements, context, ui, device);
+  }
+}

package/src/tool/serpPixelSimulator/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { SerpPixelSimulatorUI } from './ui';
+
+export type SerpPixelSimulatorLocaleContent = ToolLocaleContent<SerpPixelSimulatorUI>;
+
+export const serpPixelSimulator: DeveloperToolEntry<SerpPixelSimulatorUI> = {
+  id: 'serp-pixel-simulator',
+  icons: {
+    bg: 'mdi:google',
+    fg: 'mdi:ruler-square',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};