chore: Merge branch 'main'

README.md

@@ -3,7 +3,7 @@
 		<img  src="https://a.storyblok.com/f/88751/600x200/cc68aca8ea/storyblok-astro.jpg" width="300" height="100" alt="Storyblok + Astro">
 	</a>
 	<h1 align="center">@storyblok/astro</h1>
-	<p align="center">Astro module for the <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" target="_blank">Storyblok</a>, Headless CMS.</p> <br />
+	<p align="center">Astro module for the <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" target="_blank">Storyblok</a> Headless CMS.</p> <br />
 </div>
 
 <p align="center">
@@ -125,7 +125,7 @@ const { blok } = Astro.props
 ---
 
 <main {...storyblokEditable(blok)}>
-  {blok.body?.map(blok => {return <StoryblokComponent blok="{blok}" />})}
+  {blok.body?.map(blok => {return <StoryblokComponent blok={blok} />})}
 </main>
 ```
 
@@ -160,7 +160,7 @@ const { data } = await storyblokApi.get("cdn/stories/home", {
 const story = data.story;
 ---
 
-<StoryblokComponent blok="{story.content}" />
+<StoryblokComponent blok={story.content} />
 ```
 
 > Note: The available methods are described in the [storyblok-js-client] repository(https://github.com/storyblok/storyblok-js-client#method-storyblokget)
@@ -174,9 +174,9 @@ In order to dynamically generate Astro pages based on the Stories in your Storyb
 import { useStoryblokApi } from "@storyblok/astro";
 import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
 
-const storyblokApi = useStoryblokApi();
-
 export async function getStaticPaths() {
+  const storyblokApi = useStoryblokApi();
+
   const { data } = await storyblokApi.get("cdn/links", {
     version: "draft",
   });
@@ -192,14 +192,16 @@ export async function getStaticPaths() {
 
 const { slug } = Astro.params;
 
+const storyblokApi = useStoryblokApi();
+
 const { data } = await storyblokApi.get(`cdn/stories/${slug}`, {
   version: "draft",
 });
 
 const story = data.story;
 ---
 
-<StoryblokComponent blok="{story.content}" />
+<StoryblokComponent blok={story.content} />
 ```
 
 ### Using the Storyblok Bridge
@@ -221,7 +223,7 @@ const { blok } = Astro.props
 const renderedRichText = renderRichText(blok.text)
 ---
 
-<div set:html="{renderedRichText}"></div>
+<div set:html={renderedRichText}></div>
 ```
 
 ## API

lib/StoryblokComponent.astro

@@ -5,4 +5,4 @@
 	const Component = components[blok.component];
 ---
 
-{<Component blok={blok} />}
+<Component blok={blok} />

lib/package.json

@@ -30,9 +30,9 @@
     "@storyblok/js": "^1.7.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.18.13",
     "@cypress/vite-dev-server": "^2.0.7",
-    "@rollup/plugin-dynamic-import-vars": "^1.4.3",
+    "@rollup/plugin-dynamic-import-vars": "^1.4.4",
     "@vue/babel-preset-app": "^4.5.13",
     "@vue/test-utils": "next",
     "axios": "^0.27.2",