adding Slug

_posts/firstblog.md

@@ -7,7 +7,7 @@ preview: >-
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
   when an unknown printer took a galley of type and scrambled it to make a type
   specimen book.
-ogImage: >-
+image: >-
   https://images.pexels.com/photos/12319913/pexels-photo-12319913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
 keywords: "Keyword One, Keyword Two"
 author:

pages/blog/[slug].js

@@ -0,0 +1,65 @@
+import React from "react";
+import { getPostBySlug, getAllPosts } from "../../utils/api";
+import markdownToHtml from "../../utils/markdownToHtml";
+import Header from "../../components/Header";
+
+const BlogPost = ({ post }) => {
+  console.log(post);
+  return (
+    <div className="container mx-auto mt-10">
+      <Header isBlog={true} />
+      <div className="mt-10 flex flex-col">
+        <img
+          className="w-full h-96 rounded-lg shadow-lg object-cover"
+          src={post.image}></img>
+        <h1 className="mt-10 text-4xl mob:text-2xl laptop:text-6xl text-bold">
+          {post.title}
+        </h1>
+        <h2 className="mt-2 text-xl max-w-4xl text-darkgray opacity-50">
+          {post.tagline}
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export async function getStaticProps({ params }) {
+  const post = getPostBySlug(params.slug, [
+    "date",
+    "slug",
+    "title",
+    "tagline",
+    "preview",
+    "image",
+    "keywords",
+    "author",
+    "readingtime",
+    "content",
+  ]);
+  const content = await markdownToHtml(post.content || "");
+
+  return {
+    props: {
+      post: {
+        ...post,
+        content,
+      },
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  const posts = getAllPosts(["slug"]);
+
+  return {
+    paths: posts.map((post) => {
+      return {
+        params: {
+          slug: post.slug,
+        },
+      };
+    }),
+    fallback: false,
+  };
+}
+export default BlogPost;

pages/blog/index.js

@@ -1,9 +1,9 @@
 import { getAllPosts } from "../../utils/api";
 import { ISOToDate } from "../../utils";
 import Header from "../../components/Header";
+import Router, { useRouter } from "next/router";
 
 const Blog = ({ posts }) => {
-  console.log(posts);
   return (
     <div className="container mx-auto mb-10">
       <Header isBlog={true}></Header>
@@ -14,7 +14,10 @@ const Blog = ({ posts }) => {
         <div className="mt-10 grid grid-cols-3 gap-10">
           {posts &&
             posts.map((post, index) => (
-              <div className="w-96 cursor-pointer" key={index}>
+              <div
+                className="w-96 cursor-pointer"
+                key={index}
+                onClick={() => Router.push(`/blog/${post.slug}`)}>
                 <img
                   className="w-full h-60 rounded-lg shadow-lg"
                   src="https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"></img>