+
-astro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブログを作ることができます。
+astro-notion-blog-templateは**[astro-notion-blog](https://github.com/otoyo/astro-notion-blog)**をforkし、UIなどを独自にカスタマイズしたものです。
+使えば [Notion](https://www.notion.so) で書けるブログを作ることができます。
ブログは [Astro](https://astro.build/) を使って静的生成されるので非常に高速です。
- :rocket: ページの表示が**爆速**
@@ -16,19 +15,27 @@ astro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブ
- :hammer_and_wrench: ブログの見た目を**自由にカスタマイズ可能**
- :white_check_mark: **Notion 公式 API**を使っているため安心
+詳細については[astro-notion-blog](https://github.com/otoyo/astro-notion-blog)を参考にしてください.otoyoさんに感謝を示します。また気に入ったら元のリポジトリにもスターを付けてください！
+
+## astro-notion-blog
+
+[](https://github.com/otoyo/astro-notion-blog/stargazers)
+[](https://github.com/otoyo/astro-notion-blog/blob/main/LICENSE)
+[](https://github.com/sponsors/otoyo)
+
## :camera_flash: スクリーンショット
### PC
-
### スマートフォン
-
-## :globe_with_meridians: デモ
+## :globe_with_meridians: 本番環境
-[https://astro-notion-blog.pages.dev](https://astro-notion-blog.pages.dev)
+[astro-notion-blog-template.pages.dev](https://astro-notion-blog-template.pages.dev/)
## :motor_scooter: クイックスタート
@@ -39,40 +46,39 @@ astro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブ
### ステップ
-1. このリポジトリを**スターします** :wink:
- - スターしていただけると開発の励みになります
-2. [ブログテンプレート](https://otoyo.notion.site/e2c5fa2e8660452988d6137ba57fd974?v=abe305cd8b3d467285e91a2a85f4d8de) を自分の Notion へ複製します
-3. 複製したページ(データベース)のアイコン、タイトル、説明を変更します
+1. [astro-notion-blogのブログテンプレート](https://otoyo.notion.site/e2c5fa2e8660452988d6137ba57fd974?v=abe305cd8b3d467285e91a2a85f4d8de) を自分の Notion へ複製します
+2. 複製したページ(データベース)のアイコン、タイトル、説明を変更します
+ - ブログのタイトルとAboutページはハードコーディングしているのでその部分の実コードを変更する必要があります。
-4. 複製したページ(データベース)の URL `https://notion.so/your-account/<ここ>?v=xxxx` を `DATABASE_ID` としてメモします
+3. 複製したページ(データベース)の URL `https://notion.so/your-account/<ここ>?v=xxxx` を `DATABASE_ID` としてメモします
-5. [Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration) からインテグレーションを作成し "Internal Integration Token" を `NOTION_API_SECRET` としてメモします
-6. 複製したページを再度開き [Share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration) の手順でインテグレーションにデータベースを共有します
-7. このリポジトリを自分のアカウントヘフォークします
+4. [Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration) からインテグレーションを作成し "Internal Integration Token" を `NOTION_API_SECRET` としてメモします
+5. 複製したページを再度開き [Share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration) の手順でインテグレーションにデータベースを共有します
+6. このリポジトリを自分のアカウントヘフォークします
- フォークボタンは画面上部右側のスターの左にあります
-8. [Cloudflare Pages](https://pages.cloudflare.com/) を開きサインインします
+7. [Cloudflare Pages](https://pages.cloudflare.com/) を開きサインインします
- 言語設定を日本語に変更します
-9. プロジェクトを "Connect to Git" を選んで作成し、先ほどフォークした `
-4. For future reference, identify the `DATABASE_ID` by noting the portion of the duplicated page (database) URL that appears as https://notion.so/your-account/
-5. [Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration) and note "Internal Integration Token" as `NOTION_API_SECRET`
-6. To integrate your application with Notion, [share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration).
-7. To make a copy of this repository in your own account, fork it by clicking on the 'Fork' button in the top-right corner of the repository page.
-8. Go to [Cloudflare Pages](https://pages.cloudflare.com/) and sign in
-9. Create new project with "Connect to Git" with your forked repository `
+
++ + 目次 + +
+
+
+ -
+ {
+ headings.map((headingBlock: Block) => {
+ const heading = headingBlock.Heading1
+ || headingBlock.Heading2
+ || headingBlock.Heading3 as (Heading1 | Heading2 | Heading3);
+
+ let indentClass = '';
+ if (headingBlock.Type === 'heading_2') {
+ indentClass = 'indent-1';
+ } else if (headingBlock.Type === 'heading_3') {
+ indentClass = 'indent-2';
+ }
+
+ return (
+
- + + {heading.RichTexts.map( + (richText: RichText) => richText.PlainText, + ).join('')} + + + ); + }) + } +
+