Fetching data examples

blogs/2022-review.md

@@ -0,0 +1,6 @@
+---
+title: My 2022 year in review
+author: Anuradha Kumari
+---
+
+2022 was an amazing year.

blogs/deployment.md

@@ -0,0 +1,6 @@
+---
+title: How to deploy NextJS app
+author: Anuradha Kumari
+---
+
+Let's use vercel to deploy.

blogs/next-js.md

@@ -0,0 +1,7 @@
+---
+title: Getting started with Next.js
+author: Anuradha Kumari
+---
+
+
+[Next.js](https://nextjs.org/) is so amazing.

components/Layout.jsx

@@ -0,0 +1,15 @@
+import markdownStyles from './markdown-styles.module.css';
+
+const Layout = ({ post }) => {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1>{post.title}</h1>
+      <div
+        className={markdownStyles['markdown']}
+        dangerouslySetInnerHTML={{ __html: post.content }}
+      />
+    </div>
+  );
+};
+
+export default Layout;

components/markdown-styles.module.css

@@ -0,0 +1,18 @@
+.markdown {
+  @apply text-lg leading-relaxed;
+}
+
+.markdown p,
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+  @apply my-6;
+}
+
+.markdown h1 {
+  @apply text-3xl mt-12 mb-4 leading-snug;
+}
+
+.markdown h2 {
+  @apply text-2xl mt-8 mb-4 leading-snug;
+}