Skip to content

Commit e2c96e9

Browse files
mxkaskemxkaske
committed
fix: build and update blog
1 parent c1a5539 commit e2c96e9

File tree

20 files changed

+216
-284
lines changed

20 files changed

+216
-284
lines changed

‎apps/web/contentlayer.config.ts‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
11
import { makeSource } from "contentlayer/source-files";
2-
import rehypeAutolinkHeadings from "rehype-autolink-headings";
3-
import rehypePrettyCode from "rehype-pretty-code";
42
import rehypeSlug from "rehype-slug";
53
import remarkGfm from "remark-gfm";
64

7-
import { Post } from "./src/lib/contentlayer/documents/Post";
8-
import { rehypePrettyCodeOptions } from "./src/lib/contentlayer/rehype-pretty-code";
5+
import { Post } from "./src/contentlayer/documents/post";
6+
import autolinkHeadings from "./src/contentlayer/plugins/autolink-headings";
7+
import prettyCode from "./src/contentlayer/plugins/pretty-code";
98

109
export default makeSource({
11-
// Location of source files for all defined documentTypes
1210
contentDirPath: "src/content/",
1311
documentTypes: [Post],
1412
mdx: {
15-
remarkPlugins: [[remarkGfm]],
16-
rehypePlugins: [
17-
[rehypeSlug],
18-
[rehypePrettyCode, rehypePrettyCodeOptions],
19-
[
20-
rehypeAutolinkHeadings,
21-
{
22-
behavior: "wrap",
23-
properties: {
24-
className: `before:content-['#'] before:absolute before:-ml-[1em] before:text-white-100/0 hover:before:text-white-100/50 pl-[1em] -ml-[1em]`,
25-
},
26-
},
27-
],
28-
],
13+
remarkPlugins: [remarkGfm],
14+
rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
2915
},
3016
});

‎apps/web/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
7-
"build": "contentlayer build && next build",
7+
"build": "next build",
88
"start": "next start",
99
"lint": "next lint"
1010
},
@@ -76,6 +76,7 @@
7676
"remark-gfm": "^3.0.1",
7777
"tailwindcss": "3.3.2",
7878
"tsconfig": "workspace:*",
79-
"typescript": "5.1.3"
79+
"typescript": "5.1.3",
80+
"unified": "^10.1.2"
8081
}
8182
}

‎apps/web/src/app/blog/[slug]/page.tsx‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import Link from "next/link";
33
import { notFound } from "next/navigation";
44
import { allPosts } from "contentlayer/generated";
55

6-
import { BackButton } from "@/components/layout/back-button";
7-
import { Footer } from "@/components/layout/footer";
8-
import { Mdx } from "@/components/mdx";
6+
import { Mdx } from "@/components/content/mdx";
7+
import { formatDate } from "@/lib/utils";
8+
9+
export const dynamic = "force-static";
910

1011
export async function generateStaticParams() {
1112
return allPosts.map((post) => ({
@@ -17,7 +18,7 @@ export async function generateMetadata({
1718
params,
1819
}: {
1920
params: { slug: string };
20-
}): Promise<Metadata | undefined> {
21+
}): Promise<Metadata | void> {
2122
const post = allPosts.find((post) => post.slug === params.slug);
2223
if (!post) {
2324
return;
@@ -56,35 +57,23 @@ export default function PostPage({ params }: { params: { slug: string } }) {
5657
if (!post) {
5758
notFound();
5859
}
59-
return (
60-
<>
61-
<article className="relative my-5 grid grid-cols-[1fr,min(90%,100%),1fr] gap-y-8 sm:grid-cols-[1fr,min(90%,100%),1fr] sm:pt-8 md:grid md:grid-cols-[1fr,min(80%,100%),1fr] lg:grid-cols-[1fr,min(70%,100%),1fr] xl:grid-cols-[1fr,minmax(auto,240px),min(50%,100%),minmax(auto,240px),1fr] xl:gap-x-5 xl:px-0 [&>*]:col-start-2 xl:[&>*]:col-start-3">
62-
<div>
63-
<BackButton />
64-
</div>
6560

66-
<section className="mt-1">
67-
<div className="mt-2 w-full sm:pointer-events-none xl:!col-end-5">
68-
<h1 className="text-3xl font-bold sm:text-4xl">{post.title}</h1>
69-
</div>
70-
<div className="mt-2 flex flex-col items-center justify-between sm:flex-row">
71-
<div>
72-
<Link href={post.authorLink}>{post.author}</Link>
73-
<span className="text-muted-foreground">
74-
{" / "}
75-
{post.publishedAtFormatted}
76-
</span>
77-
</div>
78-
<div className="text-muted-foreground text-sm sm:pointer-events-none lg:text-base">
79-
~{post.readingTime}
80-
</div>
81-
</div>
82-
</section>
83-
84-
{/* load Post content stored in .mdx format */}
61+
// TODO: add author.avatar and author.url
62+
return (
63+
<article className="grid gap-8">
64+
<div className="mx-auto grid max-w-prose gap-3">
65+
<h1 className="font-cal text-3xl">{post.title}</h1>
66+
<p className="text-muted-foreground text-sm font-light">
67+
{post.author.name}
68+
<span className="text-muted-foreground/70 mx-1">&bull;</span>
69+
{formatDate(new Date(post.publishedAt))}
70+
<span className="text-muted-foreground/70 mx-1">&bull;</span>
71+
{post.readingTime}
72+
</p>
73+
</div>
74+
<div className="mx-auto max-w-prose">
8575
<Mdx code={post.body.code} />
86-
</article>
87-
<Footer />
88-
</>
76+
</div>
77+
</article>
8978
);
9079
}

‎apps/web/src/app/blog/layout.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
3+
import { Shell } from "@/components/dashboard/shell";
4+
import { BackButton } from "@/components/layout/back-button";
5+
import { Footer } from "@/components/layout/footer";
6+
7+
export default function BlogLayout({
8+
children,
9+
}: {
10+
children: React.ReactNode;
11+
}) {
12+
return (
13+
<main className="container mx-auto flex min-h-screen w-full flex-col items-center justify-center space-y-6 p-4 md:p-8">
14+
<div className="z-10 flex w-full flex-1 flex-col items-start justify-center">
15+
<div className="mx-auto w-full max-w-prose">
16+
<BackButton />
17+
</div>
18+
<Shell className="mx-auto w-full max-w-prose">{children}</Shell>
19+
</div>
20+
<Footer />
21+
</main>
22+
);
23+
}

‎apps/web/src/app/blog/page.tsx‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,34 @@
11
import Link from "next/link";
22
import { allPosts } from "contentlayer/generated";
33

4-
import { BackButton } from "@/components/layout/back-button";
5-
import { Footer } from "@/components/layout/footer";
6-
import { getDisplayPosts } from "@/lib/contentlayer/utils";
4+
import { formatDate } from "@/lib/utils";
75

86
export default async function Post() {
9-
const posts = await getDisplayPosts(allPosts);
7+
const posts = allPosts.sort(
8+
(a, b) =>
9+
new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
10+
);
1011

1112
return (
12-
<main className="mx-5 mb-7 flex flex-col items-start pt-24 sm:mx-20 md:mx-32 md:pt-28 lg:mx-60 xl:mx-96">
13-
<h1 className="text-foreground font-cal mb-4 mt-2 text-5xl">Blog</h1>
14-
<BackButton />
15-
16-
{/* All posts */}
17-
<section className="mb-8 ">
18-
{posts.map((Post, idx) => (
19-
<div key={Post.slug} className="mt-10">
20-
<Link
21-
href={`/blog/${Post.slug}`}
22-
className="text-foreground font-cal text-2xl"
23-
>
24-
<span>{idx + 1}. </span>
25-
{Post.title}
26-
</Link>
27-
<p className="text-muted-foreground text-base">
28-
{Post.description}
29-
</p>
30-
31-
<div className="text-muted-foreground mt-2 flex flex-row justify-start gap-5 text-sm">
32-
<Link href={Post.authorLink} className="hidden sm:inline">
33-
{Post.author}
34-
</Link>
35-
<span className="hidden sm:inline">/</span>
36-
<p>{Post.publishedAtFormatted}</p>
37-
<span>/</span>
38-
<p>{Post.readingTime}</p>
39-
</div>
40-
</div>
13+
<div className="grid gap-8">
14+
<h1 className="text-foreground font-cal text-4xl">Blog</h1>
15+
<div>
16+
{posts.map((post) => (
17+
<Link href={`/blog/${post.slug}`} key={post.slug}>
18+
<section>
19+
<p className="text-foreground font-cal text-2xl">{post.title}</p>
20+
<p className="text-muted-foreground">{post.description}</p>
21+
<p className="text-muted-foreground mt-1 text-xs">
22+
{post.author.name}
23+
<span className="text-muted-foreground/70 mx-1">&bull;</span>
24+
{formatDate(new Date(post.publishedAt))}
25+
<span className="text-muted-foreground/70 mx-1">&bull;</span>
26+
{post.readingTime}
27+
</p>
28+
</section>
29+
</Link>
4130
))}
42-
</section>
43-
<Footer />
44-
</main>
31+
</div>
32+
</div>
4533
);
4634
}

‎apps/web/src/app/page.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,6 @@ export default async function Page() {
3737
Star on GitHub
3838
</a>
3939
</Button>
40-
<Button variant="link">
41-
<Link href="/blog">Blog</Link>
42-
</Button>
4340
</div>
4441
<HeroForm />
4542
</div>

‎apps/web/src/components/content/mdx-components.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import Link from "next/link";
3+
4+
export const components = {
5+
a: ({
6+
href = "",
7+
...props
8+
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
9+
if (href.startsWith("http")) {
10+
return (
11+
<a
12+
className="text-foreground underline underline-offset-4 hover:no-underline"
13+
href={href}
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
{...props}
17+
/>
18+
);
19+
}
20+
21+
return (
22+
<Link
23+
href={href}
24+
className="text-foreground underline underline-offset-4 hover:no-underline"
25+
{...props}
26+
/>
27+
);
28+
},
29+
};

apps/web/src/components/Mdx.tsx renamed to apps/web/src/components/content/mdx.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ export function Mdx({ code }: MdxProps) {
1010
const MDXComponent = getMDXComponent(code);
1111

1212
return (
13-
<main className="prose prose-quoteless prose-neutral dark:prose-invert mb-6 max-w-none">
13+
// FIXME: weird behaviour when `prose-headings:font-cal` and on mouse movement font gets bigger
14+
<div className="prose prose-neutral dark:prose-invert">
1415
<MDXComponent components={{ ...components }} />
15-
</main>
16+
</div>
1617
);
1718
}

‎apps/web/src/components/mdx-components.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎apps/web/src/content/posts/hello-world.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
title: Understanding Hoisting and Promises in JavaScript
33
description:
44
Understanding two important concepts in JavaScript - hoisting and promises.
5-
author: Nikhil Mohite
6-
authorLink: https://nikhilmohite.com
5+
author:
6+
name: Nikhil Mohite
7+
url: https://nikhilmohite.com
78
publishedAt: 2023-07-16
89
---
910

10-
Understanding two important concepts in JavaScript: hoisting and promises.
11-
1211
## Understanding Hoisting and Promises in JavaScript
1312

1413
JavaScript is a versatile programming language that offers a wide range of
@@ -88,3 +87,5 @@ variable and function declarations to be moved to the top of their scope,
8887
enabling early access to these entities. Promises, on the other hand, provide a
8988
structured and readable approach to managing asynchronous operations, enhancing
9089
code maintainability and error handling.
90+
91+
[test link](https://openstatus.dev)

0 commit comments

Comments
 (0)