Skip to content

Commit 69d20f0

Browse files
lofi-marzlofi-marz
committed
End result
1 parent f17e09b commit 69d20f0

File tree

8 files changed

+113
-44
lines changed

8 files changed

+113
-44
lines changed

‎posts/first-post.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: My First Post
3+
description: Today is my first post!
4+
publishedAt: 1990/01/02
5+
---
6+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

‎posts/hello-world.mdx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
1-
2-
Hello world!
1+
---
2+
title: Hello World!
3+
description: Hello from .mdx!
4+
publishedAt: 2022/11/20
5+
---
6+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

‎posts/my-holiday.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: My Holiday
3+
description: My holiday to Upmostlyland
4+
publishedAt: 2022/11/22
5+
---
6+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

‎src/pages/index.tsx

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,73 @@
11
import Head from 'next/head';
2+
import { GetStaticPaths, GetStaticProps } from 'next';
3+
import {
4+
BlogPostFrontmatter,
5+
findAllPostSlugs,
6+
getPath,
7+
loadMdxFromSlug,
8+
} from '../utils';
9+
import fs from 'fs/promises';
10+
import matter from 'gray-matter';
11+
import { serialize } from 'next-mdx-remote/serialize';
12+
import Link from 'next/link';
13+
type HomeProps = {
14+
posts: { slug: string; data: BlogPostFrontmatter }[];
15+
};
216

3-
export default function Home() {
17+
function PostListItem({ slug, data }: HomeProps['posts'][number]) {
18+
const { title, description } = data;
419
return (
5-
<div className="dark flex min-h-screen w-full items-center justify-center">
20+
<li className="card p-5 ">
21+
<Link href={`/posts/${slug}`}>
22+
<div className="text-2xl font-bold">{title}</div>
23+
<div>{description}</div>
24+
</Link>
25+
</li>
26+
);
27+
}
28+
export default function Home({ posts }: HomeProps) {
29+
console.log(posts);
30+
posts.sort((a, b) => {
31+
return (
32+
new Date(b.data.publishedAt).getDate() -
33+
new Date(a.data.publishedAt).getDate()
34+
);
35+
});
36+
return (
37+
<div className="flex min-h-screen w-full items-center justify-center dark:bg-stone-900 dark:text-white">
638
<Head>
7-
<title>Hello World!</title>
39+
<title>My Mdx Blog</title>
840
<link rel="icon" href="/favicon.ico" />
941
</Head>
10-
<main>hi!</main>
42+
<div className="">
43+
<ul className="flex flex-col gap-4">
44+
{posts.map((p) => (
45+
<PostListItem key={p.data.title} {...p} />
46+
))}
47+
</ul>
48+
</div>
1149
</div>
1250
);
1351
}
52+
53+
export const getStaticProps: GetStaticProps = async () => {
54+
// MDX text - can be from a local file, database, anywhere
55+
const allSlugs = await findAllPostSlugs();
56+
const allSources = await Promise.all(
57+
allSlugs.map(async (slug) => {
58+
const source = await loadMdxFromSlug(slug);
59+
return { slug, source };
60+
})
61+
);
62+
63+
//We only want the slug and the frontmatter
64+
const posts = allSources.map(({ slug, source }) => {
65+
return { slug, data: source.data };
66+
});
67+
68+
return {
69+
props: {
70+
posts,
71+
},
72+
};
73+
};

‎src/pages/posts/[slug].tsx

Lines changed: 11 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,33 @@ import {
66
import { serialize } from 'next-mdx-remote/serialize';
77
import { GetStaticPaths, GetStaticProps } from 'next';
88
import matter from 'gray-matter';
9-
import { findAllPostSlugs, getPath } from '../../utils';
9+
import {
10+
BlogPostFrontmatter,
11+
findAllPostSlugs,
12+
getPath,
13+
loadMdxFromSlug,
14+
} from '../../utils';
1015
import * as fs from 'fs';
1116

12-
type BlogPostFrontmatter = {
13-
title: string;
14-
datePosted: Date;
15-
};
1617
type BlogPostProps = {
1718
source: MDXRemoteSerializeResult;
1819
frontMatter: BlogPostFrontmatter;
1920
};
2021
export default function BlogPost({ source, frontMatter }: BlogPostProps) {
21-
console.log(source);
22+
console.log(frontMatter);
2223
return (
2324
<div className="flex min-h-screen w-full items-center justify-center dark:bg-stone-900">
2425
<div className="prose prose-invert h-full w-full rounded border border-stone-700 p-10 shadow dark:bg-stone-800">
26+
<h1>{frontMatter.title}</h1>
27+
<h2>{frontMatter.description}</h2>
2528
<MDXRemote {...source} />
2629
</div>
2730
</div>
2831
);
2932
}
3033

3134
export const getStaticProps: GetStaticProps = async ({ params }) => {
32-
// MDX text - can be from a local file, database, anywhere
33-
//TODO: Make a const for this
34-
const filePath = getPath(params?.slug as string);
35-
const source = fs.readFileSync(filePath);
36-
const { content, data } = matter(source);
35+
const { content, data } = await loadMdxFromSlug(params?.slug as string);
3736
const mdxSource = await serialize(content, {
3837
// Optionally pass remark/rehype plugins
3938
mdxOptions: {
@@ -48,28 +47,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
4847
frontMatter: data,
4948
},
5049
};
51-
/*
52-
const filePath = getSketchDescriptionPath(params?.sketch as string);
53-
const source = fs.readFileSync(filePath);
54-
55-
const { content, data } = matter(source);
56-
console.log('Data:', data);
57-
const mdxSource = await serialize(content, {
58-
// Optionally pass remark/rehype plugins
59-
mdxOptions: {
60-
remarkPlugins: [],
61-
rehypePlugins: [],
62-
},
63-
scope: data,
64-
});
65-
console.log('Source:', mdxSource);
66-
67-
return {
68-
props: {
69-
source: mdxSource,
70-
frontMatter: data,
71-
},
72-
};*/
7350
};
7451

7552
export const getStaticPaths: GetStaticPaths = async () => {
@@ -79,6 +56,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
7956
paths: slugs.map((slug) => {
8057
return { params: { slug } };
8158
}),
82-
fallback: true, // false or 'blocking'
59+
fallback: false, // false or 'blocking'
8360
};
8461
};

‎src/styles/globals.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,8 @@
99
}
1010
}
1111

12+
@layer components {
13+
.card {
14+
@apply rounded border border-stone-700 shadow dark:bg-stone-800 !important
15+
}
16+
}

‎src/utils.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import path from 'path';
2-
import * as fs from 'fs';
2+
33
import glob from 'tiny-glob';
4+
import matter from 'gray-matter';
5+
import fs from 'fs/promises';
6+
7+
export type BlogPostFrontmatter = {
8+
title: string;
9+
description: string;
10+
publishedAt: string;
11+
};
412

513
export function pascalToKebabCase(pascalString: string): string {
614
return pascalString
@@ -27,8 +35,6 @@ export function findAllPostSlugs() {
2735
return glob(path.join(BLOG_PATH, '*.mdx')).then((paths) =>
2836
paths.map(getSlug)
2937
);
30-
31-
// Only include md(x) files
3238
}
3339

3440
function getSlug(slugPath: string) {
@@ -40,6 +46,11 @@ export function getPath(slug: string) {
4046
return path.join(BLOG_PATH, slug + '.mdx');
4147
}
4248

49+
export async function loadMdxFromSlug(slug: string) {
50+
const path = getPath(slug);
51+
const source = await fs.readFile(path);
52+
return matter(source);
53+
}
4354
/*export function findAllSketchDescriptionFullPaths() {
4455
return fs
4556
.readdirSync(SKETCH_PATH)

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "esnext",
44
"lib": [
55
"dom",
66
"dom.iterable",

0 commit comments

Comments
 (0)