-
Notifications
You must be signed in to change notification settings - Fork 16
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
Changes from 8 commits
692415b
e9c4d19
56320cb
19261a9
2a89aa8
bb63f19
3e61c41
a09583d
a29a8b1
4214a4f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 |
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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** | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"compilerOptions": { | ||
"paths": { | ||
"@/*": ["./src/*"] | ||
} | ||
} | ||
} |
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 |
There was a problem hiding this comment.
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 ...