chalknotes 0.0.32 → 0.0.34

package/bin/cli.js

@@ -9,15 +9,15 @@ 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);
+  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.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");
@@ -26,19 +26,19 @@ const configPath = path.join(process.cwd(), 'blog.config.js');
 
 // 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.");
+  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
-    });
+  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...");
+  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 = {
+      const configTemplate = `module.exports = {
   notionToken: process.env.NOTION_TOKEN,
   notionDatabaseId: process.env.NOTION_DATABASE_ID,
   routeBasePath: '/blog',
@@ -46,24 +46,24 @@ if (!fs.existsSync(configPath)) {
   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;
+      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;
 }
 
 // Load configuration
 let config;
 try {
-    config = require(configPath);
+  config = require(configPath);
 } catch (error) {
-    console.error("❌ Error loading blog.config.js:", error.message);
-    process.exit(1);
+  console.error("❌ Error loading blog.config.js:", error.message);
+  process.exit(1);
 }
 
 // Set defaults for missing config values
@@ -85,56 +85,11 @@ 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;
-
-export default function BlogPost({ post }) {
-  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>
-          <NotionRenderer blocks={post.blocks} />
-        </article>
-      </main>
-    </div>
-  );
-}`.trim(),
-            appRouter: `
-import { getPostBySlug } from 'chalknotes';
-import NotionRenderer from './NotionRenderer';
-
-export default async function BlogPost({ params }) {
-  const post = await getPostBySlug(params.slug);
+  const routePath = routeBasePath.replace(/^\//, ''); // Remove leading slash
 
-  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>
-          <NotionRenderer blocks={post.blocks} />
-        </article>
-      </main>
-    </div>
-  );
-}`.trim()
-        };
-    } else {
-        // Default theme (light mode)
-        return {
-            pageRouter: `
+  // Both themes now use responsive dark mode
+  return {
+    pageRouter: `
 import { getStaticPropsForPost, getStaticPathsForPosts } from 'chalknotes';
 import NotionRenderer from './NotionRenderer';
 
@@ -143,10 +98,10 @@ export const getStaticPaths = getStaticPathsForPosts;
 
 export default function BlogPost({ post }) {
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <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">
+        <article className="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:shadow-lg border border-gray-200 dark:border-gray-700 p-8">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
             {post.title}
           </h1>
           <NotionRenderer blocks={post.blocks} />
@@ -155,7 +110,7 @@ export default function BlogPost({ post }) {
     </div>
   );
 }`.trim(),
-            appRouter: `
+    appRouter: `
 import { getPostBySlug } from 'chalknotes';
 import NotionRenderer from './NotionRenderer';
 
@@ -163,10 +118,10 @@ export default async function BlogPost({ params }) {
   const post = await getPostBySlug(params.slug);
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <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">
+        <article className="bg-white dark:bg-gray-800 rounded-lg shadow-sm dark:shadow-lg border border-gray-200 dark:border-gray-700 p-8">
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
             {post.title}
           </h1>
           <NotionRenderer blocks={post.blocks} />
@@ -175,28 +130,18 @@ export default async function BlogPost({ params }) {
     </div>
   );
 }`.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);
-    
-    // Create NotionRenderer component in the same directory as the blog page
-    const notionRendererContent = `import React from "react";
+// NotionRenderer component template
+const notionRendererTemplate = `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 prose-headings:font-semibold prose-headings:text-gray-900 dark:prose-headings:text-gray-100 prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-li:text-gray-700 dark:prose-li:text-gray-300">
+    <div className="max-w-none">
       {blocks.map((block, i) => {
         switch (block.type) {
           case "heading_1":
@@ -300,119 +245,44 @@ export default function NotionRenderer({ blocks }) {
     </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`);
-    
-} 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);
-
-    
-    // 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>;
+// 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);
 
-          case "paragraph":
-            return <p key={i}>{block.text}</p>;
+  const templates = getTemplates(config.theme, config.routeBasePath);
 
-          case "bulleted_list_item":
-            return (
-              <ul key={i} className="list-disc ml-6">
-                <li>{block.text}</li>
-              </ul>
-            );
+  // Create NotionRenderer component in the same directory as the blog page
+  fs.mkdirSync(dirPath, { recursive: true });
+  fs.writeFileSync(path.join(dirPath, 'NotionRenderer.jsx'), notionRendererTemplate);
+  console.log(`✅ Created ${routePath}/NotionRenderer.jsx`);
 
-          case "numbered_list_item":
-            return (
-              <ol key={i} className="list-decimal ml-6">
-                <li>{block.text}</li>
-              </ol>
-            );
+  fs.writeFileSync(slugDir, templates.pageRouter);
+  console.log(`✅ Created pages/${routePath}/[slug].js`);
 
-          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>
-            );
+} 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);
 
-          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>
-            );
+  const templates = getTemplates(config.theme, config.routeBasePath);
 
-          case "divider":
-            return <hr key={i} className="my-8 border-slate-300" />;
+  // Create NotionRenderer component in the same directory as the blog page
+  fs.mkdirSync(dirPath, { recursive: true });
+  fs.writeFileSync(path.join(dirPath, 'NotionRenderer.jsx'), notionRendererTemplate);
+  console.log(`✅ Created ${routePath}/[slug]/NotionRenderer.jsx`);
 
-          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"
-                  unoptimized={true}
-                />
-                {block.caption && (
-                  <figcaption className="text-sm text-center text-slate-500 mt-2 italic">
-                    {block.caption}
-                  </figcaption>
-                )}
-              </figure>
-            );
+  fs.writeFileSync(slugDir, templates.appRouter);
+  console.log(`✅ Created app/${routePath}/[slug]/page.jsx`);
 
-          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`);
-    
 } else {
-    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);
+  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);
 }
 
 console.log("\n🎉 Blog page scaffolded successfully!");

package/package.json

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

package/src/lib/getPostBySlug.js

@@ -105,6 +105,23 @@ function convertBlockToStructuredJSON(block) {
         case "divider":
             return { ...base };
 
+        case "callout":
+            return { ...base };
+
+        case "toggle":
+            return { ...base };
+
+        case "table_of_contents":
+            return { ...base };
+        case "bookmark":
+            return { ...base };
+
+        case "equation":
+            return { ...base };
+
+        case "table":
+            return { ...base };
+
         default:
             return {
                 ...base,