@decocms/blocks 7.0.0

package/src/sdk/serverTimings.ts

@@ -0,0 +1,68 @@
+/**
+ * Server-Timing header builder.
+ *
+ * Tracks named timing entries during a request and serializes them
+ * into the `Server-Timing` HTTP header for visibility in DevTools.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing
+ *
+ * @example
+ * ```ts
+ * const timings = createServerTimings();
+ * const end = timings.start("resolve-cms");
+ * await resolvePage();
+ * end();
+ * response.headers.set("Server-Timing", timings.toHeader());
+ * ```
+ */
+export interface ServerTimings {
+  /** Start a named timing. Returns a function to call when done. */
+  start(name: string, description?: string): () => void;
+  /** Record a completed timing with a known duration. */
+  record(name: string, durationMs: number, description?: string): void;
+  /** Serialize all timings to a `Server-Timing` header value. */
+  toHeader(): string;
+  /** Get all recorded entries for diagnostics. */
+  entries(): TimingEntry[];
+}
+
+export interface TimingEntry {
+  name: string;
+  durationMs: number;
+  description?: string;
+}
+
+export function createServerTimings(): ServerTimings {
+  const timingEntries: TimingEntry[] = [];
+
+  return {
+    start(name: string, description?: string) {
+      const startTime = performance.now();
+      return () => {
+        const durationMs = performance.now() - startTime;
+        timingEntries.push({ name, durationMs, description });
+      };
+    },
+
+    record(name: string, durationMs: number, description?: string) {
+      timingEntries.push({ name, durationMs, description });
+    },
+
+    toHeader(): string {
+      return timingEntries
+        .map((entry) => {
+          let value = entry.name;
+          if (entry.description) {
+            value += `;desc="${entry.description}"`;
+          }
+          value += `;dur=${entry.durationMs.toFixed(1)}`;
+          return value;
+        })
+        .join(", ");
+    },
+
+    entries() {
+      return [...timingEntries];
+    },
+  };
+}

package/src/sdk/signal.ts

@@ -0,0 +1,42 @@
+/**
+ * Reactive signal backed by @tanstack/store.
+ *
+ * Drop-in replacement for the preact signals shim.
+ * Preserves the .value getter/setter API so consumers don't need to change.
+ *
+ * For React components that need to re-render on state changes,
+ * use the useStore() hook from @tanstack/react-store:
+ *
+ *   import { useStore } from "@tanstack/react-store";
+ *   const value = useStore(mySignal.store);
+ */
+import { Store } from "@tanstack/store";
+
+export interface ReactiveSignal<T> {
+  readonly store: Store<T>;
+  value: T;
+  peek(): T;
+  subscribe(fn: () => void): () => void;
+}
+
+export function signal<T>(initialValue: T): ReactiveSignal<T> {
+  const store = new Store<T>(initialValue);
+
+  return {
+    store,
+    get value(): T {
+      return store.state;
+    },
+    set value(v: T) {
+      store.setState(() => v);
+    },
+    peek(): T {
+      return store.state;
+    },
+    subscribe(fn: () => void): () => void {
+      const sub = store.subscribe(() => fn());
+      return () => sub.unsubscribe();
+    },
+  };
+}
+

package/src/sdk/sitemap.ts

@@ -0,0 +1,160 @@
+/**
+ * Sitemap generation utilities.
+ *
+ * Provides XML sitemap generation from CMS page blocks and arbitrary
+ * URL lists. Designed to be composed with commerce-specific sitemap
+ * sources (VTEX, Shopify) in a TanStack Start API route.
+ *
+ * @example
+ * ```ts
+ * // src/routes/sitemap[.]xml.ts
+ * import { createAPIFileRoute } from "@tanstack/react-start/api";
+ * import { getCMSSitemapEntries, generateSitemapXml } from "@decocms/start/sdk/sitemap";
+ * import { getVtexSitemapEntries } from "@decocms/apps/vtex/utils/sitemap";
+ *
+ * export const APIRoute = createAPIFileRoute("/sitemap.xml")({
+ *   GET: async ({ request }) => {
+ *     const origin = new URL(request.url).origin;
+ *     const cmsEntries = getCMSSitemapEntries(origin);
+ *     const vtexEntries = await getVtexSitemapEntries(origin);
+ *     const xml = generateSitemapXml([...cmsEntries, ...vtexEntries]);
+ *     return new Response(xml, {
+ *       headers: {
+ *         "Content-Type": "application/xml",
+ *         "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
+ *       },
+ *     });
+ *   },
+ * });
+ * ```
+ */
+
+import { getAllPages, loadBlocks } from "../cms/loader";
+
+// -------------------------------------------------------------------------
+// Types
+// -------------------------------------------------------------------------
+
+export interface SitemapEntry {
+  loc: string;
+  lastmod?: string;
+  changefreq?: "always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never";
+  priority?: number;
+}
+
+export interface SitemapOptions {
+  /** Maximum entries per sitemap (Google limit is 50,000). @default 50000 */
+  maxEntries?: number;
+}
+
+export interface CMSSitemapOptions {
+  /** Default changefreq for non-home pages. @default "weekly" */
+  defaultChangefreq?: SitemapEntry["changefreq"];
+  /** Default priority for non-home pages (0.0–1.0). @default 0.7 */
+  defaultPriority?: number;
+  /** Changefreq for the home page. @default "daily" */
+  homeChangefreq?: SitemapEntry["changefreq"];
+  /** Priority for the home page (0.0–1.0). @default 1.0 */
+  homePriority?: number;
+}
+
+// -------------------------------------------------------------------------
+// CMS page entries
+// -------------------------------------------------------------------------
+
+/**
+ * Extract sitemap entries from CMS page blocks.
+ *
+ * Reads all pages from the block store and generates URLs from their
+ * path patterns (excluding wildcard-only patterns like `/*`).
+ */
+export function getCMSSitemapEntries(origin: string, options?: CMSSitemapOptions): SitemapEntry[] {
+  const pages = getAllPages();
+  const entries: SitemapEntry[] = [];
+  const today = new Date().toISOString().split("T")[0];
+
+  const defaultChangefreq = options?.defaultChangefreq ?? "weekly";
+  const defaultPriority = options?.defaultPriority ?? 0.7;
+  const homeChangefreq = options?.homeChangefreq ?? "daily";
+  const homePriority = options?.homePriority ?? 1.0;
+
+  for (const { page } of pages) {
+    if (!page.path) continue;
+
+    if (page.path.includes("*") || page.path.includes(":")) continue;
+
+    const isHome = page.path === "/";
+    const loc = `${origin}${isHome ? "" : page.path}`;
+    entries.push({
+      loc: loc || origin,
+      lastmod: today,
+      changefreq: isHome ? homeChangefreq : defaultChangefreq,
+      priority: isHome ? homePriority : defaultPriority,
+    });
+  }
+
+  return entries;
+}
+
+// -------------------------------------------------------------------------
+// XML generation
+// -------------------------------------------------------------------------
+
+function escapeXml(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+/**
+ * Generate a sitemap XML string from entries.
+ */
+export function generateSitemapXml(entries: SitemapEntry[], options?: SitemapOptions): string {
+  const max = options?.maxEntries ?? 50000;
+  const limited = entries.slice(0, max);
+
+  const urls = limited.map((entry) => {
+    let url = `  <url>\n    <loc>${escapeXml(entry.loc)}</loc>`;
+    if (entry.lastmod) url += `\n    <lastmod>${entry.lastmod}</lastmod>`;
+    if (entry.changefreq) url += `\n    <changefreq>${entry.changefreq}</changefreq>`;
+    if (entry.priority != null) url += `\n    <priority>${entry.priority.toFixed(1)}</priority>`;
+    url += "\n  </url>";
+    return url;
+  });
+
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+    ...urls,
+    "</urlset>",
+  ].join("\n");
+}
+
+/**
+ * Generate a sitemap index XML for splitting large sitemaps.
+ *
+ * @example
+ * ```ts
+ * const index = generateSitemapIndexXml([
+ *   `${origin}/sitemap-pages.xml`,
+ *   `${origin}/sitemap-products.xml`,
+ * ]);
+ * ```
+ */
+export function generateSitemapIndexXml(sitemapUrls: string[]): string {
+  const today = new Date().toISOString().split("T")[0];
+  const sitemaps = sitemapUrls.map(
+    (url) =>
+      `  <sitemap>\n    <loc>${escapeXml(url)}</loc>\n    <lastmod>${today}</lastmod>\n  </sitemap>`,
+  );
+
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+    ...sitemaps,
+    "</sitemapindex>",
+  ].join("\n");
+}

package/src/sdk/urlRedaction.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { redactUrl } from "./urlRedaction";
+
+describe("redactUrl", () => {
+  it("redacts every query value by default", () => {
+    expect(redactUrl("https://api.test/path?token=abc&page=2")).toBe(
+      "https://api.test/path?token=REDACTED&page=REDACTED",
+    );
+  });
+
+  it("preserves query keys listed in keepQueryKeys", () => {
+    expect(
+      redactUrl("https://api.test/path?token=abc&page=2&sort=name", {
+        keepQueryKeys: ["page", "sort"],
+      }),
+    ).toBe("https://api.test/path?token=REDACTED&page=2&sort=name");
+  });
+
+  it("preserves empty query values verbatim", () => {
+    expect(redactUrl("https://api.test/path?page=&token=abc")).toBe(
+      "https://api.test/path?page=&token=REDACTED",
+    );
+  });
+
+  it("strips userinfo from authority component", () => {
+    expect(redactUrl("https://user:secret@api.test/path?x=1")).toBe(
+      "https://api.test/path?x=REDACTED",
+    );
+  });
+
+  it("drops the fragment", () => {
+    expect(redactUrl("https://api.test/path?x=1#client-only-state-token=abc")).toBe(
+      "https://api.test/path?x=REDACTED",
+    );
+  });
+
+  it("preserves host and path verbatim", () => {
+    expect(redactUrl("https://api.test/products/12345/details?x=1")).toBe(
+      "https://api.test/products/12345/details?x=REDACTED",
+    );
+  });
+
+  it("falls back to substring-before-? on unparseable URLs", () => {
+    // Missing scheme — URL constructor throws.
+    expect(redactUrl("not-a-url?token=abc")).toBe("not-a-url");
+  });
+
+  it("falls back to substring-before-# on unparseable URLs (no `?`)", () => {
+    // Fragments can also carry secrets (`#access_token=…` in OAuth implicit
+    // grant). The defensive path must drop them too.
+    expect(redactUrl("not-a-url#access_token=abc")).toBe("not-a-url");
+  });
+
+  it("falls back to whichever of `?` / `#` appears first on unparseable URLs", () => {
+    expect(redactUrl("not-a-url?x=1#y=2")).toBe("not-a-url");
+    expect(redactUrl("not-a-url#frag?then=secret")).toBe("not-a-url");
+  });
+
+  it("returns the raw value when there is no query and the URL is unparseable", () => {
+    expect(redactUrl("relative/path")).toBe("relative/path");
+  });
+
+  it("handles URLs without query string unchanged", () => {
+    expect(redactUrl("https://api.test/products")).toBe("https://api.test/products");
+  });
+
+  it("redacts multi-value query parameters (e.g. ?fq=a&fq=b)", () => {
+    // URLSearchParams collapses repeated keys to a single value when .set() is
+    // called — the OTel guideline accepts this as acceptable cardinality loss.
+    const out = redactUrl("https://api.test/path?fq=a&fq=b");
+    expect(out).toBe("https://api.test/path?fq=REDACTED");
+  });
+});

package/src/sdk/urlRedaction.ts

@@ -0,0 +1,82 @@
+/**
+ * URL redaction for observability surfaces.
+ *
+ * Strips secrets from outbound URLs before they land on a log line or a
+ * span attribute. The redacted output preserves enough of the URL for
+ * operators to recognize the call (host, path, which query keys were
+ * present) without leaking values that may carry tokens, session IDs,
+ * personal data, or other regulated content.
+ *
+ * Why a separate helper (instead of doing it in the ingestor):
+ *
+ *  - Spans land in CF Workers Tracing before they ever reach our
+ *    ingestor; once the unredacted value is stamped on `http.url`, it's
+ *    in the CF dashboard whether we like it or not.
+ *  - Logs go through `console.log` which Cloudflare captures into
+ *    Workers Logs immediately — same problem.
+ *  - The ingestor's `redactSensitiveHeaders` only covers headers, not
+ *    URLs. Redacting URLs at the emit site is the only way to avoid
+ *    landing a token on a platform we don't control.
+ *
+ * Redaction rules:
+ *
+ *  - Strip userinfo (`https://user:pass@host`) entirely.
+ *  - Drop the fragment (`#...`) — fragments are client-side only and
+ *    may carry SPA state that includes tokens.
+ *  - Replace every query value with `"REDACTED"` unless its key is in
+ *    `keepQueryKeys`. Empty values stay empty so dashboards can still
+ *    distinguish `?foo=` from `?foo=secret`.
+ *  - Preserve the host and path verbatim. Path normalization (e.g.
+ *    collapsing `/p/[slug]`) lives in `observability.ts:normalizePath`
+ *    on the metrics side and is intentionally NOT bundled here.
+ *  - Unparseable inputs fall back to a defensive substring before the
+ *    `?`, so a malformed URL never accidentally surfaces a query string.
+ */
+
+const REDACTED = "REDACTED";
+
+export interface RedactUrlOptions {
+  /**
+   * Query parameter names whose value should be left intact. Useful for
+   * structural / debugging params like `page`, `sort`, `view` that don't
+   * carry secrets. Names are case-sensitive (matches `URLSearchParams`).
+   *
+   * By default this is empty — every value is redacted.
+   */
+  keepQueryKeys?: ReadonlyArray<string>;
+}
+
+export function redactUrl(input: string, options: RedactUrlOptions = {}): string {
+  const keep = options.keepQueryKeys ? new Set(options.keepQueryKeys) : null;
+
+  try {
+    const u = new URL(input);
+    // userinfo — never preserve.
+    u.username = "";
+    u.password = "";
+    // fragment — drop. Browsers don't send it, but it can sneak into
+    // server-side URLs via misconfigured proxies.
+    u.hash = "";
+
+    // searchParams.set() mutates URLSearchParams in place. Iterating a
+    // snapshot via [...entries()] is the supported way to avoid mutating
+    // the iterator we're walking.
+    const entries = [...u.searchParams.entries()];
+    for (const [key, value] of entries) {
+      if (keep && keep.has(key)) continue;
+      // Preserve empty values (`?k=` stays `?k=`) so dashboards can still
+      // distinguish empty from redacted-with-content.
+      if (value.length === 0) continue;
+      u.searchParams.set(key, REDACTED);
+    }
+
+    return u.toString();
+  } catch {
+    // Unparseable URL — defensively drop everything from the first `?`
+    // OR `#` onwards. Either can carry a secret (`?token=…`,
+    // `#access_token=…`); cutting at whichever appears first preserves
+    // the most context while leaking nothing.
+    const idx = input.search(/[?#]/);
+    return idx >= 0 ? input.slice(0, idx) : input;
+  }
+}

package/src/sdk/urlUtils.ts

@@ -0,0 +1,134 @@
+/**
+ * URL utility functions.
+ *
+ * Handles UTM parameter stripping for cache-friendly URLs,
+ * canonical URL generation, and other URL manipulation.
+ */
+
+const UTM_PARAMS = new Set([
+  "utm_source",
+  "utm_medium",
+  "utm_campaign",
+  "utm_term",
+  "utm_content",
+  "utmi_campaign",
+  "utmi_page",
+  "utmi_part",
+  "fbclid",
+  "gclid",
+  "gclsrc",
+  "dclid",
+  "msclkid",
+  "twclid",
+  "li_fat_id",
+  "mc_cid",
+  "mc_eid",
+  "ttclid",
+  "srsltid",
+]);
+
+/**
+ * Register additional tracking parameters to strip from cache keys.
+ * Useful for proprietary attribution params (e.g., custom analytics tags).
+ */
+export function registerTrackingParam(param: string): void {
+  UTM_PARAMS.add(param.toLowerCase());
+}
+
+/**
+ * Register multiple additional tracking parameters at once.
+ */
+export function registerTrackingParams(params: string[]): void {
+  for (const param of params) {
+    UTM_PARAMS.add(param.toLowerCase());
+  }
+}
+
+/**
+ * Strip UTM and tracking parameters from a URL.
+ *
+ * Used to normalize URLs for caching -- two requests that differ
+ * only in UTM params should hit the same cache entry.
+ *
+ * @example
+ * ```ts
+ * stripTrackingParams("https://example.com/shoes?color=red&utm_source=google")
+ * // => "https://example.com/shoes?color=red"
+ * ```
+ */
+export function stripTrackingParams(urlString: string): string {
+  try {
+    const url = new URL(urlString);
+    let changed = false;
+
+    for (const param of [...url.searchParams.keys()]) {
+      if (UTM_PARAMS.has(param.toLowerCase())) {
+        url.searchParams.delete(param);
+        changed = true;
+      }
+    }
+
+    return changed ? url.toString() : urlString;
+  } catch {
+    return urlString;
+  }
+}
+
+/**
+ * Strip tracking params from a URL and return just the pathname + non-UTM search.
+ * Useful for cache key generation.
+ */
+export function cleanPathForCacheKey(urlString: string): string {
+  try {
+    const url = new URL(urlString);
+
+    for (const param of [...url.searchParams.keys()]) {
+      if (UTM_PARAMS.has(param.toLowerCase())) {
+        url.searchParams.delete(param);
+      }
+    }
+
+    const search = url.searchParams.toString();
+    return search ? `${url.pathname}?${search}` : url.pathname;
+  } catch {
+    return urlString;
+  }
+}
+
+/**
+ * Build a canonical URL from a request, stripping tracking params
+ * and normalizing the protocol/host.
+ *
+ * @param request - The incoming request
+ * @param baseUrl - Override origin (useful when behind a proxy)
+ */
+export function canonicalUrl(request: Request, baseUrl?: string): string {
+  const url = new URL(request.url);
+  const origin = baseUrl ?? url.origin;
+
+  for (const param of [...url.searchParams.keys()]) {
+    if (UTM_PARAMS.has(param.toLowerCase())) {
+      url.searchParams.delete(param);
+    }
+  }
+
+  const search = url.searchParams.toString();
+  const path = search ? `${url.pathname}?${search}` : url.pathname;
+
+  return `${origin}${path}`;
+}
+
+/**
+ * Check if a URL has any tracking/UTM parameters.
+ */
+export function hasTrackingParams(urlString: string): boolean {
+  try {
+    const url = new URL(urlString);
+    for (const param of url.searchParams.keys()) {
+      if (UTM_PARAMS.has(param.toLowerCase())) return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}

package/src/sdk/useDevice.test.ts

@@ -0,0 +1,130 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { DeviceProvider, detectDevice, isMobileUA, useDevice } from "./useDevice";
+
+describe("detectDevice", () => {
+  it("detects iPhone as mobile", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+      ),
+    ).toBe("mobile");
+  });
+
+  it("detects Android phone as mobile", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36",
+      ),
+    ).toBe("mobile");
+  });
+
+  it("detects iPad as tablet", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+      ),
+    ).toBe("tablet");
+  });
+
+  it("detects Android tablet as tablet", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (Linux; Android 14; SM-X200) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+      ),
+    ).toBe("tablet");
+  });
+
+  it("detects Chrome desktop as desktop", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+      ),
+    ).toBe("desktop");
+  });
+
+  it("returns desktop for empty UA", () => {
+    expect(detectDevice("")).toBe("desktop");
+  });
+
+  it("detects Googlebot as desktop", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
+      ),
+    ).toBe("desktop");
+  });
+
+  it("detects Googlebot mobile as mobile", () => {
+    expect(
+      detectDevice(
+        "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36 (compatible; Googlebot/2.1)",
+      ),
+    ).toBe("mobile");
+  });
+});
+
+describe("isMobileUA", () => {
+  it("returns true for mobile UAs", () => {
+    expect(isMobileUA("iPhone")).toBe(true);
+  });
+
+  it("returns true for tablet UAs", () => {
+    expect(isMobileUA("iPad")).toBe(true);
+  });
+
+  it("returns false for desktop UAs", () => {
+    expect(
+      isMobileUA(
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("useDevice (isomorphic)", () => {
+  it("uses navigator.userAgent on client, not viewport width", () => {
+    // In jsdom, document exists → useDevice takes the client path.
+    // It should use navigator.userAgent (same mechanism as server-side)
+    // to ensure consistent values between SSR and hydration.
+    // jsdom's navigator.userAgent is a desktop-like string.
+    const device = useDevice();
+    const expected = detectDevice(navigator.userAgent);
+    expect(device).toBe(expected);
+  });
+
+  it("returns consistent result with detectDevice(navigator.userAgent)", () => {
+    // This is the key SSR/hydration consistency check:
+    // server calls detectDevice(req.headers["user-agent"])
+    // client calls detectDevice(navigator.userAgent)
+    // Both use the same detectDevice() function → same result for same UA.
+    const clientResult = useDevice();
+    const directResult = detectDevice(navigator.userAgent);
+    expect(clientResult).toBe(directResult);
+  });
+});
+
+describe("DeviceProvider seeds useDevice() with the serialized value (#278)", () => {
+  function Probe() {
+    // Inside a render, useDevice() reads DeviceContext — this is the path that
+    // makes hydration stable when the value comes from the page loader.
+    return createElement("span", null, useDevice());
+  }
+
+  it("useDevice() returns the provider value, overriding runtime detection", () => {
+    // jsdom's navigator is desktop-like, so a "tablet" result can only come
+    // from the provider value (the server-resolved device), not runtime.
+    const html = renderToStaticMarkup(
+      createElement(DeviceProvider, { value: "tablet", children: createElement(Probe) }),
+    );
+    expect(html).toBe("<span>tablet</span>");
+  });
+
+  it("falls back to runtime resolution when no value is provided", () => {
+    const html = renderToStaticMarkup(
+      createElement(DeviceProvider, { children: createElement(Probe) }),
+    );
+    expect(html).toBe(`<span>${detectDevice(navigator.userAgent)}</span>`);
+  });
+});