Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic blog example in the readme #76

Merged
merged 10 commits into from
Nov 30, 2023
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions examples/nextjs-blog/.gitignore
Original file line number Diff line number Diff line change
@@ -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
102 changes: 102 additions & 0 deletions examples/nextjs-blog/README.md
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we follow the structure we set out in the issue ...

Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
# 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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd add a bit more about the cool things it will allow us to do ...


## 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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we maybe want to go the simple json files route?


```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**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use a heading rather than bold.


```jsx
import fs from "fs";
import Link from "next/link";
import styles from "@/styles/Home.module.css";

export default function Home({ posts }) {
return (
<>
<main className={styles.main}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i thought we were going to remove the styles stuff ...

<div>
<h2>Blog Posts</h2>
<ul>
{posts.map((post) => (
<li>
<h3>{post.metadata.title}</h3>
</li>
))}
</ul>
</div>
</main>
</>
);
}

export async function getStaticProps() {
const filePath = "src/.markdowndb/files.json";
const fileContent = fs.readFileSync(filePath, "utf-8");
const posts = JSON.parse(fileContent);

return {
props: {
posts,
},
};
}
```

## Step 6: Run Your Next.js App

Run your Next.js app to view your blog in action:

```bash
npm run dev
```

Visit http://localhost:3000/blog to see your blog posts listed.

Congratulations! You've successfully created a simple Next.js blog using MarkdownDB. Explore more features and customize your blog as needed.

**Flag:** While `mddb` may not offer significantly more than manual handling, it stands out as a straightforward, extensively tested, and lightweight library.

**Additional Features:**

- **Tag Querying:** Easily retrieve tags from all files, streamlining organization and categorization.
- **Backward/Forward Links:** Establish links for enhanced file interconnectivity and navigation.
- **Custom Field Calculation:** Automatically calculate custom fields based on file content, reducing manual effort.
- **Schema Validation:** Ensure file adherence to a predefined schema for data integrity.
7 changes: 7 additions & 0 deletions examples/nextjs-blog/jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}
6 changes: 6 additions & 0 deletions examples/nextjs-blog/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}

module.exports = nextConfig
Loading
Loading