Component Matrix#

Copy as MarkdownView Markdown

This matrix is the authoring contract for rich documentation pages built with Ox Content. It covers the built-ins most likely to appear together in production docs: callouts, details, tabs, package-manager tabs, file trees, code annotations, code imports, math, Mermaid, embeds, search, and Code Play.

The examples below are live output from this docs site, not screenshots. Keep this page in the default sidebar so visual regression tests can exercise the same theme chrome, content column, and component styles readers use.

Authoring Contracts#

Behavior Contracts#

Live Matrix#

Callouts and Details#

Note

GitHub-style callouts are always rendered as block quotes with .ox-callout classes, so they work in static HTML and print output.

Tabs and Package Managers#

<tabs>
  <tab label="Install">pnpm add -D @ox-content/vite-plugin</tab>
  <tab label="Config">oxContent({ srcDir: "content" })</tab>
</tabs>

.ox-tabs-container
.ox-tabs
.ox-tabs-header
.ox-tab-panel[data-tab="0"]
.ox-tabs-fallback

vp install -D @ox-content/vite-plugin @ox-content/code-play

pnpm add -D @ox-content/vite-plugin @ox-content/code-play

bun add -D @ox-content/vite-plugin @ox-content/code-play

npm install -D @ox-content/vite-plugin @ox-content/code-play

yarn add -D @ox-content/vite-plugin @ox-content/code-play

File Tree#

Code Annotations and Imports#

export function resolveComponentContract(name: string) {
  const contract = name.trim();
  if (!contract) {
    console.warn("missing component contract");
    throw new Error("component contract is required");
  }
  return `ox-${contract}`;
}

export function greet(name: string): Greeting {
  return {
    name,
    message: `Hello, ${name}!`,
  };
}

import { oxContent } from "@ox-content/vite-plugin";

export default {
  plugins: [
    oxContent({
      highlight: true,
      codeAnnotations: { notation: "both" },
      codeImports: true,
    }),
  ],
};

```ts annotate="highlight:1"
export const documented = true;
```

Math and Mermaid#

Inline budget expression: $T_{page}=T_{parse}+T_{render}+T_{widgets}$.

Embeds#

Search#

Search is a site-level authoring feature rather than inline Markdown syntax. The default theme exposes it through the header and custom UIs use the same virtual module:

import { search, searchOptions } from "virtual:ox-content/search";

const results = await search("component matrix", { limit: 5 });
console.log(
  searchOptions.enabled,
  results.map((item) => item.title),
);

Readers can press / or the theme's search shortcut, and scoped queries such as @built-in code play restrict results to a section.

Code Play#

const feature = "component matrix";
console.log(feature);

Combination Checks#

vp install -D @ox-content/vite-plugin @ox-content/code-play

pnpm add -D @ox-content/vite-plugin @ox-content/code-play

bun add -D @ox-content/vite-plugin @ox-content/code-play

npm install -D @ox-content/vite-plugin @ox-content/code-play

yarn add -D @ox-content/vite-plugin @ox-content/code-play

export function renderReferencePage() {
  return "stable classes, static output, lazy runtime";
}

Audit Follow-ups#

No new duplicate implementation issue was filed from this audit. The remaining tracked implementation work is the existing embed catalog follow-up in #861.