Skip to content

Commit 88c4872

Browse files
fezcodefezcode
committed
fix: brutalist series
1 parent 15e3551 commit 88c4872

14 files changed

+1060
-715
lines changed

‎src/components/PostItem.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,27 @@ const PostItem = ({
3030
? 'var(--color-dev-badge)'
3131
: category === 'series'
3232
? 'var(--color-series-badge)'
33-
: category === 'd&d'
33+
: category === 'd&d' || category === 'dnd'
3434
? 'var(--color-dnd-badge)'
3535
: category === 'gist'
3636
? 'var(--color-gist-badge)'
3737
: category === 'feat'
3838
? 'var(--color-feat-badge)'
3939
: 'var(--color-rant-badge)';
4040

41+
const categoryBg =
42+
category === 'dev'
43+
? 'rgba(59, 130, 246, 0.3)'
44+
: category === 'series'
45+
? 'rgba(237, 197, 49, 0.3)'
46+
: category === 'd&d' || category === 'dnd'
47+
? 'rgba(236, 72, 153, 0.3)'
48+
: category === 'gist'
49+
? 'rgba(245, 158, 11, 0.3)'
50+
: category === 'feat'
51+
? 'rgba(168, 85, 247, 0.3)'
52+
: 'rgba(16, 185, 129, 0.2)';
53+
4154
return (
4255
<motion.div
4356
initial={{ opacity: 0, x: -10 }}
@@ -96,7 +109,8 @@ const PostItem = ({
96109

97110
{series && (
98111
<span className="font-mono text-[9px] uppercase tracking-[0.2em] text-emerald-500/60">
99-
{series} {'//'} Part {seriesIndex}
112+
{typeof series === 'object' ? series.title : series} {'//'} Part{' '}
113+
{seriesIndex}
100114
</span>
101115
)}
102116
</div>
@@ -105,11 +119,10 @@ const PostItem = ({
105119
{/* Category Badge & Arrow */}
106120
<div className="flex items-center gap-4 flex-shrink-0">
107121
<span
108-
className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300"
122+
className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest border rounded-sm transition-all duration-300 text-gray-300"
109123
style={{
110-
color: categoryColor,
111-
borderColor: `${categoryColor}44`,
112-
backgroundColor: isActive ? `${categoryColor}11` : 'transparent',
124+
borderColor: categoryColor,
125+
backgroundColor: categoryBg,
113126
}}
114127
>
115128
{category || 'Post'}

‎src/hooks/useSearchableData.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const useSearchableData = () => {
103103
...p,
104104
type: 'post',
105105
title: `${item.title}: ${p.title}`,
106-
path: `/blog/${p.slug}`,
106+
path: `/blog/series/${item.slug}/${p.slug}`,
107107
}))
108108
: { ...item, type: 'post', path: `/blog/${item.slug}` },
109109
);

‎src/pages/AchievementsPage.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,15 @@ const AchievementsPage = () => {
7272
{/* Navigation */}
7373
<Link
7474
to="/"
75-
className="group text-emerald-500 hover:text-emerald-400 flex items-center justify-center gap-2 text-lg mb-4 transition-all"
75+
className="group text-emerald-500 hover:text-emerald-400 flex items-center justify-center gap-2 text-lg mb-4 transition-all font-playfairDisplay"
7676
>
7777
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1" />{' '}
7878
Back to Home
7979
</Link>
8080

8181
{/* Title Section */}
8282
<div className="mx-auto max-w-2xl text-center relative z-10">
83-
<h1 className="text-4xl font-bold tracking-tight text-stone-100 sm:text-6xl flex flex-col sm:flex-row items-center justify-center gap-4">
83+
<h1 className="text-4xl font-bold font-playfairDisplay tracking-tight text-stone-100 sm:text-6xl flex flex-col sm:flex-row items-center justify-center gap-4">
8484
<div className="relative">
8585
{/* Nature Glow behind Trophy */}
8686
<div className="absolute inset-0 bg-emerald-500 blur-2xl opacity-20 rounded-full"></div>
@@ -91,13 +91,18 @@ const AchievementsPage = () => {
9191
/>
9292
</div>
9393
Achievements
94+
<TrophyIcon
95+
size={56}
96+
weight="duotone"
97+
className="text-emerald-400 relative z-10 drop-shadow-[0_0_15px_rgba(52,211,153,0.4)]"
98+
/>
9499
</h1>
95-
<p className="mt-6 text-lg leading-8 text-stone-400">
100+
<p className="mt-6 text-lg leading-8 text-stone-400 font-arvo">
96101
Discover the wild secrets hidden within Fezcodex.
97102
</p>
98103

99104
{/* Filter Pills - Nature Themed */}
100-
<div className="flex flex-wrap items-center justify-center gap-2 mt-8 max-w-2xl mx-auto">
105+
<div className="flex flex-wrap items-center justify-center gap-2 mt-8 max-w-2xl mx-auto font-arvo">
101106
<div className="flex items-center gap-2 mr-2 text-stone-500 font-mono text-sm">
102107
<FunnelIcon size={16} />
103108
<span>Filter:</span>

‎src/pages/BlogPage.js‎

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
44
import PostItem from '../components/PostItem';
55
import GenerativeArt from '../components/GenerativeArt';
66
import useSeo from '../hooks/useSeo';
7+
import { fetchAllBlogPosts } from '../utils/dataUtils';
78
import {
89
ArrowLeft,
910
XCircle,
@@ -37,60 +38,50 @@ const BlogPage = () => {
3738
const [activePost, setActivePost] = useState(null);
3839

3940
useEffect(() => {
40-
const fetchPostSlugs = async () => {
41+
const fetchPosts = async () => {
4142
try {
42-
const response = await fetch('/posts/posts.json');
43-
if (response.ok) {
44-
const allPostsData = await response.json();
45-
const seriesMap = new Map();
46-
const individualPosts = [];
43+
const { processedPosts } = await fetchAllBlogPosts();
4744

48-
allPostsData.forEach((item) => {
49-
if (item.series) {
50-
if (!seriesMap.has(item.slug)) {
51-
seriesMap.set(item.slug, {
52-
title: item.title,
53-
slug: item.slug,
54-
date: item.date,
55-
updated: item.updated,
56-
image: item.image,
57-
isSeries: true,
58-
posts: [],
59-
});
60-
}
61-
item.series.posts.forEach((seriesPost) => {
62-
seriesMap.get(item.slug).posts.push({
63-
...seriesPost,
64-
series: {
65-
slug: item.slug,
66-
title: item.title,
67-
},
68-
});
45+
const seriesMap = new Map();
46+
const individualPosts = [];
47+
48+
processedPosts.forEach((post) => {
49+
if (post.series) {
50+
if (!seriesMap.has(post.series.slug)) {
51+
seriesMap.set(post.series.slug, {
52+
title: post.series.title,
53+
slug: post.series.slug,
54+
date: post.date,
55+
updated: post.updated,
56+
image: post.series.image,
57+
isSeries: true,
58+
posts: [],
6959
});
70-
} else {
71-
individualPosts.push(item);
7260
}
73-
});
61+
seriesMap.get(post.series.slug).posts.push(post);
62+
} else {
63+
individualPosts.push(post);
64+
}
65+
});
7466

75-
const combinedItems = [
76-
...Array.from(seriesMap.values()),
77-
...individualPosts,
78-
];
79-
combinedItems.sort(
80-
(a, b) =>
81-
new Date(b.updated || b.date) - new Date(a.updated || a.date),
82-
);
67+
const combinedItems = [
68+
...Array.from(seriesMap.values()),
69+
...individualPosts,
70+
];
71+
combinedItems.sort(
72+
(a, b) =>
73+
new Date(b.updated || b.date) - new Date(a.updated || a.date),
74+
);
8375

84-
setDisplayItems(combinedItems);
85-
if (combinedItems.length > 0) setActivePost(combinedItems[0]);
86-
}
76+
setDisplayItems(combinedItems);
77+
if (combinedItems.length > 0) setActivePost(combinedItems[0]);
8778
} catch (error) {
8879
console.error('Error fetching blog data:', error);
8980
} finally {
9081
setLoading(false);
9182
}
9283
};
93-
fetchPostSlugs();
84+
fetchPosts();
9485
}, []);
9586

9687
const filteredItems = displayItems.filter((item) => {

0 commit comments

Comments
 (0)