mathcale · mathcale · Nov 29, 2021 · Nov 29, 2021 · Apr 13, 2022 · Apr 13, 2022
diff --git a/next.config.js 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
@@ -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
@@ -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
@@ -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
@@ -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 (
+    <>
+      <Head>
+        <title>Blog posts - Matheus Calegaro</title>
+      </Head>
+
+      <Layout>
+        <>
+          <h1 className="my-12 text-5xl md:text-6xl text-white font-extrabold">Blog</h1>
+
+          <ul>
+            {props.allPosts.map((post, i) => (
+              <li key={i}>
+                <Link href={{ pathname: `/blog/${post.slug}` }}>
+                  <a className="text-white mt-3">{post.frontmatter.title}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </>
+      </Layout>
+    </>
+  );
+}
+
+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
@@ -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 (
+    <>
+      <Head>
+        <title>{props.frontmatter.title} - Blog - Matheus Calegaro</title>
+      </Head>
+
+      <Layout>
+        <article className="mt-7">
+          <h1 className="my-12 text-5xl md:text-6xl text-white font-extrabold">
+            {props.frontmatter.title}
+          </h1>
+
+          <div>
+            <ReactMarkdown
+              children={props.markdownBody}
+              components={{
+                p({ children, ...props }) {
+                  return <p className="text-white">{children}</p>;
+                },
+              }}
+            />
+          </div>
+        </article>
+      </Layout>
+    </>
+  );
+}
+
+export async function getStaticProps({ ...ctx }) {
+  const { slug } = ctx.params;
+  const content = await import(`../../../posts/${slug}.md`);
+  const data = matter(content.default);
+
+  return {
+    props: {
+      frontmatter: data.data,
+      markdownBody: data.content,
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  const paths = fs
+    .readdirSync(POSTS_PATH)
+    .map((path) => path.replace(/\.md?$/, ''))
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+}