blume 0.4.0 → 0.5.0

package/src/cli/commands/build.ts

@@ -6,6 +6,8 @@ import { defineCommand } from "citty";
 import { join } from "pathe";
 
 import { buildLlmsFiles } from "../../ai/llms.ts";
+import { ensureGitignore } from "../../core/gitignore.ts";
+import type { BlumeProject } from "../../core/project-graph.ts";
 import type { ResolvedConfig } from "../../core/schema.ts";
 import { serverFeatures } from "../../core/server-features.ts";
 import {
@@ -169,6 +171,82 @@ const enforceBudget = async (
   return passed ? "pass" : "fail";
 };
 
+/**
+ * Run every deploy post-step of a real (non-isolated) build: the search index +
+ * hosted-provider sync, llms.txt, sitemap/robots, redirect files, the summary
+ * box, and the optional bundle report / budget gate. Exits non-zero if a budget
+ * is exceeded. Isolated verify builds skip all of this.
+ */
+const publishBuildArtifacts = async (
+  project: BlumeProject,
+  distDir: string,
+  args: { analyze?: boolean; "budget-css"?: string; "budget-js"?: string }
+): Promise<void> => {
+  if (project.config.search.provider === "pagefind") {
+    logger.start("Building search index");
+    const indexed = await buildSearchIndex(distDir);
+    logger.success(`Indexed ${indexed} page(s) for search`);
+  }
+
+  // Upload the index to a hosted provider (Algolia, Orama Cloud, Typesense).
+  // Skipped with a warning when its admin key isn't configured.
+  await syncSearchProvider(project, {
+    start: (message) => logger.start(message),
+    success: (message) => logger.success(message),
+    warn: (message) => logger.warn(message),
+  });
+
+  if (project.config.ai.llmsTxt) {
+    const { index, full } = await buildLlmsFiles(project);
+    await Promise.all([
+      writeFile(join(distDir, "llms.txt"), index, "utf-8"),
+      writeFile(join(distDir, "llms-full.txt"), full, "utf-8"),
+    ]);
+    logger.success("Generated llms.txt and llms-full.txt");
+  }
+
+  // A user's own public/ file (copied into dist by Astro) always wins.
+  const sitemap = buildSitemap(project);
+  if (sitemap && !existsSync(join(distDir, "sitemap.xml"))) {
+    await writeFile(join(distDir, "sitemap.xml"), sitemap, "utf-8");
+    logger.success("Generated sitemap.xml");
+  }
+
+  const robots = buildRobots(project);
+  if (robots && !existsSync(join(distDir, "robots.txt"))) {
+    await writeFile(join(distDir, "robots.txt"), robots, "utf-8");
+    logger.success("Generated robots.txt");
+  }
+
+  await emitRedirectFiles(project.config, distDir);
+
+  const { config } = project;
+  const features = serverFeatures(config);
+  logger.box(
+    [
+      `Output     ${config.deployment.output}`,
+      `Adapter    ${config.deployment.adapter ?? "none"}`,
+      `Site       ${config.deployment.site ?? "not set"}`,
+      `Search     ${config.search.provider}`,
+      `Redirects  ${config.redirects.length}`,
+      `Sitemap    ${sitemap ? "yes" : "no (set deployment.site)"}`,
+      `Robots     ${robots ? "yes" : "no"}`,
+      `LLM files  ${config.ai.llmsTxt ? "yes" : "no"}`,
+      `Server features  ${features.length > 0 ? features.join(", ") : "none"}`,
+    ].join("\n")
+  );
+
+  if (args.analyze) {
+    await reportBundleSizes(distDir);
+  }
+
+  if ((await enforceBudget(distDir, args)) === "fail") {
+    process.exit(1);
+  }
+
+  logger.success(`Built to ${distDir}`);
+};
+
 export const buildCommand = defineCommand({
   args: {
     adapter: {
@@ -191,6 +269,11 @@ export const buildCommand = defineCommand({
       description: "Fail if total client JavaScript exceeds this many kB.",
       type: "string",
     },
+    isolated: {
+      description:
+        "Build into an isolated .blume-verify runtime (and its own dist) so a running dev server and the real dist/ are untouched. For verifying changes while `blume dev` runs.",
+      type: "boolean",
+    },
     output: {
       description: "Output mode: static | server.",
       type: "string",
@@ -207,7 +290,18 @@ export const buildCommand = defineCommand({
   },
   async run({ args }) {
     const root = process.cwd();
-    refuseIfDevRunning(root, "building");
+
+    // `--isolated` (or BLUME_RUNTIME_DIR) relocates the whole runtime to a
+    // sibling dir so this build never touches a live dev server's `.blume/` or
+    // the user's real `dist/`. A non-default runtime dir has no dev lock, so the
+    // refusal below lets it proceed; a plain build still refuses.
+    const runtimeDir = args.isolated
+      ? ".blume-verify"
+      : process.env.BLUME_RUNTIME_DIR;
+    refuseIfDevRunning(root, "building", runtimeDir);
+    if (args.isolated) {
+      await ensureGitignore(root, [".blume-verify/"]);
+    }
 
     if (args.output && args.output !== "static" && args.output !== "server") {
       logger.error(`Invalid --output "${args.output}" (use static | server).`);
@@ -230,6 +324,7 @@ export const buildCommand = defineCommand({
       },
       preview: args.preview,
       root,
+      runtimeDir,
       strict: args.strict,
     });
 
@@ -242,70 +337,19 @@ export const buildCommand = defineCommand({
       root: project.context.outDir,
     });
 
-    const distDir = join(root, "dist");
-
-    if (project.config.search.provider === "pagefind") {
-      logger.start("Building search index");
-      const indexed = await buildSearchIndex(distDir);
-      logger.success(`Indexed ${indexed} page(s) for search`);
-    }
-
-    // Upload the index to a hosted provider (Algolia, Orama Cloud, Typesense).
-    // Skipped with a warning when its admin key isn't configured.
-    await syncSearchProvider(project, {
-      start: (message) => logger.start(message),
-      success: (message) => logger.success(message),
-      warn: (message) => logger.warn(message),
-    });
-
-    if (project.config.ai.llmsTxt) {
-      const { index, full } = await buildLlmsFiles(project);
-      await Promise.all([
-        writeFile(join(distDir, "llms.txt"), index, "utf-8"),
-        writeFile(join(distDir, "llms-full.txt"), full, "utf-8"),
-      ]);
-      logger.success("Generated llms.txt and llms-full.txt");
-    }
+    const distDir = project.context.distDir ?? join(root, "dist");
 
-    // A user's own public/ file (copied into dist by Astro) always wins.
-    const sitemap = buildSitemap(project);
-    if (sitemap && !existsSync(join(distDir, "sitemap.xml"))) {
-      await writeFile(join(distDir, "sitemap.xml"), sitemap, "utf-8");
-      logger.success("Generated sitemap.xml");
-    }
-
-    const robots = buildRobots(project);
-    if (robots && !existsSync(join(distDir, "robots.txt"))) {
-      await writeFile(join(distDir, "robots.txt"), robots, "utf-8");
-      logger.success("Generated robots.txt");
-    }
-
-    await emitRedirectFiles(project.config, distDir);
-
-    const { config } = project;
-    const features = serverFeatures(config);
-    logger.box(
-      [
-        `Output     ${config.deployment.output}`,
-        `Adapter    ${config.deployment.adapter ?? "none"}`,
-        `Site       ${config.deployment.site ?? "not set"}`,
-        `Search     ${config.search.provider}`,
-        `Redirects  ${config.redirects.length}`,
-        `Sitemap    ${sitemap ? "yes" : "no (set deployment.site)"}`,
-        `Robots     ${robots ? "yes" : "no"}`,
-        `LLM files  ${config.ai.llmsTxt ? "yes" : "no"}`,
-        `Server features  ${features.length > 0 ? features.join(", ") : "none"}`,
-      ].join("\n")
-    );
-
-    if (args.analyze) {
-      await reportBundleSizes(distDir);
-    }
-
-    if ((await enforceBudget(distDir, args)) === "fail") {
-      process.exit(1);
+    // An isolated build is a throwaway verify: it only needs to confirm the site
+    // compiles and renders. Skip the network post-steps (search sync) and
+    // deploy artifacts (index/llms/sitemap/robots/redirects) that only matter
+    // for a real publish and would push to hosted providers.
+    if (runtimeDir) {
+      logger.success(
+        `Isolated build OK — output at ${distDir} (not published).`
+      );
+      return;
     }
 
-    logger.success(`Built to ${distDir}`);
+    await publishBuildArtifacts(project, distDir, args);
   },
 });

package/src/cli/commands/check.ts

@@ -5,11 +5,18 @@ import { sync } from "astro";
 import { defineCommand } from "citty";
 import { join } from "pathe";
 
+import { ensureGitignore } from "../../core/gitignore.ts";
+import { refuseIfDevRunning } from "../dev-lock.ts";
 import { logger } from "../log.ts";
 import { prepareProject } from "../prepare.ts";
 
 export const checkCommand = defineCommand({
   args: {
+    isolated: {
+      description:
+        "Type-check in an isolated .blume-verify runtime so a running dev server is untouched. For verifying changes while `blume dev` runs.",
+      type: "boolean",
+    },
     preview: {
       description: "Include drafts and unpublished CMS content.",
       type: "boolean",
@@ -25,10 +32,23 @@ export const checkCommand = defineCommand({
   },
   async run({ args }) {
     const root = process.cwd();
+
+    // `blume check` regenerates `.blume` just like `build`, so it must refuse a
+    // live dev server unless isolated. `--isolated` (or BLUME_RUNTIME_DIR)
+    // relocates the runtime to `.blume-verify`, which dev never locks.
+    const runtimeDir = args.isolated
+      ? ".blume-verify"
+      : process.env.BLUME_RUNTIME_DIR;
+    refuseIfDevRunning(root, "checking", runtimeDir);
+    if (args.isolated) {
+      await ensureGitignore(root, [".blume-verify/"]);
+    }
+
     const project = await prepareProject({
       mode: "build",
       preview: args.preview,
       root,
+      runtimeDir,
       strict: args.strict,
     });
 

package/src/cli/dev-lock.ts

@@ -8,6 +8,7 @@ import {
 
 import { join } from "pathe";
 
+import { resolveRuntimeDir } from "../core/project.ts";
 import { logger } from "./log.ts";
 
 /**
@@ -71,13 +72,20 @@ export const acquireDevLock = (outDir: string): (() => void) => {
 };
 
 /**
- * Exit with an error when a live `blume dev` owns the `.blume` dir under `root`.
- * `action` names the operation being refused (e.g. "building").
+ * Exit with an error when a live `blume dev` owns the runtime dir under `root`.
+ * `action` names the operation being refused (e.g. "building"). `runtimeDir`
+ * relocates the checked dir: an isolated verify (`.blume-verify`) targets a dir
+ * dev never locks, so it proceeds; a default or `--runtime-dir .blume` run still
+ * refuses.
  */
-export const refuseIfDevRunning = (root: string, action: string): void => {
-  if (isDevLocked(join(root, ".blume"))) {
+export const refuseIfDevRunning = (
+  root: string,
+  action: string,
+  runtimeDir?: string
+): void => {
+  if (isDevLocked(resolveRuntimeDir(root, runtimeDir))) {
     logger.error(
-      `A \`blume dev\` server is running against .blume; ${action} would corrupt it. Stop the dev server first.`
+      `A \`blume dev\` server is running against .blume; ${action} would corrupt it. Stop the dev server, or re-run with --isolated to build/verify against .blume-verify without touching it.`
     );
     process.exit(1);
   }

package/src/cli/prepare.ts

@@ -24,6 +24,8 @@ export interface PrepareOptions {
   refresh?: boolean;
   /** CLI config overrides (e.g. `--output`, `--content-dir`). */
   overrides?: ConfigOverrides;
+  /** Relocate the generated runtime (e.g. `.blume-verify` for `--isolated`). */
+  runtimeDir?: string;
 }
 
 /**
@@ -45,6 +47,7 @@ export const prepareProject = async (
       overrides: options.overrides,
       preview: options.preview,
       refresh: options.refresh,
+      runtimeDir: options.runtimeDir,
     });
   } catch (error) {
     if (error instanceof BlumeError) {

package/src/components/BlumePage.astro

@@ -38,7 +38,10 @@ import FileTree from "./content/FileTree.astro";
 import Frame from "./content/Frame.astro";
 import GithubInfo from "./content/GithubInfo.astro";
 import Panel from "./content/Panel.astro";
+import ParamField from "./content/ParamField.astro";
 import Prompt from "./content/Prompt.astro";
+import RequestField from "./content/RequestField.astro";
+import ResponseField from "./content/ResponseField.astro";
 import Step from "./content/Step.astro";
 import Steps from "./content/Steps.astro";
 import Tab from "./content/Tab.astro";
@@ -87,7 +90,10 @@ const components = {
   GithubInfo,
   Icon,
   Panel,
+  ParamField,
   Prompt,
+  RequestField,
+  ResponseField,
   Step,
   Steps,
   Tab,

package/src/components/Icon.astro

@@ -1,10 +1,13 @@
 ---
+import data from "blume:data";
 import { resolveIcon } from "../theme/icons.ts";
 
 interface Props {
   name?: unknown;
   icon?: unknown;
   iconType?: string;
+  /** Icon library for a bare name; defaults to the project's `icons.library`. */
+  library?: string;
   size?: number;
   class?: string;
   className?: string;
@@ -16,6 +19,7 @@ const {
   color,
   icon,
   iconType,
+  library,
   name,
   size = 16,
   class: astroClass,
@@ -37,8 +41,12 @@ const isImageIcon = (value: string): boolean =>
   /\.(?:avif|gif|jpe?g|png|svg|webp)$/iu.test(value);
 const imageSrc = iconName && !rawSvg && isImageIcon(iconName) ? iconName : null;
 const resolvedIcon =
-  iconName && !(imageSrc || rawSvg) ? resolveIcon(iconName, iconType) : null;
-const markup = resolvedIcon?.markup;
+  iconName && !(imageSrc || rawSvg)
+    ? resolveIcon(iconName, {
+        iconType,
+        library: library ?? data.config.icons.library,
+      })
+    : null;
 const resolvedClass = astroClass ?? className;
 const customStyle = `display:inline-flex;width:${size}px;height:${size}px;${
   color ? `color:${color}` : ""
@@ -76,21 +84,16 @@ const style = color ? `color:${color}` : undefined;
       width={size}
     />
   ) : (
-    markup && (
+    resolvedIcon && (
     <svg
       aria-hidden={label ? undefined : "true"}
       aria-label={label}
       class={resolvedClass}
-      fill="none"
       height={size}
       role={label ? "img" : undefined}
-      set:html={markup}
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
+      set:html={resolvedIcon.body}
       style={style}
-      viewBox="0 0 24 24"
+      viewBox={resolvedIcon.viewBox}
       width={size}
       xmlns="http://www.w3.org/2000/svg"
     />

package/src/components/content/ApiField.astro

@@ -0,0 +1,75 @@
+---
+// Shared field row behind the Mintlify-compat <ParamField>/<ResponseField>/
+// <RequestField> components: a labeled name + type + badges, with the field's
+// description rendered from the slot (which may hold rich MDX, including nested
+// <Expandable> or further fields). Styled to match the native OpenAPI reference
+// rows (src/components/openapi/), so a migrated site reads consistently.
+interface Props {
+  default?: unknown;
+  deprecated?: unknown;
+  location?: string;
+  name?: string;
+  required?: unknown;
+  type?: string;
+}
+
+const {
+  default: defaultValue,
+  deprecated,
+  location,
+  name,
+  required,
+  type,
+} = Astro.props;
+
+// Booleans arrive as MDX shorthand (`required`) or strings (`required="true"`).
+const isTrue = (value: unknown): boolean => value === true || value === "true";
+const hasDefault =
+  defaultValue !== undefined && defaultValue !== null && defaultValue !== "";
+const hasDescription = Astro.slots.has("default");
+---
+
+<div class="not-prose my-2 rounded-blume border border-border px-4 py-3">
+  <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+    {name && <code class="font-mono text-foreground text-sm">{name}</code>}
+    {
+      location && (
+        <span class="rounded bg-muted px-1.5 py-0.5 font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide">
+          {location}
+        </span>
+      )
+    }
+    {type && <span class="text-muted-foreground text-xs">{type}</span>}
+    {
+      isTrue(required) && (
+        <span class="font-medium text-[0.625rem] text-red-600 uppercase tracking-wide dark:text-red-400">
+          required
+        </span>
+      )
+    }
+    {
+      isTrue(deprecated) && (
+        <span class="font-medium text-[0.625rem] text-muted-foreground uppercase tracking-wide line-through">
+          deprecated
+        </span>
+      )
+    }
+  </div>
+  {
+    hasDefault && (
+      <div class="mt-1 text-muted-foreground text-xs">
+        Default:{" "}
+        <code class="rounded bg-muted px-1 py-0.5 text-foreground">
+          {String(defaultValue)}
+        </code>
+      </div>
+    )
+  }
+  {
+    hasDescription && (
+      <div class="mt-1.5 text-muted-foreground text-sm [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        <slot />
+      </div>
+    )
+  }
+</div>

package/src/components/content/ParamField.astro

@@ -0,0 +1,39 @@
+---
+// Mintlify-compat <ParamField>. Mintlify encodes the parameter's location in the
+// attribute name (`<ParamField path="id" />`, `query`, `header`, `body`); the
+// attribute's value is the field name. Falls back to a plain `name` prop.
+import ApiField from "./ApiField.astro";
+
+const {
+  body,
+  default: defaultValue,
+  deprecated,
+  header,
+  name,
+  path,
+  query,
+  required,
+  type,
+} = Astro.props;
+
+const locations = [
+  { key: "path", value: path },
+  { key: "query", value: query },
+  { key: "header", value: header },
+  { key: "body", value: body },
+] as const;
+const located = locations.find((entry) => typeof entry.value === "string");
+const fieldName = located ? located.value : name;
+const location = located?.key;
+---
+
+<ApiField
+  default={defaultValue}
+  deprecated={deprecated}
+  location={location}
+  name={fieldName}
+  required={required}
+  type={type}
+>
+  <slot />
+</ApiField>

package/src/components/content/RequestField.astro

@@ -0,0 +1,23 @@
+---
+// Mintlify-compat <RequestField>: same shape as <ResponseField> — a named field
+// (`name`, `type`, `required`, `default`, `deprecated`) with a slotted body.
+import ApiField from "./ApiField.astro";
+
+const {
+  default: defaultValue,
+  deprecated,
+  name,
+  required,
+  type,
+} = Astro.props;
+---
+
+<ApiField
+  default={defaultValue}
+  deprecated={deprecated}
+  name={name}
+  required={required}
+  type={type}
+>
+  <slot />
+</ApiField>

package/src/components/content/ResponseField.astro

@@ -0,0 +1,23 @@
+---
+// Mintlify-compat <ResponseField>: a named field (`name`, `type`, `required`,
+// `default`, `deprecated`) with its description in the slot.
+import ApiField from "./ApiField.astro";
+
+const {
+  default: defaultValue,
+  deprecated,
+  name,
+  required,
+  type,
+} = Astro.props;
+---
+
+<ApiField
+  default={defaultValue}
+  deprecated={deprecated}
+  name={name}
+  required={required}
+  type={type}
+>
+  <slot />
+</ApiField>

package/src/components/content/Step.astro

@@ -18,7 +18,7 @@ const canRenderIcon =
   icon !== undefined &&
   (/^\s*<svg[\s\S]*<\/svg>\s*$/u.test(icon) ||
     isImageIcon(icon) ||
-    hasIcon(icon, iconType));
+    hasIcon(icon, { iconType }));
 ---
 
 <div

package/src/components/layout/Breadcrumbs.astro

@@ -4,9 +4,11 @@ import type { Crumb } from "./nav-utils.ts";
 interface Props {
   /** Full breadcrumb trail from the site root to the current page. */
   crumbs: Crumb[];
+  /** Left-align full width (for the wide API layout) instead of the prose measure. */
+  wide?: boolean;
 }
 
-const { crumbs } = Astro.props;
+const { crumbs, wide = false } = Astro.props;
 
 // The built-in shows a single "eyebrow" crumb — the parent group — rather than
 // the whole trail. An override receives the complete list and can render more.
@@ -17,7 +19,10 @@ const eyebrowCrumb = crumbs.length > 1 ? crumbs[crumbs.length - 2] : null;
   eyebrowCrumb && (
     <nav
       aria-label="Breadcrumb"
-      class="mx-auto mb-2 max-w-[42rem] text-muted-foreground text-sm"
+      class:list={[
+        "mb-2 text-muted-foreground text-sm",
+        wide ? "max-w-none" : "mx-auto max-w-[42rem]",
+      ]}
     >
       {eyebrowCrumb.route ? (
         <a class="hover:text-foreground" href={eyebrowCrumb.route}>

package/src/components/layout/NavTree.astro

@@ -31,8 +31,24 @@ const {
   root = depth === 0,
 } = Astro.props;
 
-const badgeClass =
-  "shrink-0 rounded-full bg-muted px-1.5 py-0.5 font-medium text-[0.65rem] text-muted-foreground leading-none";
+const badgeBase =
+  "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
+const badgeClass = `${badgeBase} bg-muted text-muted-foreground`;
+// HTTP-method badges (from an OpenAPI reference's sidebar) are colour-coded;
+// every other badge keeps the neutral style.
+const METHOD_BADGE: Record<string, string> = {
+  DELETE: "bg-red-500/15 text-red-700 dark:text-red-300",
+  GET: "bg-green-500/15 text-green-700 dark:text-green-300",
+  HEAD: "bg-muted text-muted-foreground",
+  OPTIONS: "bg-muted text-muted-foreground",
+  PATCH: "bg-yellow-500/20 text-yellow-800 dark:text-yellow-300",
+  POST: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  PUT: "bg-orange-500/15 text-orange-700 dark:text-orange-300",
+};
+const badgeClassFor = (badge: string): string => {
+  const method = METHOD_BADGE[badge.toUpperCase()];
+  return method ? `${badgeBase} ${method}` : badgeClass;
+};
 const deprecatedClass =
   "shrink-0 rounded-full bg-amber-500/10 px-1.5 py-0.5 font-medium text-[0.65rem] text-amber-700 leading-none dark:text-amber-300";
 
@@ -154,7 +170,7 @@ const initialId =
                     />
                   )}
                   <span class="min-w-0 flex-1 truncate">{item.label}</span>
-                  {item.badge && <span class={badgeClass}>{item.badge}</span>}
+                  {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                   {item.deprecated && (
                     <span class={deprecatedClass}>deprecated</span>
                   )}
@@ -188,7 +204,7 @@ const initialId =
                   />
                 )}
                 <span class="min-w-0 flex-1 truncate">{item.label}</span>
-                {item.badge && <span class={badgeClass}>{item.badge}</span>}
+                {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                 <Icon
                   class="shrink-0 text-muted-foreground"
                   name="chevron-right"
@@ -224,7 +240,7 @@ const initialId =
                       )}
                       <span class="min-w-0 flex-1 truncate">{item.label}</span>
                       {item.badge && (
-                        <span class={badgeClass}>{item.badge}</span>
+                        <span class={badgeClassFor(item.badge)}>{item.badge}</span>
                       )}
                     </a>
                   ) : (
@@ -238,7 +254,7 @@ const initialId =
                       )}
                       <span class="min-w-0 flex-1 truncate">{item.label}</span>
                       {item.badge && (
-                        <span class={badgeClass}>{item.badge}</span>
+                        <span class={badgeClassFor(item.badge)}>{item.badge}</span>
                       )}
                     </>
                   )}
@@ -279,7 +295,7 @@ const initialId =
                   )}
                   <span class="min-w-0 truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClass}`}>{item.badge}</span>
+                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </a>
               ) : (
@@ -293,7 +309,7 @@ const initialId =
                   )}
                   <span class="min-w-0 truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClass}`}>{item.badge}</span>
+                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </>
               )}