コンテンツへスキップ
NotroTail

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> に変換