Skip to Content

Rotion は Notion のページとデータベースを React コンポーネントで描画します。 ギャラリー、テーブル、カレンダー、各種ブロックはスタイル付きで用意されていて、サイトは静的 HTML としてビルドされます。 この下にあるものは、どれもこのページのビルド時に Notion から取得し、Rotion で描画したものです。

はじめるブロック一覧を見る

💡
You ain't gonna need it

Things I will do by tomorrow:

Buy a milk
Have my hair cut
Wash my car
Toggle text
This principle has been a key, and a huge success in my years of software engineering. A common problem among software engineers and developers today is that they tend to over complicate problems.

https://people.apache.org/~fhanik/kiss.html

Go:

func main() {
  v := "world"
	fmt.Printf("hello %s!", v)
}

The solar system planets size:

Planet
Radius
Sun
696,340 km
Mercury
2,439.7 km
Venus
6,051.8 km
Earth
6,371 km
Mars
3,389.5 km
Jupiter
69,911 km
Saturn
58,232 km
Uranus
25,362 km
Neptune
24,622 km
Pluto
1,188.3 km
−b±b2−4ac2a\frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}
Beautiful beach
<Page blocks={blocks} />

Notion と同じ見た目で描画するブロック

どのタイルも、実際の Notion のページから切り出したものです。開くと、ページ全体が Rotion でどう描画されるかを見られます。

1st header

2nd header

3rd header

Headings
Icon
Multiline

Callout with Paragraph
Callout with Paragraph
Callout with Paragraph
Callout with Paragraph

Callout
Beautiful beach
Image

Things I will do by tomorrow:

Buy a milk
Have my hair cut
Wash my car
To do

Go:

func main() {
  v := "world"
	fmt.Printf("hello %s!", v)
}
Code
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
https://fonts.google.com/
Very useful!
Bookmark

The solar system planets size:

Planet
Radius
Sun
696,340 km
Mercury
2,439.7 km
Venus
6,051.8 km
Earth
6,371 km
Mars
3,389.5 km
Jupiter
69,911 km
Saturn
58,232 km
Uranus
25,362 km
Neptune
24,622 km
Pluto
1,188.3 km
Table
Toggle text
Toggle
This principle has been a key, and a huge success in my years of software engineering. A common problem among software engineers and developers today is that they tend to over complicate problems.

https://people.apache.org/~fhanik/kiss.html
Quote
−b±b2−4ac2a\frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}
Equation

見た目はサイトに合わせて変えられる

コンポーネントはスタイル付きで用意されていて、そのスタイルはどこでも変えられます。変え方は 4 つあります。

カスタムプロパティを設定する

色、フォント、枠線、角の丸み、ギャラリーの列数は、--rotion-* のカスタムプロパティです。 :root に設定するか、包んでいる要素に設定してサイトの一部だけを変えます。

.blog {
  --rotion-font-family: 'Inter', sans-serif;
  --rotion-primary-text: #3d1a1f;
  --rotion-border-radius: 12px;
  --rotion-gallery-grid-template-columns-medium: repeat(3, 1fr);
}

クラス名で個別にスタイルを当てる

コンポーネントが描画する要素には、どれも rotion- で始まるクラス名が付いています。 カスタムプロパティで変えられない部分も、普通の CSS で変えられます。

.rotion-gallery-card:hover {
  transform: translateY(-2px);
}
 
.rotion-text-h1 {
  font-family: 'Fraunces', serif;
}

ダークモードの扱いを選ぶ

rotion/style.css は OS の設定に従います。 テーマの切り替えをサイト側で行うときは、代わりに rotion/style-without-dark.css を読み込みます。

// prefers-color-scheme に従う
import 'rotion/style.css'
 
// ダークモードはサイト側で扱う
import 'rotion/style-without-dark.css'

ビューごとに表示する内容を決める

表示するプロパティ、各行のリンク先、カードの大きさなどは、props とオプションで指定します。

<Gallery
  db={db}
  keys={['Name', 'Tags']}
  options={{
    href: { Name: '/people/[id]' },
    image: { size: 'large', fit: false },
  }}
/>

テーマのリファレンスデータベースビューのオプション

Notion のページを HTML にするまで

ページを取得し、そのブロックを取得して、Page コンポーネントに渡します。画像とファイルはサイトの中にダウンロードされるので、公開したページが Notion 上のファイルを参照することはありません。

矢印はデータの流れを表します。

インストールしてページを描画する

パッケージをインストールして NOTION_TOKEN を設定すれば、数行のコードで Notion のページを描画できます。

npm install rotion
app/page.tsx
import { FetchBlocks, FetchPage } from 'rotion'
import { Page } from 'rotion/ui'
 
const id = process.env.NOTION_PAGE_ID!
 
export default async function Home() {
  const page = await FetchPage({
    page_id: id,
    last_edited_time: 'force',
  })
  const blocks = await FetchBlocks({
    block_id: id,
    last_edited_time: page.last_edited_time,
  })
  return <Page blocks={blocks} />
}

クイックスタートRotion の仕組み