113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import type {Metadata, ResolvingMetadata} from 'next';
|
|
import { draftMode } from 'next/headers'
|
|
import { notFound } from 'next/navigation';
|
|
import {fetchBlogPost, fetchBlogPosts, Widget} from "../../../../lib/contentful/blogPosts";
|
|
import Util from "node:util";
|
|
import RichText from "../../../../lib/contentful/RichText";
|
|
import Link from "next/link";
|
|
|
|
interface BlogPostPageParams {
|
|
slug: string
|
|
locale: string
|
|
}
|
|
|
|
interface BlogPostPageProps {
|
|
params: BlogPostPageParams
|
|
}
|
|
|
|
export async function generateMetadata({ params }: BlogPostPageProps, parent: ResolvingMetadata): Promise<Metadata> {
|
|
const blogPost = await fetchBlogPost({ slug: params.slug, preview: draftMode().isEnabled })
|
|
|
|
if (!blogPost) {
|
|
return notFound()
|
|
}
|
|
|
|
return {
|
|
title: blogPost.title,
|
|
description: blogPost.metaDescription
|
|
}
|
|
}
|
|
|
|
|
|
function renderWidget (widget: Widget, index: number) {
|
|
switch (widget.type){
|
|
case 'widgetParagraph':
|
|
return (
|
|
<div key={'widget'+index} >
|
|
<h2 className="title-h2">
|
|
{widget.widget.subTitle}
|
|
</h2>
|
|
<RichText document={widget.widget.body} />
|
|
</div>
|
|
)
|
|
case 'widgetMedia':
|
|
return (
|
|
<img key={'widget'+index} src={widget.widget.file?.src}/>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default async function BlogItem({params}: { params: BlogPostPageParams }) {
|
|
const item = await fetchBlogPost({slug: params.slug, preview: draftMode().isEnabled })
|
|
console.log('BLOG POST')
|
|
console.log(Util.inspect(item, {showHidden: false, depth: null, colors: true}))
|
|
if (!item) notFound();
|
|
|
|
return (
|
|
<div className="b-news-page">
|
|
<div className="b-inner">
|
|
<h1 className="b-news-page__title">{item.title}</h1>
|
|
<div className="news-item__badge">{item.category}</div>
|
|
<div className="b-news-page__text">
|
|
|
|
</div>
|
|
<div className="b-news-page__image">
|
|
<img className="" src="/images/news1.png" alt=""/>
|
|
</div>
|
|
<div className="news-item__info">
|
|
<div className="news-item__info__author">
|
|
<Link href={`/${params.locale}/experts/${item.author?.expertId}`} className="news-item">
|
|
<img className="" src={item.author.avatar.src} alt=""/>
|
|
<div className="news-item__info__author__inner">
|
|
<div className="news-item__info__name">{item.author?.name}</div>
|
|
<div className="news-item__info__date">{item.createdAt}</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div className="news-item__info__counter">
|
|
<div className="news-item__info__like">
|
|
<img className="" src="/images/heart-outline.svg" alt=""/>
|
|
165
|
|
</div>
|
|
<div className="news-item__info__share">
|
|
<img className="" src="/images/share-social.svg" alt=""/>
|
|
Share
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="b-news-page__inner">
|
|
{item.body.map(renderWidget)}
|
|
</div>
|
|
</div>
|
|
<div className="b-inner" style={ {marginTop: '40px'}}>
|
|
<nav className="min-h-6 pb-6">
|
|
<Link href='/'>
|
|
Home
|
|
</Link>
|
|
>
|
|
<Link href={`/${params.locale}/blog/category/${item.categorySlug}`}>
|
|
{item.category}
|
|
</Link>
|
|
>
|
|
<span>
|
|
{item.title}
|
|
</span>
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
};
|