text: import React from "react";
  import fs from "fs";
  import path from "path";
  import matter from "gray-matter";
  import marked from "marked";
  import Link from "next/link";
  
  export default function PostPage({
    frontmatter: { title, date, cover_image },
    content,
    slug,
  }) {
    return (
      <>
        <Link href="/">
          <a className="btn btn-back">Go back</a>
        </Link>
        <div className="card card-page">
          <h1 className="post-title">{title}</h1>
          <div className="post-date">Posted on {date}</div>
          <img src={cover_image} alt="" />
          <div className="post-body">
            <div dangerouslySetInnerHTML={{ __html: marked(content) }}></div>
          </div>
        </div>
      </>
    );
  }
  
  export const getStaticPaths = async () => {
    const files = fs.readdirSync(path.join("posts"));
  
    const paths = files.map((filename) => ({
      params: { slug: filename.replace(".md", "") },
    }));
  
    console.log(paths);
  
    return {
      paths,
      fallback: false,
    };
  };
  
  export const getStaticProps = async ({ params: { slug } }) => {
    const markdownWithMeta = fs.readFileSync(
      path.join("posts", `${slug}.md`),
      "utf-8"
    );
  
    const { data: frontmatter, content } = matter(markdownWithMeta);
    return {
      props: {
        frontmatter,
        content,
        slug,
      },
    };
  };
  