Skip to content

Commit 3780219

Browse files
doomsporkdoomspork
committed
chore: Update to Nextjs 15.2.3
1 parent 85c6b72 commit 3780219

11 files changed

Lines changed: 836 additions & 679 deletions

File tree

‎components/article-header.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,24 @@ import Avatar from './avatar'
22
import DateFormatter from './date-formatter'
33
import ArticleTitle from './article-title'
44

5-
export default function ArticleHeader({ title, date, authors }) {
5+
export default function ArticleHeader({ title, date, authors = [] }) {
66
return (
77
<>
88
<div className="max-w-2xl mx-right pl-6 pt-6">
99
<div className="text-lg font-bold">
1010
<DateFormatter dateString={date} />
1111
</div>
12-
<div className="flex flex-inline pb-2 pt-4">
13-
{authors.map((author) => {
14-
return <Avatar key={author.name} name={author.name} github={author.github} />
15-
})}
16-
</div>
12+
{authors && authors.length > 0 && (
13+
<div className="flex flex-inline pb-2 pt-4">
14+
{authors.map((author) => (
15+
<Avatar
16+
key={author.name || 'anonymous'}
17+
name={author.name}
18+
github={author.github}
19+
/>
20+
))}
21+
</div>
22+
)}
1723
</div>
1824
</>
1925
)

‎components/article-list.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
import { ar } from 'date-fns/locale'
22
import ArticlePreview from './article-preview'
33

4-
export default function ArticleList({ articles }) {
4+
export default function ArticleList({ articles = [] }) {
5+
if (!articles || articles.length === 0) {
6+
return (
7+
<section>
8+
<div className="flex flex-col mt-6">
9+
<p>No articles found.</p>
10+
</div>
11+
</section>
12+
)
13+
}
14+
515
return (
616
<section>
717
<div className="flex flex-col mt-6">

‎components/article-preview.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,34 @@ export default function ArticlePreview({
66
date,
77
excerpt,
88
slug,
9-
tags,
9+
tags = [],
1010
title,
1111
}) {
12+
if (!slug || !title) return null
13+
1214
return (
1315
<div className="px-6 flex flex-col items-start">
1416
<Link as={`/articles/${slug}`} href="/articles/[slug]">
1517
<a className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">{title}</a>
1618
</Link>
1719
<div className="inline-flex">
18-
<div className="text-lg font-bold text-gray-400 mr-6">
19-
<DateFormatter dateString={date} />
20-
</div>
21-
<div>
22-
<Tags key={slug} tags={tags} />
23-
</div>
20+
{date && (
21+
<div className="text-lg font-bold text-gray-400 mr-6">
22+
<DateFormatter dateString={date} />
23+
</div>
24+
)}
25+
<Tags tags={tags} />
2426
</div>
25-
<p className="leading-relaxed mt-4 mb-4">{excerpt}</p>
27+
{excerpt && <p className="leading-relaxed mt-4 mb-4">{excerpt}</p>}
2628
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-100 mt-auto w-full">
27-
<Link as={`/articles/${slug}`} href="/articles/[slug]">
28-
<a className="text-red-500 font-bold hover:underline hover:text-red-600 inline-flex items-center">Learn More
29-
<svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round">
30-
<path d="M5 12h14"></path>
31-
<path d="M12 5l7 7-7 7"></path>
32-
</svg>
33-
</a>
34-
</Link>
29+
<Link as={`/articles/${slug}`} href="/articles/[slug]">
30+
<a className="text-red-500 font-bold hover:underline hover:text-red-600 inline-flex items-center">Learn More
31+
<svg className="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round">
32+
<path d="M5 12h14"></path>
33+
<path d="M12 5l7 7-7 7"></path>
34+
</svg>
35+
</a>
36+
</Link>
3537
</div>
3638
</div>
3739
)

‎components/avatar.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
export default function Avatar({ name, github }) {
1+
export default function Avatar({ name = 'Anonymous', github }) {
2+
if (!name) return null
3+
24
return (
35
<div className="flex items-center">
46
<div className="text-2xl font-bold text-red-500 hover:text-red-600 pr-2">
5-
<a href={github}>{name}</a>
7+
{github ? (
8+
<a href={github} target="_blank" rel="noopener noreferrer">{name}</a>
9+
) : (
10+
<span>{name}</span>
11+
)}
612
</div>
713
</div>
814
)

‎components/date-formatter.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { parseISO, format } from 'date-fns'
22

33
export default function DateFormatter({ dateString }) {
4-
const date = parseISO(dateString)
5-
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
4+
if (!dateString) return null
5+
6+
try {
7+
const date = parseISO(dateString)
8+
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
9+
} catch (error) {
10+
console.error('Error formatting date:', dateString, error)
11+
return <time dateTime={dateString}>{dateString}</time>
12+
}
613
}

‎components/tags.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
export default function Tags({ tags }) {
1+
export default function Tags({ tags = [] }) {
2+
if (!tags || tags.length === 0) return null
3+
24
return (
35
<div className="inline-flex">
4-
{tags.map((tag) => (
5-
<span key={tag} className={`py-1 px-2 mr-2 rounded bg-red-50 text-red-500 text-xs font-black tracking-widest`}>{tag}</span>
6-
))}
6+
{tags.map((tag) => (
7+
<span key={tag} className={`py-1 px-2 mr-2 rounded bg-red-50 text-red-500 text-xs font-black tracking-widest`}>{tag}</span>
8+
))}
79
</div>
810
)
911
}

‎lib/api.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import fs from 'fs'
22
import { join } from 'path'
33
import matter from 'gray-matter'
4+
import { parseISO } from 'date-fns'
45

56
const articlesDirectory = join(process.cwd(), '_articles')
67

@@ -38,6 +39,10 @@ export function getAllArticles(fields = []) {
3839
const articles = slugs
3940
.map((slug) => getArticleBySlug(slug, fields))
4041
// sort articles by date in descending order
41-
.sort((article1, article2) => (article1.date > article2.date ? '-1' : '1'))
42+
.sort((article1, article2) => {
43+
const date1 = parseISO(article1.date)
44+
const date2 = parseISO(article2.date)
45+
return date2 - date1
46+
})
4247
return articles
4348
}

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
"export": "next export"
99
},
1010
"dependencies": {
11-
"@tailwindcss/typography": "^0.4.0",
11+
"@tailwindcss/typography": "^0.5.10",
1212
"classnames": "2.2.6",
1313
"date-fns": "2.16.1",
1414
"gray-matter": "4.0.2",
15-
"next": "^13.2.4",
15+
"next": "15.2.3",
1616
"react": "^18.2.0",
1717
"react-dom": "^18.2.0",
1818
"remark": "13.0.0",
@@ -21,7 +21,8 @@
2121
"devDependencies": {
2222
"autoprefixer": "^10.2.1",
2323
"postcss": "^8.2.4",
24-
"tailwindcss": "^2.0.2"
24+
"tailwindcss": "^3.4.1"
2525
},
26-
"license": "MIT"
26+
"license": "MIT",
27+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
2728
}

‎pages/articles.js‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,40 @@ import Layout from '../components/layout'
55
import { getAllArticles } from '../lib/api'
66
import Head from 'next/head'
77

8-
export default function Index({ allArticles }) {
8+
export default function Index({ allArticles = [] }) {
99
return (
1010
<>
1111
<Layout>
1212
<Head>
1313
<title>Utensils</title>
1414
</Head>
1515
<Container>
16-
<Header subtitle="words and wisdom" />
17-
<ArticleList articles={allArticles}/>
16+
<Header subtitle="words and wisdom" />
17+
<ArticleList articles={allArticles}/>
1818
</Container>
1919
</Layout>
2020
</>
2121
)
2222
}
2323

2424
export async function getStaticProps() {
25-
const allArticles = getAllArticles([
26-
'title',
27-
'date',
28-
'slug',
29-
'authors',
30-
'excerpt',
31-
'tags'
32-
])
25+
try {
26+
const allArticles = getAllArticles([
27+
'title',
28+
'date',
29+
'slug',
30+
'authors',
31+
'excerpt',
32+
'tags'
33+
]) || []
3334

34-
return {
35-
props: { allArticles },
35+
return {
36+
props: { allArticles },
37+
}
38+
} catch (error) {
39+
console.error('Error getting articles:', error)
40+
return {
41+
props: { allArticles: [] }
42+
}
3643
}
3744
}

‎tailwind.config.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
const { bg } = require('date-fns/locale');
2-
1+
/** @type {import('tailwindcss').Config} */
32
module.exports = {
4-
purge: ['./components/**/*.js', './pages/**/*.js'],
3+
content: ['./components/**/*.js', './pages/**/*.js'],
54
plugins: [
65
require('@tailwindcss/typography'),
76
],
8-
variants: {
9-
extend: {
10-
fontWeight: ['hover'],
11-
}
12-
},
137
theme: {
148
extend: {
159
spacing: {

0 commit comments

Comments
 (0)