Skip to content

Commit 80c1520

Browse files
fezcodefezcode
committed
fix: logs in different areas
1 parent 6ebe050 commit 80c1520

File tree

4 files changed

+48
-40
lines changed

4 files changed

+48
-40
lines changed

‎src/components/AnimatedRoutes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ function AnimatedRoutes() {
259259
}
260260
/>
261261
<Route
262-
path="/logs/:slug"
262+
path="/logs/:category/:slugId"
263263
element={
264264
<motion.div
265265
initial="initial"

‎src/components/LogCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const LogCard = ({log, index, totalLogs}) => {
9191
);
9292

9393
return (
94-
<Link to={`/logs/${slug}`} className="block h-full group">
94+
<Link to={`/logs/${log.category.toLowerCase()}/${slug}`} className="block h-full group">
9595
<div
9696
className="relative h-full border border-gray-800 rounded-xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:border-gray-700 flex flex-col"
9797
style={{backgroundColor: `${accentColor}30`}}

‎src/hooks/useSearchableData.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,34 @@ const useSearchableData = () => {
44
const [items, setItems] = useState([]);
55
const [isLoading, setIsLoading] = useState(true);
66

7+
const categories = [
8+
'Book', 'Movie', 'Game', 'Article', 'Music', 'Series', 'Food', 'Websites', 'Tools',
9+
];
10+
711
useEffect(() => {
812
const fetchData = async () => {
913
setIsLoading(true);
1014
try {
11-
const [postsRes, projectsRes, logsRes, appsRes] = await Promise.all([
15+
const fetchLogPromises = categories.map(async (category) => {
16+
const response = await fetch(`/logs/${category.toLowerCase()}/${category.toLowerCase()}.json`);
17+
if (!response.ok) {
18+
console.warn(`Category JSON not found for ${category}: ${response.statusText}`);
19+
return [];
20+
}
21+
return response.json();
22+
});
23+
24+
const [postsRes, projectsRes, allLogsArrays, appsRes] = await Promise.all([
1225
fetch('/posts/posts.json'),
1326
fetch('/projects/projects.json'),
14-
fetch('/logs/logs.json'),
27+
Promise.all(fetchLogPromises), // Await all log category fetches
1528
fetch('/apps/apps.json'),
1629
]);
1730

1831
const postsData = await postsRes.json();
1932
const projectsData = await projectsRes.json();
20-
const logsData = await logsRes.json();
2133
const appsData = await appsRes.json();
34+
const combinedLogs = allLogsArrays.flat(); // Flatten the array of arrays from logs
2235

2336
// Process Apps
2437
const allApps = Object.values(appsData)
@@ -45,7 +58,7 @@ const useSearchableData = () => {
4558
const allProjects = projectsData.map(p => ({ ...p, type: 'project', path: `/projects/${p.slug}` }));
4659

4760
// Process Logs
48-
const allLogs = logsData.map(l => ({ ...l, type: 'log', path: `/logs/${l.slug}` }));
61+
const allLogs = combinedLogs.map(l => ({ ...l, type: 'log', path: `/logs/${l.category.toLowerCase()}/${l.slug}` }));
4962

5063
// Define static routes and custom commands
5164
const staticRoutes = [

‎src/pages/LogDetailPage.js‎

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React, { useState, useEffect, useRef } from 'react';
2-
import { useParams, Link } from 'react-router-dom';
1+
import React, {useState, useEffect, useRef} from 'react';
2+
import {useParams, Link} from 'react-router-dom';
33
import ReactMarkdown from 'react-markdown';
44
import LogMetadata from '../components/metadata-cards/LogMetadata';
5-
import { ArrowLeftIcon, ArrowSquareOutIcon } from '@phosphor-icons/react';
5+
import {ArrowLeftIcon, ArrowSquareOutIcon} from '@phosphor-icons/react';
66
import ImageModal from '../components/ImageModal';
77

88
import Seo from '../components/Seo';
99
import remarkGfm from 'remark-gfm';
1010
import rehypeRaw from 'rehype-raw';
1111

12-
const LinkRenderer = ({ href, children }) => {
12+
const LinkRenderer = ({href, children}) => {
1313
const isExternal = href.startsWith('http') || href.startsWith('https');
1414
return (
1515
<a
@@ -18,13 +18,13 @@ const LinkRenderer = ({ href, children }) => {
1818
target={isExternal ? '_blank' : undefined}
1919
rel={isExternal ? 'noopener noreferrer' : undefined}
2020
>
21-
{children} {isExternal && <ArrowSquareOutIcon className="text-xs" />}
21+
{children} {isExternal && <ArrowSquareOutIcon className="text-xs"/>}
2222
</a>
2323
);
2424
};
2525

2626
const LogDetailPage = () => {
27-
const { slug } = useParams();
27+
const {category, slugId} = useParams();
2828
const [log, setLog] = useState(null);
2929
const [loading, setLoading] = useState(true);
3030
const contentRef = useRef(null);
@@ -48,50 +48,45 @@ const LogDetailPage = () => {
4848
try {
4949
let logMetadata = null;
5050
let logBody = '';
51-
let logCategory = '';
52-
53-
// Fetch all category JSONs to find the logMetadata
54-
const fetchMetadataPromises = categories.map(async (category) => {
55-
const response = await fetch(`/logs/${category.toLowerCase()}/${category.toLowerCase()}.json`);
56-
if (!response.ok) {
57-
console.warn(`Category JSON not found for ${category}: ${response.statusText}`);
58-
return [];
59-
}
60-
return response.json();
61-
});
62-
63-
const allLogsArrays = await Promise.all(fetchMetadataPromises);
64-
const combinedLogsMetadata = allLogsArrays.flat();
51+
// Fetch the specific category JSON based on the URL parameter
52+
const response = await fetch(`/logs/${category}/${category}.json`);
53+
if (!response.ok) {
54+
console.error(`Category JSON not found for ${category}: ${response.statusText}`);
55+
setLog({attributes: {title: 'Category not found'}, body: ''});
56+
setLoading(false);
57+
return;
58+
}
59+
const categoryLogs = await response.json();
6560

66-
logMetadata = combinedLogsMetadata.find((item) => item.slug === slug);
61+
// Find the specific log metadata using slugId
62+
logMetadata = categoryLogs.find((item) => item.slug === slugId);
6763

6864
if (logMetadata) {
69-
logCategory = logMetadata.category.toLowerCase();
70-
const logContentResponse = await fetch(`/logs/${logCategory}/${slug}.txt`);
65+
const logContentResponse = await fetch(`/logs/${category}/${slugId}.txt`);
7166

7267
if (logContentResponse.ok) {
7368
logBody = await logContentResponse.text();
7469
} else {
75-
console.error(`Failed to fetch log content for ${slug}.txt: ${logContentResponse.statusText}`);
70+
console.error(`Failed to fetch log content for ${slugId}.txt: ${logContentResponse.statusText}`);
7671
}
7772
} else {
78-
console.warn(`Log metadata not found for slug: ${slug}`);
73+
console.warn(`Log metadata not found for slugId: ${slugId} in category: ${category}`);
7974
}
8075

8176
if (logMetadata && logBody) {
82-
setLog({ attributes: logMetadata, body: logBody });
77+
setLog({attributes: logMetadata, body: logBody});
8378
} else {
84-
setLog({ attributes: { title: 'Log not found' }, body: '' });
79+
setLog({attributes: {title: 'Log not found'}, body: ''});
8580
}
8681
} catch (error) {
87-
console.error('Error fetching log or logs.json:', error);
88-
setLog({ attributes: { title: 'Error loading log' }, body: '' });
82+
console.error('Error fetching log:', error);
83+
setLog({attributes: {title: 'Error loading log'}, body: ''});
8984
}
9085
setLoading(false);
9186
};
9287

9388
fetchLog();
94-
}, [slug]);
89+
}, [category, slugId]);
9590

9691
if (loading) {
9792
// Skeleton loading screen for LogDetailPage
@@ -129,7 +124,7 @@ const LogDetailPage = () => {
129124
return <div className="text-center py-16">Log not found</div>;
130125
}
131126

132-
const ImageRenderer = ({ src, alt }) => (
127+
const ImageRenderer = ({src, alt}) => (
133128
<img
134129
src={src}
135130
alt={alt}
@@ -163,7 +158,7 @@ const LogDetailPage = () => {
163158
to="/logs"
164159
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
165160
>
166-
<ArrowLeftIcon size={24} /> Back to Logs
161+
<ArrowLeftIcon size={24}/> Back to Logs
167162
</Link>
168163
<div
169164
ref={contentRef}
@@ -172,14 +167,14 @@ const LogDetailPage = () => {
172167
<ReactMarkdown
173168
remarkPlugins={[remarkGfm]}
174169
rehypePlugins={[rehypeRaw]}
175-
components={{ a: LinkRenderer, img: ImageRenderer }}
170+
components={{a: LinkRenderer, img: ImageRenderer}}
176171
>
177172
{log.body}
178173
</ReactMarkdown>
179174
</div>
180175
</div>
181176
<div className="hidden lg:block">
182-
<LogMetadata metadata={log.attributes} />
177+
<LogMetadata metadata={log.attributes}/>
183178
</div>
184179
</div>
185180
</div>

0 commit comments

Comments
 (0)