Hey All! I kinldy need help with finding how I can render the embed from a Contentful post on Astro page. Mind you I am a newbie I am still finding my way around this - so any help will be highly appreciated.
Currently my post shows this (see screenshot)
And the page is rendered is this (see screenshot)
My code:
---
import NewsLayout from "@layouts/NewsLayout.astro"
import { contentfulClient } from "@lib/contentful"
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"
import type { NewsEnPost } from "@lib/contentful"
export async function getStaticPaths() {
const { items } = await contentfulClient.getEntries<NewsEnPost>({
content_type: "newsEn",
})
const pages = items.map(item => ({
params: { slug: item.fields.slug },
props: {
title: item.fields.title,
date: new Date(item.fields.date).toLocaleDateString(),
description: item.fields.description,
image: item.fields.image,
content: documentToHtmlString(item.fields.content),
},
}))
return pages
}
const { title, date, description, image, content } = Astro.props
---
<NewsLayout
title={title}
date={date}
description={description}
image={image}
>
<article set:html={content} />
</NewsLayout>
Kindly request your help in pointing me in the right direction.
Thank you!