Add IDs to TypeTable rows

Add stable IDs to each TypeTable row so you can link directly to a specific property.

typeTableDetailsIds() adds an id attribute to the property rows (<details>) rendered by Blume’s TypeTable. Property names become links to those IDs, so you can link directly to a specific property on a page.

Setup

npm install @tai-kun/blume-integrations

pnpm add @tai-kun/blume-integrations

yarn add @tai-kun/blume-integrations

bun add @tai-kun/blume-integrations

nub add @tai-kun/blume-integrations

aube add @tai-kun/blume-integrations

Add it to integrations in blume.config.ts. No additional configuration is needed.

import { typeTableDetailsIds } from "@tai-kun/blume-integrations";
import { defineConfig } from "blume";

export default defineConfig({
  integrations: [typeTableDetailsIds()],
});

Usage

Write [#id] at the beginning of the type value for each TypeTable row. In the following example, the label row gets the ID prop-label.

In the table above, label links to #prop-label. The source is as follows.

<TypeTable
  type={{
    label: {
      type: "[#prop-label] string",
      required: true,
      description: "The label displayed on the button.",
    },
    disabled: {
      type: "boolean",
      description: "Disables the button.",
    },
  }}
/>

[#prop-label] is removed from the displayed type, so the type name still appears as string. The marker does not remain in the expanded “Type” column either.

Rendered HTML

A transformed row looks like the following HTML.

<details class="group/tt ..." id="prop-label">
  <summary ...>
    <code ...>
      <a class="blume-type-table-details-link" href="#prop-label">label</a>
    </code>
    <code ...>string</code>
    ...
  </summary>
  ...
</details>

The class attributes and element structure vary by Blume version. Only the elements needed to add the ID and link are shown.

Linking to a property

Within the same page, link with #prop-label. From another page, use a link such as /components/button#prop-label.

[The button's label property](/components/button#prop-label)

ID rules

• Write the ID at the beginning of type. Leading whitespace is ignored.
• Rows without a marker do not get an id.
• IDs cannot contain whitespace or ]. [#prop-label] is valid, but [#prop label] is not. Because IDs are used as URL fragments, use letters, digits, and hyphens.
• Markers placed anywhere other than the beginning are not transformed and appear as part of the type name.
• Markers are removed from the displayed type, including the expanded type display.
• If a <details> element already has an id, that ID is left unchanged. The property-name link points to the existing ID.
• Writing [#...] on the property-name side does not create an ID.
• <details> elements outside TypeTable are not modified.
• If typeDescriptionLink is configured, its link attributes are preserved and only the marker is removed.
• Using the same ID more than once on a page creates duplicate link targets. Give each property a unique ID.
• If a marker contains HTML entities, the decoded value is used as the ID.

Link styling

The property-name link gets the blume-type-table-details-link class. The integration also inserts the following CSS so that the link looks the same as the surrounding text.

.blume-type-table-details-link {
  color: inherit;
  cursor: inherit;
  font: inherit;
  text-decoration: inherit;
}

To change the appearance, override this class in your site’s CSS with a selector of higher specificity. For example, you can show an underline on hover.

.blume-type-table-details-link:hover {
  text-decoration: underline;
}

This CSS is inserted only on pages where at least one marker was transformed.

How it works and caveats

This integration rewrites HTML responses in Astro middleware. Like Blume’s icon-sprite middleware, it also runs during prerendering, so IDs and links remain in the statically built HTML.

It transforms <details> elements with the group/tt class output by Blume’s TypeTable. Because this depends on Blume’s TypeTable markup, changes to class names or structure in a Blume update may require an update to this integration.

API