@writedocs/generator 0.4.6 → 0.4.7

package/astro.config.mjs

@@ -131,7 +131,12 @@ function collectNoindexIds(rootContentDir) {
   for (const relativeId of findAllPages(rootContentDir)) {
     const file = path.join(rootContentDir, relativeId);
     const { data } = matter(fs.readFileSync(file, 'utf-8'));
-    if (!data?.seo?.noindex) continue;
+    // Top-level `noindex` is Mintlify's spelling, and a Mintlify `hidden`
+    // page is noindexed too - content.config.ts folds both into
+    // `seo.noindex` the same way (an explicit value wins).
+    // A frontmatter `url` page's route only redirects to that link, so it
+    // doesn't belong in the sitemap either.
+    if (!(data?.seo?.noindex ?? data?.noindex ?? data?.hidden === true) && !data?.url) continue;
     const fallbackId = relativeId.replace(/\.mdx?$/i, '').replace(/\/index$/, '');
     ids.add(normalizeEntryId(data.slug ?? fallbackId));
   }
@@ -140,7 +145,7 @@ function collectNoindexIds(rootContentDir) {
   // to the way there is for a hand-written page.
   for (const file of walkMdFiles(generatedDocsDir)) {
     const { data } = matter(fs.readFileSync(file, 'utf-8'));
-    if (data?.seo?.noindex && data.slug) ids.add(normalizeEntryId(data.slug));
+    if ((data?.seo?.noindex ?? data?.noindex ?? data?.hidden === true) && data.slug) ids.add(normalizeEntryId(data.slug));
   }
   return ids;
 }
@@ -192,6 +197,25 @@ function singleSitemapFile() {
 // of only opting into a feature's config surface when it's actually used.
 const redirectsConfig = Object.fromEntries(docsConfig.redirects.map((r) => [r.source, r.destination]));
 
+/** Tailwind only scans the Vite root for class names - this package, not
+ *  the site being built, which is usually somewhere else entirely - so a
+ *  utility class written in a site's own MDX or snippet (Mintlify content
+ *  uses them freely, e.g. className="block dark:hidden") never got
+ *  generated. Appends an @source for the site's content files to
+ *  global.css before Tailwind compiles it. Forward slashes, since
+ *  Tailwind reads the path as a glob. */
+function contentTailwindSource() {
+  const sourceGlob = `${contentDir.split(path.sep).join('/')}/**/*.{md,mdx,jsx,tsx}`;
+  return {
+    name: 'writedocs:content-tailwind-source',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!id.split('?')[0].replace(/\\/g, '/').endsWith('/src/styles/global.css')) return null;
+      return { code: `${code}\n@source ${JSON.stringify(sourceGlob)};\n`, map: null };
+    },
+  };
+}
+
 export default defineConfig({
   ...(siteUrl ? { site: siteUrl } : {}),
   ...(docsConfig.redirects.length ? { redirects: redirectsConfig } : {}),
@@ -404,7 +428,10 @@ export default defineConfig({
   // working. See src/styles/global.css for the one @import that wires
   // Tailwind's utilities in.
   vite: {
-    plugins: [tailwindcss()],
+    // contentTailwindSource() must come before tailwindcss(): both are
+    // enforce: 'pre' transforms, which Vite runs in array order, and
+    // Tailwind has to see the added @source when it compiles global.css.
+    plugins: [contentTailwindSource(), tailwindcss()],
     resolve: {
       alias: [
         // Lets a page's MDX write `import Foo from '/snippets/foo.mdx'`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@writedocs/generator",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Static site generator for docs — a writedocs.json + MDX folder in, a static site out.",
   "type": "module",
   "bin": {

package/src/components/Accordion.astro

@@ -4,6 +4,10 @@ import AppIcon from "./AppIcon.astro";
 interface Props {
   title: string;
   icon?: string;
+  // Mintlify parity: `description` is a muted second line under the title,
+  // `defaultOpen` renders the accordion already expanded.
+  description?: string;
+  defaultOpen?: boolean;
   // Set automatically by remarkTitleAnchorIds (src/lib/mdx-title-anchor-ids.js)
   // for every <Accordion title="..."> it finds in an .mdx file's own JSX,
   // already deduped (-2, -3, ...) against every other Accordion/Callout
@@ -14,7 +18,7 @@ interface Props {
   // title={expr}, or this component used directly from a .astro file).
   _titleId?: string;
 }
-const { title, icon, _titleId } = Astro.props as Props;
+const { title, icon, description, defaultOpen = false, _titleId } = Astro.props as Props;
 // Astro's own heading-id slugging (github-slugger, via the markdown
 // pipeline) never sees this - `title` is a component prop, not a markdown
 // heading, so it gets no id unless we make one ourselves. Same slugify
@@ -28,13 +32,16 @@ function slugify(value: string): string {
 const titleId = _titleId ?? slugify(title);
 ---
 
-<details class="wd-accordion">
+<details class="wd-accordion" open={defaultOpen}>
   <summary>
     <span class="wd-accordion-heading">
       {icon && <AppIcon icon={icon} class="wd-accordion-icon" />}
-      <span class="wd-accordion-title" id={titleId}>
-        {title}
-        <a class="wd-heading-anchor" href={`#${titleId}`} aria-label="Link to this section"> # </a>
+      <span class="wd-accordion-text">
+        <span class="wd-accordion-title" id={titleId}>
+          {title}
+          <a class="wd-heading-anchor" href={`#${titleId}`} aria-label="Link to this section"> # </a>
+        </span>
+        {description && <span class="wd-accordion-description">{description}</span>}
       </span>
     </span>
     {
@@ -128,6 +135,16 @@ const titleId = _titleId ?? slugify(title);
     flex-shrink: 0;
     color: var(--wd-text-muted);
   }
+  .wd-accordion-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
+  }
+  .wd-accordion-description {
+    font-size: 0.85rem;
+    color: var(--wd-text-muted);
+  }
   .wd-accordion-title {
     font-weight: 700;
     color: var(--wd-text);

package/src/components/AppIcon.astro

@@ -26,6 +26,11 @@ const resolved = icon ? resolveIcon(icon) : null;
 {resolved && (
   resolved.kind === 'iconify' ? (
     <Icon name={resolved.name} class={className} style={style} />
+  ) : resolved.kind === 'image' ? (
+    // Wrapped in the same <span> text icons use, so each caller's own
+    // span.<class> rule (font-size, spacing) sizes it; the image fills
+    // 1em of that (img.wd-icon-img in layout/styles/base.css).
+    <span class={className} style={style}><img src={resolved.src} alt="" class="wd-icon-img" /></span>
   ) : (
     <span class={className} style={style}>{resolved.value}</span>
   )

package/src/components/Callout.astro

@@ -1,5 +1,5 @@
 ---
-// See src/components/{Note,Tip,Warning,Danger,Info}.astro - one thin
+// See src/components/{Note,Tip,Warning,Danger,Info,Check}.astro - one thin
 // wrapper per `type` below, each just `<Callout type="x">` under the
 // hood, so a page can write either `<Callout type="info">` or the
 // shorthand `<Info>` and get an identical result. Both forms take the
@@ -7,7 +7,7 @@
 import AppIcon from "./AppIcon.astro";
 
 interface Props {
-  type?: "note" | "tip" | "warning" | "danger" | "info";
+  type?: "note" | "tip" | "warning" | "danger" | "info" | "check";
   title?: string;
   // Set automatically by remarkCalloutAnchorIds (src/lib/mdx-callout-anchor-ids.js)
   // for every <Callout title="...">/<Note title="...">/etc. it finds in an
@@ -19,8 +19,14 @@ interface Props {
   // dynamic `title={expr}`, or this component used directly from a .astro
   // file rather than through MDX).
   _titleId?: string;
+  // Mintlify's custom callout: `icon` replaces the type's own icon (any
+  // icon string AppIcon accepts), `color` replaces its accent color - the
+  // border, tint, icon and title all derive from that one value.
+  icon?: string;
+  color?: string;
 }
-const { type = "note", title, _titleId } = Astro.props as Props;
+const { type = "note", title, _titleId, icon, color } = Astro.props as Props;
+const accentStyle = color ? `--wd-callout-accent: ${color}` : undefined;
 // FontAwesome Solid (fa6-solid, already an installed @iconify-json/*
 // collection - see astro.config.mjs's own comment on icon() needing no
 // allowlist) rather than a literal emoji, so every callout gets a real,
@@ -31,6 +37,7 @@ const icons: Record<string, string> = {
   tip: "fa6-solid:lightbulb",
   warning: "fa6-solid:triangle-exclamation",
   danger: "fa6-solid:circle-xmark",
+  check: "fa6-solid:circle-check",
 };
 // Astro's own heading-id slugging (github-slugger, via the markdown
 // pipeline) never sees this - `title` is a component prop, not a
@@ -44,8 +51,8 @@ function slugify(value: string): string {
 const titleId = title ? (_titleId ?? slugify(title)) : undefined;
 ---
 
-<div class:list={["wd-callout", `wd-callout-${type}`, { "wd-callout-titled": Boolean(title) }]}>
-  <AppIcon icon={icons[type]} class="wd-callout-icon" />
+<div class:list={["wd-callout", `wd-callout-${type}`, { "wd-callout-titled": Boolean(title) }]} style={accentStyle}>
+  <AppIcon icon={icon ?? icons[type]} class="wd-callout-icon" />
   <div class="wd-callout-content">
     {
       title && (
@@ -165,4 +172,7 @@ const titleId = title ? (_titleId ?? slugify(title)) : undefined;
   .wd-callout-danger {
     --wd-callout-accent: #dc2626;
   }
+  .wd-callout-check {
+    --wd-callout-accent: #059669;
+  }
 </style>

package/src/components/Card.astro

@@ -26,27 +26,40 @@ interface Props {
   // generic component over a handful of literal hex values).
   method?: string;
   href?: string;
+  // Mintlify's Card props: `color` tints the icon, `horizontal` puts the
+  // icon beside the text instead of above it, `cta` adds a call-to-action
+  // line at the bottom, and `arrow` marks a linked card with an arrow in
+  // its corner.
+  color?: string;
+  horizontal?: boolean;
+  cta?: string;
+  arrow?: boolean;
 }
-const { title, icon, img, method, href } = Astro.props as Props;
+const { title, icon, img, method, href, color, horizontal = false, cta, arrow = false } = Astro.props as Props;
+const iconStyle = color ? `color: ${color}` : undefined;
 const Tag = href ? 'a' : 'div';
 const KNOWN_METHODS = ['get', 'post', 'put', 'patch', 'delete'];
 const methodLower = method?.toLowerCase();
 const methodClass = methodLower && KNOWN_METHODS.includes(methodLower) ? methodLower : 'other';
 ---
-<Tag class="wd-card" href={href}>
+<Tag class:list={['wd-card', { 'wd-card-horizontal': horizontal, 'wd-card-has-arrow': arrow && href }]} href={href}>
   {img && <img src={img} alt="" class="wd-card-image" />}
-  {!img && <AppIcon icon={icon} class="wd-card-icon" />}
-  <div class="wd-card-title-row">
-    <h3 class="wd-card-title">{title}</h3>
-    {
-      method && (
-        <span class:list={['wd-card-method', `wd-card-method-${methodClass}`]}>
-          {method.toUpperCase()}
-        </span>
-      )
-    }
+  {!img && <AppIcon icon={icon} class="wd-card-icon" style={iconStyle} />}
+  <div class="wd-card-text">
+    <div class="wd-card-title-row">
+      <h3 class="wd-card-title">{title}</h3>
+      {
+        method && (
+          <span class:list={['wd-card-method', `wd-card-method-${methodClass}`]}>
+            {method.toUpperCase()}
+          </span>
+        )
+      }
+    </div>
+    <div class="wd-card-body"><slot /></div>
+    {cta && <span class="wd-card-cta">{cta} <span aria-hidden="true">&rarr;</span></span>}
   </div>
-  <div class="wd-card-body"><slot /></div>
+  {arrow && href && <span class="wd-card-arrow" aria-hidden="true">&#8599;</span>}
 </Tag>
 <style>
   .wd-card {
@@ -133,4 +146,42 @@ const methodClass = methodLower && KNOWN_METHODS.includes(methodLower) ? methodL
   .wd-card-body :global(p) {
     margin: 0;
   }
+  /* Icon in its own column beside the title/body, both vertically
+     centered - Mintlify's compact horizontal card. */
+  .wd-card-horizontal {
+    display: flex;
+    align-items: center;
+    gap: 0.9rem;
+  }
+  .wd-card-horizontal .wd-card-title-row {
+    margin-top: 0;
+  }
+  .wd-card-text {
+    min-width: 0;
+    flex: 1;
+  }
+  .wd-card-cta {
+    display: inline-block;
+    margin-top: 0.7rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--wd-primary);
+  }
+  /* Only a card that shows the arrow becomes a positioning context -
+     setting it on every card changed how existing cards' text was
+     antialiased, for no layout reason. */
+  .wd-card-has-arrow {
+    position: relative;
+  }
+  .wd-card-arrow {
+    position: absolute;
+    top: 0.8rem;
+    right: 0.9rem;
+    color: var(--wd-text-muted);
+    font-size: 0.95rem;
+    line-height: 1;
+  }
+  a.wd-card:hover .wd-card-arrow {
+    color: var(--wd-primary);
+  }
 </style>

package/src/components/Check.astro

@@ -0,0 +1,13 @@
+---
+// Shorthand for <Callout type="check"> - Mintlify's <Check> ("this worked",
+// "you're done"). See Callout.astro's own comment.
+import Callout from './Callout.astro';
+interface Props {
+  title?: string;
+  // See Callout.astro's own comment - set automatically by
+  // remarkCalloutAnchorIds, not meant to be passed by hand.
+  _titleId?: string;
+}
+const { title, _titleId } = Astro.props as Props;
+---
+<Callout type="check" title={title} _titleId={_titleId}><slot /></Callout>

package/src/components/Columns.astro

@@ -0,0 +1,11 @@
+---
+// Mintlify's <Columns cols={n}> - the grid Mintlify now uses around Cards
+// (its docs moved from <CardGroup> to this). Same grid as CardGroup.astro,
+// which already lays out any children, not only Cards.
+import CardGroup from './CardGroup.astro';
+interface Props {
+  cols?: number;
+}
+const { cols } = Astro.props as Props;
+---
+<CardGroup cols={cols}><slot /></CardGroup>

package/src/components/Frame.astro

@@ -12,13 +12,17 @@
 // component's name collides with frontmatter's own `mode: "frame"`
 // page-rendering option (BaseLayout.astro) - that's an unrelated,
 // page-level concept keyed off a plain string, not a JSX component.
+// `hint` is Mintlify's: a short line shown above the framed content, as
+// opposed to `caption` below it.
 interface Props {
   caption?: string;
+  hint?: string;
 }
-const { caption } = Astro.props as Props;
+const { caption, hint } = Astro.props as Props;
 ---
 
 <figure class="wd-frame">
+  {hint && <p class="wd-frame-hint">{hint}</p>}
   <div class="wd-frame-content">
     <slot />
   </div>
@@ -93,6 +97,11 @@ const { caption } = Astro.props as Props;
   .wd-frame-content :global(p) {
     display: contents;
   }
+  .wd-frame-hint {
+    margin: 0.1rem 0.25rem 0.5rem;
+    color: var(--wd-text-muted);
+    font-size: 0.8rem;
+  }
   .wd-frame-caption {
     margin: 0.6rem 0 0;
     text-align: center;

package/src/components/Hint.astro

@@ -11,15 +11,30 @@
 // position predictably; a second <slot> would let an author put
 // arbitrary markup (another Hint, a link, a whole paragraph) in there,
 // which the hover-bubble layout below was never built to hold.
+//
+// `headline`, `cta` and `href` exist for Mintlify's <Tooltip> (see
+// Tooltip.astro): an optional bold line above the tip, and an optional
+// link below it. They're still plain strings, not slots - same reasoning
+// as above. A tooltip with a link has to stay open while the pointer moves
+// from the trigger onto the bubble, so the bubble takes pointer events
+// once shown, and a transparent ::before bridges the gap between them.
 interface Props {
   tip: string;
+  headline?: string;
+  cta?: string;
+  href?: string;
 }
-const { tip } = Astro.props as Props;
+const { tip, headline, cta, href } = Astro.props as Props;
+const hasLink = Boolean(cta && href);
 ---
 
-<span class="wd-hint" tabindex="0">
+<span class:list={["wd-hint", { "wd-hint-rich": Boolean(headline) || hasLink }]} tabindex="0">
   <span class="wd-hint-trigger"><slot /></span>
-  <span class="wd-hint-tooltip" role="tooltip">{tip}</span>
+  <span class="wd-hint-tooltip" role="tooltip">
+    {headline && <span class="wd-hint-headline">{headline}</span>}
+    <span class="wd-hint-tip">{tip}</span>
+    {hasLink && <a class="wd-hint-cta" href={href}>{cta}</a>}
+  </span>
 </span>
 <style>
   .wd-hint {
@@ -91,9 +106,40 @@ const { tip } = Astro.props as Props;
     border-top-color: #18181b;
   }
   .wd-hint:hover .wd-hint-tooltip,
-  .wd-hint:focus-visible .wd-hint-tooltip {
+  .wd-hint:focus-visible .wd-hint-tooltip,
+  .wd-hint:focus-within .wd-hint-tooltip {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0);
   }
+  /* Only a tooltip with a headline or link is interactive - a plain one
+     keeps pointer-events: none so it never blocks the text under it. */
+  .wd-hint-rich:hover .wd-hint-tooltip,
+  .wd-hint-rich:focus-within .wd-hint-tooltip {
+    pointer-events: auto;
+  }
+  .wd-hint-rich .wd-hint-tooltip::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 0.6rem;
+  }
+  .wd-hint-tip,
+  .wd-hint-headline,
+  .wd-hint-cta {
+    display: block;
+  }
+  .wd-hint-rich .wd-hint-tip {
+    font-weight: 400;
+  }
+  .wd-hint-headline {
+    margin-bottom: 0.2rem;
+  }
+  .wd-hint-cta {
+    margin-top: 0.35rem;
+    color: #93c5fd;
+    text-decoration: underline;
+  }
 </style>

package/src/components/ParamField.astro

@@ -0,0 +1,25 @@
+---
+// Mintlify's <ParamField> - a request parameter row, rendered by
+// Parameter.astro. Mintlify names the parameter through whichever
+// location prop it's in (`path="id"`, `query="limit"`, `body="email"`,
+// `header="Authorization"`) rather than `name`; the first one present
+// becomes the name. The location itself isn't shown - on a Mintlify page
+// it's already implied by the section the field sits in.
+import Parameter from './Parameter.astro';
+interface Props {
+  name?: string;
+  path?: string;
+  query?: string;
+  body?: string;
+  header?: string;
+  type?: string;
+  required?: boolean;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
+}
+const { name, path, query, body, header, ...rest } = Astro.props as Props;
+const fieldName = name ?? path ?? query ?? body ?? header ?? '';
+---
+<Parameter name={fieldName} {...rest}><slot /></Parameter>

package/src/components/Parameter.astro

@@ -16,21 +16,37 @@
 // text, an <Expandable> wrapping more Parameters for a nested object's
 // own properties, or both - see Expandable.astro's own comment for that
 // half of the pattern.
+//
+// `deprecated`, `pre` and `post` exist for Mintlify parity (see
+// ParamField.astro/ResponseField.astro, the Mintlify-named wrappers around
+// this): `pre`/`post` are extra labels Mintlify renders before/after the
+// name. `default` accepts any value, not just a string - Mintlify content
+// routinely writes `default={10}` or `default={false}`, and a falsy one
+// (0, false) is still a real default worth showing, so only
+// undefined/null/"" hide the chip.
 interface Props {
   name: string;
   type?: string;
   required?: boolean;
-  default?: string;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
 }
-const { name, type, required = false, default: defaultValue } = Astro.props as Props;
+const { name, type, required = false, default: defaultValue, deprecated = false, pre = [], post = [] } =
+  Astro.props as Props;
+const hasDefault = defaultValue !== undefined && defaultValue !== null && defaultValue !== "";
 ---
 
-<div class="wd-parameter">
+<div class:list={["wd-parameter", { "wd-parameter-deprecated": deprecated }]}>
   <div class="wd-parameter-head">
+    {pre.map((label) => <span class="wd-parameter-label">{label}</span>)}
     <span class="wd-parameter-name">{name}</span>
     {type && <span class="wd-parameter-type">{type}</span>}
     {required && <span class="wd-parameter-required">required</span>}
-    {defaultValue && <span class="wd-parameter-default">default: {defaultValue}</span>}
+    {deprecated && <span class="wd-parameter-deprecated-badge">deprecated</span>}
+    {post.map((label) => <span class="wd-parameter-label">{label}</span>)}
+    {hasDefault && <span class="wd-parameter-default">default: {String(defaultValue)}</span>}
   </div>
   <div class="wd-parameter-body">
     <slot />
@@ -96,6 +112,27 @@ const { name, type, required = false, default: defaultValue } = Astro.props as P
     padding: 0.1em 0.5em;
     color: #dc2626;
   }
+  /* Same chip as .wd-parameter-type, in amber - a warning, not an error
+     like .wd-parameter-required. The name itself is struck through below
+     so the field reads as "don't use this" even before the badge. */
+  .wd-parameter-deprecated-badge {
+    font-family: monospace;
+    font-size: 0.8rem;
+    font-weight: 600;
+    background: color-mix(in srgb, #d97706 8%, var(--wd-surface));
+    border: 1px solid color-mix(in srgb, #d97706 35%, var(--wd-border));
+    border-radius: 0.35em;
+    padding: 0.1em 0.5em;
+    color: #d97706;
+  }
+  .wd-parameter-deprecated .wd-parameter-name {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+  .wd-parameter-label {
+    font-size: 0.78rem;
+    color: var(--wd-text-muted);
+  }
   .wd-parameter-default {
     font-size: 0.78rem;
     color: var(--wd-text-muted);

package/src/components/ResponseField.astro

@@ -0,0 +1,18 @@
+---
+// Mintlify's <ResponseField> - a response field row. Same props as
+// Parameter.astro (`name`, `type`, `required`, `default`, `deprecated`,
+// `pre`, `post`), so this is a straight pass-through; see Parameter.astro
+// for why one component covers both directions.
+import Parameter from './Parameter.astro';
+interface Props {
+  name: string;
+  type?: string;
+  required?: boolean;
+  default?: unknown;
+  deprecated?: boolean;
+  pre?: string[];
+  post?: string[];
+}
+const props = Astro.props as Props;
+---
+<Parameter {...props}><slot /></Parameter>

package/src/components/Step.astro

@@ -1,10 +1,29 @@
 ---
+import AppIcon from './AppIcon.astro';
+// `icon`, `stepNumber` and `titleSize` are Mintlify's. `icon` replaces the
+// number in the step's circle. `stepNumber` sets this step's number; the
+// steps after it keep counting from there (counter-set on the step itself
+// runs before its own ::before increments the counter - see Steps.astro).
+// `titleSize` renders the title as an h2/h3 instead of bold text.
 interface Props {
   title?: string;
+  icon?: string;
+  stepNumber?: number;
+  titleSize?: 'p' | 'h2' | 'h3';
 }
-const { title } = Astro.props as Props;
+const { title, icon, stepNumber, titleSize = 'p' } = Astro.props as Props;
+const style = typeof stepNumber === 'number' ? `counter-set: wd-step ${stepNumber - 1}` : undefined;
+const TitleTag = titleSize === 'h2' || titleSize === 'h3' ? titleSize : 'p';
 ---
-<div class="wd-step">
-  {title && <p class="wd-step-title"><strong>{title}</strong></p>}
+<div class:list={['wd-step', { 'wd-step-has-icon': Boolean(icon) }]} style={style}>
+  {icon && <AppIcon icon={icon} class="wd-step-icon" />}
+  {
+    title &&
+      (TitleTag === 'p' ? (
+        <p class="wd-step-title"><strong>{title}</strong></p>
+      ) : (
+        <TitleTag class="wd-step-title">{title}</TitleTag>
+      ))
+  }
   <slot />
 </div>

package/src/components/Steps.astro

@@ -12,6 +12,28 @@
     margin-left: 0.9rem;
   }
   .wd-step:last-child { border-color: transparent; padding-bottom: 0; }
+  /* A Step with an `icon` (see Step.astro) keeps the same circle - the
+     ::before below still increments the counter so later steps number
+     correctly - and draws the icon on top of it instead of the digit. */
+  .wd-step.wd-step-has-icon::before { color: transparent; }
+  .wd-step-icon {
+    position: absolute;
+    left: -0.95rem;
+    top: 0;
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0.45rem;
+    box-sizing: border-box;
+    color: white;
+    z-index: 1;
+  }
+  span.wd-step-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 0.85rem;
+  }
   .wd-step::before {
     counter-increment: wd-step;
     content: counter(wd-step);

package/src/components/Tab.astro

@@ -1,9 +1,15 @@
 ---
+import AppIcon from './AppIcon.astro';
+// `icon` is Mintlify's: shown before the title in the tab's button. The
+// button is built client-side by Tabs.astro, which moves this hidden,
+// server-rendered icon into it.
 interface Props {
   title: string;
+  icon?: string;
 }
-const { title } = Astro.props as Props;
+const { title, icon } = Astro.props as Props;
 ---
 <div class="wd-tab" data-title={title}>
+  {icon && <span class="wd-tab-icon-src" hidden><AppIcon icon={icon} class="wd-tabs-btn-icon" /></span>}
   <slot />
 </div>