diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..4da2104
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+ webpack: function (config) {
+ config.module.rules.push({
+ test: /\.md$/,
+ use: 'raw-loader',
+ });
+
+ return config;
+ },
+};
diff --git a/package.json b/package.json
index 9694ae4..aa7bc77 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,16 @@
},
"dependencies": {
"@headlessui/react": "^1.4.0",
+ "gray-matter": "^4.0.3",
"next": "^11.1.3",
+ "raw-loader": "^4.0.2",
"react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "react-markdown": "^7.1.0"
},
"devDependencies": {
"@types/react": "^17.0.15",
+ "@types/webpack-env": "^1.16.3",
"autoprefixer": "^10.3.1",
"postcss": "^8.3.6",
"tailwind-bootstrap-grid": "^4.0.0",
diff --git a/posts/2021-11-28-hello-world.md b/posts/2021-11-28-hello-world.md
new file mode 100644
index 0000000..bf8f8f2
--- /dev/null
+++ b/posts/2021-11-28-hello-world.md
@@ -0,0 +1,8 @@
+---
+author: Matheus Calegaro
+date: '2021-11-28T21:20:00.000-03:00'
+# hero_image: ../static/alfons-taekema-bali.jpg
+title: 'Hello world!'
+---
+
+First post
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 2ff84cb..1945b3f 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -15,6 +15,7 @@ export function Navbar({ absolute }: NavbarProps) {
{ title: '/index', href: '/' },
{ title: '/about', href: '/about' },
{ title: '/uses', href: '/uses' },
+ { title: '/blog', href: '/blog' },
];
const renderNavLinks = (): JSX.Element[] =>
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
new file mode 100644
index 0000000..594d4c5
--- /dev/null
+++ b/src/pages/blog.tsx
@@ -0,0 +1,65 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import matter from 'gray-matter';
+
+import { Layout } from '../components';
+
+export default function BlogIndexPage(props) {
+ return (
+ <>
+
+ Blog posts - Matheus Calegaro
+
+
+
+ <>
+ Blog
+
+
+
+
+
+ );
+}
+
+export async function getStaticProps() {
+ const posts = ((context) => {
+ const keys = context.keys();
+ const values = keys.map(context);
+
+ const data = keys.map((key, index) => {
+ const slug = key
+ .replace(/^.*[\\\/]/, '')
+ .split('.')
+ .slice(0, -1)
+ .join('.');
+
+ const value = values[index];
+
+ // @ts-ignore
+ const document = matter(value.default);
+
+ return {
+ frontmatter: document.data,
+ markdownBody: document.content,
+ slug,
+ };
+ });
+
+ return data;
+ })(require.context('../../posts', true, /\.md$/));
+
+ return {
+ props: {
+ allPosts: posts,
+ },
+ };
+}
diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx
new file mode 100644
index 0000000..dfe97df
--- /dev/null
+++ b/src/pages/blog/[slug].tsx
@@ -0,0 +1,63 @@
+import fs from 'fs';
+import { join } from 'path';
+import matter from 'gray-matter';
+import ReactMarkdown from 'react-markdown';
+import Head from 'next/head';
+
+import { Layout } from '../../components';
+
+const POSTS_PATH = join(process.cwd(), 'posts');
+
+export default function BlogPostPage(props) {
+ return (
+ <>
+
+ {props.frontmatter.title} - Blog - Matheus Calegaro
+
+
+
+
+
+ {props.frontmatter.title}
+
+
+
+
{children};
+ },
+ }}
+ />
+