rotion 1.13.1 → 1.14.0

package/README.ja.md

@@ -0,0 +1,117 @@
+<p align="right"><a href="https://github.com/linyows/rotion/blob/main/README.md">English</a> | 日本語</p>
+
+<p align="center">
+  <a href="https://rotion.linyo.ws">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/linyows/rotion/blob/main/misc/rotion-dark-bg.svg?raw=true">
+      <img alt="Rotion" src="https://github.com/linyows/rotion/blob/main/misc/rotion.svg?raw=true" width="300">
+    </picture>
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/linyows/rotion/actions">
+    <img src="https://img.shields.io/github/actions/workflow/status/linyows/rotion/build.yml?branch=main&style=for-the-badge&labelColor=000000" alt="Github Actions" />
+  </a>
+  <a href="https://www.npmjs.com/package/rotion">
+    <img src="http://img.shields.io/npm/v/rotion.svg?style=for-the-badge&labelColor=000000" alt="NPM" />
+  </a>
+</p>
+
+**Rotion**は、Notion APIとReactを活用して、Notionのデータベースやページを静的ウェブサイトとして生成するためのコンポーネント＆ツール群です。  
+Next.jsをはじめとしたReact系フレームワークでの利用を想定していますが、他のフレームワークでも動作します。  
+画像や必要なファイルはローカルに保存されるため、完全な静的サイト生成が可能です。
+
+公式サイト: https://rotion.linyo.ws
+
+主な特徴
+--
+
+- Notion APIからデータベース・ページを取得し、静的サイト用データとして変換
+- 画像やPDFなどのファイルもローカル保存
+- 豊富なReactコンポーネント（Gallery, Table, List, Page, 各種Blockなど）
+- Next.jsなどの静的サイトジェネレーターと親和性が高い
+- TypeScript対応
+
+インストール
+--
+
+```bash
+npm install rotion
+```
+
+または
+
+```bash
+yarn add rotion
+```
+
+使い方
+--
+
+### 1. Notion APIのセットアップ
+
+Notionのインテグレーションを作成し、APIキーとデータベースIDを取得してください。
+
+### 2. データのエクスポート
+
+`src/exporter`配下のAPIを使って、Notionからデータを取得し、静的ファイルとして保存します。
+
+例:
+```ts
+import { FetchDatabase, FetchBlocks } from 'rotion'
+
+const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
+const page = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
+```
+
+### 3. Reactコンポーネントで表示
+
+`src/ui`配下の各種コンポーネントを使って、取得したデータを表示できます。
+
+例:
+```tsx
+import { Gallery } from 'rotion/ui'
+
+<Gallery db={db} keys={['Name', 'Description']} />
+```
+
+主なエクスポート
+--
+
+### データ取得用関数（exporter）
+
+- `FetchDatabase` - データベースの取得・ローカルキャッシュ
+- `FetchBlocks` - ページブロックの取得・ローカルキャッシュ
+- `FetchPage` - ページ情報の取得
+- `FetchBreadcrumbs` - パンくずリスト情報の取得
+
+### UIコンポーネント
+
+- `Gallery`, `Table`, `List` - Notionデータベースの各種表示
+- `Page` - Notionページの表示
+- 各種Blockコンポーネント（TextBlock, ImageBlock, CodeBlock, ...）
+- `Icon`, `RichText`, `Checkbox` など
+
+スクリプト
+--
+
+- `npm run build` - ビルド
+- `npm run test` - テスト
+- `npm run story` - Storybookの起動
+
+必要な環境
+--
+
+- Node.js 18以上推奨
+- React 17/18/19対応
+
+ライセンス
+--
+
+MIT
+
+作者
+--
+
+[@linyows](https://github.com/linyows) 

package/README.md

@@ -1,26 +1,116 @@
+<p align="right">English | <a href="https://github.com/linyows/rotion/blob/main/README.ja.md">日本語</a></p>
+
 <p align="center">
   <a href="https://rotion.linyo.ws">
-    <picture><br><br><br>
+    <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://github.com/linyows/rotion/blob/main/misc/rotion-dark-bg.svg?raw=true">
       <img alt="Rotion" src="https://github.com/linyows/rotion/blob/main/misc/rotion.svg?raw=true" width="300">
-    </picture><br><br><br>
+    </picture>
   </a>
 </p>
 
-<strong>Rotion</strong> makes it easy to generate a Static Website using React and the Notion API.
-Therefore, images and other necessary files are stored locally. Basically, it is designed to use Next.js, but it will work with other frameworks as well. https://rotion.linyo.ws
-
-<br>
 <p align="center">
-  <a href="https://github.com/linyows/rotion/actions" title="actions">
-    <img alt="Actions" src="https://img.shields.io/github/actions/workflow/status/linyows/rotion/build.yml?branch=main&style=for-the-badge&labelColor=000000">
+  <a href="https://github.com/linyows/rotion/actions">
+    <img src="https://img.shields.io/github/actions/workflow/status/linyows/rotion/build.yml?branch=main&style=for-the-badge&labelColor=000000" alt="Github Actions" />
   </a>
-  <a href="https://www.npmjs.com/package/rotion" title="npm">
-    <img alt="NPM" src="http://img.shields.io/npm/v/rotion.svg?style=for-the-badge&labelColor=000000">
+  <a href="https://www.npmjs.com/package/rotion">
+    <img src="http://img.shields.io/npm/v/rotion.svg?style=for-the-badge&labelColor=000000" alt="NPM" />
   </a>
 </p>
 
+**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.  
+It is designed primarily for use with Next.js (or other React frameworks) and stores images and other files locally, so that you can build a fully static site.
+
+Official site: https://rotion.linyo.ws
+
+Features
+--
+
+- Fetch and convert Notion databases and pages into static site data via the Notion API.
+- Local storage of images, PDFs, and other files.
+- Rich React components (Gallery, Table, List, Page, and various Blocks).
+- Compatible with static site generators such as Next.js.
+- TypeScript support.
+
+Installation
+--
+
+```bash
+npm install rotion
+```
+
+or
+
+```bash
+yarn add rotion
+```
+
+Usage
+--
+
+### 1. Set Up Notion API
+
+Create a Notion integration and obtain your API key and database ID.
+
+### 2. Export Data
+
+Use the APIs under `src/exporter` to fetch data from Notion and save it as static files.
+
+Example:
+```ts
+import { FetchDatabase, FetchBlocks } from 'rotion'
+
+const db = await FetchDatabase({ database_id: 'YOUR_DATABASE_ID' })
+const page = await FetchBlocks({ block_id: 'YOUR_PAGE_ID' })
+```
+
+### 3. Render with React Components
+
+Use the components under `src/ui` to display the fetched data.
+
+Example:
+```tsx
+import { Gallery } from 'rotion/ui'
+
+<Gallery db={db} keys={['Name', 'Description']} />
+```
+
+Main Exports
+--
+
+### Data Fetching Functions (exporter)
+
+- `FetchDatabase` – Fetches and caches the database.
+- `FetchBlocks` – Fetches and caches page blocks.
+- `FetchPage` – Fetches page information.
+- `FetchBreadcrumbs` – Fetches breadcrumb information.
+
+### UI Components
+
+- `Gallery`, `Table`, `List` – Various displays for Notion databases.
+- `Page` – Renders a Notion page.
+- Various Block components (TextBlock, ImageBlock, CodeBlock, ...).
+- `Icon`, `RichText`, `Checkbox`, etc.
+
+Scripts
+--
+
+- `npm run build` – Build.
+- `npm run test` – Run tests.
+- `npm run story` – Launch Storybook.
+
+Requirements
+--
+
+- Node.js 18 or later (recommended).
+- Compatible with React 17, 18, and 19.
+
+License
+--
+
+MIT
+
 Author
 --
 
-[@linyows](https://github.com/linyows)
+[@linyows](https://github.com/linyows)