#How to render embeds from Contentful?

3 messages · Page 1 of 1 (latest)

autumn mica
#

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!

mortal haloBOT
#
Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

autumn mica
#

I have tried looking at the Docs but not able to understand how to work around the above problem - it would be great if someone can point me to solution to this.