✨ Posts

content/posts.ts

@@ -0,0 +1,47 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+
+const postsDirectory = path.join(process.cwd(), "content", "posts");
+
+export interface Post {
+  id: string;
+  title: string;
+  thumbnail?: string;
+  description?: string;
+  content?: string;
+  date: Date;
+}
+
+export function getSortedPosts() {
+  const fileNames = fs.readdirSync(postsDirectory);
+  const allPostsData: Post[] = fileNames.map((fileName) => {
+    const id = fileName.replace(/\.md$/, "");
+
+    const fullPath = path.join(postsDirectory, fileName);
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+
+    const matterResult = matter(fileContents);
+
+    return {
+      id,
+      ...matterResult.data
+    } as Post;
+  });
+
+  return allPostsData.sort((a, b) => {
+    return a.date < b.date ? 1 : -1;
+  });
+}
+
+export function getSinglePost(id: string) {
+  const fullPath = path.join(postsDirectory, id + ".md");
+  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const matterResult = matter(fileContents);
+
+  return {
+    id,
+    content: matterResult.content,
+    ...matterResult.data,
+  } as Post;
+}

content/posts/initial.md

@@ -0,0 +1,14 @@
+---
+thumbnail: 'https://images.unsplash.com/photo-1707344088547-3cf7cea5ca49?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+title: 'Two Forms of Pre-rendering'
+date: '2020-01-01'
+---
+
+# Woah!
+
+Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
+
+- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
+- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.
+
+Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.