/* eslint-disable */ 'use client'; import type { GetStaticPaths, InferGetStaticPropsType } from 'next'; import Head from 'next/head'; import Image from "next/image"; import Link from 'next/link'; import { useEffect, useState } from 'react'; import "@/globals.css"; type SeoAttributes = { id: number; metaTitle: string; metaDescription: string; metaImage: { id: number; data: { attributes: { formats: { large: { url: string; }; medium: { url: string; }; }; }; }; }; keywords: string; metaRobots: string | null; structuredData: string | null; metaViewport: string | null; canonicalURL: string | null; }; type BlogPostAttributes = { title: string; // Assuming title is extracted from the first few words of the article Article: string; createdAt: string; updatedAt: string; publishedAt: string; seo: SeoAttributes; }; type BlogPost = { id: number; attributes: BlogPostAttributes; }; export const getStaticPaths: GetStaticPaths = async () => { try { const response = await fetch("https://cms.quivr.app/api/blogs"); if (!response.ok) { throw new Error('Network response was not ok'); } const data: { data: BlogPost[] } = await response.json(); const paths = data.data.map(post => ({ params: { id: post.id.toString() } })); return { paths, fallback: false, }; } catch (error) { console.error("Error fetching blog paths:", error); return { paths: [], fallback: false, }; } }; export const getStaticProps = async (context: { params: { id: string } }) => { try { const response = await fetch(`https://cms.quivr.app/api/blogs/${context.params.id}?populate=seo,seo.metaImage`); const data: { data: BlogPost } = await response.json(); return { props: { post: data.data, }, }; } catch (error) { console.error("Error fetching blog post:", error); return { notFound: true, }; } }; const BlogPostDetail = ({ post }: InferGetStaticPropsType) => { const { metaTitle, metaDescription, keywords, canonicalURL } = post.attributes.seo; // Extract different image formats const { large, medium } = post.attributes.seo.metaImage.data.attributes.formats; const [imageUrl, setImageUrl] = useState(medium.url); useEffect(() => { // Determine which image URL to use once the component has mounted on the client side setImageUrl(window.innerWidth > 768 ? large.url : medium.url); }, []); return (
{metaTitle} {canonicalURL && }

{metaTitle}

Posted on {post.attributes.publishedAt}

{metaDescription}

{metaTitle}
); } export default BlogPostDetail;