From 180cff8f634bde1e90424dea6648d08aab08d47c Mon Sep 17 00:00:00 2001
From: mohamed yahia
Date: Thu, 30 Nov 2023 20:26:34 +0200
Subject: [PATCH 1/5] [#68,examples/nextjs-blog][m]: an example plus tutorial
in readme - see #68.
---
examples/nextjs-blog/.gitignore | 32 +
examples/nextjs-blog/README.md | 103 ++
examples/nextjs-blog/jsconfig.json | 7 +
examples/nextjs-blog/next.config.js | 6 +
examples/nextjs-blog/package-lock.json | 406 ++++++
examples/nextjs-blog/package.json | 16 +
.../src/content/embracing-minimalism.md | 29 +
.../src/content/remote-work-productivity.md | 31 +
examples/nextjs-blog/src/pages/_app.js | 3 +
examples/nextjs-blog/src/pages/_document.js | 13 +
examples/nextjs-blog/src/pages/index.js | 32 +
package-lock.json | 1161 ++++++++++++++++-
package.json | 1 +
13 files changed, 1790 insertions(+), 50 deletions(-)
create mode 100644 examples/nextjs-blog/.gitignore
create mode 100644 examples/nextjs-blog/README.md
create mode 100644 examples/nextjs-blog/jsconfig.json
create mode 100644 examples/nextjs-blog/next.config.js
create mode 100644 examples/nextjs-blog/package-lock.json
create mode 100644 examples/nextjs-blog/package.json
create mode 100644 examples/nextjs-blog/src/content/embracing-minimalism.md
create mode 100644 examples/nextjs-blog/src/content/remote-work-productivity.md
create mode 100644 examples/nextjs-blog/src/pages/_app.js
create mode 100644 examples/nextjs-blog/src/pages/_document.js
create mode 100644 examples/nextjs-blog/src/pages/index.js
diff --git a/examples/nextjs-blog/.gitignore b/examples/nextjs-blog/.gitignore
new file mode 100644
index 0000000..55175ef
--- /dev/null
+++ b/examples/nextjs-blog/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
diff --git a/examples/nextjs-blog/README.md b/examples/nextjs-blog/README.md
new file mode 100644
index 0000000..dd24db8
--- /dev/null
+++ b/examples/nextjs-blog/README.md
@@ -0,0 +1,103 @@
+# MarkdownDB Next.js Blog Tutorial
+
+This tutorial guides you through creating a simple Next.js-based blog using MarkdownDB. MarkdownDB empowers you to treat markdown files as a database, simplifying content management and querying.
+
+## Step 1: Set Up a Next.js Project
+
+Begin by creating a Next.js project. If Next.js is not installed, execute the following command, and make sure to include Tailwind:
+
+```bash
+npx create-next-app nextjs-blog
+cd nextjs-blog
+```
+
+## Step 2: Create a Folder for Blog Posts
+
+Establish a folder to store your blog posts within your project. For instance:
+
+```bash
+mkdir src/content
+cd src/content
+```
+
+Inside the content folder, create two sample blog posts using markdown, such as:
+
+```bash
+- embracing-minimalism.md
+- remote-work-productivity.md
+```
+
+## Step 3: Index Markdown Files into SQLite Database
+
+After preparing markdown files, store their metadata in a database using the MarkdownDB CLI. Execute the following command:
+
+```bash
+npx mddb ./content
+```
+
+## Step 4: Move `.markdowndb` Folder with `files.json` to the src Directory
+
+## Step 5: Load Blog Posts Using MarkdownDB
+
+Edit `pages/index.js`. Use the following code snippet:
+
+### Component 1: BlogList
+
+```jsx
+import fs from "fs";
+import Link from "next/link";
+import styles from "@/styles/Home.module.css";
+
+export default function Home({ posts }) {
+ return (
+ <>
+
+
+
Blog Posts
+
+ {posts.map((post) => (
+ -
+
{post.metadata.title}
+
+ ))}
+
+
+
Blog Posts
+
+ {posts.map((post) => (
+ -
+
{post.metadata.title}
+
+ ))}
+
+