chalknotes 0.0.23 → 0.0.25

package/README.md

@@ -0,0 +1,154 @@
+# ✏️ ChalkNotes
+
+**Turn your Notion database into a blog with zero config. Works with Next.js Page Router and App Router.**
+
+---
+
+## 🚀 Features
+
+- 📄 Fetch blog posts from Notion
+- 🪄 Auto-generate routes for App Router or Page Router
+- ⚙️ Helpers for `getStaticProps` / `getStaticPaths`
+- 🧠 Minimal setup – just run `chalknotes`
+
+---
+
+## 📦 Installation
+
+```bash
+pnpm add chalknotes
+# or
+npm install chalknotes
+```
+
+---
+
+## 🧙‍♂️ Quick Start
+
+```bash
+npx chalknotes
+```
+
+- Automatically detects if you're using **App Router** or **Page Router**
+- Generates blog routes at `/blog/[slug]`
+- You’re done ✅
+
+---
+
+## 🔧 Setup
+
+Make sure your `.env` file contains:
+
+```env
+NOTION_TOKEN=secret_...
+NOTION_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxx
+```
+
+Your Notion database should have:
+- A **"Name"** title property
+- A **"Published"** checkbox property
+
+---
+
+## 📚 Usage in Next.js
+
+### Page Router
+
+Creates:
+
+```js
+// pages/blog/[slug].js
+import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
+
+export const getStaticProps = getStaticPropsForPost;
+export const getStaticPaths = getStaticPathsForPosts;
+
+export default function BlogPost({ post }) {
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+    </article>
+  );
+}
+```
+
+---
+
+### App Router
+
+Creates:
+
+```jsx
+// app/blog/[slug]/page.jsx
+import { getPostBySlug } from 'chalknotes';
+
+export default async function BlogPost({ params }) {
+  const post = await getPostBySlug(params.slug);
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+    </article>
+  );
+}
+```
+
+---
+
+## 🧩 API
+
+### `getPostBySlug(slug: string)`
+Fetches a post and renders Notion blocks as HTML.
+
+```js
+const post = await getPostBySlug('my-post-title');
+```
+
+---
+
+### `getAllPosts()`
+Returns all published posts with metadata:
+
+```js
+[
+  {
+    title: "My First Post",
+    slug: "my-first-post",
+    notionPageId: "xxxxxxxx"
+  },
+  ...
+]
+```
+
+---
+
+### `getStaticPropsForPost()`
+For use with `getStaticProps` in Page Router.
+
+---
+
+### `getStaticPathsForPosts()`
+For use with `getStaticPaths` in Page Router.
+
+---
+
+## 📅 Roadmap
+
+- [ ] Rich block support (images, lists, toggles, etc)
+- [ ] RSS feed support
+- [ ] MDX or Markdown output option
+- [ ] Custom blog.config.js support
+
+---
+
+## 💡 Inspiration
+
+Built to scratch an itch while exploring the simplicity of tools like [feather.so](https://feather.so/) and [Notion Blog](https://github.com/ijjk/notion-blog).
+
+---
+
+## 🧑‍💻 Author
+
+[NepTune](https://github.com/yourhandle) • MIT License

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 const fs = require("fs");
 const path = require("path");
 
@@ -22,9 +22,9 @@ export const getStaticPaths = getStaticPathsForPosts;
 
 export default function BlogPost({ post }) {
   return (
-    <article>
-      <h1>{post.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+    <article className="max-w-4xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
+      <div className="text-lg text-gray-700" dangerouslySetInnerHTML={{ __html: post.content }} />
     </article>
   );
 }
@@ -44,9 +44,9 @@ export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
 
   return (
-    <article>
-      <h1>{post.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+    <article className="max-w-4xl mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
+      <div className="text-lg text-gray-700" dangerouslySetInnerHTML={{ __html: post.content }} />
     </article>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chalknotes",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "A tool that simplifies blogs.",
   "main": "src/index.js",
   "bin": {

package/src/index.js

@@ -1,7 +1,10 @@
 const { getAllPosts } = require('./lib/getAllPosts');
 const { getPostBySlug } = require('./lib/getPostBySlug');
+const { getStaticPropsForPost, getStaticPathsForPosts } = require('./lib/nextHelpers');
 
 module.exports = {
     getAllPosts,
-    getPostBySlug
+    getPostBySlug,
+    getStaticPropsForPost,
+    getStaticPathsForPosts
 }

package/src/lib/getPostBySlug.js

@@ -27,22 +27,21 @@ const getPostBySlug = async (slug) => {
                     switch (block.type) {
                         case "paragraph":
                             const textHTML = block.paragraph.rich_text.map(text => text.plain_text).join("");
-                            content += `<p>${textHTML}</p>`
+                            content += `<p class="mb-4">${textHTML}</p>`
                             break;
                         case "heading_1":
                             const headingHTML = block.heading_1.rich_text.map(text => text.plain_text).join("");
-                            content += `<h1>${headingHTML}</h1>`
+                            content += `<h1 class="text-2xl font-bold mb-4">${headingHTML}</h1>`
                             break;
                         case "heading_2":
                             const heading2HTML = block.heading_2.rich_text.map(text => text.plain_text).join("");
-                            content += `<h2>${heading2HTML}</h2>`
+                            content += `<h2 class="text-xl font-bold mb-4">${heading2HTML}</h2>`
                             break;
                         case "heading_3":
                             const heading3HTML = block.heading_3.rich_text.map(text => text.plain_text).join("");
-                            content += `<h3>${heading3HTML}</h3>`
+                            content += `<h3 class="text-lg font-bold mb-4">${heading3HTML}</h3>`
                             break;
                     }
-                    console.log(content)
                 }
                 return {
                     title,

package/src/lib/nextHelpers.js

@@ -0,0 +1,36 @@
+const { getAllPosts } = require('./getAllPosts');
+const { getPostBySlug } = require('./getPostBySlug');
+
+/**
+ * Provides static props for a post page using slug
+ */
+const getStaticPropsForPost = async ({ params }) => {
+  const post = await getPostBySlug(params.slug);
+
+  return {
+    props: {
+      post
+    }
+  };
+};
+
+/**
+ * Provides static paths for all blog posts
+ */
+const getStaticPathsForPosts = async () => {
+  const posts = await getAllPosts();
+
+  const paths = posts.map((post) => ({
+    params: { slug: post.slug }
+  }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+module.exports = {
+  getStaticPropsForPost,
+  getStaticPathsForPosts
+};