Skip to content

Commit 99e7436

Browse files
fezcodefezcode
committed
fix: seo v2
1 parent 1c62b9c commit 99e7436

File tree

8 files changed

+155
-136
lines changed

8 files changed

+155
-136
lines changed

‎public/images/posts/the_corrupted_blood_incident.webp‎

35.3 KB
Loading

‎public/posts/posts.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"category": "rant",
1010
"filename": "corrupted-blood-incident.txt",
1111
"authors": ["fezcode"],
12-
"image": "/images/posts/asset/symbol-flow.webp"
12+
"image": "/images/posts/asset/symbol-flow.webp",
13+
"ogImage": "/images/posts/the_corrupted_blood_incident.webp"
1314
},
1415
{
1516
"slug": "building-the-knowledge-graph",

‎src/pages/DokumentBlogPostPage.js‎

Lines changed: 21 additions & 22 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 useSeo from '../hooks/useSeo';
23+
import Seo from '../components/Seo';
2424
import { useToast } from '../hooks/useToast';
2525
import { fetchAllBlogPosts } from '../utils/dataUtils';
2626

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

102-
useSeo({
103-
title: post ? `${post.attributes.title} | Fezcodex` : 'Loading... | Fezcodex',
104-
description: post ? post.body.substring(0, 150) : '',
105-
keywords: post && 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
109-
? post.attributes.ogImage ||
110-
post.attributes.image ||
111-
'/images/asset/ogtitle.png'
112-
: '/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
117-
? post.attributes.ogImage ||
118-
post.attributes.image ||
119-
'/images/asset/ogtitle.png'
120-
: '/images/asset/ogtitle.png',
121-
});
122-
123102
useEffect(() => {
124103
const fetchPost = async () => {
125104
setLoading(true);
@@ -268,6 +247,26 @@ const DokumentBlogPostPage = () => {
268247

269248
return (
270249
<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+
/>
271270
<GrainOverlay opacity={0.4} />
272271

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

‎src/pages/DossierBlogPostPage.js‎

Lines changed: 44 additions & 25 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 useSeo from '../hooks/useSeo';
16+
import Seo from '../components/Seo';
1717
import { calculateReadingTime } from '../utils/readingTime';
1818
import { useAchievements } from '../context/AchievementContext';
1919
import MarkdownLink from '../components/MarkdownLink';
@@ -103,27 +103,6 @@ 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` : 'Loading... | Fezcodex Archive',
108-
description: post ? post.body.substring(0, 150) : '',
109-
keywords: post && 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
113-
? post.attributes.ogImage ||
114-
post.attributes.image ||
115-
'/images/asset/ogtitle.png'
116-
: '/images/asset/ogtitle.png',
117-
twitterCard: 'summary_large_image',
118-
twitterTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
119-
twitterDescription: post ? post.body.substring(0, 150) : '',
120-
twitterImage: post
121-
? post.attributes.ogImage ||
122-
post.attributes.image ||
123-
'/images/asset/ogtitle.png'
124-
: '/images/asset/ogtitle.png',
125-
});
126-
127106
useEffect(() => {
128107
setHasTrackedRead(false);
129108
}, [currentSlug]);
@@ -355,11 +334,51 @@ const DossierBlogPostPage = () => {
355334
const prevPost = post.seriesPosts?.[currentPostIndex + 1];
356335
const nextPost = post.seriesPosts?.[currentPostIndex - 1];
357336

358-
return (
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+
}
359378

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

362-
<GrainOverlay />
381+
<GrainOverlay />
363382
<CoffeeStain />
364383

365384
{/* Top Secret Stamp / Decor */}

‎src/pages/OldBlogPostPage.js‎

Lines changed: 22 additions & 22 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 useSeo from '../hooks/useSeo';
15+
import Seo from '../components/Seo';
1616
import ShareButtons from '../components/ShareButtons';
1717
import remarkGfm from 'remark-gfm';
1818
import rehypeRaw from 'rehype-raw';
@@ -41,27 +41,6 @@ const OldBlogPostPage = () => {
4141
const [hasTrackedRead, setHasTrackedRead] = useState(false);
4242
const { addToast } = useToast();
4343

44-
useSeo({
45-
title: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'LOADING... | TERMINAL LOG',
46-
description: post ? post.body.substring(0, 150) : '',
47-
keywords: post && post.attributes.tags ? post.attributes.tags.join(', ') : '',
48-
ogTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'TERMINAL LOG',
49-
ogDescription: post ? post.body.substring(0, 150) : '',
50-
ogImage: post
51-
? post.attributes.ogImage ||
52-
post.attributes.image ||
53-
'/images/asset/ogtitle.png'
54-
: '/images/asset/ogtitle.png',
55-
twitterCard: 'summary_large_image',
56-
twitterTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'TERMINAL LOG',
57-
twitterDescription: post ? post.body.substring(0, 150) : '',
58-
twitterImage: post
59-
? post.attributes.ogImage ||
60-
post.attributes.image ||
61-
'/images/asset/ogtitle.png'
62-
: '/images/asset/ogtitle.png',
63-
});
64-
6544
// --- Effects ---
6645

6746
useEffect(() => {
@@ -317,6 +296,27 @@ const OldBlogPostPage = () => {
317296

318297
return (
319298
<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+
/>
319+
320320
<style>{`
321321
body { background-color: black; }
322322
`}</style>

‎src/pages/StandardBlogPostPage.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
1414
import { customTheme } from '../utils/customTheme';
1515
import ImageModal from '../components/ImageModal';
1616
import CodeModal from '../components/CodeModal';
17-
import useSeo from '../hooks/useSeo';
17+
import Seo from '../components/Seo';
1818
import GenerativeArt from '../components/GenerativeArt';
1919
import remarkGfm from 'remark-gfm';
2020
import rehypeRaw from 'rehype-raw';
@@ -40,27 +40,6 @@ const StandardBlogPostPage = () => {
4040
const [modalLanguage, setModalLanguage] = useState('jsx');
4141
const { addToast } = useToast();
4242

43-
useSeo({
44-
title: post ? `${post.attributes.title} | Fezcodex` : 'Loading... | Fezcodex',
45-
description: post ? post.body.substring(0, 150) : '',
46-
keywords: post && post.attributes.tags ? post.attributes.tags.join(', ') : '',
47-
ogTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
48-
ogDescription: post ? post.body.substring(0, 150) : '',
49-
ogImage: post
50-
? post.attributes.ogImage ||
51-
post.attributes.image ||
52-
'/images/asset/ogtitle.png'
53-
: '/images/asset/ogtitle.png',
54-
twitterCard: 'summary_large_image',
55-
twitterTitle: post ? `${post.attributes.title} | Fezcodex` : 'Fezcodex',
56-
twitterDescription: post ? post.body.substring(0, 150) : '',
57-
twitterImage: post
58-
? post.attributes.ogImage ||
59-
post.attributes.image ||
60-
'/images/asset/ogtitle.png'
61-
: '/images/asset/ogtitle.png',
62-
});
63-
6443
useEffect(() => {
6544
const fetchPost = async () => {
6645
setLoading(true);
@@ -217,6 +196,27 @@ const StandardBlogPostPage = () => {
217196

218197
return (
219198
<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 pb-32 relative">
199+
<Seo
200+
title={`${post.attributes.title} | Fezcodex`}
201+
description={post.body.substring(0, 150)}
202+
keywords={post.attributes.tags ? post.attributes.tags.join(', ') : ''}
203+
ogTitle={`${post.attributes.title} | Fezcodex`}
204+
ogDescription={post.body.substring(0, 150)}
205+
ogImage={
206+
post.attributes.ogImage ||
207+
post.attributes.image ||
208+
'/images/asset/ogtitle.png'
209+
}
210+
twitterCard="summary_large_image"
211+
twitterTitle={`${post.attributes.title} | Fezcodex`}
212+
twitterDescription={post.body.substring(0, 150)}
213+
twitterImage={
214+
post.attributes.ogImage ||
215+
post.attributes.image ||
216+
'/images/asset/ogtitle.png'
217+
}
218+
/>
219+
220220
{/* Reading Progress */}
221221
<div className="fixed top-0 left-0 w-full h-1 z-50 bg-white/5">
222222
<motion.div

‎src/pages/TerminalBlogPostPage.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
ArrowsOutSimple,
1010
ClipboardTextIcon,
1111
} from '@phosphor-icons/react';
12-
import useSeo from '../hooks/useSeo';
12+
import Seo from '../components/Seo';
1313
import { useAchievements } from '../context/AchievementContext';
1414
import MarkdownLink from '../components/MarkdownLink';
1515
import CodeModal from '../components/CodeModal';
@@ -99,27 +99,6 @@ const TerminalBlogPostPage = () => {
9999
const [modalLanguage, setModalLanguage] = useState('jsx');
100100
const [modalImageSrc, setModalImageSrc] = useState(null);
101101

102-
useSeo({
103-
title: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'LOADING... | TERMINAL LOG',
104-
description: post ? post.body.substring(0, 150) : '',
105-
keywords: post && post.attributes.tags ? post.attributes.tags.join(', ') : '',
106-
ogTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'TERMINAL LOG',
107-
ogDescription: post ? post.body.substring(0, 150) : '',
108-
ogImage: post
109-
? post.attributes.ogImage ||
110-
post.attributes.image ||
111-
'/images/asset/ogtitle.png'
112-
: '/images/asset/ogtitle.png',
113-
twitterCard: 'summary_large_image',
114-
twitterTitle: post ? `${post.attributes.title.toUpperCase()} | TERMINAL LOG` : 'TERMINAL LOG',
115-
twitterDescription: post ? post.body.substring(0, 150) : '',
116-
twitterImage: post
117-
? post.attributes.ogImage ||
118-
post.attributes.image ||
119-
'/images/asset/ogtitle.png'
120-
: '/images/asset/ogtitle.png',
121-
});
122-
123102
useEffect(() => {
124103
setHasTrackedRead(false);
125104
}, [currentSlug]);
@@ -340,6 +319,27 @@ const TerminalBlogPostPage = () => {
340319

341320
return (
342321
<div className="min-h-screen bg-black text-orange-500 font-mono overflow-y-auto custom-scrollbar-terminal relative">
322+
<Seo
323+
title={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
324+
description={post.body.substring(0, 150)}
325+
keywords={post.attributes.tags ? post.attributes.tags.join(', ') : ''}
326+
ogTitle={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
327+
ogDescription={post.body.substring(0, 150)}
328+
ogImage={
329+
post.attributes.ogImage ||
330+
post.attributes.image ||
331+
'/images/asset/ogtitle.png'
332+
}
333+
twitterCard="summary_large_image"
334+
twitterTitle={`${post.attributes.title.toUpperCase()} | TERMINAL LOG`}
335+
twitterDescription={post.body.substring(0, 150)}
336+
twitterImage={
337+
post.attributes.ogImage ||
338+
post.attributes.image ||
339+
'/images/asset/ogtitle.png'
340+
}
341+
/>
342+
343343
<style>{`
344344
body { background-color: black; }
345345
`}</style>

0 commit comments

Comments
 (0)