コンポーネントマトリクス#

Copy as MarkdownView Markdown

このページは、Ox Content でリッチなドキュメントを書くときの組み込み機能の契約です。対象は、callout、details、タブ、パッケージマネージャータブ、ファイルツリー、コード注釈、コード取り込み、数式、Mermaid、埋め込み、検索、Code Play です。

下の例はこの docs サイトで実際に描画される出力です。既定テーマのサイドバーに置くことで、読者が見るテーマ chrome、本文カラム、コンポーネント CSS を VRT でも同じように検証できます。

執筆契約#

振る舞いの契約#

ライブマトリクス#

Callouts and Details#

Note

GitHub 風 callout は .ox-callout class 付きの blockquote として出力され、静的 HTML と印刷で動きます。

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#

検索は inline Markdown ではなく、サイト単位の執筆機能です。既定テーマは header に検索 UI を出し、独自 UI は同じ 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),
);

読者は / やテーマの検索ショートカットを使えます。@built-in code play のような scoped query は検索範囲を絞ります。

Code Play#

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

組み合わせ確認#

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";
}

監査フォローアップ#

この監査から重複する新規 implementation issue は作成していません。残る実装作業は既存の embed catalog follow-up #861 です。