@writedocs/generator 0.4.7 → 0.4.9

package/astro.config.mjs

@@ -26,6 +26,8 @@ import { remarkAutoHydrateSnippets } from './src/lib/mdx-auto-hydrate.js';
 import { remarkInjectBuiltinComponents } from './src/lib/mdx-inject-builtins.js';
 import { remarkTitleAnchorIds } from './src/lib/mdx-title-anchor-ids.js';
 import { remarkSubstituteVariables } from './src/lib/mdx-substitute-variables.js';
+import { remarkMintlifyTreeLists, remarkMintlifyPromptText } from './src/lib/mdx-mintlify.js';
+import { remarkUnknownComponentFallback } from './src/lib/mdx-unknown-components.js';
 import { writedocsTempDir, writedocsBuildStagingDir } from './src/lib/writedocs-temp-dir.js';
 import { stylesAssetFallback } from './src/lib/styles-asset-integration.js';
 import {
@@ -363,6 +365,17 @@ export default defineConfig({
       // as raw text first.
       remarkPlugins: [
         remarkMath,
+        // Mintlify's Markdown-list <Tree> and <Prompt> source text - see
+        // lib/mdx-mintlify.js. Before remarkInjectBuiltinComponents, so
+        // the <Tree.Folder>/<Tree.File> elements they add are already in
+        // the tree when it looks for components to import.
+        remarkMintlifyTreeLists,
+        remarkMintlifyPromptText,
+        // An unknown component becomes a fragment (its children still
+        // render) with a warning, instead of failing the whole build - see
+        // lib/mdx-unknown-components.js. After remarkMintlifyTreeLists, so
+        // the <Tree.Folder>/<Tree.File> elements it adds count as known.
+        remarkUnknownComponentFallback,
         remarkInjectBuiltinComponents,
         // Runs after remarkInjectBuiltinComponents (order doesn't actually
         // matter between them - that plugin only ever prepends an import

package/bin/writedocs.js

@@ -1,139 +1,167 @@
-#!/usr/bin/env node
-import { Command } from 'commander';
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import dotenv from 'dotenv';
-import { runDev } from '../src/cli/dev.js';
-import { runBuild } from '../src/cli/build.js';
-import { runInit } from '../src/cli/init.js';
-import { requireBuildKey } from '../src/cli/build-auth.js';
-// O MESMO modulo que o build usa (via loadDocsConfig, que reexporta daqui) e
-// que a plataforma importa por `@writedocs/generator/config-schema` - e o que
-// faz os tres reportarem os mesmos problemas com as mesmas palavras, em vez de
-// cada um manter a sua copia do schema.
-//
-// `.js`, e nao o `.ts` que e a fonte de verdade: este arquivo e carregado por
-// node puro, sem o transform do Astro/Vite, e o Node RECUSA type stripping para
-// qualquer arquivo sob node_modules - por desenho, em qualquer versao
-// (ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING). Ou seja: importar o `.ts` aqui
-// funciona a partir do checkout e falha 100% das vezes para quem instala o
-// pacote, que foi exatamente o que quebrou o `validate` no 0.2.0. O `.js` e
-// gerado do `.ts` pelo script `prepare` (package.json), entao ele existe tanto
-// no checkout quanto dentro do tarball, e o consumidor nao roda build nenhum.
-// Ver a mesma regra ja escrita em src/cli/write-redirects-file.js.
-import {
-  validateDocsConfig,
-  formatValidationIssuesDetailed,
-  unknownRootKeyIssues,
-} from '../src/lib/config-schema.js';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const packageRoot = path.resolve(__dirname, '..');
-// Read rather than hardcode - a literal version string here silently drifts
-// from package.json's own "version" the moment either one is bumped without
-// the other (exactly what `npm version <bump>` does: it only touches
-// package.json). `writedocs --version` should always reflect what actually
-// got published, not whatever this string happened to say at the time this
-// line was last hand-edited.
-const { version } = JSON.parse(fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf-8'));
-
-const program = new Command();
-program
-  .name('writedocs')
-  .description('Static site generator for writedocs.json + MDX')
-  .version(version);
-
-program
-  .command('dev')
-  .description('Start a local dev server with hot reload')
-  .argument('[dir]', 'content directory (contains writedocs.json and docs/)', '.')
-  .option('-p, --port <port>', 'port to run on')
-  .action(async (dir, opts) => {
-    await runDev({
-      contentDir: path.resolve(process.cwd(), dir),
-      packageRoot,
-      port: opts.port,
-    });
-  });
-
-program
-  // { hidden: true } keeps `build` out of `writedocs --help` - it's not a
-  // command ordinary users are meant to discover or run themselves. See
-  // src/cli/build-auth.js for the second layer: even someone who knows the
-  // command exists still can't run it without the right key.
-  .command('build', { hidden: true })
-  .description('Build a static site into <dir>/dist')
-  .argument('[dir]', 'content directory (contains writedocs.json and docs/)', '.')
-  .option('-k, --key <key>', 'build authorization key (or set WRITEDOCS_API_KEY)')
-  .action(async (dir, opts) => {
-    const contentDir = path.resolve(process.cwd(), dir);
-    // Project-scoped, not global: a .env sitting next to this project's own
-    // writedocs.json (WRITEDOCS_KEY_SERVER_URL, WRITEDOCS_API_KEY) is picked
-    // up automatically, so build doesn't need those exported by hand every
-    // session. dotenv never overwrites a var already set in the real
-    // environment - an explicit `export`/CI secret still wins over the file.
-    dotenv.config({ path: path.join(contentDir, '.env'), quiet: true });
-    await requireBuildKey(opts.key || process.env.WRITEDOCS_API_KEY);
-    await runBuild({ contentDir, packageRoot });
-  });
-
-program
-  // Visivel, ao contrario do `build`: validar a propria configuracao e
-  // exatamente o tipo de coisa que um usuario deve poder rodar sozinho, no CI
-  // inclusive. Sem chave, sem dotenv, sem rede - le um arquivo e sai 0 ou 1.
-  .command('validate')
-  .description('Validate writedocs.json against the schema')
-  .argument('[dir]', 'content directory (contains writedocs.json)', '.')
-  .action(async (dir) => {
-    const contentDir = path.resolve(process.cwd(), dir);
-    const configPath = path.join(contentDir, 'writedocs.json');
-    if (!fs.existsSync(configPath)) {
-      // Mesma mensagem que loadDocsConfig() ja da pro mesmo caso.
-      console.error(
-        `[writedocs] writedocs.json not found at ${configPath}. Run "writedocs init" to scaffold one.`
-      );
-      process.exit(1);
-    }
-
-    const rawText = fs.readFileSync(configPath, 'utf-8');
-    const result = validateDocsConfig(rawText);
-    // Chave desconhecida na raiz e AVISO, nunca erro: a raiz nao e `.strict()`
-    // de proposito (tornar strict quebraria configs existentes), entao o Zod
-    // descarta a chave em silencio. Sem JSON parseavel nao ha chave pra avaliar.
-    const warnings = result.kind === 'invalid_json' ? [] : unknownRootKeyIssues(rawText);
-    const nomeArquivo = path.basename(configPath);
-
-    if (!result.ok) {
-      // A versao longa (linha, frase humana, sugestao) em vez da curta que o
-      // `writedocs build` imprime: aqui o usuario pediu explicitamente um
-      // diagnostico, e tem a tela inteira pra ele.
-      console.error(`[writedocs] ${configPath} failed validation:\n`);
-      console.error(formatValidationIssuesDetailed(result.issues, { fileName: nomeArquivo }));
-      console.error('');
-    }
-
-    if (warnings.length > 0) {
-      console.error(`[writedocs] ${warnings.length} warning${warnings.length === 1 ? '' : 's'}:\n`);
-      console.error(formatValidationIssuesDetailed(warnings, { fileName: nomeArquivo }));
-      console.error('');
-    }
-
-    if (!result.ok) process.exit(1);
-    // Aviso nao invalida: um config so com avisos continua valido, e sai 0 -
-    // o mesmo criterio que a plataforma usa pra marcar o projeto como `valid`.
-    console.log(`[writedocs] ${configPath} is valid.`);
-  });
-
-program
-  .command('init')
-  .description('Scaffold a writedocs.json and starter docs/ folder')
-  .argument('[dir]', 'directory to scaffold into', '.')
-  .action(async (dir) => {
-    await runInit({ targetDir: path.resolve(process.cwd(), dir) });
-  });
-
-program.parseAsync(process.argv).catch((err) => {
-  console.error(`[writedocs] ${err.message}`);
-  process.exit(1);
-});
+#!/usr/bin/env node
+import { Command } from 'commander';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import dotenv from 'dotenv';
+import { runDev } from '../src/cli/dev.js';
+import { runBuild } from '../src/cli/build.js';
+import { runInit } from '../src/cli/init.js';
+import { requireBuildKey } from '../src/cli/build-auth.js';
+// O MESMO modulo que o build usa (via loadDocsConfig, que reexporta daqui) e
+// que a plataforma importa por `@writedocs/generator/config-schema` - e o que
+// faz os tres reportarem os mesmos problemas com as mesmas palavras, em vez de
+// cada um manter a sua copia do schema.
+//
+// `.js`, e nao o `.ts` que e a fonte de verdade: este arquivo e carregado por
+// node puro, sem o transform do Astro/Vite, e o Node RECUSA type stripping para
+// qualquer arquivo sob node_modules - por desenho, em qualquer versao
+// (ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING). Ou seja: importar o `.ts` aqui
+// funciona a partir do checkout e falha 100% das vezes para quem instala o
+// pacote, que foi exatamente o que quebrou o `validate` no 0.2.0. O `.js` e
+// gerado do `.ts` pelo script `prepare` (package.json), entao ele existe tanto
+// no checkout quanto dentro do tarball, e o consumidor nao roda build nenhum.
+// Ver a mesma regra ja escrita em src/cli/write-redirects-file.js.
+import {
+  validateDocsConfig,
+  formatValidationIssuesDetailed,
+  unknownRootKeyIssues,
+} from '../src/lib/config-schema.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageRoot = path.resolve(__dirname, '..');
+// Read rather than hardcode - a literal version string here silently drifts
+// from package.json's own "version" the moment either one is bumped without
+// the other (exactly what `npm version <bump>` does: it only touches
+// package.json). `writedocs --version` should always reflect what actually
+// got published, not whatever this string happened to say at the time this
+// line was last hand-edited.
+const { version } = JSON.parse(fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf-8'));
+
+const program = new Command();
+program
+  .name('writedocs')
+  .description('Static site generator for writedocs.json + MDX')
+  .version(version);
+
+program
+  .command('dev')
+  .description('Start a local dev server with hot reload')
+  .argument('[dir]', 'content directory (contains writedocs.json and docs/)', '.')
+  .option('-p, --port <port>', 'port to run on')
+  .action(async (dir, opts) => {
+    await runDev({
+      contentDir: path.resolve(process.cwd(), dir),
+      packageRoot,
+      port: opts.port,
+    });
+  });
+
+program
+  // { hidden: true } keeps `build` out of `writedocs --help` - it's not a
+  // command ordinary users are meant to discover or run themselves. See
+  // src/cli/build-auth.js for the second layer: even someone who knows the
+  // command exists still can't run it without the right key.
+  .command('build', { hidden: true })
+  .description('Build a static site into <dir>/dist')
+  .argument('[dir]', 'content directory (contains writedocs.json and docs/)', '.')
+  .option('-k, --key <key>', 'build authorization key (or set WRITEDOCS_API_KEY)')
+  .action(async (dir, opts) => {
+    const contentDir = path.resolve(process.cwd(), dir);
+    // Project-scoped, not global: a .env sitting next to this project's own
+    // writedocs.json (WRITEDOCS_KEY_SERVER_URL, WRITEDOCS_API_KEY) is picked
+    // up automatically, so build doesn't need those exported by hand every
+    // session. dotenv never overwrites a var already set in the real
+    // environment - an explicit `export`/CI secret still wins over the file.
+    dotenv.config({ path: path.join(contentDir, '.env'), quiet: true });
+    await requireBuildKey(opts.key || process.env.WRITEDOCS_API_KEY);
+    await runBuild({ contentDir, packageRoot });
+  });
+
+program
+  // Visivel, ao contrario do `build`: validar a propria configuracao e
+  // exatamente o tipo de coisa que um usuario deve poder rodar sozinho, no CI
+  // inclusive. Sem chave, sem dotenv, sem rede - le um arquivo e sai 0 ou 1.
+  .command('validate')
+  .description('Validate writedocs.json and every page - frontmatter, MDX, navigation, components, icons')
+  .argument('[dir]', 'content directory (contains writedocs.json)', '.')
+  .option('--config-only', 'check writedocs.json only, not the pages')
+  .action(async (dir, options) => {
+    const contentDir = path.resolve(process.cwd(), dir);
+    const configPath = path.join(contentDir, 'writedocs.json');
+    if (!fs.existsSync(configPath)) {
+      // Mesma mensagem que loadDocsConfig() ja da pro mesmo caso.
+      console.error(
+        `[writedocs] writedocs.json not found at ${configPath}. Run "writedocs init" to scaffold one.`
+      );
+      process.exit(1);
+    }
+
+    const rawText = fs.readFileSync(configPath, 'utf-8');
+    const result = validateDocsConfig(rawText);
+    // Chave desconhecida na raiz e AVISO, nunca erro: a raiz nao e `.strict()`
+    // de proposito (tornar strict quebraria configs existentes), entao o Zod
+    // descarta a chave em silencio. Sem JSON parseavel nao ha chave pra avaliar.
+    const warnings = result.kind === 'invalid_json' ? [] : unknownRootKeyIssues(rawText);
+    const nomeArquivo = path.basename(configPath);
+
+    if (!result.ok) {
+      // A versao longa (linha, frase humana, sugestao) em vez da curta que o
+      // `writedocs build` imprime: aqui o usuario pediu explicitamente um
+      // diagnostico, e tem a tela inteira pra ele.
+      console.error(`[writedocs] ${configPath} failed validation:\n`);
+      console.error(formatValidationIssuesDetailed(result.issues, { fileName: nomeArquivo }));
+      console.error('');
+    }
+
+    if (warnings.length > 0) {
+      console.error(`[writedocs] ${warnings.length} warning${warnings.length === 1 ? '' : 's'}:\n`);
+      console.error(formatValidationIssuesDetailed(warnings, { fileName: nomeArquivo }));
+      console.error('');
+    }
+
+    // The pages: everything that would fail the build (errors) or build
+    // differently than written (warnings), in one pass - see
+    // src/lib/content-check.js. Runs even when writedocs.json itself is
+    // invalid, so one run reports both; only the navigation/icon checks
+    // need writedocs.json to at least be valid JSON.
+    let content = null;
+    if (!options.configOnly) {
+      const { checkContent, formatContentIssues } = await import('../src/lib/content-check.js');
+      content = await checkContent(contentDir, result.kind === 'invalid_json' ? null : rawText);
+      if (content.errors.length > 0) {
+        console.error(`[writedocs] ${content.errors.length} error${content.errors.length === 1 ? '' : 's'} in the pages:\n`);
+        console.error(formatContentIssues(content.errors));
+        console.error('');
+      }
+      if (content.warnings.length > 0) {
+        console.error(`[writedocs] ${content.warnings.length} warning${content.warnings.length === 1 ? '' : 's'} in the pages:\n`);
+        console.error(formatContentIssues(content.warnings));
+        console.error('');
+      }
+    }
+
+    if (!result.ok || (content && content.errors.length > 0)) process.exit(1);
+    // Aviso nao invalida: um config so com avisos continua valido, e sai 0 -
+    // o mesmo criterio que a plataforma usa pra marcar o projeto como `valid`.
+    console.log(`[writedocs] ${configPath} is valid.`);
+    if (content) {
+      console.log(
+        `[writedocs] Checked ${content.pages} page${content.pages === 1 ? '' : 's'}: no errors` +
+          (content.warnings.length ? `, ${content.warnings.length} warning${content.warnings.length === 1 ? '' : 's'} above.` : '.')
+      );
+    }
+  });
+
+program
+  .command('init')
+  .description('Scaffold a writedocs.json and starter docs/ folder')
+  .argument('[dir]', 'directory to scaffold into', '.')
+  .action(async (dir) => {
+    await runInit({ targetDir: path.resolve(process.cwd(), dir) });
+  });
+
+program.parseAsync(process.argv).catch((err) => {
+  console.error(`[writedocs] ${err.message}`);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writedocs/generator",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Static site generator for docs — a writedocs.json + MDX folder in, a static site out.",
   "type": "module",
   "bin": {
@@ -59,6 +59,7 @@
     "@iconify-json/ri": "^1.2.10",
     "@iconify-json/simple-icons": "^1.2.89",
     "@iconify-json/tabler": "^1.2.35",
+    "@mdx-js/mdx": "^3.1.1",
     "@shikijs/transformers": "^4.3.1",
     "@tailwindcss/vite": "^4.3.2",
     "astro": "7.2.9",

package/src/components/AppIcon.astro

@@ -7,7 +7,7 @@
 // and Card.astro (the two places writedocs.json icon strings get rendered)
 // don't each need their own copy of the resolveIcon() call + branch.
 import { Icon } from 'astro-icon/components';
-import { resolveIcon } from '../lib/config';
+import { resolveIcon, iconExists } from '../lib/config';
 
 interface Props {
   icon?: string;
@@ -21,7 +21,19 @@ interface Props {
   style?: string;
 }
 const { icon, class: className = 'wd-icon', style } = Astro.props as Props;
-const resolved = icon ? resolveIcon(icon) : null;
+// An icon name no installed collection has renders nothing, with a warning
+// (once per name - a sidebar icon renders on every page), instead of
+// failing the whole build the way astro-icon does on a missing name.
+// `writedocs validate` lists the same names ahead of time.
+let resolved = icon ? resolveIcon(icon) : null;
+if (icon && resolved?.kind === 'iconify' && !iconExists(icon)) {
+  const warned: Set<string> = ((globalThis as any).__wdWarnedIcons ??= new Set());
+  if (!warned.has(icon)) {
+    warned.add(icon);
+    console.warn(`[writedocs] unknown icon "${icon}" - no installed icon set has it, so it's left out.`);
+  }
+  resolved = null;
+}
 ---
 {resolved && (
   resolved.kind === 'iconify' ? (

package/src/components/Color.astro

@@ -0,0 +1,61 @@
+---
+// Mintlify's <Color> - a palette of <Color.Item> swatches. `variant`:
+//   compact (default) - one grid of swatches.
+//   table             - <Color.Row title="..."> rows, each a titled line of
+//                       swatches.
+// Color.Row/Color.Item are ColorRow.astro/ColorItem.astro, attached as
+// properties in components/compound.ts so the dotted names resolve in MDX.
+interface Props {
+  variant?: 'compact' | 'table';
+}
+const { variant = 'compact' } = Astro.props as Props;
+---
+<div class:list={['wd-color', `wd-color-${variant}`]}><slot /></div>
+<script>
+  // Click (or Enter/Space) on a swatch copies the value currently shown -
+  // for a light/dark pair, the one matching the site's theme right now.
+  function initColorCopy(root: ParentNode) {
+    root.querySelectorAll<HTMLElement>('.wd-color-item[data-light]').forEach((item) => {
+      if (item.dataset.wdInit) return;
+      item.dataset.wdInit = 'true';
+      const copy = async () => {
+        const dark = document.documentElement.dataset.theme === 'dark';
+        const value = (dark ? item.dataset.dark : item.dataset.light) ?? '';
+        const label = item.querySelector<HTMLElement>('.wd-color-copied');
+        try {
+          await navigator.clipboard.writeText(value);
+          if (label) label.textContent = 'Copied';
+        } catch {
+          if (label) label.textContent = 'Copy failed';
+        }
+        setTimeout(() => label && (label.textContent = ''), 1200);
+      };
+      item.addEventListener('click', copy);
+      item.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          copy();
+        }
+      });
+    });
+  }
+  initColorCopy(document);
+  document.addEventListener('astro:page-load', () => initColorCopy(document));
+</script>
+<style>
+  .wd-color {
+    margin: 1.25rem 0;
+  }
+  .wd-color-compact {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
+    gap: 1rem;
+  }
+  .wd-color-table {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.6rem;
+    overflow: hidden;
+  }
+</style>

package/src/components/ColorItem.astro

@@ -0,0 +1,93 @@
+---
+// Mintlify's <Color.Item name="..." value="..."> - one swatch. `value` is
+// any CSS color, or { light, dark } for a theme-aware pair: the swatch and
+// the value text switch with the site's theme toggle ([data-theme] on
+// <html>), via the two custom properties below. Click copies the value
+// (Color.astro's script).
+interface Props {
+  name?: string;
+  value?: string | { light: string; dark: string };
+}
+const { name, value } = Astro.props as Props;
+const light = typeof value === 'string' ? value : value?.light;
+const dark = typeof value === 'string' ? value : value?.dark;
+const themed = typeof value === 'object' && value !== null && light !== dark;
+const style = light ? `--wd-swatch-light: ${light}; --wd-swatch-dark: ${dark ?? light}` : undefined;
+---
+<div
+  class="wd-color-item"
+  data-light={light}
+  data-dark={dark}
+  role={light ? 'button' : undefined}
+  tabindex={light ? 0 : undefined}
+  title={light ? 'Copy value' : undefined}
+  style={style}
+>
+  <div class="wd-color-swatch"></div>
+  <div class="wd-color-name">{name}</div>
+  {light && (
+    <div class="wd-color-value">
+      {themed ? (
+        <>
+          <span class="wd-color-value-light">{light}</span>
+          <span class="wd-color-value-dark">{dark}</span>
+        </>
+      ) : (
+        light
+      )}
+      <span class="wd-color-copied" aria-live="polite"></span>
+    </div>
+  )}
+</div>
+<style>
+  .wd-color-item {
+    min-width: 0;
+  }
+  .wd-color-item[role='button'] {
+    cursor: pointer;
+  }
+  /* A checkerboard under the swatch, so a translucent color (rgba, hsla)
+     reads as translucent rather than as a lighter solid. */
+  .wd-color-swatch {
+    height: 3.5rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    background:
+      linear-gradient(var(--wd-swatch-light, transparent), var(--wd-swatch-light, transparent)),
+      repeating-conic-gradient(var(--wd-surface) 0% 25%, var(--wd-background) 0% 50%) 0 0 / 12px 12px;
+  }
+  :global([data-theme='dark']) .wd-color-swatch {
+    background:
+      linear-gradient(var(--wd-swatch-dark, transparent), var(--wd-swatch-dark, transparent)),
+      repeating-conic-gradient(var(--wd-surface) 0% 25%, var(--wd-background) 0% 50%) 0 0 / 12px 12px;
+  }
+  .wd-color-item[role='button']:hover .wd-color-swatch,
+  .wd-color-item[role='button']:focus-visible .wd-color-swatch {
+    border-color: var(--wd-primary);
+  }
+  .wd-color-name {
+    margin-top: 0.4rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .wd-color-value {
+    font-family: monospace;
+    font-size: 0.75rem;
+    color: var(--wd-text-muted);
+    overflow-wrap: anywhere;
+  }
+  .wd-color-value-dark {
+    display: none;
+  }
+  :global([data-theme='dark']) .wd-color-value-light {
+    display: none;
+  }
+  :global([data-theme='dark']) .wd-color-value-dark {
+    display: inline;
+  }
+  .wd-color-copied {
+    margin-left: 0.35rem;
+    color: var(--wd-primary);
+  }
+</style>

package/src/components/ColorRow.astro

@@ -0,0 +1,39 @@
+---
+// Mintlify's <Color.Row title="..."> - one titled row inside
+// <Color variant="table">. `title` takes inline Markdown.
+import { inlineMarkdown } from '../lib/inline-markdown.js';
+interface Props {
+  title?: string;
+}
+const { title } = Astro.props as Props;
+---
+<div class="wd-color-row">
+  <div class="wd-color-row-title" set:html={inlineMarkdown(title ?? '')} />
+  <div class="wd-color-row-items"><slot /></div>
+</div>
+<style>
+  .wd-color-row {
+    display: grid;
+    grid-template-columns: 9rem minmax(0, 1fr);
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem;
+  }
+  .wd-color-row + .wd-color-row {
+    border-top: 1px solid var(--wd-border);
+  }
+  .wd-color-row-title {
+    font-weight: 600;
+    font-size: 0.9rem;
+  }
+  .wd-color-row-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+    gap: 1rem;
+  }
+  @media (max-width: 640px) {
+    .wd-color-row {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+</style>