blume 1.7.2 → 2.0.0

package/src/cli/lazy-command.ts

@@ -1,5 +1,14 @@
 import type { ArgsDef, CommandDef, CommandMeta } from "citty";
 
+import { BlumeError } from "../core/diagnostics.ts";
+import { reportInternalError } from "./internal-error.ts";
+import { reportDiagnostics } from "./log.ts";
+import {
+  COMMAND_HANDLED_FLAGS,
+  unknownFlags,
+  unknownFlagsDiagnostic,
+} from "./unknown-flags.ts";
+
 /**
  * Wrap a command so its module is imported only when citty needs its `args`
  * or runs it. `meta` stays static (from `command-meta.ts`), so rendering root
@@ -11,6 +20,12 @@ import type { ArgsDef, CommandDef, CommandMeta } from "citty";
  *
  * Only `args`, `setup`, `run`, and `cleanup` are forwarded: no Blume command
  * declares `default`, `plugins`, or nested `subCommands`.
+ *
+ * Two behaviors every command shares live here rather than in each command:
+ * `setup` rejects flags the command doesn't declare (citty accepts and drops
+ * them, so `blume build --isolatd` would run a real, non-isolated build), and
+ * `run` reports a {@link BlumeError} a command lets escape — a config that
+ * fails validation, say — as its diagnostic instead of citty's raw stack dump.
  */
 export const lazyCommand = <Args extends ArgsDef, Key extends string>(
   meta: CommandMeta,
@@ -21,6 +36,7 @@ export const lazyCommand = <Args extends ArgsDef, Key extends string>(
     const module = await load();
     return module[key];
   };
+  const name = meta.name ?? key;
   return {
     args: async () => {
       const { args } = await command();
@@ -37,10 +53,30 @@ export const lazyCommand = <Args extends ArgsDef, Key extends string>(
     meta,
     run: async (context) => {
       const loaded = await command();
-      await loaded.run?.(context);
+      try {
+        await loaded.run?.(context);
+      } catch (error) {
+        if (error instanceof BlumeError) {
+          reportDiagnostics([error.diagnostic], process.cwd());
+        } else {
+          reportInternalError(error);
+        }
+        process.exit(1);
+      }
     },
     setup: async (context) => {
       const loaded = await command();
+      // SAFETY: as for `args` above, every command's `args` is a plain object.
+      const argsDef = (loaded.args ?? {}) as ArgsDef;
+      const unknown = unknownFlags(
+        context.rawArgs,
+        argsDef,
+        COMMAND_HANDLED_FLAGS.get(name)
+      );
+      if (unknown.length > 0) {
+        reportDiagnostics([unknownFlagsDiagnostic(name, unknown, argsDef)]);
+        process.exit(1);
+      }
       await loaded.setup?.(context);
     },
   };

package/src/cli/prepare.ts

@@ -11,11 +11,19 @@ import { loadEnvFiles } from "./env.ts";
 import { reportInternalError } from "./internal-error.ts";
 import { logger, reportDiagnostics } from "./log.ts";
 import { checkRequiredSecrets } from "./required-secrets.ts";
+import { yarnPnpDiagnostic } from "./yarn-pnp.ts";
 
 export interface PrepareOptions {
   root: string;
   mode?: BuildMode;
   strict?: boolean;
+  /**
+   * Whether the command is strict only on request (`blume check --strict`),
+   * which changes how the abort message says to continue. Defaults to true in
+   * dev mode (`blume dev`, `blume sync`) and false otherwise, where strict is
+   * the default a user turns off with `--no-strict` (`blume build`).
+   */
+  strictOptIn?: boolean;
   /** Local dev server URL, used as the `deployment.site` fallback (dev only). */
   devServerUrl?: string;
   /** Render drafts and fetch unpublished CMS content. */
@@ -35,6 +43,14 @@ export interface PrepareOptions {
 export const prepareProject = async (
   options: PrepareOptions
 ): Promise<BlumeProject> => {
+  // Under Yarn Plug'n'Play the generated runtime can't resolve anything; say
+  // so before scanning, instead of failing inside Astro's config load.
+  const pnp = yarnPnpDiagnostic(options.root);
+  if (pnp) {
+    reportDiagnostics([pnp], options.root);
+    process.exit(1);
+  }
+
   // Load `.env` files from the project root before the scan: remote sources
   // read their tokens from `process.env` during `scanProject`, and
   // `loadEnvFiles` never overrides variables that are already set.
@@ -62,18 +78,23 @@ export const prepareProject = async (
   // Hard gate: server-only features cannot ship in a static build.
   if (
     options.mode === "build" &&
-    project.config.deployment.output === "static"
+    project.config.deployment.options.output === "static"
   ) {
     const features = serverFeatures(project.config);
     if (features.length > 0) {
+      // A host adapter already names the target, so only its
+      // `output: "static"` stands in the way; otherwise name one.
+      const { kind } = project.config.deployment;
       reportDiagnostics(
         [
           {
             code: "BLUME_SERVER_FEATURE_REQUIRED",
-            message: `${features.join(", ")} require server output, but deployment.output is "static".`,
+            message: `${features.join(", ")} ${features.length === 1 ? "requires" : "require"} server output, but this is a static build.`,
             severity: "error",
             suggestion:
-              'Set deployment: { output: "server", adapter: "vercel" } in blume.config.ts.',
+              kind === "static"
+                ? 'Set deployment to a host adapter from "blume/deploy" in blume.config.ts, e.g. `deployment: vercel()`.'
+                : `Drop \`output: "static"\` from \`deployment: ${kind}()\` in blume.config.ts to build for the server.`,
           },
         ],
         options.root
@@ -87,19 +108,32 @@ export const prepareProject = async (
     project.droppedPages > 0
       ? `${project.droppedPages} page(s) failed frontmatter validation and were dropped from the site. `
       : "";
+  const optIn = options.strictOptIn ?? options.mode === "dev";
   if (hadErrors && options.strict) {
     logger.error(
-      `Aborting due to errors. ${dropped}Fix the diagnostics above, or pass --no-strict to continue despite them.`
+      `Aborting due to errors. ${dropped}Fix the diagnostics above, or ${optIn ? "drop --strict" : "pass --no-strict"} to continue despite them.`
     );
     process.exit(1);
   }
   if (hasErrors(project.diagnostics) && !options.strict) {
     logger.warn(
-      `Continuing despite errors. ${dropped}Use --strict to fail instead.`
+      `Continuing despite errors. ${dropped}${optIn ? "Pass --strict" : "Drop --no-strict"} to fail instead.`
     );
   }
 
-  const { warnings } = await generateRuntime(project);
+  let warnings: string[];
+  try {
+    ({ warnings } = await generateRuntime(project));
+  } catch (error) {
+    // A config error the generator raised (an unplannable `components.ts`
+    // override, a missing font file) is the user's to fix, not an internal
+    // failure: report the diagnostic and stop, like a scan-time error.
+    if (error instanceof BlumeError) {
+      reportDiagnostics([error.diagnostic], options.root);
+      process.exit(1);
+    }
+    throw error;
+  }
   for (const warning of warnings) {
     logger.warn(warning);
   }

package/src/cli/required-secrets.ts

@@ -25,20 +25,47 @@ export const checkRequiredSecrets = (config: ResolvedConfig): Diagnostic[] => {
   };
 
   if (config.ai.ask?.enabled && !config.ai.ask.endpoint) {
-    const backend = resolveAskBackend(config.ai.ask);
-    if (backend.kind === "gateway") {
-      requireSecret(
-        "Ask AI (AI Gateway)",
-        "AI_GATEWAY_API_KEY",
-        "on Vercel the gateway can also authenticate via OIDC"
-      );
-    } else {
-      requireSecret("Ask AI", backend.apiKeyEnv);
+    // The adapter descriptor names the env vars its route reads.
+    const { provider } = config.ai.ask;
+    const backend = resolveAskBackend(provider);
+    for (const env of provider.requiredSecrets) {
+      requireSecret(`Ask AI (${backend.label})`, env, backend.secretNote);
     }
   }
 
-  if (config.search.provider === "mixedbread") {
-    requireSecret("Mixedbread search", "MIXEDBREAD_API_KEY");
+  // Each search adapter declares the secrets its generated runtime reads.
+  const { provider } = config.search;
+  for (const env of provider.requiredSecrets) {
+    requireSecret(`Search (${provider.kind})`, env);
+  }
+
+  // Adapters name their own secrets; the built-in analytics adapters ship
+  // public tokens in the page and declare none.
+  for (const adapter of config.analytics) {
+    for (const env of adapter.requiredSecrets) {
+      requireSecret(`Analytics (${adapter.kind})`, env);
+    }
+  }
+
+  // Each content source adapter declares the env vars its fetch reads.
+  for (const source of config.content.sources) {
+    for (const env of source.requiredSecrets) {
+      requireSecret(`Content source (${source.kind})`, env);
+    }
+  }
+
+  // Adapters name their own secrets; the built-in reference adapters read
+  // public specs and declare none.
+  for (const adapter of config.reference) {
+    for (const env of adapter.requiredSecrets) {
+      requireSecret(`API reference (${adapter.kind})`, env);
+    }
+  }
+
+  // The deployment adapter names its own secrets; the built-in host adapters
+  // read platform-injected env and declare none.
+  for (const env of config.deployment.requiredSecrets) {
+    requireSecret(`Deployment (${config.deployment.kind})`, env);
   }
 
   return diagnostics;

package/src/cli/unknown-flags.ts

@@ -0,0 +1,266 @@
+import type { ArgsDef } from "citty";
+
+import type { Diagnostic } from "../core/types.ts";
+
+/** A flag the command doesn't declare, with the declared one it most resembles. */
+export interface UnknownFlag {
+  /** The flag as typed, without any `=value`. */
+  flag: string;
+  /** The closest declared flag (`--isolated` for `--isolatd`), if one is close. */
+  suggestion?: string;
+}
+
+/** What a declared option spelling means for the token that follows it. */
+interface KnownFlag {
+  /** Whether it's a boolean switch, which `--no-<name>` turns off. */
+  boolean: boolean;
+  /**
+   * How the flags a command takes list it: `--kebab-name`, or `--no-<name>`
+   * for a boolean that's on by default, since that's the form anyone types.
+   */
+  display: string;
+  /** The canonical kebab-case name, which typos are matched against. */
+  name: string;
+  /** Whether it reads the next token as its value (`--port 4000`). */
+  takesValue: boolean;
+}
+
+/** `budgetJs` → `budget-js`; a name already in kebab case is unchanged. */
+const kebabCase = (name: string): string =>
+  name.replaceAll(/(?<upper>[A-Z])/gu, (letter) => `-${letter.toLowerCase()}`);
+
+/** `budget-js` → `budgetJs`; a name already in camel case is unchanged. */
+const camelCase = (name: string): string =>
+  name.replaceAll(/-(?<letter>[a-z])/gu, (match) =>
+    match.slice(1).toUpperCase()
+  );
+
+const aliasesOf = (alias: string | string[] | undefined): string[] => {
+  if (alias === undefined) {
+    return [];
+  }
+  return Array.isArray(alias) ? alias : [alias];
+};
+
+/**
+ * Every spelling citty accepts for each declared option — the name, its camel
+ * and kebab forms, and its aliases — mapped to what that option is. Positional
+ * arguments aren't flags and don't appear.
+ */
+const knownFlags = (argsDef: ArgsDef): Map<string, KnownFlag> => {
+  const flags = new Map<string, KnownFlag>();
+  for (const [name, def] of Object.entries(argsDef)) {
+    if (def.type === "positional") {
+      continue;
+    }
+    const kebab = kebabCase(name);
+    const boolean = def.type === "boolean";
+    const onByDefault = boolean && "default" in def && def.default === true;
+    const flag = {
+      boolean,
+      display: onByDefault ? `--no-${kebab}` : `--${kebab}`,
+      name: kebab,
+      takesValue: def.type === "string" || def.type === "enum",
+    };
+    for (const spelling of [
+      name,
+      kebabCase(name),
+      camelCase(name),
+      ...aliasesOf("alias" in def ? def.alias : undefined),
+    ]) {
+      flags.set(spelling, flag);
+    }
+  }
+  return flags;
+};
+
+/** Edit distance between two short strings (insertions, deletions, swaps of one letter). */
+const distance = (from: string, to: string): number => {
+  let previous = Array.from({ length: to.length + 1 }, (_, index) => index);
+  for (const [row, fromChar] of [...from].entries()) {
+    const current = [row + 1];
+    for (const [column, toChar] of [...to].entries()) {
+      current.push(
+        Math.min(
+          (previous[column + 1] ?? 0) + 1,
+          (current[column] ?? 0) + 1,
+          (previous[column] ?? 0) + (fromChar === toChar ? 0 : 1)
+        )
+      );
+    }
+    previous = current;
+  }
+  return previous[to.length] ?? 0;
+};
+
+/**
+ * The candidate closest to `name`, when it's close enough to be the likely
+ * intent: at most two edits away, and fewer edits than half the candidate's
+ * length, so a short typo doesn't "suggest" an unrelated short word.
+ */
+export const closestMatch = (
+  name: string,
+  candidates: readonly string[]
+): string | undefined => {
+  let best: { candidate: string; edits: number } | undefined;
+  for (const candidate of candidates) {
+    const edits = distance(name, candidate);
+    if (
+      edits <= 2 &&
+      edits * 2 < candidate.length &&
+      (best === undefined || edits < best.edits)
+    ) {
+      best = { candidate, edits };
+    }
+  }
+  return best?.candidate;
+};
+
+/** A `--name`, `--no-name`, `--name=value`, or `-n` token, taken apart. */
+interface FlagToken {
+  /** Whether it carries its value inline (`--port=4000`). */
+  hasValue: boolean;
+  /** `--name` rather than `-n`. */
+  long: boolean;
+  /** The name as typed, without dashes or `=value`. */
+  name: string;
+  /** The negated flag's name, for a `--no-name` token. */
+  negated: string | undefined;
+}
+
+const parseToken = (arg: string): FlagToken => {
+  const long = arg.startsWith("--");
+  const [name = ""] = arg.slice(long ? 2 : 1).split("=");
+  return {
+    hasValue: arg.includes("="),
+    long,
+    name,
+    negated: long && name.startsWith("no-") ? name.slice(3) : undefined,
+  };
+};
+
+/**
+ * How many tokens after this one a declared flag consumes — one for a string
+ * flag's separate value (`--port 4000`, read whatever it looks like, as
+ * citty's parser does), none otherwise — or undefined when the token names no
+ * declared flag. A negation never reads a value; grouped single-letter
+ * booleans (`-ab`) are declared when every letter is.
+ */
+const declaredWidth = (
+  token: FlagToken,
+  flags: Map<string, KnownFlag>
+): number | undefined => {
+  const known =
+    flags.get(token.name) ??
+    (token.negated === undefined ? undefined : flags.get(token.negated));
+  if (known) {
+    return known.takesValue && !token.hasValue && token.negated === undefined
+      ? 1
+      : 0;
+  }
+  const grouped =
+    !token.long &&
+    token.name.length > 1 &&
+    [...token.name].every((letter) => flags.get(letter)?.takesValue === false);
+  return grouped ? 0 : undefined;
+};
+
+/**
+ * An undeclared token as reported, with the declared flag it most resembles.
+ * A mistyped negation keeps its `no-` in the suggestion (`--no-instal` →
+ * `--no-install`), so the fix doesn't flip what was asked for; negating a flag
+ * that takes a value means nothing, so those suggest the flag itself.
+ */
+const describeUnknown = (
+  token: FlagToken,
+  flags: Map<string, KnownFlag>
+): UnknownFlag => {
+  const unknown: UnknownFlag = {
+    flag: `${token.long ? "--" : "-"}${token.name}`,
+  };
+  const names = [...new Set([...flags.values()].map((flag) => flag.name))];
+  const match = closestMatch(token.negated ?? token.name, names);
+  if (match) {
+    const negate = token.negated !== undefined && flags.get(match)?.boolean;
+    unknown.suggestion = negate ? `--no-${match}` : `--${match}`;
+  }
+  return unknown;
+};
+
+/**
+ * The flags in `rawArgs` that the command's `args` don't declare. citty itself
+ * accepts any flag and drops the ones it doesn't know, so a typo like
+ * `--isolatd` would silently run a different command than the one intended.
+ *
+ * Mirrors what citty accepts: every spelling from {@link knownFlags}, a
+ * `--no-<flag>` negation of any of them, `--flag=value`, a declared string
+ * flag's separate value token, grouped single-letter boolean aliases, and
+ * everything after a bare `--`. `accepted` names extra flags the command
+ * handles itself (the removed `blume build --adapter`, which gets its own
+ * migration message).
+ */
+export const unknownFlags = (
+  rawArgs: readonly string[],
+  argsDef: ArgsDef,
+  accepted: readonly string[] = []
+): UnknownFlag[] => {
+  const flags = knownFlags(argsDef);
+  const unknown: UnknownFlag[] = [];
+  for (let index = 0; index < rawArgs.length; index += 1) {
+    const arg = rawArgs[index] ?? "";
+    if (arg === "--") {
+      break;
+    }
+    if (!arg.startsWith("-") || arg === "-") {
+      continue;
+    }
+    const token = parseToken(arg);
+    const width = declaredWidth(token, flags);
+    if (width !== undefined) {
+      index += width;
+    } else if (!accepted.includes(token.negated ?? token.name)) {
+      unknown.push(describeUnknown(token, flags));
+    }
+  }
+  return unknown;
+};
+
+/**
+ * Flags a command reads from its raw arguments itself instead of declaring
+ * them, keyed by command name. `blume build` answers the Blume 1 `--adapter`,
+ * `--output`, and `--base` with the `deployment` setting that replaced each,
+ * which says more than "unknown option" would.
+ */
+export const COMMAND_HANDLED_FLAGS = new Map([
+  ["build", ["adapter", "output", "base"]],
+]);
+
+/**
+ * The error for a command run with flags it doesn't declare: each unknown
+ * flag (with its likely intended spelling), then every flag the command does
+ * take, so the fix is on screen without a trip to `--help`.
+ */
+export const unknownFlagsDiagnostic = (
+  command: string,
+  unknown: readonly UnknownFlag[],
+  argsDef: ArgsDef
+): Diagnostic => {
+  const listed = unknown
+    .map(({ flag, suggestion }) =>
+      suggestion ? `${flag} (did you mean ${suggestion}?)` : flag
+    )
+    .join(", ");
+  const declared = [
+    ...new Set([...knownFlags(argsDef).values()].map((flag) => flag.display)),
+  ].toSorted();
+  const takes =
+    declared.length > 0
+      ? `It takes ${declared.join(", ")}.`
+      : "It takes no options.";
+  return {
+    code: "BLUME_UNKNOWN_OPTION",
+    message: `blume ${command} doesn't know ${unknown.length === 1 ? "the option" : "the options"} ${listed}.`,
+    severity: "error",
+    suggestion: `${takes} Run \`blume ${command} --help\` for what each does.`,
+  };
+};

package/src/cli/yarn-pnp.ts

@@ -0,0 +1,52 @@
+import { existsSync } from "node:fs";
+
+import { dirname, join } from "pathe";
+
+import { packageDirFrom } from "../astro/render-deps.ts";
+import type { Diagnostic } from "../core/types.ts";
+
+/** Whether `root` or one of its ancestors holds a Yarn Plug'n'Play manifest. */
+const hasPnpManifest = (root: string): boolean => {
+  let dir = root;
+  while (true) {
+    if (existsSync(join(dir, ".pnp.cjs")) || existsSync(join(dir, ".pnp.js"))) {
+      return true;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) {
+      return false;
+    }
+    dir = parent;
+  }
+};
+
+/**
+ * The diagnostic for a project installed with Yarn Plug'n'Play, or null.
+ *
+ * Plug'n'Play installs no `node_modules`, and the Astro project Blume
+ * generates in `.blume/` imports Astro and Blume's dependencies by name, which
+ * only a `node_modules` tree resolves — so under PnP the build dies loading
+ * `astro/config`, a failure that reads like a bug in Blume. Caught up front
+ * instead: when the command runs under the PnP runtime (`process.versions.pnp`,
+ * set by `yarn run`), or when a `.pnp.cjs` manifest sits in the project with no
+ * `node_modules` copy of Blume beside it.
+ */
+export const yarnPnpDiagnostic = (
+  root: string,
+  pnpVersion: string | undefined = process.versions.pnp
+): Diagnostic | null => {
+  const underPnp =
+    pnpVersion !== undefined ||
+    (hasPnpManifest(root) && packageDirFrom("blume", root) === null);
+  if (!underPnp) {
+    return null;
+  }
+  return {
+    code: "BLUME_YARN_PNP",
+    message:
+      "Yarn Plug'n'Play isn't supported: the Astro project Blume generates in `.blume/` resolves Astro and Blume's dependencies from a `node_modules` folder, which Plug'n'Play doesn't create.",
+    severity: "error",
+    suggestion:
+      "Add `nodeLinker: node-modules` to `.yarnrc.yml`, run `yarn install`, then run this command again.",
+  };
+};

package/src/components/content/AccordionItem.astro

@@ -110,7 +110,13 @@ const accordionId = id ?? componentSlug(title);
           return;
         }
 
-        history.replaceState(null, "", `#${encodeURIComponent(accordion.id)}`);
+        // Keep the entry's state: the client router ignores a popstate whose
+        // state is null, so Back to this page would change only the URL.
+        history.replaceState(
+          history.state,
+          "",
+          `#${encodeURIComponent(accordion.id)}`
+        );
       },
       true
     );

package/src/components/content/Card.astro

@@ -1,4 +1,6 @@
 ---
+import { isExternalUrl } from "../../core/base-path.ts";
+import { newTabAttrs } from "../../core/new-tab.ts";
 import {
   ADMONITION_ICON,
   ADMONITION_ICON_CLASS,
@@ -23,7 +25,7 @@ interface Props {
 const { arrow, color, cta, horizontal, href, icon, img, title, type } =
   Astro.props;
 const Tag = href ? "a" : "div";
-const external = href?.startsWith("http");
+const external = href !== undefined && isExternalUrl(href);
 const isHorizontal = horizontal === true || horizontal === "true";
 const showArrow =
   href && arrow === undefined ? external : arrow === true || arrow === "true";
@@ -51,8 +53,7 @@ const variantClass = {
   ]}
   data-blume-card
   href={href === undefined ? undefined : contentHref(href)}
-  rel={external ? "noreferrer" : undefined}
-  target={external ? "_blank" : undefined}
+  {...newTabAttrs(href)}
 >
   {
     img && (

package/src/components/content/ColorItem.astro

@@ -1,4 +1,8 @@
 ---
+import data from "blume:data";
+
+import { contentStrings } from "./content-strings.ts";
+
 interface ColorValue {
   dark?: string;
   light?: string;
@@ -17,12 +21,22 @@ const displayValue =
   lightValue && darkValue && lightValue !== darkValue
     ? `${lightValue} / ${darkValue}`
     : lightValue;
+const { actions: actionStrings, content: strings } = contentStrings(
+  data,
+  Astro.currentLocale
+);
+const label = strings.copyColor
+  .replace("{name}", name)
+  .replace("{value}", displayValue ?? "");
 ---
 
 <button
-  aria-label={`Copy ${name} color ${displayValue}`}
+  aria-label={label}
   class="group flex w-full cursor-pointer flex-col gap-2.5 text-center focus:outline-none"
-  data-blume-color-copy={displayValue}
+  data-blume-color-copy
+  data-copied={actionStrings.copied}
+  data-dark={darkValue}
+  data-light={lightValue}
   style={`--blume-color-light:${lightValue};--blume-color-dark:${darkValue};`}
   type="button"
 >
@@ -69,13 +83,17 @@ const displayValue =
         return;
       }
 
-      if (!(await copyText(button.dataset.blumeColorCopy ?? ""))) {
+      // The value the swatch shows right now: a theme-aware color copies the
+      // active theme's value, not the "light / dark" pair it lists.
+      const dark = document.documentElement.dataset.theme === "dark";
+      const value = (dark ? button.dataset.dark : button.dataset.light) ?? "";
+      if (!(await copyText(value))) {
         return;
       }
 
       const status = button.querySelector<HTMLElement>("[data-blume-color-status]");
       if (status) {
-        flashLabel(status, "Copied");
+        flashLabel(status, button.dataset.copied ?? "Copied!");
       }
     });
   }

package/src/components/content/GithubInfo.astro

@@ -5,6 +5,7 @@
 // If the API is unreachable the card still renders, just without counts.
 import { getSecret } from "astro:env/server";
 import { apiUrl, PUBLIC_HOST_URL } from "../../core/github.ts";
+import { NEW_TAB_ATTRS } from "../../core/new-tab.ts";
 import { resolveIcon } from "../../theme/icons.ts";
 import data from "blume:data";
 import { GITHUB_MARK } from "../github-mark.ts";
@@ -69,8 +70,7 @@ const statIcon =
     <a
       class="not-prose my-6 flex flex-col gap-2 rounded-blume border border-border p-4 no-underline! transition-colors hover:border-foreground/30 hover:bg-muted/40"
       href={`${host}/${owner}/${repo}`}
-      rel="noreferrer"
-      target="_blank"
+      {...NEW_TAB_ATTRS}
     >
       <span class="flex items-center gap-2 font-medium text-foreground text-sm">
         <svg