Skip to content

Commit e3d8f9a

Browse files
fezcodefezcode
committed
fix: remove old SEO component, replace with useSeo hook
1 parent 99e7436 commit e3d8f9a

13 files changed

+140
-235
lines changed

‎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.8.5",
3+
"version": "0.8.6",
44
"private": true,
55
"homepage": "https://fezcode.com",
66
"dependencies": {

‎src/components/Seo.js‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/pages/DokumentBlogPostPage.js‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { calculateReadingTime } from '../utils/readingTime';
2020
import MarkdownLink from '../components/MarkdownLink';
2121
import ImageModal from '../components/ImageModal';
2222
import CodeModal from '../components/CodeModal';
23-
import Seo from '../components/Seo';
23+
import useSeo from '../hooks/useSeo';
2424
import { useToast } from '../hooks/useToast';
2525
import { fetchAllBlogPosts } from '../utils/dataUtils';
2626

@@ -99,6 +99,19 @@ const DokumentBlogPostPage = () => {
9999
const [modalLanguage, setModalLanguage] = useState('jsx');
100100
const { addToast } = useToast();
101101

102+
useSeo({
103+
title: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
104+
description: post ? post.body.substring(0, 150) : '',
105+
keywords: post?.attributes?.tags ? post.attributes.tags.join(', ') : '',
106+
ogTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
107+
ogDescription: post ? post.body.substring(0, 150) : '',
108+
ogImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
109+
twitterCard: 'summary_large_image',
110+
twitterTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
111+
twitterDescription: post ? post.body.substring(0, 150) : '',
112+
twitterImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
113+
});
114+
102115
useEffect(() => {
103116
const fetchPost = async () => {
104117
setLoading(true);
@@ -247,26 +260,6 @@ const DokumentBlogPostPage = () => {
247260

248261
return (
249262
<div className="min-h-screen bg-[#f3f3f3] text-[#111] font-sans relative overflow-x-hidden selection:bg-emerald-500/20">
250-
<Seo
251-
title={`${post.attributes.title} | Fezcodex`}
252-
description={post.body.substring(0, 150)}
253-
keywords={post.attributes.tags ? post.attributes.tags.join(', ') : ''}
254-
ogTitle={`${post.attributes.title} | Fezcodex`}
255-
ogDescription={post.body.substring(0, 150)}
256-
ogImage={
257-
post.attributes.ogImage ||
258-
post.attributes.image ||
259-
'/images/asset/ogtitle.png'
260-
}
261-
twitterCard="summary_large_image"
262-
twitterTitle={`${post.attributes.title} | Fezcodex`}
263-
twitterDescription={post.body.substring(0, 150)}
264-
twitterImage={
265-
post.attributes.ogImage ||
266-
post.attributes.image ||
267-
'/images/asset/ogtitle.png'
268-
}
269-
/>
270263
<GrainOverlay opacity={0.4} />
271264

272265
<div className="fixed top-0 left-0 w-full h-1 bg-black/5 z-50">

‎src/pages/DossierBlogPostPage.js‎

Lines changed: 16 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import GrainOverlay from '../components/GrainOverlay';
1414
import CoffeeStain from '../components/CoffeeStain';
1515
import CensoredPolaroid from '../components/CensoredPolaroid';
16-
import Seo from '../components/Seo';
16+
import useSeo from '../hooks/useSeo';
1717
import { calculateReadingTime } from '../utils/readingTime';
1818
import { useAchievements } from '../context/AchievementContext';
1919
import MarkdownLink from '../components/MarkdownLink';
@@ -103,6 +103,19 @@ const DossierBlogPostPage = () => {
103103
const [modalLanguage, setModalLanguage] = useState('jsx');
104104
const [modalImageSrc, setModalImageSrc] = useState(null);
105105

106+
useSeo({
107+
title: post ? `${post.attributes.title} | Fezcodex Archive` : 'Fezcodex',
108+
description: post ? post.body.substring(0, 150) : '',
109+
keywords: post?.attributes?.tags ? post.attributes.tags.join(', ') : '',
110+
ogTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
111+
ogDescription: post ? post.body.substring(0, 150) : '',
112+
ogImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
113+
twitterCard: 'summary_large_image',
114+
twitterTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
115+
twitterDescription: post ? post.body.substring(0, 150) : '',
116+
twitterImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
117+
});
118+
106119
useEffect(() => {
107120
setHasTrackedRead(false);
108121
}, [currentSlug]);
@@ -334,49 +347,9 @@ const DossierBlogPostPage = () => {
334347
const prevPost = post.seriesPosts?.[currentPostIndex + 1];
335348
const nextPost = post.seriesPosts?.[currentPostIndex - 1];
336349

337-
return (
338-
339-
<div className="min-h-screen bg-[#f3f3f3] text-[#111] overflow-y-auto selection:bg-black selection:text-white custom-scrollbar font-sans relative">
340-
341-
<Seo
342-
343-
title={`${post.attributes.title} | Fezcodex Archive`}
344-
345-
description={post.body.substring(0, 150)}
346-
347-
keywords={post.attributes.tags ? post.attributes.tags.join(', ') : ''}
348-
349-
ogTitle={`${post.attributes.title} | Fezcodex`}
350-
351-
ogDescription={post.body.substring(0, 150)}
352-
353-
ogImage={
354-
355-
post.attributes.ogImage ||
356-
357-
post.attributes.image ||
358-
359-
'/images/asset/ogtitle.png'
360-
361-
}
362-
363-
twitterCard="summary_large_image"
364-
365-
twitterTitle={`${post.attributes.title} | Fezcodex`}
366-
367-
twitterDescription={post.body.substring(0, 150)}
368-
369-
twitterImage={
370-
371-
post.attributes.ogImage ||
372-
373-
post.attributes.image ||
374-
375-
'/images/asset/ogtitle.png'
376-
377-
}
350+
return (
378351

379-
/>
352+
<div className="min-h-screen bg-[#f3f3f3] text-[#111] overflow-y-auto selection:bg-black selection:text-white custom-scrollbar font-sans relative">
380353

381354
<GrainOverlay />
382355
<CoffeeStain />

‎src/pages/LogDetailPage.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@phosphor-icons/react';
1414
import ImageModal from '../components/ImageModal';
1515
import GenerativeArt from '../components/GenerativeArt';
16-
import Seo from '../components/Seo';
16+
import useSeo from '../hooks/useSeo';
1717
import remarkGfm from 'remark-gfm';
1818
import rehypeRaw from 'rehype-raw';
1919
import piml from 'piml';
@@ -27,6 +27,12 @@ const LogDetailPage = () => {
2727
const contentRef = useRef(null);
2828
const [modalImageSrc, setModalImageSrc] = useState(null);
2929

30+
useSeo({
31+
title: log ? `${log.attributes.title} | Fezcodex` : 'Fezcodex',
32+
description: log ? log.body.substring(0, 150) : '',
33+
ogImage: log?.attributes?.image || '/images/asset/ogtitle.png',
34+
});
35+
3036
useEffect(() => {
3137
const fetchLog = async () => {
3238
setLoading(true);
@@ -141,12 +147,6 @@ const LogDetailPage = () => {
141147

142148
return (
143149
<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30">
144-
<Seo
145-
title={`${attributes.title} | Fezcodex`}
146-
description={body.substring(0, 150)}
147-
ogImage={attributes.image || '/images/asset/ogtitle.png'}
148-
/>
149-
150150
{/* HERO SECTION */}
151151
<section className="relative h-[60vh] md:h-[70vh] flex flex-col justify-end overflow-hidden border-b border-white/10">
152152
<div className="absolute inset-0 z-0">

‎src/pages/NotFoundPage.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import React, { useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import { WarningIcon, ArrowLeftIcon } from '@phosphor-icons/react';
4-
import Seo from '../components/Seo';
4+
import useSeo from '../hooks/useSeo';
55
import { useAchievements } from '../context/AchievementContext';
66

77
const NotFoundPage = () => {
88
const { unlockAchievement } = useAchievements();
99

10+
useSeo({
11+
title: '404 | DATA_NOT_FOUND',
12+
description: 'System Error: The requested data segment could not be located.',
13+
});
14+
1015
useEffect(() => {
1116
const visits = parseInt(localStorage.getItem('wrongs') || '0', 10) + 1;
1217
localStorage.setItem('wrongs', visits.toString());
@@ -18,11 +23,6 @@ const NotFoundPage = () => {
1823

1924
return (
2025
<div className="min-h-screen bg-[#050505] text-white font-mono flex flex-col items-center justify-center p-4 relative overflow-hidden">
21-
<Seo
22-
title="404 | DATA_NOT_FOUND"
23-
description="System Error: The requested data segment could not be located."
24-
/>
25-
2626
{/* Background Noise/Grid */}
2727
<div
2828
className="absolute inset-0 opacity-10 pointer-events-none"

‎src/pages/OldBlogPostPage.js‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import PostMetadata from '../components/metadata-cards/PostMetadata';
1212
import CodeModal from '../components/CodeModal';
1313
import { useToast } from '../hooks/useToast';
1414
import ImageModal from '../components/ImageModal';
15-
import Seo from '../components/Seo';
15+
import useSeo from '../hooks/useSeo';
1616
import ShareButtons from '../components/ShareButtons';
1717
import remarkGfm from 'remark-gfm';
1818
import rehypeRaw from 'rehype-raw';
@@ -41,6 +41,19 @@ const OldBlogPostPage = () => {
4141
const [hasTrackedRead, setHasTrackedRead] = useState(false);
4242
const { addToast } = useToast();
4343

44+
useSeo({
45+
title: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'Fezcodex',
46+
description: post ? post.body.substring(0, 150) : '',
47+
keywords: post?.attributes?.tags ? post.attributes.tags.join(', ') : '',
48+
ogTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'Fezcodex',
49+
ogDescription: post ? post.body.substring(0, 150) : '',
50+
ogImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
51+
twitterCard: 'summary_large_image',
52+
twitterTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'Fezcodex',
53+
twitterDescription: post ? post.body.substring(0, 150) : '',
54+
twitterImage: post?.attributes?.ogImage || post?.attributes?.image || '/images/asset/ogtitle.png',
55+
});
56+
4457
// --- Effects ---
4558

4659
useEffect(() => {
@@ -296,26 +309,6 @@ const OldBlogPostPage = () => {
296309

297310
return (
298311
<div className="min-h-screen bg-[#020617] pb-24 relative">
299-
<Seo
300-
title={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
301-
description={post.body.substring(0, 150)}
302-
keywords={post.attributes.tags ? post.attributes.tags.join(', ') : ''}
303-
ogTitle={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
304-
ogDescription={post.body.substring(0, 150)}
305-
ogImage={
306-
post.attributes.ogImage ||
307-
post.attributes.image ||
308-
'/images/asset/ogtitle.png'
309-
}
310-
twitterCard="summary_large_image"
311-
twitterTitle={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
312-
twitterDescription={post.body.substring(0, 150)}
313-
twitterImage={
314-
post.attributes.ogImage ||
315-
post.attributes.image ||
316-
'/images/asset/ogtitle.png'
317-
}
318-
/>
319312

320313
<style>{`
321314
body { background-color: black; }

‎src/pages/ProjectPage.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import rehypeRaw from 'rehype-raw';
66
import { motion } from 'framer-motion';
77
import { useProjects } from '../utils/projectParser';
88
import { useProjectContent } from '../hooks/useProjectContent';
9-
import Seo from '../components/Seo';
9+
import useSeo from '../hooks/useSeo';
1010
import GenerativeArt from '../components/GenerativeArt';
1111
import { ArrowLeft, ArrowUpRight, GithubLogo } from '@phosphor-icons/react';
1212

@@ -25,6 +25,22 @@ const ProjectPage = () => {
2525
error: errorContent,
2626
} = useProjectContent(slug);
2727

28+
const project = projects.find((p) => p.slug === slug);
29+
const fullProject = project && content ? { ...project, ...content } : null;
30+
31+
useSeo({
32+
title: fullProject ? `${fullProject.title} | Fezcodex` : 'Fezcodex',
33+
description: fullProject?.shortDescription || '',
34+
keywords: fullProject?.tags ? fullProject.tags.join(', ') : '',
35+
ogTitle: fullProject ? `${fullProject.title} | Fezcodex` : 'Fezcodex',
36+
ogDescription: fullProject?.shortDescription || '',
37+
ogImage: fullProject?.image || '/images/asset/ogtitle.png',
38+
twitterCard: 'summary_large_image',
39+
twitterTitle: fullProject ? `${fullProject.title} | Fezcodex` : 'Fezcodex',
40+
twitterDescription: fullProject?.shortDescription || '',
41+
twitterImage: fullProject?.image || '/images/asset/ogtitle.png',
42+
});
43+
2844
if (loadingProjects || loadingContent) {
2945
return (
3046
<div className="min-h-screen bg-[#050505] flex items-center justify-center text-white font-mono uppercase tracking-widest text-xs">
@@ -41,34 +57,18 @@ const ProjectPage = () => {
4157
);
4258
}
4359

44-
const project = projects.find((p) => p.slug === slug);
45-
46-
if (!project || !content) {
60+
if (!fullProject) {
4761
return (
4862
<div className="min-h-screen bg-[#050505] flex items-center justify-center text-gray-500 font-mono uppercase">
4963
Project not found.
5064
</div>
5165
);
5266
}
5367

54-
const fullProject = { ...project, ...content };
5568
const year = new Date(fullProject.date).getFullYear();
5669

5770
return (
5871
<div className="min-h-screen bg-[#050505] text-white selection:bg-white selection:text-black">
59-
<Seo
60-
title={`${fullProject.title} | Fezcodex`}
61-
description={fullProject.shortDescription}
62-
keywords={fullProject.tags ? fullProject.tags.join(', ') : ''}
63-
ogTitle={`${fullProject.title} | Fezcodex`}
64-
ogDescription={fullProject.shortDescription}
65-
ogImage={fullProject.image || '/images/asset/ogtitle.png'}
66-
twitterCard="summary_large_image"
67-
twitterTitle={`${fullProject.title} | Fezcodex`}
68-
twitterDescription={fullProject.shortDescription}
69-
twitterImage={fullProject.image || '/images/asset/ogtitle.png'}
70-
/>
71-
7272
{/* Noise Overlay */}
7373
<div
7474
className="pointer-events-none fixed inset-0 z-50 opacity-20 mix-blend-overlay"

0 commit comments

Comments
 (0)