{"id":15356860,"url":"https://github.com/linyows/rotion","last_synced_at":"2026-04-27T05:03:48.969Z","repository":{"id":41050789,"uuid":"505000955","full_name":"linyows/rotion","owner":"linyows","description":"Rotion is a set of components and tools that utilize the Notion API and React to generate a static website from your Notion databases and pages.","archived":false,"fork":false,"pushed_at":"2026-03-30T14:54:02.000Z","size":7990,"stargazers_count":45,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-03-30T16:08:55.673Z","etag":null,"topics":["hacktoberfest","nextjs","notion-api","react"],"latest_commit_sha":null,"homepage":"https://rotion.linyo.ws/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linyows.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-06-19T03:14:41.000Z","updated_at":"2026-03-30T14:53:13.000Z","dependencies_parsed_at":"2023-02-10T21:45:18.233Z","dependency_job_id":"76c0517d-ad2c-400f-a357-5d0bf23e7198","html_url":"https://github.com/linyows/rotion","commit_stats":{"total_commits":947,"total_committers":3,"mean_commits":315.6666666666667,"dds":0.006335797254487852,"last_synced_commit":"c7b9012e669bb0fe7f23a62570ac6983161d51a0"},"previous_names":["linyows/rotion","linyows/notionate"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/linyows/rotion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linyows%2Frotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linyows%2Frotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linyows%2Frotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linyows%2Frotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linyows","download_url":"https://codeload.github.com/linyows/rotion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linyows%2Frotion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31314296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","nextjs","notion-api","react"],"created_at":"2024-10-01T12:30:23.104Z","updated_at":"2026-04-27T05:03:48.964Z","avatar_url":"https://github.com/linyows.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"right\"\u003e\u003ca href=\"https://github.com/linyows/rotion/blob/main/README.md\"\u003eEnglish\u003c/a\u003e | 日本語\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rotion.linyo.ws\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/linyows/rotion/blob/main/misc/rotion-dark-bg.svg?raw=true\"\u003e\n      \u003cimg alt=\"Rotion\" src=\"https://github.com/linyows/rotion/blob/main/misc/rotion.svg?raw=true\" width=\"300\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/linyows/rotion/actions\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/linyows/rotion/build.yml?branch=main\u0026style=for-the-badge\u0026labelColor=000000\" alt=\"Github Actions\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/rotion\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/v/rotion.svg?style=for-the-badge\u0026labelColor=000000\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**Rotion**は、Notion APIとReactを活用して、Notionのデータベースやページを静的ウェブサイトとして生成するためのコンポーネント＆ツール群です。  \nNext.jsをはじめとしたReact系フレームワークでの利用を想定していますが、他のフレームワークでも動作します。  \n画像や必要なファイルはローカルに保存されるため、完全な静的サイト生成が可能です。\n\n公式サイト: https://rotion.linyo.ws\n\n主な特徴\n--\n\n- Notion APIからデータベース・ページを取得し、静的サイト用データとして変換\n- 画像やPDFなどのファイルもローカル保存\n- 豊富なReactコンポーネント（Gallery, Table, List, Page, 各種Blockなど）\n- Next.jsなどの静的サイトジェネレーターと親和性が高い\n- **Next.js App Router サポート** - `createClientLink` ヘルパー（v2.0.1以降）\n- **Next.js Page Router サポート** - 従来のSSGワークフロー\n- TypeScript対応\n\nインストール\n--\n\n```bash\nnpm install rotion\n```\n\nまたは\n\n```bash\nyarn add rotion\n```\n\n使い方\n--\n\n### 1. Notion APIのセットアップ\n\nNotionインテグレーションを作成し、APIキーとデータベースIDを取得します：\n\n1. [Notion Integrations](https://www.notion.so/my-integrations) にアクセス\n2. 新しいインテグレーションを作成\n3. インテグレーショントークンをコピー\n4. Notionページ/データベースをインテグレーションと共有\n5. ページ/データベースIDをURLからコピー\n\n### 2. データの取得\n\n`rotion` から提供されるAPIを使ってNotionからデータを取得します：\n\n```ts\nimport { FetchDatabase, FetchBlocks, FetchPage } from 'rotion'\n\n// データベースを取得\nconst db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })\n\n// ページブロックを取得\nconst blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })\n\n// ページ情報を取得\nconst page = await FetchPage({ page_id: 'YOUR_PAGE_ID' })\n```\n\n### 3. Reactコンポーネントで表示\n\n#### Next.js App Router (v15+)\n\nNext.js App Router では、`createClientLink` ヘルパーのセットアップが必要です：\n\n**ステップ1:** `app/lib/rotion.ts` を作成：\n```tsx\n'use client'\n\nimport { createClientLink } from 'rotion/ui'\nimport NextLink from 'next/link'\n\nexport const ClientLink = createClientLink(NextLink)\n```\n\n**ステップ2:** Server Component で使用：\n```tsx\n// app/page.tsx\nimport { Page } from 'rotion/ui'\nimport { FetchBlocks } from 'rotion'\nimport { ClientLink } from './lib/rotion'\nimport type { Link } from 'rotion/ui'\n\nexport default async function MyPage() {\n  const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })\n  return \u003cPage blocks={blocks} link={ClientLink as Link} /\u003e\n}\n```\n\n#### Next.js Page Router\n\nPage Router では、Next.js の Link を直接使用できます：\n\n```tsx\n// pages/index.tsx\nimport type { GetStaticProps } from 'next'\nimport { Page } from 'rotion/ui'\nimport { FetchBlocks } from 'rotion'\nimport NextLink from 'next/link'\n\nexport const getStaticProps: GetStaticProps = async () =\u003e {\n  const blocks = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })\n  return { props: { blocks } }\n}\n\nexport default function MyPage({ blocks }) {\n  return \u003cPage blocks={blocks} link={NextLink} /\u003e\n}\n```\n\n#### データベースビュー\n\nNotionデータベースをさまざまな形式で表示：\n\n```tsx\nimport { Gallery, Table, List, Calendar } from 'rotion/ui'\nimport { FetchDatabase } from 'rotion'\n\nconst db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })\n\n// ギャラリービュー\n\u003cGallery db={db} keys={['Name', 'Description', 'Image']} /\u003e\n\n// テーブルビュー\n\u003cTable db={db} keys={['Name', 'Status', 'Date']} /\u003e\n\n// リストビュー\n\u003cList db={db} keys={['Name', 'Tags']} /\u003e\n\n// カレンダービュー\n\u003cCalendar db={db} date=\"Date\" keys={['Name', 'Tags']} /\u003e\n```\n\n##### Calendar オプション\n\nカレンダービューは月単位のグリッドを描画します。`start` と `end` を持つ複数日のイベントは、対象のセルにまたがる1本の帯としてレンダリングされ、週境界では帯が分割されて続きが描かれます。\n\n```tsx\n\u003cCalendar\n  db={db}\n  date=\"Date\"                       // 必須: 使用するdateプロパティ名\n  keys={['Name', 'Tags']}           // イベント帯の中に表示するプロパティ\n  options={{\n    initialDate: '2026-04-01',      // YYYY-MM-DD または YYYY-MM (既定: 今日)\n    weekStart: 'monday',            // 'sunday' | 'monday' (既定: 'sunday')\n    locale: 'ja-JP',                // navigator.language を上書き\n    href: { Name: '/blog/[id]' },   // 他のビューと同じ href/link/query API\n  }}\n/\u003e\n```\n\n主なエクスポート\n--\n\n### データ取得用関数（`rotion` から）\n\n- `FetchDatabase` - Notionデータベースの取得とキャッシュ\n- `FetchBlocks` - ページブロックの取得とキャッシュ\n- `FetchPage` - ページ情報の取得\n- `FetchBreadcrumbs` - パンくずリスト情報の取得\n\n### UIコンポーネント（`rotion/ui` から）\n\n**データベースビュー:**\n- `Gallery` - ギャラリービュー\n- `Table` - テーブルビュー\n- `List` - リストビュー\n- `Calendar` - 月単位のカレンダービュー（指定したdateプロパティに従って予定を配置）\n\n**ページとブロック:**\n- `Page` - Notionページ全体を表示\n- 各種Blockコンポーネント（TextBlock, ImageBlock, CodeBlock, CalloutBlock など）\n\n**ユーティリティ:**\n- `Icon` - Notionアイコンの表示\n- `RichText` - Notionリッチテキストの表示\n- `Checkbox` - チェックボックスの表示\n- `createClientLink` - Next.js App Router用ヘルパー（v2.0.1以降）\n\nサンプル\n--\n\n`examples/` ディレクトリには、Notionデータベース連携を実演する完全なサンプルが含まれています。\n\n### データベースのセットアップ\n\nすべてのサンプルは、以下のプロパティを持つNotionデータベースが必要です：\n\n| プロパティ名 | プロパティ型 |\n|------------|-------------|\n| Title      | `title`     |\n| Tags       | `multi_select`|\n| Date       | `date`      |\n\n### [nextjs-approuter](./examples/nextjs-approuter)\nデータベース対応のNext.js App Routerサンプル：\n- インデックスページにデータベーステーブルビュー\n- 個別記事用の動的 `[id]` ルート\n- `generateStaticParams` を使ったServer Components\n- CSS Modulesによるスタイリング\n\n```bash\ncd examples/nextjs-approuter\ncp .env.example .env.local\n# NOTION_TOKENとNOTION_DATABASE_IDを設定\nnpm install\nnpm run dev\n```\n\n### [nextjs-pagerouter](./examples/nextjs-pagerouter)\nデータベース対応のNext.js Pages Routerサンプル：\n- `getStaticProps` を使ったデータベーステーブルビュー\n- `getStaticPaths` による動的 `[id]` ルート\n- 従来のSSGワークフロー\n\n```bash\ncd examples/nextjs-pagerouter\ncp .env.example .env.local\n# NOTION_TOKENとNOTION_DATABASE_IDを設定\nnpm install\nnpm run dev\n```\n\n### [astro](./examples/astro)\nデータベース対応のAstroサンプル：\n- `.astro` ファイルでのデータベーステーブルビュー\n- `getStaticPaths` による動的ルート\n- `client:load` によるReactコンポーネント\n\n```bash\ncd examples/astro\ncp .env.example .env\n# NOTION_TOKENとNOTION_DATABASE_IDを設定\nnpm install\nnpm run dev\n```\n\n各サンプルのデモ内容：\n- 3つのプロパティすべてを表示するデータベーステーブルビュー\n- 完全なコンテンツを持つ個別記事ページ\n- データベースと記事ビュー間のナビゲーション\n\nスクリプト\n--\n\n- `npm run build` - ビルド\n- `npm run test` - テスト\n- `npm run story` - Storybookの起動\n\n必要な環境\n--\n\n- Node.js 18以上推奨\n- React 17、18、または19\n- Next.js 13以上（App Router機能を使う場合はNext.js 15以上推奨）\n\nライセンス\n--\n\nMIT\n\n作者\n--\n\n[@linyows](https://github.com/linyows) ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinyows%2Frotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinyows%2Frotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinyows%2Frotion/lists"}