v0.1.0 / Prototype · Automated 3D book bindery

置くだけで、
本になる。

contents/ に Markdown を置くと、3D 本棚と一冊の 3D ブックが生まれます。 ページめくりも、棚からの取り出しも、すべて CSS と JavaScript だけで動きます。

01Volumes
44Pages bound
1Markdown file
2Deploy targets
Library / 01 volumes

本棚

背表紙をクリックすると、本が棚から出てきて開きます。本棚と本は Vercel で公開されています。

新しい原稿は contents/ に置くだけ。ビルドが本棚に並べます。

本棚で取り出す ↗
How it works

Markdown が本になるまで

原稿の配置を合図に、解析・ページ分割・製本・公開までが自動で走ります。ローカルでは watcher、GitHub では push がトリガーです。

01

Markdown を置く

contents/ に .md を追加。front matter で書名・著者・説明を指定できます。

02

自動ビルド

npm run dev の watcher、または GitHub への push が製本を開始します。

03

本棚と本を生成

見出し・表・コードを解析し、章ごとにページ分割。背表紙と 3D ブックを books/ に書き出します。

04

2 つの場所へ公開

本棚と本は Vercel、この LP と仕組み図は GitHub Pages へ。役割を分けて公開します。

Archify / Workflow diagram 全画面で開く ↗
Two deploy targets

公開の分担

LP と成果物でホスティングを分けています。どちらも静的ファイルなので、ビルド後はそのまま配れます。

GitHub Pages

LP / 仕組み図

このランディングページと Archify のワークフロー図を配信します。原稿が追加されるたびに GitHub Actions が LP を再ビルドします。

仕組み図を見る →
Vercel

本棚 / 3D ブック

背表紙が並ぶ本棚と、取り出しアニメーション付きの 3D ブックを配信します。リポジトリを接続すると、Vercel のビルドでも contents/ から自動製本されます。

本棚を開く ↗
Get started

はじめかた

原稿を置いて、ローカルで確認。公開は push するだけです。

原稿はプレーンな Markdown。front matter は任意ですが、書名・サブタイトル・著者・説明を入れると本棚と表紙が整います。

  • npm run dev — contents/ を監視して即時製本
  • npm run preview — ローカルで LP と本棚を確認
  • npm run build — books/ と site/index.html を一括生成
  • push — GitHub Actions が LP を公開。Vercel 接続時は本棚も更新
# 1. 原稿を置く
contents/mcp-a2a.md

# 2. 監視ビルドを開始(置いた瞬間に製本)
npm run dev

# 3. プレビュー
npm run preview
# → http://localhost:4173/site/

# 4. 公開
git add contents/ books/ site/
git commit -m "add a new book"
git push