Problems with model paragraph on Astro

🆘 Support
1

hi, I am working with Astro and Tailwind for styling. Actually everything works very good (great CMS), but just one problem.
In the website there is some text with multiple parragraphs as content. For that I try to model with multiple-parragraph-text, structured-text and modular-content to get the content on the website.
With multiple-paragraph the text is render, but not the styles applied by the css clases.
With the other options, the text is not renderize at all.
I was searching but didn’t find any solution so far.
Thanks for any support

2

Hi @web,

Welcome to the Dato forum!

Have you already see our Astro starter kit, which demonstrates how to use these various field types & components? https://www.datocms.com/marketplace/starters/astro-starter-kit

Specifically, in the source code, you can see:

You would use similar logic to apply CSS classes to specific types of blocks or links.

If that’s not the issue, could you please post some code snippets? It’s hard to know what is going on with your specific content unless we can see what it looks like in the CMS and also how you’re trying to render it.

If it’s just a public demo thing, feel free to post it here in the forum, or if it’s private, you can email us at support@datocms.com. It’s best if you can share the specific record URLs you’re trying to render and the frontend code that renders it. You can either share some snippets with us or share the whole repo with me at r.tuan@datocms.com (by email or via Github) if that’s easier.

Thanks!

3

Hi. Yes, I saw your starting kit but I am trying to integrate Datocms to an existing project. Also I wish to avoid to install external libraries if it’s possible. In my understanding it should be possible to pass multiple paragraphs to be render in a page without install something extra.
So, the question is how to render multiple paragraphs with Datocms?

4

Hi @web,

It’s difficult to properly troubleshoot this without seeing your entire lifecycle from the record to the query to your rendering code. Could you please share a URL and your frontend code with us?

Without that, I can only answer in vague generalities:

  • It depends on your original field type (plaintext vs markdown vs HTML vs structured text)
  • For plaintext fields, you either need to convert linebreaks (\n) to <p> or <br/> tags and/or maybe add some CSS whitespace styling, or maybe use a <pre> tag if you prefer.
  • For Markdown fields, you need to install a third party renderer. This is a limitation of Astro: https://docs.astro.build/en/guides/markdown-content/#fetching-remote-markdown. Alternatively, you can change your query to DatoCMS to fetch the markdown as HTML instead (using the html: true param in GraphQL).
  • For HTML fields, you have to use Astro’s set:html directive: https://docs.astro.build/en/reference/directives-reference/#sethtml
  • For Structured Text fields, it’s much more complicated because you have to handle the parsing of our JSON DAST format into HTML. We very strongly recommend using our lib for this, our own <StructuredText/> component for Astro. But if you really don’t want to use a lib, you can look at its source code (it’s open-source) and copy-paste or reimplement the datocms-structured-text-utils functions yourself. (This will not be easy.)

I don’t know which of these specific scenarios, if any, apply to you. If you can share your specific info with us, I can better tell you what exactly you’d need to do. Otherwise, I hope that general info helps you find the right path!

5

thanks, already solve it!

1 Like
6

What was the issue? (Just in case other Astro users run into the same problem)

7

Hi, sure. I guess with the component it would be easier, and I will try later. But what I did was create a function to go through the nodes and evaluates where are paragraph or list or headers. And to renderize that I need to use set:html

1 Like
8

Gotcha. Thanks for the details!