chalknotes 0.0.29 → 0.0.31

package/README.md

@@ -13,6 +13,8 @@
 - 🔧 Interactive configuration setup
 - 📁 Customizable route paths
 - 🧠 Minimal setup – just run `chalknotes`
+- 🖼️ **Rich content support** - Images, code blocks, lists, quotes, and more
+- 🔒 **Secure rendering** - React-based component instead of raw HTML
 
 ---
 
@@ -45,6 +47,7 @@ npm install chalknotes
    - Creates `blog.config.js` with default configuration (if needed)
    - Generates blog routes with clean, responsive templates
    - Supports light and dark themes
+   - **Renders rich Notion content** with images, code blocks, and more
 
 ---
 
@@ -98,6 +101,7 @@ Creates:
 ```js
 // pages/blog/[slug].js (or custom route)
 import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export const getStaticProps = getStaticPropsForPost;
 export const getStaticPaths = getStaticPathsForPosts;
@@ -110,10 +114,7 @@ export default function BlogPost({ post }) {
           <h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg max-w-none text-gray-700 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -130,6 +131,7 @@ Creates:
 ```jsx
 // app/blog/[slug]/page.jsx (or custom route)
 import { getPostBySlug } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
@@ -141,10 +143,7 @@ export default async function BlogPost({ params }) {
           <h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg max-w-none text-gray-700 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -157,10 +156,11 @@ export default async function BlogPost({ params }) {
 ## 🧩 API
 
 ### `getPostBySlug(slug: string)`
-Fetches a post and renders Notion blocks as HTML.
+Fetches a post and returns structured data for rendering.
 
 ```js
 const post = await getPostBySlug('my-post-title');
+// Returns: { title, slug, blocks, notionPageId }
 ```
 
 ---
@@ -191,6 +191,31 @@ For use with `getStaticPaths` in Page Router.
 
 ---
 
+### `NotionRenderer`
+React component for rendering Notion blocks (scaffolded in your project):
+
+```jsx
+import NotionRenderer from './NotionRenderer';
+
+<NotionRenderer blocks={post.blocks} />
+```
+
+---
+
+## 🖼️ Supported Content Types
+
+The `NotionRenderer` component supports all major Notion block types:
+
+- **Text blocks**: Paragraphs, headings (H1, H2, H3)
+- **Lists**: Bulleted and numbered lists
+- **Code blocks**: With syntax highlighting support
+- **Images**: With captions and Next.js optimization
+- **Quotes**: Styled blockquotes
+- **Dividers**: Horizontal rules
+- **Rich text**: Bold, italic, strikethrough, code, links
+
+---
+
 ## 🎨 Styling
 
 The generated templates use Tailwind CSS with:
@@ -199,6 +224,7 @@ The generated templates use Tailwind CSS with:
 - Typography optimized for readability
 - Proper spacing and hierarchy
 - Light and dark mode support
+- **Rich content styling** for all Notion block types
 
 Make sure you have Tailwind CSS installed in your project:
 
@@ -211,7 +237,7 @@ npm install -D tailwindcss @tailwindcss/typography
 ## 📅 Roadmap
 
 - [ ] Plugin system for custom components
-- [ ] More Notion block support (images, lists, code blocks)
+- [ ] More Notion block support (callouts, bookmarks, toggles)
 - [ ] RSS feed support
 - [ ] MDX or Markdown output option
 - [ ] Custom theme templates

package/bin/cli.js

@@ -28,16 +28,16 @@ const configPath = path.join(process.cwd(), 'blog.config.js');
 if (!fs.existsSync(configPath)) {
     console.log("\n❌ blog.config.js not found");
     console.log("This file is required to configure your blog settings.");
-    
+
     const rl = readline.createInterface({
         input: process.stdin,
         output: process.stdout
     });
-    
+
     rl.question("Would you like to create a default blog.config.js? (y/n): ", (answer) => {
         if (answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes') {
             console.log("📝 Creating blog.config.js with default configuration...");
-            
+
             const configTemplate = `module.exports = {
   notionToken: process.env.NOTION_TOKEN,
   notionDatabaseId: process.env.NOTION_DATABASE_ID,
@@ -45,7 +45,7 @@ if (!fs.existsSync(configPath)) {
   theme: 'default',
   plugins: [],
 };`.trim();
-            
+
             fs.writeFileSync(configPath, configTemplate);
             console.log("✅ Created blog.config.js with default configuration");
             console.log("\n💡 Now you can re-run 'npx chalknotes' to scaffold your blog pages!");
@@ -86,11 +86,12 @@ const appRouter = path.join(process.cwd(), '/app')
 // Generate templates based on theme
 function getTemplates(theme, routeBasePath) {
     const routePath = routeBasePath.replace(/^\//, ''); // Remove leading slash
-    
+
     if (theme === 'dark') {
         return {
             pageRouter: `
 import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export const getStaticProps = getStaticPropsForPost;
 export const getStaticPaths = getStaticPathsForPosts;
@@ -103,10 +104,7 @@ export default function BlogPost({ post }) {
           <h1 className="text-4xl font-bold text-white mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg prose-invert max-w-none text-gray-300 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -114,6 +112,7 @@ export default function BlogPost({ post }) {
 }`.trim(),
             appRouter: `
 import { getPostBySlug } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
@@ -125,10 +124,7 @@ export default async function BlogPost({ params }) {
           <h1 className="text-4xl font-bold text-white mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg prose-invert max-w-none text-gray-300 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -140,6 +136,7 @@ export default async function BlogPost({ params }) {
         return {
             pageRouter: `
 import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export const getStaticProps = getStaticPropsForPost;
 export const getStaticPaths = getStaticPathsForPosts;
@@ -152,10 +149,7 @@ export default function BlogPost({ post }) {
           <h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg max-w-none text-gray-700 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -163,6 +157,7 @@ export default function BlogPost({ post }) {
 }`.trim(),
             appRouter: `
 import { getPostBySlug } from 'chalknotes';
+import NotionRenderer from './NotionRenderer';
 
 export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
@@ -174,10 +169,7 @@ export default async function BlogPost({ params }) {
           <h1 className="text-4xl font-bold text-gray-900 mb-6 leading-tight">
             {post.title}
           </h1>
-          <div 
-            className="prose prose-lg max-w-none text-gray-700 leading-relaxed"
-            dangerouslySetInnerHTML={{ __html: post.content }} 
-          />
+          <NotionRenderer blocks={post.blocks} />
         </article>
       </main>
     </div>
@@ -196,7 +188,94 @@ if (fs.existsSync(pageRouter)) {
 
     const templates = getTemplates(config.theme, config.routeBasePath);
     
+    // Create NotionRenderer component in the same directory as the blog page
+    const notionRendererContent = `import React from "react";
+import Image from "next/image";
+
+export default function NotionRenderer({ blocks }) {
+  if (!blocks || blocks.length === 0) return null;
+
+  return (
+    <div className="prose prose-lg max-w-none text-slate-700 leading-relaxed dark:prose-invert dark:text-slate-300">
+      {blocks.map((block, i) => {
+        switch (block.type) {
+          case "heading_1":
+            return <h1 key={i}>{block.text}</h1>;
+
+          case "heading_2":
+            return <h2 key={i}>{block.text}</h2>;
+
+          case "heading_3":
+            return <h3 key={i}>{block.text}</h3>;
+
+          case "paragraph":
+            return <p key={i}>{block.text}</p>;
+
+          case "bulleted_list_item":
+            return (
+              <ul key={i} className="list-disc ml-6">
+                <li>{block.text}</li>
+              </ul>
+            );
+
+          case "numbered_list_item":
+            return (
+              <ol key={i} className="list-decimal ml-6">
+                <li>{block.text}</li>
+              </ol>
+            );
+
+          case "quote":
+            return (
+              <blockquote key={i} className="border-l-4 pl-4 italic text-slate-600 bg-slate-50 p-4 rounded-r">
+                {block.text}
+              </blockquote>
+            );
+
+          case "code":
+            return (
+              <pre key={i} className="bg-slate-900 text-slate-100 p-4 rounded-xl overflow-x-auto text-sm">
+                <code className={\`language-\${block.language}\`}>{block.code}</code>
+              </pre>
+            );
+
+          case "divider":
+            return <hr key={i} className="my-8 border-slate-300" />;
+
+          case "image":
+            return (
+              <figure key={i} className="max-w-[400px] mx-auto my-6 px-4">
+                <Image
+                  src={block.imageUrl}
+                  alt={block.alt || "Image"}
+                  width={400}
+                  height={300}
+                  className="rounded-xl object-contain"
+                />
+                {block.caption && (
+                  <figcaption className="text-sm text-center text-slate-500 mt-2 italic">
+                    {block.caption}
+                  </figcaption>
+                )}
+              </figure>
+            );
+
+          default:
+            return (
+              <p key={i} className="text-sm text-red-500 italic">
+                ⚠️ Unsupported block: {block.type}
+              </p>
+            );
+        }
+      })}
+    </div>
+  );
+}`;
+    
     fs.mkdirSync(dirPath, { recursive: true });
+    fs.writeFileSync(path.join(dirPath, 'NotionRenderer.jsx'), notionRendererContent);
+    console.log(`✅ Created ${routePath}/NotionRenderer.jsx`);
+    
     fs.writeFileSync(slugDir, templates.pageRouter);
     console.log(`✅ Created pages/${routePath}/[slug].js`);
     
@@ -208,7 +287,94 @@ if (fs.existsSync(pageRouter)) {
 
     const templates = getTemplates(config.theme, config.routeBasePath);
     
+    // Create NotionRenderer component in the same directory as the blog page
+    const notionRendererContent = `import React from "react";
+import Image from "next/image";
+
+export default function NotionRenderer({ blocks }) {
+  if (!blocks || blocks.length === 0) return null;
+
+  return (
+    <div className="prose prose-lg max-w-none text-slate-700 leading-relaxed dark:prose-invert dark:text-slate-300">
+      {blocks.map((block, i) => {
+        switch (block.type) {
+          case "heading_1":
+            return <h1 key={i}>{block.text}</h1>;
+
+          case "heading_2":
+            return <h2 key={i}>{block.text}</h2>;
+
+          case "heading_3":
+            return <h3 key={i}>{block.text}</h3>;
+
+          case "paragraph":
+            return <p key={i}>{block.text}</p>;
+
+          case "bulleted_list_item":
+            return (
+              <ul key={i} className="list-disc ml-6">
+                <li>{block.text}</li>
+              </ul>
+            );
+
+          case "numbered_list_item":
+            return (
+              <ol key={i} className="list-decimal ml-6">
+                <li>{block.text}</li>
+              </ol>
+            );
+
+          case "quote":
+            return (
+              <blockquote key={i} className="border-l-4 pl-4 italic text-slate-600 bg-slate-50 p-4 rounded-r">
+                {block.text}
+              </blockquote>
+            );
+
+          case "code":
+            return (
+              <pre key={i} className="bg-slate-900 text-slate-100 p-4 rounded-xl overflow-x-auto text-sm">
+                <code className={\`language-\${block.language}\`}>{block.code}</code>
+              </pre>
+            );
+
+          case "divider":
+            return <hr key={i} className="my-8 border-slate-300" />;
+
+          case "image":
+            return (
+              <figure key={i} className="max-w-[400px] mx-auto my-6 px-4">
+                <Image
+                  src={block.imageUrl}
+                  alt={block.alt || "Image"}
+                  width={400}
+                  height={300}
+                  className="rounded-xl object-contain"
+                />
+                {block.caption && (
+                  <figcaption className="text-sm text-center text-slate-500 mt-2 italic">
+                    {block.caption}
+                  </figcaption>
+                )}
+              </figure>
+            );
+
+          default:
+            return (
+              <p key={i} className="text-sm text-red-500 italic">
+                ⚠️ Unsupported block: {block.type}
+              </p>
+            );
+        }
+      })}
+    </div>
+  );
+}`;
+    
     fs.mkdirSync(dirPath, { recursive: true });
+    fs.writeFileSync(path.join(dirPath, 'NotionRenderer.jsx'), notionRendererContent);
+    console.log(`✅ Created ${routePath}/[slug]/NotionRenderer.jsx`);
+    
     fs.writeFileSync(slugDir, templates.appRouter);
     console.log(`✅ Created app/${routePath}/[slug]/page.jsx`);
     

package/package.json

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

package/src/lib/getPostBySlug.js

@@ -1,5 +1,5 @@
-const { notion, dbId } = require('./notion');
-const { slugify } = require('../utils');
+const { notion, dbId } = require("./notion")
+const { slugify } = require("../utils")
 
 const getPostBySlug = async (slug) => {
     try {
@@ -8,43 +8,116 @@ const getPostBySlug = async (slug) => {
             filter: {
                 property: "Published",
                 checkbox: {
-                    equals: true
-                }
-            }
+                    equals: true,
+                },
+            },
         })
+
         if (response.results.length === 0) {
-            throw new Error("No posts found");
+            throw new Error("No posts found")
         }
 
         for (const page of response.results) {
-            const titleProperty = page.properties["Name"];
-            const title = titleProperty?.title?.[0]?.plain_text;
-            const pageSlug = slugify(title);
+            const titleProperty = page.properties["Name"]
+            const title = titleProperty?.title?.[0]?.plain_text
+            const pageSlug = slugify(title)
 
             if (pageSlug === slug) {
                 const response = await notion.blocks.children.list({
                     block_id: page.id,
                 })
-                let content = ""
+
+                let content = []
                 for (const block of response.results) {
-                    content += processBlock(block);
+                    content.push(convertBlockToStructuredJSON(block))
                 }
+
                 return {
                     title,
                     slug: pageSlug,
-                    content: content,
+                    blocks: content,
                     notionPageId: page.id,
-                };
+                }
             }
         }
 
-        throw new Error(`No post found with slug "${slug}"`);
+        throw new Error(`No post found with slug "${slug}"`)
     } catch (error) {
         console.error(error)
-        throw new Error(`Error fetching posts from Notion: ${error.message}`);
+        throw new Error(`Error fetching posts from Notion: ${error.message}`)
     }
 }
 
+function convertBlockToStructuredJSON(block) {
+    const base = { type: block.type };
+
+    switch (block.type) {
+        case "paragraph":
+            return {
+                ...base,
+                text: extractPlainText(block.paragraph.rich_text),
+                richText: block.paragraph.rich_text,
+            };
+
+        case "heading_1":
+        case "heading_2":
+        case "heading_3":
+            return {
+                ...base,
+                text: extractPlainText(block[block.type].rich_text),
+                richText: block[block.type].rich_text,
+            };
+
+        case "bulleted_list_item":
+        case "numbered_list_item":
+            return {
+                ...base,
+                text: extractPlainText(block[block.type].rich_text),
+                richText: block[block.type].rich_text,
+            };
+
+        case "image": {
+            const image = block.image;
+            const url = image.type === "external" ? image.external.url : image.file.url;
+            const caption = extractPlainText(image.caption);
+            return {
+                ...base,
+                imageUrl: url,
+                caption,
+                alt: caption || "Blog image from Notion",
+            };
+        }
+
+        case "quote":
+            return {
+                ...base,
+                text: extractPlainText(block.quote.rich_text),
+                richText: block.quote.rich_text,
+            };
+
+        case "code":
+            return {
+                ...base,
+                code: extractPlainText(block.code.rich_text),
+                language: block.code.language || "text",
+            };
+
+        case "divider":
+            return { ...base };
+
+        default:
+            return {
+                ...base,
+                unsupported: true,
+            };
+    }
+}
+
+function extractPlainText(richText = []) {
+    return richText.map(t => t.plain_text).join("");
+}
+
+
 /**
  * Process individual Notion blocks and convert to HTML
  * @param {Object} block - Notion block object
@@ -53,58 +126,74 @@ const getPostBySlug = async (slug) => {
 function processBlock(block) {
     switch (block.type) {
         case "paragraph":
-            return processRichText(block.paragraph.rich_text, "p", "mb-6 leading-7 text-gray-700 text-lg");
-            
+            return processRichText(block.paragraph.rich_text, "p", "mb-6 leading-relaxed text-slate-700 text-base")
+
         case "heading_1":
-            return processRichText(block.heading_1.rich_text, "h1", "text-4xl font-bold mb-8 mt-12 text-gray-900 border-b-2 border-gray-200 pb-4");
-            
+            return processRichText(
+                block.heading_1.rich_text,
+                "h1",
+                "text-4xl font-extrabold mb-8 mt-12 text-slate-900 border-b border-slate-200 pb-6",
+            )
+
         case "heading_2":
-            return processRichText(block.heading_2.rich_text, "h2", "text-3xl font-semibold mb-6 mt-10 text-gray-900");
-            
+            return processRichText(block.heading_2.rich_text, "h2", "text-3xl font-bold mb-6 mt-10 text-slate-900")
+
         case "heading_3":
-            return processRichText(block.heading_3.rich_text, "h3", "text-2xl font-medium mb-4 mt-8 text-gray-900");
-            
+            return processRichText(block.heading_3.rich_text, "h3", "text-2xl font-semibold mb-4 mt-8 text-slate-900")
+
         case "bulleted_list_item":
-            return processRichText(block.bulleted_list_item.rich_text, "li", "mb-3 ml-6 leading-7 text-gray-700");
-            
+            return processRichText(
+                block.bulleted_list_item.rich_text,
+                "li",
+                "mb-2 ml-6 leading-relaxed text-slate-700 list-disc",
+            )
+
         case "numbered_list_item":
-            return processRichText(block.numbered_list_item.rich_text, "li", "mb-3 ml-6 leading-7 text-gray-700");
-            
+            return processRichText(
+                block.numbered_list_item.rich_text,
+                "li",
+                "mb-2 ml-6 leading-relaxed text-slate-700 list-decimal",
+            )
+
         case "quote":
-            return processRichText(block.quote.rich_text, "blockquote", "border-l-4 border-blue-500 pl-8 italic text-gray-600 mb-8 bg-blue-50 py-6 rounded-r-lg text-lg leading-7");
-            
+            return processRichText(
+                block.quote.rich_text,
+                "blockquote",
+                "border-l-4 border-indigo-400 pl-6 italic text-slate-600 mb-8 bg-slate-50 py-6 rounded-r-xl text-lg leading-relaxed font-medium",
+            )
+
         case "code":
-            const codeContent = block.code.rich_text.map(text => text.plain_text).join("");
-            const language = block.code.language || 'text';
-            return `<pre class="bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto mb-8 text-sm leading-6 shadow-lg"><code class="language-${language}">${escapeHtml(codeContent)}</code></pre>`;
-            
+            const codeContent = block.code.rich_text.map((text) => text.plain_text).join("")
+            const language = block.code.language || "text"
+            return `<pre class="bg-slate-900 text-slate-100 p-6 rounded-xl overflow-x-auto mb-8 text-sm leading-6 shadow-xl border border-slate-800"><code class="language-${language}">${escapeHtml(codeContent)}</code></pre>`
+
         case "image":
-            return processImage(block.image);
-            
+            return processImage(block.image)
+
         case "divider":
-            return '<hr class="my-12 border-gray-300" />';
-            
+            return '<hr class="my-12 border-slate-200" />'
+
         case "callout":
-            return processCallout(block.callout);
-            
+            return processCallout(block.callout)
+
         case "toggle":
-            return processToggle(block.toggle);
-            
+            return processToggle(block.toggle)
+
         case "table_of_contents":
-            return '<div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8 shadow-sm"><p class="text-blue-800 font-medium text-lg">📋 Table of Contents</p><p class="text-blue-600 text-sm mt-1">(Generated automatically)</p></div>';
-            
+            return '<div class="bg-indigo-50 border border-indigo-200 rounded-xl p-6 mb-8 shadow-sm"><p class="text-indigo-900 font-semibold text-lg">📋 Table of Contents</p><p class="text-indigo-600 text-sm mt-1">(Generated automatically)</p></div>'
+
         case "bookmark":
-            return processBookmark(block.bookmark);
-            
+            return processBookmark(block.bookmark)
+
         case "equation":
-            return `<div class="bg-gray-50 p-6 rounded-lg mb-8 text-center border border-gray-200 shadow-sm"><p class="text-gray-600 mb-3 font-medium">📐 Mathematical equation</p><p class="font-mono text-sm bg-white p-4 rounded border shadow-sm">${block.equation.expression}</p></div>`;
-            
+            return `<div class="bg-slate-50 p-6 rounded-xl mb-8 text-center border border-slate-200 shadow-sm"><p class="text-slate-600 mb-3 font-semibold">📐 Mathematical equation</p><p class="font-mono text-sm bg-white p-4 rounded-lg border shadow-sm">${block.equation.expression}</p></div>`
+
         default:
             // For unsupported blocks, try to extract plain text
             if (block[block.type]?.rich_text) {
-                return processRichText(block[block.type].rich_text, "p", "mb-6 text-gray-500 italic text-lg");
+                return processRichText(block[block.type].rich_text, "p", "mb-6 text-slate-500 italic text-base")
             }
-            return "";
+            return ""
     }
 }
 
@@ -114,93 +203,65 @@ function processBlock(block) {
  * @returns {string} HTML string
  */
 function processImage(image) {
-    const imageUrl = image.type === 'external' ? image.external.url : image.file.url;
-    const caption = image.caption?.map(text => text.plain_text).join("") || "";
-    const altText = caption || "Image";
-    
-    // Check for Notion's size property in the block itself
-    let maxWidthClass = "max-w-full";
-    let alignmentClass = "text-center";
-    
-    // Try to get size from block properties (Notion API structure)
-    if (image.size) {
-        switch (image.size) {
-            case 'small':
-                maxWidthClass = "max-w-sm";
-                break;
-            case 'medium':
-                maxWidthClass = "max-w-lg";
-                break;
-            case 'large':
-                maxWidthClass = "max-w-2xl";
-                break;
-            default:
-                maxWidthClass = "max-w-full";
-        }
-    }
-    
-    // Check for alignment in block properties
-    if (image.alignment) {
-        switch (image.alignment) {
-            case 'left':
-                alignmentClass = "text-left";
-                break;
-            case 'center':
-                alignmentClass = "text-center";
-                break;
-            case 'right':
-                alignmentClass = "text-right";
-                break;
-            default:
-                alignmentClass = "text-center";
-        }
-    }
-    
-    const responsiveClasses = `w-full ${maxWidthClass} h-auto rounded-lg shadow-sm`;
-    
+    const imageUrl = image.type === "external" ? image.external.url : image.file.url;
+    const caption = image.caption?.map((text) => text.plain_text).join("") || "";
+    const altText = caption || "Blog image from Notion";
+
+    // Strict size constraints for blog layout
+    const containerClasses = "max-w-[400px] mx-auto px-4 my-4";
+    const figureClasses = "relative w-full max-w-[300px] sm:max-w-[400px] h-[300px]";
+
+    // Log image URL for debugging
+    console.log("Image URL:", imageUrl);
+
     return `
-        <figure class="my-8 ${alignmentClass}">
-            <img 
+    <div className="${containerClasses}">
+        <figure className="${figureClasses}">
+            <Image 
                 src="${imageUrl}" 
                 alt="${escapeHtml(altText)}" 
-                class="${responsiveClasses}"
-                loading="lazy"
+                fill
+                className="rounded-xl object-contain"
+                sizes="(max-width: 640px) 300px, 400px"
+                priority={false}
             />
-            ${caption ? `<figcaption class="text-gray-500 mt-3 text-sm italic">${escapeHtml(caption)}</figcaption>` : ''}
+            ${caption ? `<figcaption className="text-slate-600 mt-2 text-sm text-center font-medium italic">${escapeHtml(caption)}</figcaption>` : ""}
         </figure>
+    </div>
     `.trim();
 }
 
+
 /**
  * Process callout block
  * @param {Object} callout - Notion callout block
  * @returns {string} HTML string
  */
 function processCallout(callout) {
-    const content = processRichText(callout.rich_text, "div", "");
-    const icon = callout.icon?.emoji || "💡";
-    const bgColor = callout.color || "blue";
-    
+    const content = processRichText(callout.rich_text, "div", "")
+    const icon = callout.icon?.emoji || "💡"
+    const bgColor = callout.color || "blue"
+
     const colorClasses = {
-        blue: "bg-blue-50 border-blue-200 text-blue-800",
-        gray: "bg-gray-50 border-gray-200 text-gray-800",
-        yellow: "bg-yellow-50 border-yellow-200 text-yellow-800",
-        red: "bg-red-50 border-red-200 text-red-800",
-        green: "bg-green-50 border-green-200 text-green-800",
-        purple: "bg-purple-50 border-purple-200 text-purple-800",
-        pink: "bg-pink-50 border-pink-200 text-pink-800"
-    };
-    
-    const colorClass = colorClasses[bgColor] || colorClasses.blue;
-    
+        blue: "bg-blue-50 border-blue-200 text-blue-900",
+        gray: "bg-slate-50 border-slate-200 text-slate-900",
+        yellow: "bg-amber-50 border-amber-200 text-amber-900",
+        red: "bg-red-50 border-red-200 text-red-900",
+        green: "bg-emerald-50 border-emerald-200 text-emerald-900",
+        purple: "bg-purple-50 border-purple-200 text-purple-900",
+        pink: "bg-pink-50 border-pink-200 text-pink-900",
+    }
+
+    const colorClass = colorClasses[bgColor] || colorClasses.blue
+
     return `
-        <div class="${colorClass} border-l-4 p-6 my-8 rounded-r-lg shadow-sm">
+        <div class="${colorClass} border-l-4 p-6 my-8 rounded-r-xl shadow-sm">
             <div class="flex items-start">
                 <span class="mr-4 text-2xl flex-shrink-0">${icon}</span>
-                <div class="flex-1 leading-7 text-lg">${content}</div>
+                <div class="flex-1 leading-relaxed text-base font-medium">${content}</div>
             </div>
         </div>
-    `.trim();
+    `.trim()
 }
 
 /**
@@ -209,24 +270,24 @@ function processCallout(callout) {
  * @returns {string} HTML string
  */
 function processBookmark(bookmark) {
-    const url = bookmark.url;
-    const title = bookmark.caption?.[0]?.plain_text || "Bookmark";
-    
+    const url = bookmark.url
+    const title = bookmark.caption?.[0]?.plain_text || "Bookmark"
+
     return `
         <div class="my-8">
-            <a href="${url}" target="_blank" rel="noopener noreferrer" class="block border border-gray-200 rounded-lg p-6 hover:border-gray-300 hover:shadow-lg transition-all duration-200 bg-white">
+            <a href="${url}" target="_blank" rel="noopener noreferrer" class="block border border-slate-200 rounded-xl p-6 hover:border-slate-300 hover:shadow-lg transition-all duration-300 bg-white hover:bg-slate-50">
                 <div class="flex items-center">
                     <div class="flex-1 min-w-0">
-                        <p class="font-semibold text-gray-900 truncate text-lg">${escapeHtml(title)}</p>
-                        <p class="text-sm text-gray-500 truncate mt-1">${url}</p>
+                        <p class="font-semibold text-slate-900 truncate text-lg">${escapeHtml(title)}</p>
+                        <p class="text-sm text-slate-500 truncate mt-2">${url}</p>
                     </div>
-                    <svg class="w-6 h-6 text-gray-400 ml-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-6 h-6 text-slate-400 ml-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                     </svg>
                 </div>
             </a>
         </div>
-    `.trim();
+    `.trim()
 }
 
 /**
@@ -235,18 +296,18 @@ function processBookmark(bookmark) {
  * @returns {string} HTML string
  */
 function processToggle(toggle) {
-    const content = processRichText(toggle.rich_text, "div", "");
+    const content = processRichText(toggle.rich_text, "div", "")
     return `
         <details class="my-6">
-            <summary class="cursor-pointer font-semibold text-gray-700 hover:text-gray-900 text-lg leading-7">
+            <summary class="cursor-pointer font-semibold text-slate-700 hover:text-slate-900 text-lg leading-relaxed transition-colors duration-200">
                 ${content}
             </summary>
-            <div class="mt-4 pl-6 border-l-2 border-gray-200">
+            <div class="mt-4 pl-6 border-l-2 border-slate-200">
                 <!-- Toggle content would go here if Notion API provided it -->
-                <p class="text-gray-600 text-base italic">Toggle content not available in current API</p>
+                <p class="text-slate-600 text-base italic">Toggle content not available in current API</p>
             </div>
         </details>
-    `.trim();
+    `.trim()
 }
 
 /**
@@ -257,24 +318,28 @@ function processToggle(toggle) {
  * @returns {string} HTML string
  */
 function processRichText(richText, tag, className) {
-    if (!richText || richText.length === 0) return "";
-    
-    const content = richText.map(text => {
-        let result = text.plain_text;
-        
-        // Apply annotations
-        if (text.annotations.bold) result = `<strong class="font-bold">${result}</strong>`;
-        if (text.annotations.italic) result = `<em class="italic">${result}</em>`;
-        if (text.annotations.strikethrough) result = `<del class="line-through">${result}</del>`;
-        if (text.annotations.code) result = `<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800">${result}</code>`;
-        
-        // Apply links
-        if (text.href) result = `<a href="${text.href}" class="text-blue-600 hover:text-blue-800 underline font-medium" target="_blank" rel="noopener noreferrer">${result}</a>`;
-        
-        return result;
-    }).join("");
-    
-    return `<${tag} class="${className}">${content}</${tag}>`;
+    if (!richText || richText.length === 0) return ""
+
+    const content = richText
+        .map((text) => {
+            let result = text.plain_text
+
+            // Apply annotations
+            if (text.annotations.bold) result = `<strong class="font-bold">${result}</strong>`
+            if (text.annotations.italic) result = `<em class="italic">${result}</em>`
+            if (text.annotations.strikethrough) result = `<del class="line-through">${result}</del>`
+            if (text.annotations.code)
+                result = `<code class="bg-slate-100 px-2 py-1 rounded-md text-sm font-mono text-slate-800 border border-slate-200">${result}</code>`
+
+            // Apply links
+            if (text.href)
+                result = `<a href="${text.href}" class="text-indigo-600 hover:text-indigo-800 underline font-medium transition-colors duration-200" target="_blank" rel="noopener noreferrer">${result}</a>`
+
+            return result
+        })
+        .join("")
+
+    return `<${tag} class="${className}">${content}</${tag}>`
 }
 
 /**
@@ -284,15 +349,15 @@ function processRichText(richText, tag, className) {
  */
 function escapeHtml(text) {
     const map = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#039;'
-    };
-    return text.replace(/[&<>"']/g, m => map[m]);
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;",
+    }
+    return text.replace(/[&<>"']/g, (m) => map[m])
 }
 
 module.exports = {
-    getPostBySlug
+    getPostBySlug,
 }

package/blog.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  notionToken: process.env.NOTION_TOKEN,
-  notionDatabaseId: process.env.NOTION_DATABASE_ID,
-  routeBasePath: '/blog',
-  theme: 'default',
-  plugins: [],
-};