// app/blog/[slug]/page.tsx "use client"; import Code from "@/app/components/blocks/Code"; import CoverImage from "@/app/components/blocks/CoverImage"; import FollowerImage from "@/app/components/blocks/FollowerImage"; import RichText from "@/app/components/blocks/RichText"; import NavBar from "@/app/components/NavBar"; import PostSkeleton from "@/app/components/PostSkeleton"; import { Block, Type } from "@/types/page/Blocks"; import * as Pages from "@/types/page/Pages"; import { div } from "framer-motion/client"; import { useEffect, useState } from "react"; import { GoSquareFill } from "react-icons/go"; export default function Page({ params }: { params: { slug: string } }) { const [post, setPost] = useState(); const [showError, setShowError] = useState(""); useEffect(() => { const storedPost = sessionStorage.getItem(params.slug); if (storedPost) { setPost(JSON.parse(storedPost)); sessionStorage.removeItem(params.slug); console.log(JSON.parse(storedPost)); } else { fetch(`/api/blogData`) .then((res) => res.json()) .then((data) => { let fetchedPost; Object.entries(data.posts).forEach(([key, value]) => { // @ts-ignore const s = value.slug; if (s === params.slug) fetchedPost = value; }); if (!fetchedPost) setShowError("This post doesn't exist!"); else setPost(fetchedPost); }) .catch((err) => console.error(err)); } }, []); return (

{showError !== "" ? (

{showError}

) : (

{post === undefined ? ( ) : (

{post.blocks[0].type === Type.image && post.blocks[0].content[0].href ? ( ) : ( <> )}

{post.title}

{new Date( post.date, ).toLocaleDateString("en-GB")} /{post.slug}

{post.authors ? (

{post.authors.map( (author: Pages.Author) => { return (

{ author.name }

); }, )}

) : ( <> )}

{post.blocks.map( (block: Block, index: number) => { switch (block.type) { case "heading_1": return (

); case "heading_2": return (

); case "heading_3": return (

); case "paragraph": return (

); case "code": const language = "language-" + block.content[0].language; const content = block.content .map((c) => c.text) .join(" "); return (


                                                );
                                            case "divider":
                                                const hasCoverImage =
                                                    post.blocks[0].type ===
                                                    Type.image;
                                                if (
                                                    (!hasCoverImage &&
                                                        index === 1) ||
                                                    (hasCoverImage &&
                                                        index === 2)
                                                )
                                                    break;
                                                return (
                                                    
                                                );
                                            case "bulleted_list_item":
                                                return (
                                                    
                                                        
                                                        
                                                    
                                                );
                                            case "numbered_list_item":
                                                let number = 1;

                                                if (
                                                    block.metaData &&
                                                    block.metaData.line_number
                                                )
                                                    number =
                                                        block.metaData
                                                            .line_number;

                                                return (
                                                    
                                                        {number + ". "}
                                                        
                                                    
                                                );
                                            case "quote":
                                                return (
                                                    
                                                        {block.content
                                                            .map((c) => c.text)
                                                            .join(" ")}
                                                    
                                                );
                                            case "image":
                                                if (!block.content[0].href) {
                                                    console.error(
                                                        `Error: could not load image for block with index of "${index}".`,
                                                    );
                                                    break;
                                                }
                                                if (index === 0) break;

                                                return (
                                                    
                                                );
                                            default:
                                                return <>;
                                        }
                                    },
                                )}

)}

)}


    );
}

My Blog