Skip to content

Commit 8e87c1c

Browse files
fezcodefezcode
committed
feat: blogpost types.
1 parent b006eda commit 8e87c1c

File tree

5 files changed

+42
-17
lines changed

5 files changed

+42
-17
lines changed

‎public/data/shownPosts.json‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,57 @@
55
"date": "2025-10-16",
66
"updated": "2025-10-16",
77
"description": "a journey to create my first golang package",
8-
"tags": ["go", "lib", "pkg.go.dev"]
8+
"tags": ["go", "lib", "pkg.go.dev"],
9+
"category": "dev"
910
},
1011
{
1112
"slug": "hashrouter-vs-browserrouter",
1213
"title": "HashRouter vs. BrowserRouter",
1314
"date": "2025-10-15",
1415
"updated": "2025-10-16",
1516
"description": "Why am I using HashRouter for github pages",
16-
"tags": ["react", "webdev", "gh-pages", "router"]
17+
"tags": ["react", "webdev", "gh-pages", "router"],
18+
"category": "dev"
1719
},
1820
{
1921
"slug": "warning-post",
20-
"title": "My Second Post",
22+
"title": "Warning Post",
2123
"date": "2025-10-14",
2224
"updated": "2025-10-15",
23-
"tags": ["writing", "updates"]
25+
"tags": ["writing", "updates"],
26+
"category": "life"
2427
},
2528
{
2629
"slug": "code-example-post",
2730
"title": "Code Example Post",
2831
"date": "2025-10-15",
2932
"updated": "2025-10-15",
3033
"description": "A blog post demonstrating code blocks in various languages.",
31-
"tags": ["code", "markdown", "example"]
34+
"tags": ["code", "markdown", "example"],
35+
"category": "dev"
3236
},
3337
{
3438
"slug": "first-post",
3539
"title": "My First Post",
3640
"date": "2025-10-14",
3741
"updated": "2025-10-15",
38-
"tags": ["react", "hello-world"]
42+
"tags": ["react", "hello-world"],
43+
"category": "dev"
3944
},
4045
{
4146
"slug": "long-post",
4247
"title": "The Art of Scrolling",
4348
"date": "2025-10-13",
4449
"updated": "2025-10-14",
45-
"tags": ["css", "scrolling", "web-design"]
50+
"tags": ["css", "scrolling", "web-design"],
51+
"category": "dev"
4652
},
4753
{
4854
"slug": "second-post",
4955
"title": "My Second Post",
5056
"date": "2025-10-12",
5157
"updated": "2025-10-13",
52-
"tags": ["writing", "updates"]
58+
"tags": ["writing", "updates"],
59+
"category": "life"
5360
}
5461
]

‎src/components/PostItem.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
33

4-
const PostItem = ({ slug, title, date, updatedDate }) => {
4+
const PostItem = ({ slug, title, date, updatedDate, category }) => {
55

6-
// Format the date from YYYY-MM-DD to 'Month Day, Year'
6+
// Format the date to a shorter format: Month Day, Year
77
const formattedDate = new Date(date).toLocaleDateString('en-US', {
8-
year: 'numeric',
9-
month: 'long',
8+
month: 'short',
109
day: 'numeric',
10+
year: 'numeric',
1111
});
1212

1313
// Format the updated date if it exists
1414
const formattedUpdatedDate = updatedDate ? new Date(updatedDate).toLocaleDateString('en-US', {
15-
year: 'numeric',
16-
month: 'long',
15+
month: 'short',
1716
day: 'numeric',
17+
year: 'numeric',
1818
}) : null;
1919

20+
const categoryBadgeColorClass = category === 'dev' ? 'bg-blue-700' : 'bg-orange-700';
21+
const postBackgroundColorClass = category === 'dev' ? 'bg-blue-900/20 hover:bg-blue-900/40' : 'bg-orange-900/20 hover:bg-orange-900/40';
22+
2023
return (
21-
<Link to={`/blog/${slug}`} className="block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer hover:bg-gray-800/30 transition-colors">
24+
<Link to={`/blog/${slug}`} className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors ${postBackgroundColorClass}`}>
2225
<article>
2326
<div className="flex items-center">
2427
<p className="text-sm text-gray-400">{formattedDate}</p>
2528
<div className="ml-4 flex-grow flex items-center">
29+
{category && (
30+
<span className={`mr-2 px-2 py-1 text-xs font-medium text-white rounded-md ${categoryBadgeColorClass} hidden sm:inline-block w-16 text-center`}>
31+
{category}
32+
</span>
33+
)}
2634
<h2 className="text-xl font-semibold text-white hover:text-primary-400 transition-colors">
2735
{title}
2836
</h2>

‎src/components/PostMetadata.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const PostMetadata = ({ metadata, readingProgress, isAtTop, overrideDate, update
88

99
const displayDate = overrideDate || (metadata.date ? new Date(metadata.date).toLocaleDateString() : 'Invalid Date');
1010

11+
const categoryColorClass = metadata.category === 'dev' ? 'bg-blue-700' : 'bg-orange-700';
12+
1113
const handleButtonClick = () => {
1214
if (isAtTop) {
1315
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
@@ -25,6 +27,14 @@ const PostMetadata = ({ metadata, readingProgress, isAtTop, overrideDate, update
2527
<Label>Title</Label>
2628
<p className="text-gray-300 ml-1 mt-1 ">{metadata.title}</p>
2729
</div>
30+
{metadata.category && (
31+
<div>
32+
<Label>Category</Label>
33+
<span className={`ml-1 px-2 py-1 text-xs font-medium text-white rounded-md ${categoryColorClass} w-16 text-center`}>
34+
{metadata.category}
35+
</span>
36+
</div>
37+
)}
2838
<div>
2939
<Label>Date</Label>
3040
<p className="text-gray-300 ml-1 mt-1">{displayDate}</p>

‎src/pages/BlogPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const BlogPage = () => {
7474
<div className="mt-16">
7575
<div className="">
7676
{posts.map(post => (
77-
<PostItem key={post.slug} slug={post.slug} title={post.title} date={post.date} updatedDate={post.updated} />
77+
<PostItem key={post.slug} slug={post.slug} title={post.title} date={post.date} updatedDate={post.updated} category={post.category} />
7878
))}
7979
</div>
8080
</div>

‎src/pages/HomePage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const HomePage = () => {
112112
</h2>
113113
<div className="mt-8">
114114
{posts.slice(0, 5).map(post => (
115-
<PostItem key={post.slug} slug={post.slug} title={post.title} date={post.date} updatedDate={post.updated} />
115+
<PostItem key={post.slug} slug={post.slug} title={post.title} date={post.date} updatedDate={post.updated} category={post.category} />
116116
))}
117117
</div>
118118
<div className="mt-8 text-center">

0 commit comments

Comments
 (0)