Skip to content

Commit 5c8f71a

Browse files
fezcodefezcode
committed
fix(blog): colour blogpost categories in every theme, bump 0.42.2
Category colouring was implemented per view, so a label either went uncoloured (Luxe, Ledger, Orbit indexes; Dossier, Editorial, Luxe, Orbit readers), wore one flat theme accent for all eight categories (Brutalist, Dokument, Galley), or missed an entry and fell back to the default ink (Terracotta had no 'essay'). Add src/utils/categoryColors.js as the single source of truth: 11 palettes covering every site theme and reader view mode, with alias and fallback handling. Ledger and Orbit swap sub-palettes onto <html> at runtime, so those resolve through --ldg-cat-* / --orb-cat-* declared per register instead of baked hex. Editorial carries a second palette for its inverted reader. Palettes use saturated ink — the first pass was muted enough to read as no colour at all at 12px.
1 parent f43efa5 commit 5c8f71a

20 files changed

Lines changed: 899 additions & 46 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "fezcodex",
3-
"version": "0.42.1",
3+
"version": "0.42.2",
44
"private": true,
55
"homepage": "https://fezcode.com",
66
"dependencies": {

‎src/pages/blog-views/BrutalistBlogPostPage.jsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Seo from '../../components/Seo';
1616
import GenerativeArt from '../../components/GenerativeArt';
1717
import { calculateReadingTime } from '../../utils/readingTime';
1818
import { fetchAllBlogPosts } from '../../utils/dataUtils';
19+
import { getCategoryColor } from '../../utils/categoryColors';
1920
import { useToast } from '../../hooks/useToast';
2021
import MarkdownLink from '../../components/MarkdownLink';
2122
import MarkdownContent from '../../components/MarkdownContent';
@@ -212,6 +213,11 @@ const BrutalistBlogPostPage = () => {
212213

213214
if (!post) return null;
214215

216+
const categoryColor = getCategoryColor(
217+
'brutalist',
218+
post.attributes.category,
219+
);
220+
215221
const currentPostIndex = post.seriesPosts?.findIndex(
216222
(item) => item.slug === currentSlug,
217223
);
@@ -262,7 +268,14 @@ const BrutalistBlogPostPage = () => {
262268
{post.attributes.series ? 'Back to Series' : 'Back to Intel'}
263269
</span>
264270
</Link>
265-
<span className="font-mono text-[10px] text-emerald-500 uppercase tracking-widest border border-emerald-500/20 px-2 py-1.5 rounded-full bg-emerald-500/5 backdrop-blur-sm">
271+
<span
272+
className="font-mono text-[10px] uppercase tracking-widest border px-2 py-1.5 rounded-full backdrop-blur-sm"
273+
style={{
274+
color: categoryColor,
275+
borderColor: `${categoryColor}33`,
276+
backgroundColor: `${categoryColor}0d`,
277+
}}
278+
>
266279
Category: {post.attributes.category || 'Brutalist'}
267280
</span>
268281
</div>
@@ -357,6 +370,7 @@ const BrutalistBlogPostPage = () => {
357370
label="Category"
358371
value={post.attributes.category || 'Misc'}
359372
isAccent
373+
accentColor={categoryColor}
360374
/>
361375
</div>
362376
</div>
@@ -403,13 +417,14 @@ const BrutalistBlogPostPage = () => {
403417
);
404418
};
405419

406-
const SpecItem = ({ icon: Icon, label, value, isAccent }) => (
420+
const SpecItem = ({ icon: Icon, label, value, isAccent, accentColor }) => (
407421
<div className="flex flex-col gap-1">
408422
<span className="flex items-center gap-2 font-mono text-[9px] uppercase tracking-widest text-gray-500">
409423
<Icon size={14} /> {label}
410424
</span>
411425
<span
412426
className={`font-mono text-sm uppercase ${isAccent ? 'text-emerald-400 font-bold' : 'text-white'}`}
427+
style={isAccent && accentColor ? { color: accentColor } : undefined}
413428
>
414429
{value}
415430
</span>

‎src/pages/blog-views/DokumentBlogPostPage.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import CodeModal from '../../components/CodeModal';
2525
import Seo from '../../components/Seo';
2626
import { useToast } from '../../hooks/useToast';
2727
import { fetchAllBlogPosts } from '../../utils/dataUtils';
28+
import { getCategoryColor } from '../../utils/categoryColors';
2829
import MermaidDiagram from '../../components/MermaidDiagram';
2930

3031
const dokumentCodeTheme = {
@@ -295,6 +296,8 @@ const DokumentBlogPostPage = () => {
295296
);
296297
if (!post) return null;
297298

299+
const categoryColor = getCategoryColor('dokument', post.attributes.category);
300+
298301
const currentPostIndex = post.seriesPosts?.findIndex(
299302
(item) => item.slug === currentSlug,
300303
);
@@ -341,7 +344,15 @@ const DokumentBlogPostPage = () => {
341344
{post.attributes.series ? 'Back to Series' : 'Back to Archives'}
342345
</span>
343346
</Link>
344-
<div className="border-2 border-emerald-600 px-3 py-1.5 font-mono text-[10px] font-black uppercase tracking-widest text-emerald-700 bg-emerald-50 shadow-[4px_4px_0px_0px_rgba(5,150,105,1)]">
347+
<div
348+
className="border-2 px-3 py-1.5 font-mono text-[10px] font-black uppercase tracking-widest"
349+
style={{
350+
color: categoryColor,
351+
borderColor: categoryColor,
352+
backgroundColor: `${categoryColor}14`,
353+
boxShadow: `4px 4px 0px 0px ${categoryColor}`,
354+
}}
355+
>
345356
CLASSIFIED // {post.attributes.category}
346357
</div>
347358
</div>

‎src/pages/blog-views/DossierBlogPostPage.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import GrainOverlay from '../../components/GrainOverlay';
1616
import CoffeeStain from '../../components/CoffeeStain';
1717
import CensoredPolaroid from '../../components/CensoredPolaroid';
18+
import { getCategoryColor } from '../../utils/categoryColors';
1819
import Seo from '../../components/Seo';
1920
import { calculateReadingTime } from '../../utils/readingTime';
2021
import { useAchievements } from '../../context/AchievementContext';
@@ -447,7 +448,17 @@ const DossierBlogPostPage = () => {
447448
)}
448449
<div>
449450
<span className="text-gray-400 block mb-1">Category</span>
450-
<span className="text-black">{post.attributes.category}</span>
451+
<span
452+
className="font-bold"
453+
style={{
454+
color: getCategoryColor(
455+
'dossier',
456+
post.attributes.category,
457+
),
458+
}}
459+
>
460+
{post.attributes.category}
461+
</span>
451462
</div>
452463
<div>
453464
<span className="text-gray-400 block mb-1">

‎src/pages/blog-views/EditorialBlogPostPage.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ImageModal from '../../components/ImageModal';
1111
import Seo from '../../components/Seo';
1212
import { calculateReadingTime } from '../../utils/readingTime';
1313
import { fetchAllBlogPosts } from '../../utils/dataUtils';
14+
import { getCategoryColor } from '../../utils/categoryColors';
1415
import { useToast } from '../../hooks/useToast';
1516
import MarkdownLink from '../../components/MarkdownLink';
1617
import MarkdownContent from '../../components/MarkdownContent';
@@ -415,6 +416,12 @@ const EditorialBlogPostPage = () => {
415416
<Link
416417
to={`/blog?category=${post.attributes.category}`}
417418
className="hover:underline underline-offset-4 font-bold"
419+
style={{
420+
color: getCategoryColor(
421+
isInvert ? 'editorial-invert' : 'editorial',
422+
post.attributes.category,
423+
),
424+
}}
418425
>
419426
{post.attributes.category || 'Article'}
420427
</Link>

‎src/pages/blog-views/GalleyBlogPostPage.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Seo from '../../components/Seo';
1313
import { calculateReadingTime } from '../../utils/readingTime';
1414
import { fetchAllBlogPosts } from '../../utils/dataUtils';
1515
import { useToast } from '../../hooks/useToast';
16+
import { getCategoryColor } from '../../utils/categoryColors';
1617
import MarkdownLink from '../../components/MarkdownLink';
1718
import MarkdownContent from '../../components/MarkdownContent';
1819
import MermaidDiagram from '../../components/MermaidDiagram';
@@ -366,7 +367,11 @@ const GalleyBlogPostPage = () => {
366367
<div className="border-t border-dashed border-[#1A161320] px-5 py-2 flex items-center justify-between font-ibm-plex-mono text-[9px] tracking-[0.28em] uppercase">
367368
<span className="text-[#2E2620]/60">
368369
Category ·{' '}
369-
<span className="text-[#9E4A2F]">
370+
<span
371+
style={{
372+
color: getCategoryColor('galley', post.attributes.category),
373+
}}
374+
>
370375
{post.attributes.category || 'Miscellany'}
371376
</span>
372377
</span>

‎src/pages/blog-views/LedgerBlogPage.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import Seo from '../../components/Seo';
44
import { fetchAllBlogPosts } from '../../utils/dataUtils';
5+
import { getCategoryColor } from '../../utils/categoryColors';
56
import {
67
LedgerFolio,
78
LedgerNotice,
@@ -195,8 +196,15 @@ const LedgerBlogPage = () => {
195196
</span>
196197
<span className="ldg-leader" aria-hidden="true" />
197198
<span
198-
className="ldg-accent hidden sm:inline"
199-
style={{ fontSize: '0.72rem', fontWeight: 700 }}
199+
className="hidden sm:inline"
200+
style={{
201+
fontSize: '0.72rem',
202+
fontWeight: 700,
203+
color: getCategoryColor(
204+
'ledger',
205+
item.isSeries ? 'series' : item.category,
206+
),
207+
}}
200208
>
201209
{item.isSeries
202210
? `VOL · ${String(item.posts.length).padStart(2, '0')}`

‎src/pages/blog-views/LuxeBlogPostPage.jsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Seo from '../../components/Seo';
1616
import LuxeArt from '../../components/LuxeArt';
1717
import { calculateReadingTime } from '../../utils/readingTime';
1818
import { fetchAllBlogPosts } from '../../utils/dataUtils';
19+
import { getCategoryColor } from '../../utils/categoryColors';
1920
import { useToast } from '../../hooks/useToast';
2021
import MarkdownLink from '../../components/MarkdownLink';
2122
import MarkdownContent from '../../components/MarkdownContent';
@@ -190,6 +191,8 @@ const LuxeBlogPostPage = () => {
190191

191192
if (!post) return null;
192193

194+
const categoryColor = getCategoryColor('luxe', post.attributes.category);
195+
193196
return (
194197
<div className="min-h-screen bg-[#F5F5F0] text-[#1A1A1A] selection:bg-[#C0B298] selection:text-black">
195198
<Seo
@@ -237,7 +240,13 @@ const LuxeBlogPostPage = () => {
237240
</h1>
238241

239242
{post.attributes.category && (
240-
<span className="inline-block border border-[#1A1A1A]/20 px-4 py-1 rounded-full font-outfit text-[10px] uppercase tracking-[0.2em] text-[#1A1A1A]/60">
243+
<span
244+
className="inline-block border px-4 py-1 rounded-full font-outfit text-[10px] uppercase tracking-[0.2em]"
245+
style={{
246+
color: categoryColor,
247+
borderColor: `${categoryColor}40`,
248+
}}
249+
>
241250
{post.attributes.category}
242251
</span>
243252
)}

‎src/pages/blog-views/MistBlogPage.jsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
33
import { motion, AnimatePresence } from 'framer-motion';
44
import Seo from '../../components/Seo';
55
import { fetchAllBlogPosts } from '../../utils/dataUtils';
6+
import { getCategoryColor } from '../../utils/categoryColors';
67
import {
78
MistVeil,
89
MistOrb,
@@ -17,19 +18,6 @@ import {
1718
const FOG_GRADIENT =
1819
'radial-gradient(1100px 600px at 80% -10%, #FFFFFF 0%, transparent 55%), radial-gradient(900px 700px at 0% 110%, #D2DBD8 0%, transparent 50%), radial-gradient(700px 500px at 95% 90%, #E5EBE9 0%, transparent 45%)';
1920

20-
const CATEGORY_TINT = {
21-
dev: '#5F837B',
22-
ai: '#8FA8BC',
23-
feat: '#6E8E9C',
24-
rant: '#7B8E5F',
25-
gist: '#5F837B',
26-
essay: '#8FA8BC',
27-
series: '#5F837B',
28-
'd&d': '#7B8E5F',
29-
dnd: '#7B8E5F',
30-
default: '#5C6B67',
31-
};
32-
3321
const FILTERS = [
3422
{ id: 'all', label: 'all' },
3523
{ id: 'dev', label: 'dev' },
@@ -54,7 +42,7 @@ const formatDriftDate = (d) =>
5442
const DriftRow = ({ item, index }) => {
5543
const href = item.isSeries ? `/blog/series/${item.slug}` : `/blog/${item.slug}`;
5644
const categoryKey = (item.category || 'default').toLowerCase();
57-
const tint = CATEGORY_TINT[categoryKey] || CATEGORY_TINT.default;
45+
const tint = getCategoryColor('mist', categoryKey);
5846
const displayCategory = item.isSeries ? 'series' : categoryKey;
5947

6048
return (

‎src/pages/blog-views/OrbitBlogPage.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { Link, useSearchParams } from 'react-router-dom';
33
import { ArrowUpRightIcon } from '@phosphor-icons/react';
44
import Seo from '../../components/Seo';
5+
import { getCategoryColor } from '../../utils/categoryColors';
56
import { OrbitNotice } from '../../components/orbit';
67
import {
78
useOrbitIndex,
@@ -101,8 +102,18 @@ const OrbitBlogPage = () => {
101102
>
102103
<div>
103104
<p className="orb-label mb-3">
104-
{post.series ? 'Series' : post.category || 'Writing'} ·{' '}
105-
{orbitDate(post.updated || post.date)}
105+
<span
106+
style={{
107+
color: getCategoryColor(
108+
'orbit',
109+
post.series ? 'series' : post.category,
110+
),
111+
fontWeight: 500,
112+
}}
113+
>
114+
{post.series ? 'Series' : post.category || 'Writing'}
115+
</span>{' '}
116+
· {orbitDate(post.updated || post.date)}
106117
</p>
107118
<h2 className="text-2xl md:text-3xl tracking-tight mb-3">
108119
{post.title}

0 commit comments

Comments
 (0)