chalknotes 0.0.25 → 0.0.27

package/README.md

@@ -9,6 +9,9 @@
 - 📄 Fetch blog posts from Notion
 - 🪄 Auto-generate routes for App Router or Page Router
 - ⚙️ Helpers for `getStaticProps` / `getStaticPaths`
+- 🎨 Clean, responsive themes (light & dark mode)
+- 🔧 Interactive configuration setup
+- 📁 Customizable route paths
 - 🧠 Minimal setup – just run `chalknotes`
 
 ---
@@ -25,28 +28,64 @@ npm install chalknotes
 
 ## 🧙‍♂️ Quick Start
 
-```bash
-npx chalknotes
-```
+1. **Set up environment variables**
+   ```bash
+   # Create .env file
+   NOTION_TOKEN=secret_...
+   NOTION_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxx
+   ```
+
+2. **Run the CLI**
+   ```bash
+   npx chalknotes
+   ```
 
-- Automatically detects if you're using **App Router** or **Page Router**
-- Generates blog routes at `/blog/[slug]`
-- You’re done ✅
+3. **That's it!** ✅
+   - Automatically detects if you're using **App Router** or **Page Router**
+   - Creates `blog.config.js` with default configuration (if needed)
+   - Generates blog routes with clean, responsive templates
+   - Supports light and dark themes
 
 ---
 
-## 🔧 Setup
+## 🔧 Configuration
+
+The CLI creates a `blog.config.js` file in your project root. Customize it to match your needs:
+
+```javascript
+module.exports = {
+  // Notion Configuration
+  notionToken: process.env.NOTION_TOKEN,
+  notionDatabaseId: process.env.NOTION_DATABASE_ID,
+  
+  // Blog Configuration
+  routeBasePath: '/blog',  // Default: '/blog'
+  theme: 'default',        // Options: 'default' (light) or 'dark'
+  plugins: [],
+};
+```
 
-Make sure your `.env` file contains:
+### Configuration Options
 
-```env
-NOTION_TOKEN=secret_...
-NOTION_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxx
-```
+- **`routeBasePath`**: Customize your blog route (e.g., `/posts`, `/articles`)
+- **`theme`**: Choose between `'default'` (light mode) or `'dark'` (dark mode)
+- **`plugins`**: Array for future plugin support
+
+---
+
+## 🎨 Themes
+
+### Default Theme (Light Mode)
+- Clean white cards with subtle shadows
+- Light gray background
+- Dark text for optimal readability
+- Responsive design with Tailwind CSS
 
-Your Notion database should have:
-- A **"Name"** title property
-- A **"Published"** checkbox property
+### Dark Theme
+- Dark background with gray cards
+- White text with proper contrast
+- Inverted typography for dark mode
+- Same responsive layout
 
 ---
 
@@ -57,7 +96,7 @@ Your Notion database should have:
 Creates:
 
 ```js
-// pages/blog/[slug].js
+// pages/blog/[slug].js (or custom route)
 import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
 
 export const getStaticProps = getStaticPropsForPost;
@@ -65,10 +104,19 @@ export const getStaticPaths = getStaticPathsForPosts;
 
 export default function BlogPost({ post }) {
   return (
-    <article>
-      <h1>{post.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: post.content }} />
-    </article>
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
   );
 }
 ```
@@ -80,17 +128,26 @@ export default function BlogPost({ post }) {
 Creates:
 
 ```jsx
-// app/blog/[slug]/page.jsx
+// app/blog/[slug]/page.jsx (or custom route)
 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>
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
   );
 }
 ```
@@ -134,12 +191,32 @@ For use with `getStaticPaths` in Page Router.
 
 ---
 
+## 🎨 Styling
+
+The generated templates use Tailwind CSS with:
+- Clean, minimal design
+- Responsive layout
+- Typography optimized for readability
+- Proper spacing and hierarchy
+- Light and dark mode support
+
+Make sure you have Tailwind CSS installed in your project:
+
+```bash
+npm install -D tailwindcss @tailwindcss/typography
+```
+
+---
+
 ## 📅 Roadmap
 
-- [ ] Rich block support (images, lists, toggles, etc)
+- [ ] Plugin system for custom components
+- [ ] More Notion block support (images, lists, code blocks)
 - [ ] RSS feed support
 - [ ] MDX or Markdown output option
-- [ ] Custom blog.config.js support
+- [ ] Custom theme templates
+- [ ] Search functionality
+- [ ] Categories and tags support
 
 ---
 

package/bin/cli.js

@@ -1,20 +1,95 @@
 #!/usr/bin/env node
 const fs = require("fs");
 const path = require("path");
+const dotenv = require("dotenv");
+const readline = require("readline");
+dotenv.config();
 
-console.log("Initializing ChalkNotes...");
+console.log("🚀 Initializing ChalkNotes...");
+
+// Check environment variables
+if (!process.env.NOTION_TOKEN) {
+    console.error("❌ NOTION_TOKEN is not set in .env file");
+    console.log("💡 Please create a .env file with your NOTION_TOKEN");
+    process.exit(1);
+}
+
+if (!process.env.NOTION_DATABASE_ID) {
+    console.error("❌ NOTION_DATABASE_ID is not set in .env file");
+    console.log("💡 Please create a .env file with your NOTION_DATABASE_ID");
+    process.exit(1);
+}
+
+console.log("✅ Environment variables are set");
 
 const configPath = path.join(process.cwd(), 'blog.config.js');
-const pageRouter = path.join(process.cwd(), '/pages')
-const appRouter = path.join(process.cwd(), '/app')
 
+// Check if blog.config.js exists
+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,
+  routeBasePath: '/blog',
+  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!");
+        } else {
+            console.log("❌ Please create a blog.config.js file and try again.");
+        }
+        rl.close();
+    });
+    return;
+}
 
-if (fs.existsSync(pageRouter)) {
-    console.log("✅ Page router found");
-    const slugDir = path.join(pageRouter, "blog", "[slug].js")
-    const dirPath = path.dirname(slugDir);
+// Load configuration
+let config;
+try {
+    config = require(configPath);
+} catch (error) {
+    console.error("❌ Error loading blog.config.js:", error.message);
+    process.exit(1);
+}
 
-    const pageRouterTemplate = `
+// Set defaults for missing config values
+config.routeBasePath = config.routeBasePath || '/blog';
+config.theme = config.theme || 'default';
+
+console.log("✅ Configuration loaded successfully");
+console.log(`📁 Route base path: ${config.routeBasePath}`);
+console.log(`🎨 Theme: ${config.theme}`);
+
+// Ask to proceed with scaffolding
+console.log("\n🔨 Ready to scaffold your blog page?");
+console.log("This will create a clean, responsive blog template using Tailwind CSS.");
+console.log("Press Enter to continue or Ctrl+C to cancel...");
+
+// Create blog page templates based on theme and route
+const pageRouter = path.join(process.cwd(), '/pages')
+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';
 
 export const getStaticProps = getStaticPropsForPost;
@@ -22,53 +97,129 @@ export const getStaticPaths = getStaticPathsForPosts;
 
 export default function BlogPost({ post }) {
   return (
-    <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>
+    <div className="min-h-screen bg-gray-900">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
   );
-}
-`.trim();
+}`.trim(),
+            appRouter: `
+import { getPostBySlug } from 'chalknotes';
 
-    fs.mkdirSync(dirPath, { recursive: true });
-    fs.writeFileSync(slugDir, pageRouterTemplate)
-} else if (fs.existsSync(appRouter)) {
-    console.log("✅ App router found");
-    const slugDir = path.join(appRouter, 'blog', "[slug]", "page.jsx")
-    const dirPath = path.dirname(slugDir);
+export default async function BlogPost({ params }) {
+  const post = await getPostBySlug(params.slug);
 
-    const appRouterTemplate = `
+  return (
+    <div className="min-h-screen bg-gray-900">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
+  );
+}`.trim()
+        };
+    } else {
+        // Default theme (light mode)
+        return {
+            pageRouter: `
+import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
+
+export const getStaticProps = getStaticPropsForPost;
+export const getStaticPaths = getStaticPathsForPosts;
+
+export default function BlogPost({ post }) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
+  );
+}`.trim(),
+            appRouter: `
 import { getPostBySlug } from 'chalknotes';
 
 export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
 
   return (
-    <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>
+    <div className="min-h-screen bg-gray-50">
+      <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <article className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+          <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 }} 
+          />
+        </article>
+      </main>
+    </div>
   );
+}`.trim()
+        };
+    }
 }
-`.trim();
 
+// Create blog page templates
+if (fs.existsSync(pageRouter)) {
+    console.log("✅ Page router found");
+    const routePath = config.routeBasePath.replace(/^\//, ''); // Remove leading slash
+    const slugDir = path.join(pageRouter, routePath, "[slug].js")
+    const dirPath = path.dirname(slugDir);
+
+    const templates = getTemplates(config.theme, config.routeBasePath);
+    
+    fs.mkdirSync(dirPath, { recursive: true });
+    fs.writeFileSync(slugDir, templates.pageRouter);
+    console.log(`✅ Created pages/${routePath}/[slug].js`);
+    
+} else if (fs.existsSync(appRouter)) {
+    console.log("✅ App router found");
+    const routePath = config.routeBasePath.replace(/^\//, ''); // Remove leading slash
+    const slugDir = path.join(appRouter, routePath, "[slug]", "page.jsx")
+    const dirPath = path.dirname(slugDir);
+
+    const templates = getTemplates(config.theme, config.routeBasePath);
+    
     fs.mkdirSync(dirPath, { recursive: true });
-    fs.writeFileSync(slugDir, appRouterTemplate)
+    fs.writeFileSync(slugDir, templates.appRouter);
+    console.log(`✅ Created app/${routePath}/[slug]/page.jsx`);
+    
 } else {
-    console.log("❌ Page router and app router not found");
+    console.log("❌ Neither pages/ nor app/ directory found");
+    console.log("💡 Please make sure you're running this in a Next.js project");
+    process.exit(1);
 }
 
-// if (!fs.existsSync(configPath)) {
-//     const configTemplate = `
-// module.exports = {
-//   notionDatabaseId: '',
-//   notionToken: process.env.NOTION_TOKEN,
-//   routeBasePath: '/blog',
-//   plugins: [],
-// };
-// `;
-//     fs.writeFileSync(configPath, configTemplate.trim());
-//     console.log("✅ Created blog.config.js");
-// } else {
-//     console.log("⚠️  blog.config.js already exists");
-// }
+console.log("\n🎉 Blog page scaffolded successfully!");
+console.log(`\n📝 Next steps:`);
+console.log("1. Add Tailwind CSS to your project if not already installed");
+console.log("2. Start your development server");
+console.log(`3. Visit ${config.routeBasePath}/[your-post-slug] to see your blog`);

package/blog.config.js

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

package/package.json

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

package/src/lib/getPostBySlug.js

@@ -12,6 +12,9 @@ const getPostBySlug = async (slug) => {
                 }
             }
         })
+        if (response.results.length === 0) {
+            throw new Error("No posts found");
+        }
 
         for (const page of response.results) {
             const titleProperty = page.properties["Name"];
@@ -24,24 +27,7 @@ const getPostBySlug = async (slug) => {
                 })
                 let content = ""
                 for (const block of response.results) {
-                    switch (block.type) {
-                        case "paragraph":
-                            const textHTML = block.paragraph.rich_text.map(text => text.plain_text).join("");
-                            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 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 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 class="text-lg font-bold mb-4">${heading3HTML}</h3>`
-                            break;
-                    }
+                    content += processBlock(block);
                 }
                 return {
                     title,
@@ -59,29 +45,222 @@ const getPostBySlug = async (slug) => {
     }
 }
 
-module.exports = {
-    getPostBySlug
+/**
+ * Process individual Notion blocks and convert to HTML
+ * @param {Object} block - Notion block object
+ * @returns {string} HTML string
+ */
+function processBlock(block) {
+    switch (block.type) {
+        case "paragraph":
+            return processRichText(block.paragraph.rich_text, "p", "mb-4");
+            
+        case "heading_1":
+            return processRichText(block.heading_1.rich_text, "h1", "text-3xl font-bold mb-6");
+            
+        case "heading_2":
+            return processRichText(block.heading_2.rich_text, "h2", "text-2xl font-bold mb-5");
+            
+        case "heading_3":
+            return processRichText(block.heading_3.rich_text, "h3", "text-xl font-bold mb-4");
+            
+        case "bulleted_list_item":
+            return processRichText(block.bulleted_list_item.rich_text, "li", "mb-2");
+            
+        case "numbered_list_item":
+            return processRichText(block.numbered_list_item.rich_text, "li", "mb-2");
+            
+        case "quote":
+            return processRichText(block.quote.rich_text, "blockquote", "border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-4");
+            
+        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-100 p-4 rounded-lg overflow-x-auto mb-4"><code class="language-${language}">${escapeHtml(codeContent)}</code></pre>`;
+            
+        case "image":
+            return processImage(block.image);
+            
+        case "divider":
+            return '<hr class="my-8 border-gray-300" />';
+            
+        case "callout":
+            return processCallout(block.callout);
+            
+        case "toggle":
+            return processToggle(block.toggle);
+            
+        case "table_of_contents":
+            return '<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4"><p class="text-blue-800 font-medium">📋 Table of Contents</p><p class="text-blue-600 text-sm">(Generated automatically)</p></div>';
+            
+        case "bookmark":
+            return processBookmark(block.bookmark);
+            
+        case "equation":
+            return `<div class="bg-gray-50 p-4 rounded-lg mb-4 text-center"><p class="text-gray-600">📐 Mathematical equation</p><p class="font-mono text-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-4 text-gray-500");
+            }
+            return "";
+    }
 }
-// const slugify = (title) =>
-//     title
-//         .toLowerCase()
-//         .replace(/[^a-z0-9]+/g, "-")
-//         .replace(/(^-|-$)/g, "");
 
-// for (const page of response.results) {
-//     const titleProperty = page.properties["Name"];
-//     const title = titleProperty?.title?.[0]?.plain_text;
+/**
+ * Process image block with size, alignment, and alt text
+ * @param {Object} image - Notion image 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";
+    
+    // Get image size and alignment from Notion properties
+    let sizeClass = "w-full"; // Default full width
+    let alignmentClass = "text-center"; // Default center alignment
+    
+    // You can extend this based on Notion's image properties
+    // For now, we'll use responsive sizing
+    const responsiveClasses = "max-w-full h-auto rounded-lg shadow-sm";
+    
+    return `
+        <figure class="my-8 ${alignmentClass}">
+            <img 
+                src="${imageUrl}" 
+                alt="${escapeHtml(altText)}" 
+                class="${sizeClass} ${responsiveClasses}"
+                loading="lazy"
+            />
+            ${caption ? `<figcaption class="text-center text-gray-600 mt-2 text-sm">${escapeHtml(caption)}</figcaption>` : ''}
+        </figure>
+    `.trim();
+}
 
-//     const pageSlug = slugify(title);
+/**
+ * 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 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;
+    
+    return `
+        <div class="${colorClass} border-l-4 p-4 my-4 rounded-r-lg">
+            <div class="flex items-start">
+                <span class="mr-3 text-lg">${icon}</span>
+                <div class="flex-1">${content}</div>
+            </div>
+        </div>
+    `.trim();
+}
 
-//     if (pageSlug === slug) {
-//         // FOUND IT
-//         return {
-//             title,
-//             slug: pageSlug,
-//             notionPageId: page.id,
-//         };
-//     }
-// }
+/**
+ * Process toggle block
+ * @param {Object} toggle - Notion toggle block
+ * @returns {string} HTML string
+ */
+function processToggle(toggle) {
+    const content = processRichText(toggle.rich_text, "div", "");
+    return `
+        <details class="my-4">
+            <summary class="cursor-pointer font-medium text-gray-700 hover:text-gray-900">
+                ${content}
+            </summary>
+            <div class="mt-2 pl-4 border-l-2 border-gray-200">
+                <!-- Toggle content would go here if Notion API provided it -->
+                <p class="text-gray-600 text-sm">Toggle content not available in current API</p>
+            </div>
+        </details>
+    `.trim();
+}
 
-// throw new Error(`No post found with slug "${slug}"`);
+/**
+ * Process bookmark block
+ * @param {Object} bookmark - Notion bookmark block
+ * @returns {string} HTML string
+ */
+function processBookmark(bookmark) {
+    const url = bookmark.url;
+    const title = bookmark.caption?.[0]?.plain_text || "Bookmark";
+    
+    return `
+        <div class="my-4">
+            <a href="${url}" target="_blank" rel="noopener noreferrer" class="block border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors">
+                <div class="flex items-center">
+                    <div class="flex-1">
+                        <p class="font-medium text-gray-900">${escapeHtml(title)}</p>
+                        <p class="text-sm text-gray-500 truncate">${url}</p>
+                    </div>
+                    <svg class="w-5 h-5 text-gray-400 ml-2" 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();
+}
+
+/**
+ * Process rich text and apply formatting
+ * @param {Array} richText - Array of rich text objects
+ * @param {string} tag - HTML tag to wrap content
+ * @param {string} className - CSS classes
+ * @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>${result}</strong>`;
+        if (text.annotations.italic) result = `<em>${result}</em>`;
+        if (text.annotations.strikethrough) result = `<del>${result}</del>`;
+        if (text.annotations.code) result = `<code class="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">${result}</code>`;
+        
+        // Apply links
+        if (text.href) result = `<a href="${text.href}" class="text-blue-600 hover:text-blue-800 underline" target="_blank" rel="noopener noreferrer">${result}</a>`;
+        
+        return result;
+    }).join("");
+    
+    return `<${tag} class="${className}">${content}</${tag}>`;
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtml(text) {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, m => map[m]);
+}
+
+module.exports = {
+    getPostBySlug
+}