✨ Posts
This commit is contained in:
47
content/posts.ts
Normal file
47
content/posts.ts
Normal file
@ -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;
|
||||
}
|
14
content/posts/initial.md
Normal file
14
content/posts/initial.md
Normal file
@ -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.
|
Reference in New Issue
Block a user