Skip to content

Commit 93873bf

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

File tree

5 files changed

+28
-13
lines changed

5 files changed

+28
-13
lines changed

‎public/data/shownPosts.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"date": "2025-10-14",
2424
"updated": "2025-10-15",
2525
"tags": ["writing", "updates"],
26-
"category": "life"
26+
"category": "rant"
2727
},
2828
{
2929
"slug": "code-example-post",
@@ -51,11 +51,11 @@
5151
"category": "dev"
5252
},
5353
{
54-
"slug": "second-post",
54+
"slug": "second-post",
5555
"title": "My Second Post",
5656
"date": "2025-10-12",
5757
"updated": "2025-10-13",
5858
"tags": ["writing", "updates"],
59-
"category": "life"
59+
"category": "rant"
6060
}
6161
]

‎src/components/PostItem.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,29 @@ const PostItem = ({ slug, title, date, updatedDate, category }) => {
1717
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';
20+
const categoryBadgeColorStyle = { backgroundColor: category === 'dev' ? 'var(--color-dev-badge)' : 'var(--color-takes-badge)' };
21+
const postBackgroundColorStyle = {
22+
backgroundColor: category === 'dev' ? 'var(--color-dev-card-bg)' : 'var(--color-takes-card-bg)',
23+
'--hover-bg': category === 'dev' ? 'var(--color-dev-card-bg-hover)' : 'var(--color-takes-card-bg-hover)',
24+
};
2225

2326
return (
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}`}>
27+
<Link to={`/blog/${slug}`} className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group`} style={postBackgroundColorStyle}>
2528
<article>
2629
<div className="flex items-center">
2730
<p className="text-sm text-gray-400">{formattedDate}</p>
2831
<div className="ml-4 flex-grow flex items-center">
2932
{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`}>
33+
<span className={`mr-2 px-2 py-1 text-xs font-medium text-white rounded-md hidden sm:inline-block w-16 text-center`} style={categoryBadgeColorStyle}>
3134
{category}
3235
</span>
3336
)}
34-
<h2 className="text-xl font-semibold text-white hover:text-primary-400 transition-colors">
37+
<h2 className="text-xl font-semibold text-white group-hover:text-primary-400 transition-colors">
3538
{title}
3639
</h2>
3740
</div>
3841
{formattedUpdatedDate && updatedDate !== date && (
39-
<span className="hidden sm:inline-block ml-4 px-2 py-1 text-xs font-medium text-blue-400 bg-blue-400/10 rounded-full">Updated: {formattedUpdatedDate}</span>
42+
<span className="hidden sm:inline-block ml-4 px-2 py-1 text-xs font-medium text-orange-400 bg-orange-400/10 rounded-full">Updated: {formattedUpdatedDate}</span>
4043
)}
4144
<span className="ml-4 flex-shrink-0 text-sm font-medium text-primary-400 hover:text-primary-500 transition-colors">
4245
<span className="hidden sm:inline">Read post</span> &rarr;

‎src/components/PostMetadata.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ 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';
11+
const categoryBadgeColorStyle = { backgroundColor: metadata.category === 'dev' ? 'var(--color-dev-badge)' : 'var(--color-takes-badge)' };
12+
const postMetadataBackgroundColorStyle = {
13+
backgroundColor: metadata.category === 'dev' ? 'var(--color-dev-card-bg)' : 'var(--color-takes-card-bg)',
14+
};
1215

1316
const handleButtonClick = () => {
1417
if (isAtTop) {
@@ -20,7 +23,7 @@ const PostMetadata = ({ metadata, readingProgress, isAtTop, overrideDate, update
2023

2124
return (
2225
<aside className="sticky top-24">
23-
<div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
26+
<div className="p-6 rounded-lg border border-gray-700/50" style={postMetadataBackgroundColorStyle}>
2427
<h3 className="text-lg font-semibold text-gray-100 mb-4 border-b pb-2 border-gray-500">About Post</h3>
2528
<div className="space-y-4">
2629
<div>
@@ -30,7 +33,7 @@ const PostMetadata = ({ metadata, readingProgress, isAtTop, overrideDate, update
3033
{metadata.category && (
3134
<div>
3235
<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`}>
36+
<span className={`ml-1 px-2 py-1 text-xs font-medium text-white rounded-md w-16 text-center`} style={categoryBadgeColorStyle}>
3437
{metadata.category}
3538
</span>
3639
</div>

‎src/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,13 @@ code {
4444
border-radius: 0.25rem;
4545
font-family: 'JetBrains Mono', monospace;
4646
font-weight: 400; /* Lighter font weight */
47+
}
48+
49+
:root {
50+
--color-dev-badge: #4d7c0f; /* lime-800 */
51+
--color-takes-badge: #065f46; /* emerald-800 */
52+
--color-dev-card-bg: rgba(77, 124, 15, 0.2); /* lime-900/20 */
53+
--color-dev-card-bg-hover: rgba(77, 124, 15, 0.4); /* lime-900/40 */
54+
--color-takes-card-bg: rgba(6, 95, 70, 0.2); /* emerald-900/20 */
55+
--color-takes-card-bg-hover: rgba(6, 95, 70, 0.4); /* emerald-900/40 */
4756
}

‎src/pages/AboutPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const AboutPage = () => {
8787
}
8888

8989
return (
90-
<div className="py-16 sm:py-24">
90+
<div className="py-8 sm:py-16">
9191
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
9292
<Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
9393
<ArrowLeftIcon className="text-xl" /> Back to Home

0 commit comments

Comments
 (0)