{"id":68990,"date":"2023-07-19T12:06:42","date_gmt":"2023-07-19T04:06:42","guid":{"rendered":"https:\/\/version-2.com\/?p=68990"},"modified":"2023-07-19T14:24:30","modified_gmt":"2023-07-19T06:24:30","slug":"rendering-storyblok-rich-text-in-astro","status":"publish","type":"post","link":"https:\/\/version-2.com\/zh\/2023\/07\/rendering-storyblok-rich-text-in-astro\/","title":{"rendered":"Rendering Storyblok Rich Text in Astro"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Rendering Rich Text elements in headless content management systems (CMS) like Storyblok can be challenging. We decided to carry out this process with Astro. Here is what we learned in the process.<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div>

\"\"
<\/span><\/b><\/span>Using an official integration<\/b><\/span><\/p><\/div>

The Storyblok CMS has many integrations for various frontend frameworks, including React, Vue, and Svelte. Luckily for us, they also integrated it for Astro. Astro is the new kid on the block, with a vibrant and active community and a responsive developer team. These are just a few of the reasons that we chose Astro<\/a> for website development.<\/p>

Headless CMS platforms are designed to provide content through APIs, allowing developers to use that content in various applications and front-end frameworks. The most straightforward way of using Storyblok in the Astro framework is through its official storyblok-astro<\/a> integration.<\/p>

Rich Text elements often contain HTML tags, inline styles, and other formatting options that need to be properly rendered on the front end. Besides common WYSIWYG (\u201cwhat you see is what you get\u201d) editor capabilities, Storyblok is capable of allowing content editors to embed such elements as inline blocks (components), custom styling, emojis, quotes, and code snippets.<\/p>

The official integration provides an easy way to render Rich Text by using the renderRichText<\/i> <\/b>function that comes with @storyblok\/astro<\/i>:<\/p>

import<\/span> {<\/span> RichTextSchema<\/span>,<\/span> renderRichText <\/span>}<\/span> from<\/span> “@storyblok\/astro”<\/span>;<\/span><\/div><\/div>
import<\/span> cloneDeep<\/span> from<\/span> “clone-deep”<\/span>;<\/span><\/div><\/div>
const<\/span> mySchema <\/span>=<\/span> cloneDeep<\/span>(<\/span>RichTextSchema<\/span>)<\/span>;<\/span><\/div><\/div>
const<\/span> {<\/span> blok <\/span>}<\/span> =<\/span> Astro<\/span>.<\/span>props<\/span>;<\/span><\/div><\/div>
const<\/span> renderedRichText <\/span>=<\/span> renderRichText<\/span>(<\/span>blok<\/span>.<\/span>text<\/span>,<\/span> {<\/span><\/div><\/div>
schema<\/span>:<\/span> mySchema<\/span>,<\/span><\/div><\/div>
resolver<\/span>:<\/span> (<\/span>component<\/span>,<\/span> blok<\/span>)<\/span> =><\/span> {<\/span><\/div><\/div>
switch<\/span> (<\/span>component<\/span>)<\/span> {<\/span><\/div><\/div>
case<\/span> “my-custom-component”<\/span>:<\/span><\/div><\/div>
return<\/span> `<\/span><div class=”my-component-class”><\/span>${<\/span>blok<\/span>.<\/span>text<\/span>}<\/span><\/div><\/span>`<\/span>;<\/span><\/div><\/div>
break<\/span>;<\/span><\/div><\/div>
default<\/span>:<\/span><\/div><\/div>
return<\/span> `<\/span>Component <\/span>${<\/span>component<\/span>}<\/span> not found<\/span>`<\/span>;<\/span><\/div><\/div>
}<\/span><\/div><\/div>
}<\/span>,<\/span><\/div><\/div>
}<\/span>)<\/span>;<\/span><\/div><\/div>
\u00a0<\/pre><\/div><\/div>
A challenge<\/b><\/h2>
Although the renderRichText <\/i>from @storyblok\/astro<\/i> works fine and covered our most basic needs, it quickly turned out to be limiting and problematic for the following reasons:<\/p>
  1. The renderRichText<\/i> utility cannot map Rich Text elements to actual Astro components and so cannot render embedded Storyblok components inside the Rich Text field in CMS.<\/p><\/div><\/li>
  2. Links that you might want to pass through your app’s router cannot be reused because they require the actual function to be mapped with data.<\/p>
    It is hard to maintain the string values, especially when complex needs arise \u2014 for example, when setting classes and other HTML properties dynamically. It may be possible to minimize the complexity by using some HTML parsers like ultrahtml<\/a>, but that does not eliminate the problem entirely.<\/p><\/div><\/li><\/ol>
    The solution<\/b><\/h2>
    Instead of dealing with HTML markup, storyblok-rich-text-astro-renderer<\/a> provides a capability to convert any Storyblok CMS Rich Text data structure into the nested component nodes structure \u2014 { component, props, content <\/i>} \u2014 and render it with Astro. The configuration is easily extended to meet all project needs.<\/p>
    The package delivers:<\/b><\/p>