add blog components

examples/nextjs-blog/README.md

@@ -16,16 +16,15 @@ cd nextjs-blog
 Establish a folder to store your blog posts within your project. For instance:
 
 ```bash
-mkdir content
-cd content
+mkdir src/content
+cd src/content
 ```
 
 Inside the content folder, create three sample blog posts using markdown, such as:
 
 ```bash
-- post-1.md
-- post-2.md
-- post-3.md
+- embracing-minimalism.md
+- remote-work-productivity.md
 ```
 
 ## Step 3: Index Markdown Files into SQLite Database
@@ -36,26 +35,7 @@ After preparing markdown files, store their metadata in a database using the Mar
 npx mddb ./content
 ```
 
-This command generates a markdown.db file in the execution directory, alongside your project structure.
-
-```plaintext
-.
-├── markdown.db
-└── content
-    ├── post-1.md
-    ├── post-2.md
-    └── post-3.md
-```
-
-## Step 4: Explore the SQLite Database
-
-Explore the SQLite database using a viewer like [SQLite Browser](https://sqlitebrowser.org/). The database contains tables such as 'files,' 'file_tags,' 'links,' and 'tags,' storing metadata, tags, links, and tag information, respectively.
-
-Additionally, install the `mddb` package:
-
-```bash
-npm install mddb
-```
+## step 4: move `.markdowndb` folder with `files.json` to the src directory
 
 ## Step 5: Load Blog Posts Using MarkdownDB
 
@@ -64,59 +44,102 @@ Create a file for your blog listing page, e.g., `pages/blog.js`. Use the followi
 **Component 1: BlogList**
 
 ```jsx
-// BlogList.js
-import { useEffect, useState } from "react";
-import { MarkdownDB } from "markdowndb";
-
-const BlogList = () => {
-  const [posts, setPosts] = useState([]);
-
-  useEffect(() => {
-    const loadPosts = async () => {
-      const mdDB = new MarkdownDB();
-      await mdDB.init();
-      await mdDB.indexFolder("./content");
-
-      // Load all blog posts
-      const blogPosts = await mdDB.getFiles("./content");
-      setPosts(blogPosts);
-    };
-
-    loadPosts();
-  }, []);
+// blog-list.js
+import Link from "next/link";
+
+const BlogPostsList = ({ posts }) => {
+  if (!posts || !Array.isArray(posts)) {
+    return (
+      <div>
+        <h2>No Blog Posts Available</h2>
+      </div>
+    );
+  }
 
   return (
     <div>
-      <h1>Blog Posts</h1>
+      <h2>Blog Posts</h2>
       <ul>
         {posts.map((post) => (
-          <li key={post._id}>{post.title}</li>
+          <li key={post.id}>
+            <Link href={`/blog/${post.url_path}`}>
+              <h3>{post.metadata.title}</h3>
+            </Link>
+          </li>
         ))}
       </ul>
     </div>
   );
 };
 
-export default BlogList;
+export default BlogPostsList;
 ```
 
+Create a file for your blog page, `pages/blog/[url_path].js`. Use the following code snippet:
+
 **Component 2: BlogItem**
 
 ```jsx
-// BlogItem.js
-import React from "react";
+import ReactMarkdown from "react-markdown";
+import fs from "fs";
+import path from "path";
+
+const BlogPost = ({ post }) => {
+  const removeMetadata = (content) => {
+    // Assuming metadata is between '---' at the beginning of the content
+    const metadataRegex = /^---[\s\S]*?---/;
+    return content.replace(metadataRegex, "");
+  };
 
-const BlogItem = ({ post }) => {
-  // Customize the display of individual blog items
   return (
     <div>
-      <h2>{post.title}</h2>
-      <p>{post.content}</p>
+      <h1>{post.metadata.title}</h1>
+      <ul>
+        <li>
+          <strong>Tags:</strong> {post.tags.join(", ")}
+        </li>
+      </ul>
+      <div>
+        <ReactMarkdown>{removeMetadata(post.content)}</ReactMarkdown>
+      </div>
     </div>
   );
 };
 
-export default BlogItem;
+export async function getStaticPaths() {
+  const filePath = path.join(process.cwd(), "src/.markdowndb/files.json");
+  const fileContent = fs.readFileSync(filePath, "utf-8");
+  const posts = JSON.parse(fileContent);
+
+  // Generate paths for all posts
+  const paths = posts.map((post) => ({
+    params: { url_path: post.url_path },
+  }));
+
+  return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }) {
+  const filePath = path.join(process.cwd(), "src/.markdowndb/files.json");
+  const jsonContent = fs.readFileSync(filePath, "utf-8");
+  const posts = JSON.parse(jsonContent);
+  const post = posts.find((post) => post.url_path === params.url_path);
+
+  const contentPath = path.join(
+    process.cwd(),
+    `src/content/${params.url_path}.md`
+  );
+  const content = fs.readFileSync(contentPath, "utf-8");
+  post.content = content;
+
+  return {
+    props: {
+      post,
+    },
+  };
+}
+
+export default BlogPost;
 ```
 
 ## Step 6: Run Your Next.js App

examples/nextjs-blog/src/content/embracing-minimalism.md

@@ -0,0 +1,29 @@
+---
+title: Embracing-Minimalism-in-Everyday-Life
+date: 2023-11-29
+tags: minimalism, lifestyle, simplicity
+---
+
+# Embracing Minimalism in Everyday Life
+
+In a world filled with constant distractions and excess, the philosophy of minimalism has gained traction as a means to find peace and purpose. In this blog post, we'll explore the principles of minimalism and discuss practical ways to incorporate them into your daily routine.
+
+## Understanding Minimalism
+
+Minimalism is more than just decluttering physical spaces; it's a mindset that encourages intentional living. By focusing on what truly adds value to our lives and eliminating the unnecessary, we can create room for clarity and fulfillment.
+
+## Practical Tips for a Minimalist Lifestyle
+
+1. **Declutter Your Space:** Begin by assessing your living and working areas. Donate or discard items that no longer serve a purpose or bring joy.
+
+2. **Digital Detox:** Extend the principles of minimalism to your digital life. Clean up your digital devices by organizing files, deleting unused apps, and unsubscribing from unnecessary emails.
+
+3. **Mindful Consumption:** Be intentional about what you bring into your life. Before making a purchase, ask yourself if the item aligns with your values and if you truly need it.
+
+4. **Streamline Your Schedule:** Evaluate your commitments and prioritize activities that align with your goals and values. Learn to say no to unnecessary obligations.
+
+## The Benefits of Embracing Minimalism
+
+Embracing a minimalist lifestyle can lead to increased focus, reduced stress, and a greater sense of contentment. By consciously choosing simplicity, you can create a life that is more meaningful and aligned with your authentic self.
+
+In conclusion, minimalism is not about deprivation but rather about making room for what truly matters. Start small, embrace the process, and discover the joy that comes from living with intention.

examples/nextjs-blog/src/content/remote-work-productivity.md

@@ -0,0 +1,31 @@
+---
+title: The-Art-of-Remote-Work-Productivity
+date: 2023-11-29
+tags: remote work, productivity, work-from-home
+---
+
+# The Art of Remote Work Productivity
+
+With the rise of remote work, mastering the art of staying productive outside the traditional office setting has become essential. In this blog post, we'll explore practical strategies and tools to help you thrive in the world of remote work.
+
+## Creating a Productive Remote Work Environment
+
+1. **Designate a Dedicated Workspace:** Set up a dedicated and comfortable workspace that is free from distractions. This helps signal to your brain that it's time to focus when you enter this space.
+
+2. **Establish a Routine:** Stick to a consistent daily routine to create structure in your day. This includes regular working hours, breaks, and designated lunchtime.
+
+3. **Use Productivity Tools:** Leverage technology to enhance your productivity. Explore project management tools, communication platforms, and time-tracking apps that suit your workflow.
+
+## Overcoming Remote Work Challenges
+
+1. **Combatting Isolation:** Stay connected with your team through regular video calls and virtual meetings. Join online communities related to your industry to foster a sense of connection.
+
+2. **Setting Boundaries:** Clearly define your work hours and communicate them to your colleagues. Establishing boundaries helps prevent burnout and ensures a healthy work-life balance.
+
+3. **Prioritizing Communication:** Overcommunicate to compensate for the lack of face-to-face interactions. Provide regular updates on your progress and actively engage with your team.
+
+## The Future of Remote Work
+
+As remote work continues to evolve, adapting and refining your approach to productivity becomes crucial. By embracing the art of remote work productivity, you can not only meet but exceed your professional goals while enjoying the flexibility of working remotely.
+
+In conclusion, remote work is not just a location shift; it's a transformation in how we approach our work. With the right strategies and mindset, you can make remote work a fulfilling and productive experience.

examples/nextjs-blog/src/pages/blog-list.js

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import { formatDate } from '../utils/dateFormatter';
+
+const BlogPostsList = ({ posts }) => {
+    if (!posts || !Array.isArray(posts)) {
+        return (
+            <div>
+                <h2>No Blog Posts Available</h2>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <h2>Blog Posts</h2>
+            <ul>
+                {posts.map((post) => (
+                    <li key={post.id}>
+                        <Link href={`/blog/${post.url_path}`}>
+                            <h3>{post.metadata.title}</h3>
+                        </Link>
+                        <p>{formatDate(post.metadata.date)}</p>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+
+export default BlogPostsList;

examples/nextjs-blog/src/pages/blog/[url_path].js

@@ -0,0 +1,59 @@
+import ReactMarkdown from 'react-markdown';
+import { formatDate } from '../../utils/dateFormatter';
+import fs from 'fs';
+import path from 'path';
+
+const BlogPost = ({ post }) => {
+    const removeMetadata = (content) => {
+        // Assuming metadata is between '---' at the beginning of the content
+        const metadataRegex = /^---[\s\S]*?---/;
+        return content.replace(metadataRegex, '');
+    };
+
+    return (
+        <div>
+            <h1>{post.metadata.title}</h1>
+            <p>{formatDate(post.metadata.date)}</p>
+            <ul>
+                <li>
+                    <strong>Tags:</strong> {post.tags.join(', ')}
+                </li>
+            </ul>
+            <div>
+                <ReactMarkdown>{removeMetadata(post.content)}</ReactMarkdown>
+            </div>
+        </div>
+    );
+};
+
+export async function getStaticPaths() {
+    const filePath = path.join(process.cwd(), 'src/.markdowndb/files.json');
+    const fileContent = fs.readFileSync(filePath, 'utf-8');
+    const posts = JSON.parse(fileContent);
+
+    // Generate paths for all posts
+    const paths = posts.map((post) => ({
+        params: { url_path: post.url_path },
+    }));
+
+    return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }) {
+    const filePath = path.join(process.cwd(), 'src/.markdowndb/files.json');
+    const jsonContent = fs.readFileSync(filePath, 'utf-8');
+    const posts = JSON.parse(jsonContent);
+    const post = posts.find((post) => post.url_path === params.url_path);
+
+    const contentPath = path.join(process.cwd(), `src/content/${params.url_path}.md`);
+    const content = fs.readFileSync(contentPath, 'utf-8');
+    post.content = content;
+
+    return {
+        props: {
+            post,
+        },
+    };
+}
+
+export default BlogPost;