Skip to content

Commit 6ffc0f5

Browse files
mateonunezmateonunez
authored
refactor(blog): improve performance (#464)
* refactor(blog): improve performance Signed-off-by: mateonunez <mateonunez95@gmail.com> * chore: lint and fix Signed-off-by: mateonunez <mateonunez95@gmail.com> * chore(parser): fix code hype Signed-off-by: mateonunez <mateonunez95@gmail.com> * perf: some adjustments Signed-off-by: mateonunez <mateonunez95@gmail.com> * chore: lint and fix Signed-off-by: mateonunez <mateonunez95@gmail.com> * chor: remove useConsistentCurlyBraces warning Signed-off-by: mateonunez <mateonunez95@gmail.com> * perf(about): improve style Signed-off-by: mateonunez <mateonunez95@gmail.com> * chore: change copy Signed-off-by: mateonunez <mateonunez95@gmail.com> * chore: change copy Signed-off-by: mateonunez <mateonunez95@gmail.com> --------- Signed-off-by: mateonunez <mateonunez95@gmail.com>
1 parent bab35d3 commit 6ffc0f5

File tree

26 files changed

+387
-319
lines changed

26 files changed

+387
-319
lines changed

‎app/api/spotify/currently-listening/route.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export async function GET() {
66
const response = await getCurrentlyListening();
77

88
if (!response) {
9-
console.log(response);
109
return NextResponse.json({ error: 'Spotify not available' }, { status: 503 });
1110
}
1211

‎app/blog/[slug]/(page)/page-client.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use client';
2+
3+
import s from 'components/articles/article.module.css';
4+
import Article from 'components/articles';
5+
6+
export default function ArticlePageClient({ source, frontmatter }) {
7+
return (
8+
<div className={s.root}>
9+
<Article frontMatter={frontmatter} source={source} />
10+
</div>
11+
);
12+
}

‎app/blog/[slug]/(page)/page.jsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import articleStyle from 'components/articles/article.module.css';
2+
import articleContentStyle from 'components/articles/content/content.module.css';
3+
import ArticlePageClient from './page-client';
4+
import meta from 'lib/config/metadata.js';
5+
import config from 'lib/config';
6+
import { getArticle } from 'lib/articles/parser';
7+
8+
export async function generateMetadata({ params }) {
9+
const { slug } = await params;
10+
const { frontmatter } = await getArticle({ slug });
11+
const baseUrl = new URL(config.baseUrl);
12+
const imagePath = frontmatter.image.startsWith('/') ? frontmatter.image : `/${frontmatter.image}`;
13+
const imageUrl = new URL(imagePath, baseUrl).toString();
14+
15+
const dynamicMetadata = {
16+
...meta,
17+
title: frontmatter.title,
18+
description: frontmatter.description,
19+
keywords: frontmatter.tags,
20+
openGraph: {
21+
...meta.openGraph,
22+
title: frontmatter.title,
23+
description: frontmatter.description,
24+
type: 'article',
25+
article: {
26+
authors: [frontmatter.author.name],
27+
tags: frontmatter.tags,
28+
publishedTime: frontmatter.date,
29+
modifiedTime: frontmatter.date,
30+
},
31+
images: [
32+
{
33+
url: imageUrl,
34+
alt: frontmatter.title,
35+
},
36+
],
37+
},
38+
};
39+
return dynamicMetadata;
40+
}
41+
42+
export default async function ArticlePage({ params }) {
43+
const { slug } = await params;
44+
const { compiledSource, frontmatter } = await getArticle({ slug });
45+
return (
46+
<div className={articleStyle.root}>
47+
<div className={articleContentStyle.root}>
48+
<ArticlePageClient source={compiledSource} frontmatter={frontmatter} />
49+
</div>
50+
</div>
51+
);
52+
}

‎app/blog/[slug]/page.jsx‎

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

‎app/blog/authors/[author]/page.jsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,17 @@ export default async function BlogAuthor({ params }) {
1919
const articles = (await getAllArticles()).filter((article) => kebapCase(article.author.name) === author);
2020

2121
return (
22-
<>
23-
<Container clean>
24-
{/* Capitalize author */}
25-
<Title>{author.at(0).toUpperCase() + author.slice(1)}</Title>
22+
<Container clean>
23+
{/* Capitalize author */}
24+
<Title>{author.at(0).toUpperCase() + author.slice(1)}</Title>
2625

27-
<div className={s.root}>
28-
<div className="container">
29-
{articles.map((article) => (
30-
<ArticlePreview key={article.slug} {...article} />
31-
))}
32-
</div>
26+
<div className={s.root}>
27+
<div className="container">
28+
{articles.map((article) => (
29+
<ArticlePreview key={article.slug} {...article} />
30+
))}
3331
</div>
34-
</Container>
35-
</>
32+
</div>
33+
</Container>
3634
);
3735
}

‎app/blog/page.jsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,18 @@ export const metadata = {
1313

1414
export default async function Blog() {
1515
const articles = await getAllArticles();
16+
1617
return (
17-
<>
18-
<Container clean>
19-
<Title>Blog</Title>
18+
<Container clean>
19+
<Title>Blog</Title>
2020

21-
<div className={s.root}>
22-
<div className="container">
23-
{articles.map((article) => (
24-
<ArticlePreview key={article.slug} {...article} />
25-
))}
26-
</div>
21+
<div className={s.root}>
22+
<div className="container">
23+
{articles.map((article) => (
24+
<ArticlePreview key={article.frontmatter.slug} {...article.frontmatter} />
25+
))}
2726
</div>
28-
</Container>
29-
</>
27+
</div>
28+
</Container>
3029
);
3130
}

‎app/blog/tags/[tag]/page.jsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,16 @@ export default async function BlogTag({ params }) {
2121
});
2222

2323
return (
24-
<>
25-
<Container clean>
26-
<Title>{tag}</Title>
24+
<Container clean>
25+
<Title>{tag}</Title>
2726

28-
<div className={s.root}>
29-
<div className="container">
30-
{articles.map((article) => (
31-
<ArticlePreview key={article.slug} {...article} />
32-
))}
33-
</div>
27+
<div className={s.root}>
28+
<div className="container">
29+
{articles.map((article) => (
30+
<ArticlePreview key={article.slug} {...article} />
31+
))}
3432
</div>
35-
</Container>
36-
</>
33+
</div>
34+
</Container>
3735
);
3836
}

‎articles/nextjs-appdir-migration.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ This is an example of my default `metadata` object:
217217
import config from './index';
218218
const author = {
219219
name: 'Mateo Nunez',
220-
twitter: '@mateonunez95',
220+
twitter: '@mmateonunez',
221221
github: '@mateonunez',
222222
email: 'mateonunez95@gmail.com',
223223
website: 'https://mateonunez.dev'
@@ -273,7 +273,7 @@ const metadata = {
273273
card: 'summary_large_image',
274274
title: `${defaultTitle} on Twitter`,
275275
description: defaultDescription,
276-
creator: '@mateonunez95'
276+
creator: '@mmateonunez'
277277
},
278278
viewport: {
279279
width: 'device-width',
@@ -521,6 +521,6 @@ Next.js 13 is still in beta, so there are some things that doesn't work as expec
521521
522522
I think that the migration to the new `app` directory is not so difficult. I hope that this article will help you to migrate your application to the new `app` directory.
523523
524-
If you have any questions or suggestions, feel free to text me on [Twitter](https://twitter.com/mateonunez95) or check this repository on [GitHub](https://github.com/mateonunez/website).
524+
If you have any questions or suggestions, feel free to text me on [Twitter](https://twitter.com/mmateonunez) or check this repository on [GitHub](https://github.com/mateonunez/website).
525525
526526
Bye! 👋

‎articles/you-should-use-node-test-act-two.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ I've finally decided to finish this article while waiting for my plane to come h
4747
</Column>
4848
</Row>
4949

50-
I've been working on a still WIP [PR](https://github.com/mateonunez/website/pull/406), but Next.js and MDX aren't being very cooperative. However, the outcome is fantastic, and you can check it out [here](https://twitter.com/mateonunezx/status/1746231890024042881).
50+
I've been working on a still WIP [PR](https://github.com/mateonunez/website/pull/406), but Next.js and MDX aren't being very cooperative. However, the outcome is fantastic, and you can check it out [here](https://twitter.com/mmateonunez/status/1746231890024042881).
5151

5252
Anyway, let's talk about the new Node Test Runner. In the [previous article](/blog/you-should-use-node-test-act-one) I introduced to the new Node Test Runner, and I explained why I think it's a good idea to use it. In this article I'm going to talk about some of the features that I think are really useful.
5353

‎biome.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"useComponentExportOnlyModules": "off",
1717
"noCommonJs": "off",
1818
"useSortedClasses": "off",
19-
"noProcessEnv": "off"
19+
"noProcessEnv": "off",
20+
"useConsistentCurlyBraces": "off"
2021
},
2122
"correctness": {
2223
"all": true,

0 commit comments

Comments
 (0)