blume 1.0.3 → 1.1.0

package/src/deploy/headers.ts

@@ -0,0 +1,66 @@
+import { normalizeBasePath } from "../core/base-path.ts";
+import type { ResolvedConfig } from "../core/schema.ts";
+
+/**
+ * The `_headers` file for a static build (Netlify + Cloudflare Pages/Workers
+ * static assets). Blume's raw AI-ready endpoints — `/<route>.md`, `/<route>.mdx`,
+ * and the `.txt` files (`llms.txt`, `llms-full.txt`) — are valid UTF-8, but a
+ * static host serves them from the file extension alone, and common hosts send
+ * `text/markdown` / `text/plain` with **no** `charset`. Browsers then fall back
+ * to Windows-1252 for non-HTML text, so any non-ASCII docs (Japanese, accented
+ * Latin, …) render as mojibake when the raw URL is opened directly. HTML pages
+ * escape this because they carry `<meta charset>`; the raw endpoints have only
+ * the HTTP header. Pinning `charset=utf-8` here matches the Content-Type these
+ * same routes already send from the dev/server runtime (see
+ * `astro/templates.ts`). Hosts that don't read `_headers` (Vercel, S3) ignore
+ * the file harmlessly.
+ */
+
+/**
+ * One rule per served extension. `.mdx` uses `text/markdown` to match the
+ * runtime endpoint, which serves both variants as `text/markdown`. The raw
+ * Markdown mirrors live under the page routes (which carry `basePath`), while
+ * the `.txt` files (`llms.txt`, `llms-full.txt`) are written to the dist root
+ * and served at the deployment base — so only the `.md`/`.mdx` rules take the
+ * `basePath` layer.
+ */
+const HEADER_RULES: readonly {
+  contentType: string;
+  ext: string;
+  underBasePath: boolean;
+}[] = [
+  {
+    contentType: "text/markdown; charset=utf-8",
+    ext: "md",
+    underBasePath: true,
+  },
+  {
+    contentType: "text/markdown; charset=utf-8",
+    ext: "mdx",
+    underBasePath: true,
+  },
+  {
+    contentType: "text/plain; charset=utf-8",
+    ext: "txt",
+    underBasePath: false,
+  },
+];
+
+/**
+ * `_headers` contents: a `/*.<ext>` glob per rule with an indented
+ * `Content-Type` line, in the two-space format Netlify and Cloudflare read. The
+ * glob carries the served prefix (`{deployment.base}{basePath}` for the
+ * Markdown mirrors, `{deployment.base}` for the root `.txt` files) so the rules
+ * still match once the site is mounted under a subpath (`/docs/*.md`); the
+ * wildcard spans path segments, so a nested route like `/docs/ja/intro.md`
+ * matches too.
+ */
+export const buildNetlifyHeaders = (config: ResolvedConfig): string => {
+  const deployBase = normalizeBasePath(config.deployment.base);
+  return `${HEADER_RULES.map((rule) => {
+    const prefix = rule.underBasePath
+      ? `${deployBase}${config.basePath}`
+      : deployBase;
+    return `${prefix}/*.${rule.ext}\n  Content-Type: ${rule.contentType}`;
+  }).join("\n")}\n`;
+};

package/src/deploy/redirects.ts

@@ -1,4 +1,8 @@
-import { withBasePath } from "../core/base-path.ts";
+import {
+  normalizeBasePath,
+  withBasePath,
+  withComposedBasePath,
+} from "../core/base-path.ts";
 import type { ResolvedConfig } from "../core/schema.ts";
 
 /**
@@ -12,21 +16,57 @@ import type { ResolvedConfig } from "../core/schema.ts";
 type Redirect = ResolvedConfig["redirects"][number];
 
 /**
- * Prepend the site-wide `basePath` to each redirect's internal `from`/`to`
- * (both are authored as if mounted at root); external `to` URLs pass through.
- * Idempotent, so re-basing an already-based redirect is safe.
+ * Base a redirect for Astro's `redirects` config, where the two sides are not
+ * symmetric:
+ *
+ * - `from` gains only `basePath`. Astro builds the match pattern with
+ *   `deployment.base` already applied (`getPattern(segments, config.base)`), so
+ *   adding it here would serve the redirect at `{base}{base}/from`.
+ * - `to` gains the full `{deployment.base}{basePath}` stack. Astro resolves a
+ *   destination that matches a known route by regenerating it from that route's
+ *   segments, which carry no base — and passes an unmatched destination through
+ *   verbatim. Neither path prepends `base`, so a root-relative `to` escapes the
+ *   base entirely (withastro/astro#7774, still the behavior in Astro 7).
+ *
+ * Both sides are authored as if mounted at root; external `to` URLs pass
+ * through. Idempotent, so a hand-written base isn't doubled.
  */
-export const applyBaseToRedirects = (
+export const applyBaseToAstroRedirects = (
   redirects: Redirect[],
-  basePath: string
-): Redirect[] =>
-  basePath
+  basePath: string,
+  deployBase: string
+): Redirect[] => {
+  // `deployment.base` arrives as the user wrote it (Astro accepts `/base/`,
+  // even `base`); normalizing here keeps the composed paths well-formed.
+  const base = normalizeBasePath(deployBase);
+  return basePath || base
     ? redirects.map((redirect) => ({
         ...redirect,
         from: withBasePath(basePath, redirect.from),
-        to: withBasePath(basePath, redirect.to),
+        to: withComposedBasePath(base, basePath, redirect.to),
       }))
     : redirects;
+};
+
+/**
+ * Base a redirect for the host platform files below. Unlike Astro's config,
+ * these are matched against the real served URL, so both sides carry the full
+ * `{deployment.base}{basePath}` stack.
+ */
+export const applyBaseToPlatformRedirects = (
+  redirects: Redirect[],
+  basePath: string,
+  deployBase: string
+): Redirect[] => {
+  const base = normalizeBasePath(deployBase);
+  return basePath || base
+    ? redirects.map((redirect) => ({
+        ...redirect,
+        from: withComposedBasePath(base, basePath, redirect.from),
+        to: withComposedBasePath(base, basePath, redirect.to),
+      }))
+    : redirects;
+};
 
 /** `_redirects` text (Netlify + Cloudflare Pages): `from to status` per line. */
 export const buildNetlifyRedirects = (redirects: Redirect[]): string =>

package/src/markdown/index.ts

@@ -17,6 +17,7 @@ import { languageIconTransformer } from "./language-icon.ts";
 import { mathPlugin } from "./math.ts";
 import { mermaidPlugin } from "./mermaid.ts";
 import { packageInstallPlugin } from "./package-install.ts";
+import { tableWrapPlugin } from "./table-wrap.ts";
 import { DEFAULT_CODE_THEMES } from "./themes.ts";
 import type { CodeThemes } from "./themes.ts";
 
@@ -58,6 +59,7 @@ type HastPlugin = NonNullable<
 const blumeHastPlugins = (options: BlumeMarkdownOptions): HastPlugin[] => {
   const plugins: HastPlugin[] = [
     inlineCodeHighlightPlugin(options.codeThemes) as unknown as HastPlugin,
+    tableWrapPlugin() as unknown as HastPlugin,
   ];
   if (options.headingAnchors !== false) {
     plugins.push(headingAnchorPlugin() as unknown as HastPlugin);

package/src/markdown/language-icon.ts

@@ -7,7 +7,8 @@
  * hex colors are skipped because dark-on-dark logos (Next.js, Rust…) vanish.
  *
  * The theme styles `.blume-lang-icon` and shifts the language label
- * (`pre[data-icon]::before`) to make room.
+ * (`pre[data-language][data-icon]::before`) to make room — gated on
+ * `data-language` so the icon only shows when a header bar exists to hold it.
  */
 
 import {

package/src/markdown/table-wrap.ts

@@ -0,0 +1,43 @@
+/**
+ * Wraps each `<table>` in a scroll container. Satteri does not re-descend into a
+ * visitor's returned replacement, so the wrapped table is not re-visited.
+ *
+ * The wrapper carries `tabindex="0"` so a horizontally scrolling table is
+ * reachable and scrollable by keyboard, not just pointer (WCAG 2.1.1; axe's
+ * `scrollable-region-focusable`). It's added unconditionally — whether a given
+ * table overflows isn't known at build time — which costs a tab stop on tables
+ * that happen to fit; no ARIA label is set to avoid an untranslated string.
+ */
+
+/** A minimal hast node (avoids a hast type dependency). */
+interface HastNode {
+  children?: HastNode[];
+  properties?: Record<string, unknown>;
+  tagName?: string;
+  type: string;
+  value?: string;
+}
+
+/** A Satteri hast plugin, typed structurally to avoid a Satteri dep. */
+export interface TableWrapPlugin {
+  name: string;
+  element: {
+    filter: string[];
+    visit: (node: HastNode) => HastNode;
+  };
+}
+
+export const tableWrapPlugin = (): TableWrapPlugin => ({
+  element: {
+    filter: ["table"],
+    visit(node) {
+      return {
+        children: [node],
+        properties: { className: ["blume-table-scroll"], tabIndex: 0 },
+        tagName: "div",
+        type: "element",
+      };
+    },
+  },
+  name: "blume:table-wrap",
+});

package/src/og/card.ts

@@ -1,15 +1,26 @@
-import { Renderer } from "@takumi-rs/core";
-import { container, image, text } from "@takumi-rs/helpers";
-import type { Node } from "@takumi-rs/helpers";
+import { render } from "takumi-js";
+import type { RenderOptions } from "takumi-js";
+import { container, googleFonts, image, text } from "takumi-js/helpers";
+import type { FontSubset, GoogleFontFamily, Node } from "takumi-js/helpers";
 
 import { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from "./dimensions.ts";
 
-// Reuse one renderer (and its loaded default fonts) across all images.
-let renderer: Renderer | null = null;
-const getRenderer = (): Renderer => {
-  renderer ??= new Renderer();
-  return renderer;
-};
+/**
+ * A Google Font family to load into the OG card renderer. A bare string is the
+ * family name (weight 400, normal style); the object form pins weight and style.
+ * Handed straight to Takumi's `googleFonts` helper, which fetches the family
+ * from Google Fonts at build and returns per-glyph coverage subsets.
+ */
+export type OgFont =
+  | string
+  | {
+      /** Google Fonts family name, e.g. `"Noto Sans JP"`. */
+      name: string;
+      /** `400`, `[400, 700]`, or a variable range like `"100..900"`. */
+      weight?: number | number[] | string;
+      /** `"normal"`, `"italic"`, or both. */
+      style?: "normal" | "italic" | ("normal" | "italic")[];
+    };
 
 const ACCENT_HEX: Record<string, string> = {
   blue: "#3b82f6",
@@ -21,43 +32,101 @@ const ACCENT_HEX: Record<string, string> = {
   teal: "#14b8a6",
 };
 
-const HEX_COLOR = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/iu;
+// Named presets map to Blume's palette hex (the preset "blue" is not CSS
+// blue); anything else is handed to Takumi as-is — it parses the full CSS
+// color grammar, and a genuinely malformed value fails the build with a
+// parse error naming it. `hasOwn` keeps a preset name like "constructor"
+// from resolving up the prototype chain.
+const resolveAccent = (accent: string): string =>
+  Object.hasOwn(ACCENT_HEX, accent) ? (ACCENT_HEX[accent] as string) : accent;
 
-// OG rendering uses hex (Takumi's color parser does not accept oklch); named
-// presets map to hex, well-formed hex passes through, anything else falls
-// back — a malformed hex (`#12345` typo) would throw inside Takumi and fail
-// the build at OG prerender with an opaque native error. `hasOwn` keeps a
-// preset name like "constructor" from resolving up the prototype chain.
-const resolveAccent = (accent: string): string => {
-  if (Object.hasOwn(ACCENT_HEX, accent)) {
-    return ACCENT_HEX[accent] as string;
-  }
-  return HEX_COLOR.test(accent) ? accent : "#3b82f6";
-};
+export interface OgCardPalette {
+  accent?: string;
+  background?: string;
+  border?: string;
+  foreground?: string;
+  muted?: string;
+}
 
 export interface OgCardOptions {
   /** Large headline — the page title. */
   title: string;
-  /** Accent color (named preset or hex) for the fallback brand mark. */
+  /** Accent color (named preset or any CSS color) for the fallback brand mark. */
   accent?: string;
   /** Brand/site name shown in the top-left lockup. */
   brand?: string;
   /** Muted subtitle under the headline (usually the site description). */
   description?: string;
   /**
-   * Inlined SVG markup of the configured logo (`config.logo.svg`), painted into
+   * Inlined SVG markup of the configured logo, painted into
    * the brand lockup. Falls back to an accent mark when absent.
    */
   logo?: string;
+  /** Optional colors for the generated card. */
+  palette?: OgCardPalette;
   /** Footer-left repository slug, e.g. `owner/repo`. */
   repo?: string;
   /** Footer-right site host, e.g. `docs.acme.com`. */
   site?: string;
+  /**
+   * Pre-fetched image entries, or a group controlling how remote images (and
+   * emoji glyphs) are fetched. Blume merges in a shared glyph cache; see
+   * {@link resolveImages}.
+   */
+  images?: RenderOptions["images"];
+  /**
+   * Google Font families for non-Latin titles. Takumi's built-in font covers
+   * only Latin, so a CJK (etc.) title renders as tofu without a family that
+   * covers its script — see {@link loadFonts}.
+   */
+  fonts?: OgFont[];
 }
 
 const WIDTH = OG_IMAGE_WIDTH;
 const HEIGHT = OG_IMAGE_HEIGHT;
 
+// Emoji in a title render as Twemoji glyphs Takumi fetches from a CDN, once per
+// render. A build prerenders one card per page, so an emoji in the site title
+// would otherwise refetch the same glyph for every page. This cache is keyed by
+// URL and holds the in-flight promise, so concurrent renders share one request
+// and a build fetches each glyph once. Unbounded on purpose: it is scoped to the
+// glyphs a site's own titles reference, which is a handful.
+const imageFetchCache = new Map<string, Promise<ArrayBuffer>>();
+
+/**
+ * Merge the shared glyph cache into the caller's `images`. An explicit
+ * `fetchCache` wins, so a caller can scope or opt out of the cache.
+ */
+const resolveImages = (
+  images: OgCardOptions["images"]
+): OgCardOptions["images"] =>
+  Array.isArray(images)
+    ? { fetchCache: imageFetchCache, sources: images }
+    : { fetchCache: imageFetchCache, ...images };
+
+// Google Fonts subsets keyed by the family set, so a build's identical per-page
+// renders build the subset list once. `googleFonts` also caches the css2 request
+// process-wide and the shared renderer skips subset files it has already loaded,
+// so this only avoids rebuilding the list per card.
+const fontSubsetCache = new Map<string, Promise<FontSubset[]>>();
+
+/**
+ * Load the configured Google Font families as coverage subsets for `render`'s
+ * `fonts` option. `googleFonts` fetches the families from Google Fonts in one
+ * css2 request; `render` then registers only the subsets a card's text uses. A
+ * fetch failure rejects, failing the build with the cause rather than silently
+ * shipping tofu — the same fail-fast the OG accent relies on.
+ */
+const loadFonts = (fonts: OgFont[]): Promise<FontSubset[]> => {
+  const key = JSON.stringify(fonts);
+  let pending = fontSubsetCache.get(key);
+  if (!pending) {
+    pending = googleFonts(fonts as GoogleFontFamily[]);
+    fontSubsetCache.set(key, pending);
+  }
+  return pending;
+};
+
 // Light neutral scale mirrored from the docs homepage theme tokens:
 // FOREGROUND = --foreground, MUTED = --muted-foreground, FAINT = that lighter,
 // BORDER = --border.
@@ -67,6 +136,17 @@ const MUTED = "#737373";
 const FAINT = "#a3a3a3";
 const BORDER = "#e5e5e5";
 
+const resolvePalette = (
+  options: OgCardOptions
+): Required<OgCardPalette> & { faint: string } => ({
+  accent: resolveAccent(options.palette?.accent ?? options.accent ?? "blue"),
+  background: options.palette?.background ?? BG,
+  border: options.palette?.border ?? BORDER,
+  faint: options.palette?.muted ?? FAINT,
+  foreground: options.palette?.foreground ?? FOREGROUND,
+  muted: options.palette?.muted ?? MUTED,
+});
+
 /**
  * Truncate to `max` code points with an ellipsis. Slices by code points, not
  * UTF-16 units, so cutting mid-emoji doesn't leave a lone surrogate (a broken
@@ -103,8 +183,8 @@ const logoAspect = (svg: string): number | null => {
 // Render the configured logo as the brand mark. A `currentColor` logo carries
 // no intrinsic color, so it is painted in the foreground to read on the light
 // card, then handed to Takumi as a data URI sized from the SVG's aspect ratio.
-const logoMark = (svg: string): Node => {
-  const painted = svg.replaceAll("currentColor", FOREGROUND);
+const logoMark = (svg: string, foreground: string): Node => {
+  const painted = svg.replaceAll("currentColor", foreground);
   const aspect = logoAspect(painted);
   let height = MARK_HEIGHT;
   let width = aspect ? MARK_HEIGHT * aspect : MARK_HEIGHT;
@@ -150,8 +230,11 @@ const titleSize = (title: string): number => {
 };
 
 /** Render a 1200x630 Open Graph card to a PNG buffer. */
-export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
-  const accent = resolveAccent(options.accent ?? "blue");
+export const renderOgImage = async (
+  options: OgCardOptions
+): Promise<Uint8Array> => {
+  const { accent, background, border, faint, foreground, muted } =
+    resolvePalette(options);
   const brand = options.brand?.trim();
   const logo = options.logo?.trim();
   // Slice by code point, not code unit — `charAt(0)` would split a leading
@@ -166,14 +249,16 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
   // ("Ultracite  Ultracite"). Without a logo, the accent tile with the brand
   // initial stands in.
   const header = container({
-    children: [logo ? logoMark(logo) : initialMark(accent, initial)],
+    children: [
+      logo ? logoMark(logo, foreground) : initialMark(accent, initial),
+    ],
     style: { alignItems: "center", display: "flex" },
   });
 
   const body = container({
     children: [
       text(truncate(options.title, 64), {
-        color: FOREGROUND,
+        color: foreground,
         fontSize: titleSize(options.title),
         fontWeight: 600,
         letterSpacing: "-0.03em",
@@ -183,7 +268,7 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
       }),
       description
         ? text(truncate(description, 140), {
-            color: MUTED,
+            color: muted,
             fontSize: 30,
             lineHeight: 1.4,
             marginTop: 28,
@@ -200,15 +285,15 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
       ? container({
           children: [
             container({
-              style: { backgroundColor: BORDER, height: 1, width: "100%" },
+              style: { backgroundColor: border, height: 1, width: "100%" },
             }),
             container({
               children: [
                 repo
-                  ? text(repo, { color: MUTED, fontSize: 22 })
+                  ? text(repo, { color: muted, fontSize: 22 })
                   : container({}),
                 site
-                  ? text(site, { color: FAINT, fontSize: 22 })
+                  ? text(site, { color: faint, fontSize: 22 })
                   : container({}),
               ],
               style: {
@@ -227,8 +312,8 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
   const node = container({
     children: [header, body, footer],
     style: {
-      backgroundColor: BG,
-      color: FOREGROUND,
+      backgroundColor: background,
+      color: foreground,
       display: "flex",
       flexDirection: "column",
       height: HEIGHT,
@@ -238,9 +323,16 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
     },
   });
 
-  return getRenderer().render(node, {
+  const fonts = options.fonts ?? [];
+  // `render` registers only the subsets a card's text uses and skips files it
+  // has already loaded, so passing the full family list per page is cheap.
+  const fontSubsets = fonts.length ? await loadFonts(fonts) : undefined;
+
+  return render(node, {
+    fonts: fontSubsets,
     format: "png",
     height: HEIGHT,
+    images: resolveImages(options.images),
     width: WIDTH,
   });
 };

package/src/og/index.ts

@@ -1,2 +1,2 @@
 export { renderOgImage } from "./card.ts";
-export type { OgCardOptions } from "./card.ts";
+export type { OgCardOptions, OgCardPalette, OgFont } from "./card.ts";

package/src/og/logo.ts

@@ -0,0 +1,21 @@
+import { existsSync, readFileSync } from "node:fs";
+
+import { join } from "pathe";
+
+import type { BlumeProject } from "../core/project-graph.ts";
+
+/** Resolve a configured local SVG for use in generated Open Graph cards. */
+export const resolveOgLogo = (
+  project: BlumeProject,
+  source: string | undefined
+): string | undefined => {
+  if (!source?.toLowerCase().endsWith(".svg")) {
+    return;
+  }
+  const relative = source.replace(/^\//u, "");
+  const file = [
+    join(project.context.root, "public", relative),
+    join(project.context.root, relative),
+  ].find((path) => existsSync(path));
+  return file ? readFileSync(file, "utf-8") : undefined;
+};

package/src/openapi/references.ts

@@ -1,14 +1,13 @@
 import { withBasePath } from "../core/base-path.ts";
 import type { ResolvedConfig } from "../core/schema.ts";
 import { trimChar, trimEnd } from "../core/trim.ts";
-import type { NavTab } from "../core/types.ts";
 
 /**
  * Pure resolution of the configured API reference blocks into concrete routes,
- * labels, and a renderer choice — no file IO, so the content source, the nav
- * tabs, the Scalar page generator, and the `blume:openapi` data module all share
- * one source of truth. Kept free of any Astro/template imports so `core` can
- * depend on it without a cycle.
+ * labels, and a renderer choice — no file IO, so the content source, the
+ * nav-target validation, the Scalar page generator, and the `blume:openapi`
+ * data module all share one source of truth. Kept free of any Astro/template
+ * imports so `core` can depend on it without a cycle.
  */
 
 export type ReferenceKind = "openapi" | "asyncapi";
@@ -155,18 +154,22 @@ export const resolveReferences = (
   ),
 ];
 
-/** Nav tabs (header links) for every reference, regardless of renderer. */
-export const referenceTabs = (config: ResolvedConfig): NavTab[] =>
-  resolveReferences(config).map((ref) => ({
-    label: ref.label,
+/**
+ * Mounted route for every reference, regardless of renderer. References no
+ * longer add a header tab automatically — authors point a `navigation.tabs`
+ * entry at one of these routes to surface it (and, for Blume-rendered specs, to
+ * scope its operations sidebar). These routes are whitelisted as valid nav
+ * targets so such a tab doesn't read as a broken link.
+ */
+export const referenceRoutes = (config: ResolvedConfig): string[] =>
+  resolveReferences(config).map((ref) =>
     // Blume-rendered operation pages flow through the content pipeline and are
-    // mounted under `basePath`, so their tab must be too. Scalar references are
-    // a single embedded page injected at the raw `route`, left root-anchored.
-    path:
-      ref.renderer === "blume"
-        ? withBasePath(config.basePath, ref.route)
-        : ref.route,
-  }));
+    // mounted under `basePath`. Scalar references are a single embedded page
+    // injected at the raw `route`, left root-anchored.
+    ref.renderer === "blume"
+      ? withBasePath(config.basePath, ref.route)
+      : ref.route
+  );
 
 /**
  * Accept one resolved reference into the deduped Blume-rendered set, or return

package/src/search/popular.ts

@@ -0,0 +1,33 @@
+import { withBasePath } from "../core/base-path.ts";
+
+/** A resolved search empty-state link passed to the Search dialog. */
+export interface SearchPopularPage {
+  /** Built-in icon name; `Search.astro` resolves it to markup at render time. */
+  icon?: string;
+  label: string;
+  route: string;
+}
+
+/**
+ * Map configured `search.popular` entries to `{ route, label }` for Search.
+ *
+ * Curated hrefs are authored as if mounted at root, so `basePath` is applied
+ * here — matching `navigation.featured` and tab paths, and agreeing with the
+ * sidebar fallback these entries replace (whose routes are already based via
+ * `page.route`). `withBasePath` is idempotent and skips external URLs.
+ *
+ * `deployment.base` is deliberately *not* applied: routes stay deploy-base-less
+ * so `createLinkRow` can prefix it at click time, same as sidebar-derived pages.
+ *
+ * `icon` stays a name here (like `navigation.featured`): the icon set is a
+ * server-only module, so `Search.astro` resolves it to inline SVG at render.
+ */
+export const resolveSearchPopular = (
+  popular: { href: string; icon?: string; label: string }[],
+  basePath: string
+): SearchPopularPage[] =>
+  popular.map(({ href, icon, label }) => ({
+    ...(icon ? { icon } : {}),
+    label,
+    route: withBasePath(basePath, href),
+  }));