breadcrumbs & author link

src/app/[locale]/blog/[slug]/page.tsx

@@ -5,9 +5,11 @@ 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 {
@@ -61,23 +63,25 @@ export default async function BlogItem({params}: { params: BlogPostPageParams })
 
                 </div>
                 <div className="b-news-page__image">
-                    <img className="" src="/images/news1.png" alt="" />
+                    <img className="" src="/images/news1.png" alt=""/>
                 </div>
                 <div className="news-item__info">
                     <div className="news-item__info__author">
-                        <img className="" src={item.author.avatar.src} alt="" />
+                        <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="" />
+                            <img className="" src="/images/heart-outline.svg" alt=""/>
                             165
                         </div>
                         <div className="news-item__info__share">
-                            <img className="" src="/images/share-social.svg" alt="" />
+                            <img className="" src="/images/share-social.svg" alt=""/>
                             Share
                         </div>
                     </div>
@@ -86,6 +90,23 @@ export default async function BlogItem({params}: { params: BlogPostPageParams })
                     {item.body.map(renderWidget)}
                 </div>
             </div>
+            <div className="b-inner" style={ {marginTop: '40px'}}>
+                <nav className="min-h-6 pb-6">
+                    <Link href='/'>
+                        Home
+                    </Link>
+                    &nbsp;>&nbsp;
+                    <Link href={`/${params.locale}/blog/category/${item.categorySlug}`}>
+                        {item.category}
+                    </Link>
+                    &nbsp;>&nbsp;
+                    <span>
+                            {item.title}
+                        </span>
+                </nav>
             </div>
+
+        </div>
+
     );
 };

src/components/BlogPosts/BlogPostsList.tsx

@@ -44,6 +44,7 @@ export const BlogPostsList =  ({ basePath = '/', locale, pageSize = DEFAULT_PAGE
                                         </div>
                                     </div>
                                     <div className="news-item__info">
+                                        <Link href={`/${locale}/experts/${item.author?.expertId}`} className="news-item">
                                         <div className="news-item__info__author">
                                             <img className="" src={item.author.avatar.src} alt=""/>
                                             <div className="news-item__info__author__inner">
@@ -51,6 +52,7 @@ export const BlogPostsList =  ({ basePath = '/', locale, pageSize = DEFAULT_PAGE
                                                 <div className="news-item__info__date">{item.createdAt}</div>
                                             </div>
                                         </div>
+                                        </Link>
                                         <div className="news-item__info__counter">
                                             <div className="news-item__info__like">
                                                 <img className="" src="/images/heart-outline.svg" alt=""/>

src/lib/contentful/authors.ts

@@ -11,6 +11,7 @@ export function parseContentfulAuthor(authorEntry?: AuthorEntry<any, any>): Auth
 
     return {
         name: authorEntry.fields.name || '',
+        expertId: authorEntry.fields.expertId || '',
         avatar: parseContentfulContentImage(authorEntry.fields.avatar),
     }
 }

src/lib/contentful/blogPosts.ts

@@ -59,6 +59,7 @@ export function parseContentfulBlogPost(entry?: PostEntry): BlogPost | null {
         author: parseContentfulAuthor(entry.fields.author),
         createdAt: dayjs(entry.sys.createdAt).format('MMM DD, YYYY'),
         category: entry.fields.category.fields.title,
+        categorySlug: entry.fields.category.fields.slug,
         body: parseWidgets(entry.fields.body) || []
     }
 }

src/types/author.ts

@@ -5,10 +5,12 @@ import {ContentImage} from "../lib/contentful/contentImage";
 export interface AuthorFields {
     name: EntryFieldTypes.Symbol
     avatar: EntryFieldTypes.AssetLink
+    expertId: EntryFieldTypes.AssetLink
 }
 
 export interface Author {
     name: string
+    expertId: string
     avatar: ContentImage | null
 }
 

src/types/blogPost.ts

@@ -28,6 +28,7 @@ export interface BlogPost {
     listImage: ContentImage | null
     author: Author | null
     category: string
+    categorySlug: string
     createdAt: string
     metaDescription: string
     body: Array<WidgetMedia | WidgetParagraph>