88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
'use client'
|
|
import { use } from 'react'
|
|
|
|
import { notFound } from 'next/navigation'
|
|
import { useSharedData } from '@/app/context/ProjectContext';
|
|
import { useMountTransition } from '@/hooks/useAnimations';
|
|
import "../../../styles/markdown-container.css";
|
|
import Link from 'next/link';
|
|
import { BLOG_POSTS, categoryLabel } from '@/data/content';
|
|
import SimpleGallery from '@/components/SimpleGallery';
|
|
import "../../../styles/blog.css";
|
|
|
|
export default function BlogPostPage({params}: { params: Promise<{ slug: string }> })
|
|
{
|
|
|
|
const mounted = useMountTransition(50)
|
|
const { slug } = use(params);
|
|
|
|
const hasValidPost = BLOG_POSTS.find((v)=>v.slug == slug);
|
|
if (!slug || !hasValidPost) notFound();
|
|
|
|
const hasValidDetails = hasValidPost.details
|
|
const postDetails = useSharedData();
|
|
|
|
return (
|
|
<div
|
|
id="blog-markdown-container"
|
|
className={"markdown-container"}
|
|
style={{
|
|
opacity: mounted ? 1 : 0,
|
|
transition: "all 0.5s ease",
|
|
translate: mounted ? "0 2em" : "0 0"
|
|
}}
|
|
>
|
|
|
|
{hasValidPost.category && (
|
|
<Link
|
|
className="blog-category-chip is-active blog-post-category-chip"
|
|
href={`/blog?category=${hasValidPost.category}`}
|
|
title={`All ${categoryLabel(hasValidPost.category)} posts`}
|
|
>
|
|
{categoryLabel(hasValidPost.category)}
|
|
</Link>
|
|
)}
|
|
|
|
{
|
|
hasValidDetails ?
|
|
(
|
|
<main dangerouslySetInnerHTML={{ __html: postDetails }}>
|
|
</main>
|
|
) : (
|
|
<p>No post details available.</p>
|
|
)
|
|
}
|
|
|
|
{hasValidPost.images && hasValidPost.images.length > 0 && (
|
|
<section className="project-details-gallery">
|
|
<h2>Gallery</h2>
|
|
<SimpleGallery images={hasValidPost.images} title={hasValidPost.title} gallerySize="large"/>
|
|
</section>
|
|
)}
|
|
|
|
|
|
<div style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: "1em",
|
|
marginBottom: "2em"
|
|
}}>
|
|
<Link onClick={(e)=>{
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}}
|
|
|
|
className="expand-on-hover-button"
|
|
href={"#"}>Back To Top</Link>
|
|
|
|
<Link
|
|
className="expand-on-hover-button"
|
|
href={"/blog"}>All Posts</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|