API リファレンス
notro
パッケージのエントリーポイント・各 API の詳細リファレンスです。
エントリーポイント
| エントリーポイント | 用途 |
|---|---|
notro | Astroコンポーネント・ローダー・スキーマ。astro.config.mjs では使用不可。 |
notro/utils | Pure TypeScript ヘルパー。設定ファイル・Node スクリプト・画像サービスで安全に使用可。 |
notro/integration | Astro インテグレーション。astro.config.mjs で使用。 |
notro() インテグレーション
notro()
は @astrojs/mdx
を notro のプラグインスイートで登録する Astro インテグレーションです。
NotroContent
が動作するために必須です。
// astro.config.mjs
import { notro } from "notro/integration";
export default defineConfig({)
integrations: [notro(), sitemap()],
}); loader()
Notion データベースからコンテンツを取得する Astro Content Loader 実装です。
// content.config.ts
import { loader } from "notro";
import { defineCollection } from "astro:content";
const posts = defineCollection({)
loader: loader({)
dataSourceId: import.meta.env.NOTION_DATASOURCE_ID,
}),
}); | オプション | 型 | 説明 |
|---|---|---|
dataSourceId | string | Notion データソース ID(必須) |
NotroContent
ローダーが取得した Markdown を MDX にコンパイルし、Notion ブロックを Astro コンポーネントとしてレンダリングするコンポーネントです。
import NotroContent from "../../components/notro/NotroContent.astro";
<NotroContent
markdown={markdown}
linkToPages={linkToPages}
/> Props
| Prop | 型 | 必須 | 説明 |
|---|---|---|---|
markdown | string | ✓ | ローダーが取得した前処理済み Markdown |
linkToPages | Record<string, { url; title }gt; | — | Notion 内部リンクの解決マップ(buildLinkToPages() で生成) |
class | string | — | ルート要素に追加する CSS クラス |
コンポーネントのスタイルをカスタマイズするには、npx notro-ui init でインストールした
src/components/notro/ 内のファイルを直接編集してください。
ユーティリティ関数(notro/utils)
getPlainText(richText)
Notion Rich Text 配列からプレーンテキストを抽出します。
buildLinkToPages(entries, opts)
Content Collection のエントリーから Notion 内部リンク解決マップを生成します。
hasTag(tagsProperty, tagName)
エントリーが特定のタグを持つか判定します。
getMultiSelect(property)
multi_select プロパティからタグ配列を取得します。
normalizeNotionPresignedUrl(url)
Notion S3 プリサイン URL から期限切れパラメーター(X-Amz-*)を除去し、キャッシュキーを正規化します。
remark-nfm スタンドアロン
remark-nfm
は Astro なしで単独利用可能な純粋 remark プラグインです。
Notion API の Markdown 出力の構造的な問題を修正し、
:::callout
ディレクティブ構文をサポートします。
import { unified } from "unified";
import remarkParse from "remark-parse";
import { remarkNfm } from "remark-nfm";
const result = await unified()
.use(remarkParse)
.use(remarkNfm)
.process(notionMarkdown); 前処理フィックス一覧(preprocessNotionMarkdown)
Fix 修正内容 0 旧前処理のエスケープ済みインライン数式 \$…\$ を $…$ に戻す 1 --- 区切り線が setext H2 見出しとして誤認識される問題を修正 2 コールアウトディレクティブ構文の正規化とタブインデントの除去 3 ブロックレベルの色アノテーション { color="…" } を生 HTML に変換 4 <table_of_contents/> タグを CommonMark HTML 検出のため <div> でラップ 5 インライン数式 $\`…\`$ → $…$ に変換 6 <synced_block> ラッパーを削除してコンテンツをデデント 7 <empty-block/> を空行で囲んでブロックレベル要素として認識させる 8 各種閉じタグの後に空行を追加(後続の Markdown が飲み込まれる問題の修正) 9 <td> 内の Markdown リンク構文を <a href> に変換