@storyblok/astro 7.2.1 → 7.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -389
- package/dist/storyblok-astro.es.js +316 -281
- package/dist/storyblok-astro.umd.js +10 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,426 +1,76 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@storyblok/astro</h1>
|
|
6
|
+
<p>
|
|
7
|
+
The Astro SDK to interact with <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" target="_blank">Storyblok API</a> and enable the <a href="https://www.storyblok.com/docs/guide/essentials/visual-editor?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" target="_blank">Real-time Visual Editing Experience</a>.
|
|
8
|
+
</p>
|
|
9
|
+
<br />
|
|
7
10
|
</div>
|
|
8
11
|
|
|
9
12
|
<p align="center">
|
|
10
13
|
<a href="https://npmjs.com/package/@storyblok/astro">
|
|
11
|
-
<img src="https://img.shields.io/npm/v/@storyblok/astro/latest.svg?style=flat-square" alt="Storyblok Astro" />
|
|
14
|
+
<img src="https://img.shields.io/npm/v/@storyblok/astro/latest.svg?style=flat-square&color=8d60ff" alt="Storyblok Astro SDK" />
|
|
12
15
|
</a>
|
|
13
16
|
<a href="https://npmjs.com/package/@storyblok/astro" rel="nofollow">
|
|
14
|
-
<img src="https://img.shields.io/npm/dt/@storyblok/astro.svg?style=
|
|
17
|
+
<img src="https://img.shields.io/npm/dt/@storyblok/astro.svg?style=appveyor&color=8d60ff" alt="npm">
|
|
15
18
|
</a>
|
|
16
|
-
</p>
|
|
17
|
-
|
|
18
|
-
<p align="center">
|
|
19
19
|
<a href="https://storyblok.com/join-discord">
|
|
20
20
|
<img src="https://img.shields.io/discord/700316478792138842?label=Join%20Our%20Discord%20Community&style=appveyor&logo=discord&color=8d60ff">
|
|
21
21
|
</a>
|
|
22
22
|
<a href="https://twitter.com/intent/follow?screen_name=storyblok">
|
|
23
23
|
<img src="https://img.shields.io/badge/Follow-%40storyblok-8d60ff?style=appveyor&logo=twitter" alt="Follow @Storyblok" />
|
|
24
24
|
</a><br/>
|
|
25
|
-
<a href="https://app.storyblok.com/#!/signup?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok
|
|
25
|
+
<a href="https://app.storyblok.com/#!/signup?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok/astro">
|
|
26
26
|
<img src="https://img.shields.io/badge/Try%20Storyblok-Free-8d60ff?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADpiRU/AAACRElEQVRIDWNgGGmAEd3D3Js3LPrP8D8WXZwSPiMjw6qvPoHhyGYwIXNAbGpbCjbzP0MYuj0YFqMroBV/wCxmIeSju64eDNzMBJUxvP/9i2Hnq5cM1devMnz984eQsQwETeRhYWHgIcJiXqC6VHlFBjUeXgav40cIWkz1oLYXFmGwFBImaDFBHyObcOzdW4aSq5eRhRiE2dgYlpuYoYSKJi8vw3GgWnyAJIs/AuPu4scPGObd/fqVQZ+PHy7+6udPOBsXgySLDfn5GRYYmaKYJcXBgWLpsx8/GPa8foWiBhuHJIsl2DkYQqWksZkDFgP5PObcKYYff//iVAOTIDlx/QPqRMb/YSYBaWlOToZIaVkGZmAZSQiQ5OPtwHwacuo4iplMQEu6tXUZMhSUGDiYmBjylFQYvv/7x9B04xqKOnQOyT5GN+Df//8M59ASXKyMHLoyDD5JPtbj42OYrm+EYgg70JfuYuIoYmLs7AwMjIzA+uY/zjAnyWJpDk6GOFnCvrn86SOwmsNtKciVFAc1ileBHFDC67lzG10Yg0+SjzF0ownsf/OaofvOLYaDQJoQIGix94ljv1gIZI8Pv38zPvj2lQWYf3HGKbpDCFp85v07NnRN1OBTPY6JdRSGxcCw2k6sZuLVMZ5AV4s1TozPnGGFKbz+/PE7IJsHmC//MDMyhXBw8e6FyRFLv3Z0/IKuFqvFyIqAzd1PwBzJw8jAGPfVx38JshwlbIygxmYY43/GQmpais0ODDHuzevLMARHBcgIAQAbOJHZW0/EyQAAAABJRU5ErkJggg==" alt="Follow @Storyblok" />
|
|
27
27
|
</a>
|
|
28
28
|
</p>
|
|
29
29
|
|
|
30
|
-
##
|
|
31
|
-
|
|
32
|
-
Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Astro](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro#astro)**, and get started in just a few minutes!
|
|
33
|
-
|
|
34
|
-
## Ultimate Tutorial
|
|
35
|
-
|
|
36
|
-
Are you looking for a hands-on, step-by-step tutorial? The **[Astro Ultimate Tutorial](https://www.storyblok.com/tp/the-storyblok-astro-ultimate-tutorial?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro)** has you covered! It provides comprehensive instructions on building a complete, multilingual website using Storyblok and Astro from start to finish.
|
|
37
|
-
|
|
38
|
-
## Installation
|
|
39
|
-
|
|
40
|
-
Install `@storyblok/astro`:
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
npm install @storyblok/astro
|
|
44
|
-
# yarn add @storyblok/astro
|
|
45
|
-
# See below for pnpm
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
> [!NOTE]
|
|
49
|
-
> With pnpm, hoist Storyblok dependencies publicly with `.npmrc`. For more information, please refer to the [pnpm documentation](https://pnpm.io/npmrc).
|
|
50
|
-
|
|
51
|
-
Add the following code to `astro.config.mjs` and replace the `accessToken` with the preview API token of your Storyblok space.
|
|
52
|
-
|
|
53
|
-
```js
|
|
54
|
-
import { defineConfig } from "astro/config";
|
|
55
|
-
import { storyblok } from "@storyblok/astro";
|
|
56
|
-
|
|
57
|
-
export default defineConfig({
|
|
58
|
-
integrations: [
|
|
59
|
-
storyblok({
|
|
60
|
-
accessToken: "<your-access-token>",
|
|
61
|
-
}),
|
|
62
|
-
],
|
|
63
|
-
});
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
> [!WARNING]
|
|
67
|
-
> This SDK uses the Fetch API under the hood. If your environment doesn't support it, you need to install a polyfill like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch). More info on [storyblok-js-client docs](https://github.com/storyblok/storyblok-js-client#fetch-use-polyfill-if-needed---version-5).
|
|
68
|
-
|
|
69
|
-
### Options
|
|
70
|
-
|
|
71
|
-
When you initialize the integration, you can pass all [_@storyblok/js_ options](https://github.com/storyblok/storyblok-js#features-and-api).
|
|
72
|
-
|
|
73
|
-
```js
|
|
74
|
-
// Defaults
|
|
75
|
-
storyblok({
|
|
76
|
-
accessToken: "<your-access-token>",
|
|
77
|
-
bridge: true,
|
|
78
|
-
livePreview: false,
|
|
79
|
-
apiOptions: {}, // storyblok-js-client options
|
|
80
|
-
components: {},
|
|
81
|
-
componentsDir: "src",
|
|
82
|
-
enableFallbackComponent: false,
|
|
83
|
-
customFallbackComponent: "",
|
|
84
|
-
useCustomApi: false,
|
|
85
|
-
});
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
> [!NOTE]
|
|
89
|
-
> By default, the `apiPlugin` from `@storyblok/js` is loaded. If you want to use your own method to fetch data from Storyblok, you can disable this behavior by setting `useCustomApi` to `true`, resulting in an optimized final bundle.
|
|
90
|
-
|
|
91
|
-
#### Region parameter
|
|
92
|
-
|
|
93
|
-
Possible values:
|
|
94
|
-
|
|
95
|
-
- `eu` (default): For spaces created in the EU
|
|
96
|
-
- `us`: For spaces created in the US
|
|
97
|
-
- `ca`: For spaces created in Canada
|
|
98
|
-
- `ap`: For spaces created in Australia
|
|
99
|
-
- `cn`: For spaces created in China
|
|
100
|
-
|
|
101
|
-
Full example for a space created in the US:
|
|
102
|
-
|
|
103
|
-
```js
|
|
104
|
-
storyblok({
|
|
105
|
-
accessToken: "<your-access-token>",
|
|
106
|
-
apiOptions: {
|
|
107
|
-
region: "us",
|
|
108
|
-
},
|
|
109
|
-
});
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
> [!WARNING]
|
|
113
|
-
> The `region` parameter **must** be specified unless the space was created in the EU.
|
|
114
|
-
|
|
115
|
-
## Getting started
|
|
116
|
-
|
|
117
|
-
### 1. Creating and linking your components to the Storyblok Visual Editor
|
|
118
|
-
|
|
119
|
-
Link your Astro components to their equivalents created in Storyblok with the following steps.
|
|
120
|
-
|
|
121
|
-
First, load the components globally by specifying their name and their path in `astro.config.mjs`:
|
|
122
|
-
|
|
123
|
-
```js
|
|
124
|
-
components: {
|
|
125
|
-
page: "storyblok/Page",
|
|
126
|
-
feature: "storyblok/Feature",
|
|
127
|
-
grid: "storyblok/Grid",
|
|
128
|
-
teaser: "storyblok/Teaser",
|
|
129
|
-
},
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
> [!NOTE]
|
|
133
|
-
> The `src` folder is automatically added to the beginning of the path, so in this example your Astro components should be located here:
|
|
134
|
-
>
|
|
135
|
-
> - `src/storyblok/Page.astro`
|
|
136
|
-
> - `src/storyblok/Feature.astro`
|
|
137
|
-
> - `src/storyblok/Grid.astro`
|
|
138
|
-
> - `src/storyblok/Teaser.astro`
|
|
139
|
-
>
|
|
140
|
-
> You can choose any other folder in the `src` directory for your Astro components.
|
|
141
|
-
|
|
142
|
-
> [!NOTE]
|
|
143
|
-
> If you prefer to use a different folder than `src`, you can specify one using the `componentsDir` option:
|
|
144
|
-
>
|
|
145
|
-
> ```js
|
|
146
|
-
> storyblok({
|
|
147
|
-
> componentsDir: "app",
|
|
148
|
-
> });
|
|
149
|
-
> ```
|
|
150
|
-
>
|
|
151
|
-
> Now, your Storyblok components can be located anywhere in the `app` folder, e.g. `page: "storyblok/Page"` for `app/storyblok/Page.astro` or `page: "Page"` for `app/Page.astro`.
|
|
152
|
-
|
|
153
|
-
For each component, use the `storyblokEditable()` function on its root element, passing the `blok` property that they receive:
|
|
154
|
-
|
|
155
|
-
```jsx
|
|
156
|
-
---
|
|
157
|
-
import { storyblokEditable } from "@storyblok/astro";
|
|
158
|
-
|
|
159
|
-
const { blok } = Astro.props
|
|
160
|
-
---
|
|
161
|
-
|
|
162
|
-
<div {...storyblokEditable(blok)}>
|
|
163
|
-
<h2>{blok.headline}</h2>
|
|
164
|
-
</div>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
Finally, you can use the provided `<StoryblokComponent>` for nested components; it will automatically render them (if they are registered globally):
|
|
168
|
-
|
|
169
|
-
```jsx
|
|
170
|
-
---
|
|
171
|
-
import { storyblokEditable } from "@storyblok/astro";
|
|
172
|
-
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
|
|
173
|
-
|
|
174
|
-
const { blok } = Astro.props
|
|
175
|
-
---
|
|
176
|
-
|
|
177
|
-
<main {...storyblokEditable(blok)}>
|
|
178
|
-
{blok.body?.map(blok => {return <StoryblokComponent blok={blok} />})}
|
|
179
|
-
</main>
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
> [!NOTE]
|
|
183
|
-
> The `blok` is the actual blok data coming from [Storblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro).
|
|
184
|
-
|
|
185
|
-
#### Using fallback components
|
|
186
|
-
|
|
187
|
-
By default, `@storyblok/astro` throws an error if a component is not implemented. Setting `enableFallbackComponent` to `true` bypasses that behavior, rendering a fallback component in the frontend instead. You can also use a custom fallback component by (for example) setting `customFallbackComponent: "storyblok/MyCustomFallback"`.
|
|
188
|
-
|
|
189
|
-
#### Using partial hydration
|
|
190
|
-
|
|
191
|
-
If you want to use partial hydration with any of the [frameworks supported by Astro](https://docs.astro.build/en/guides/integrations-guide/#article), follow these steps:
|
|
192
|
-
|
|
193
|
-
1. [Install the official Astro integration for your desired framework](https://docs.astro.build/en/guides/integrations-guide/#automatic-integration-setup)
|
|
194
|
-
2. Create an Astro component that serves as a wrapper and utilizes the most suitable [client directive](https://docs.astro.build/en/reference/directives-reference/#client-directives)
|
|
195
|
-
3. Create the actual component in Vue, Svelte, React or any other supported framework
|
|
196
|
-
|
|
197
|
-
For working examples, please refer to the [Live Demo on Stackblitz](https://stackblitz.com/edit/astro-sdk-demo).
|
|
198
|
-
|
|
199
|
-
### 2. Getting Storyblok Stories and using the Storyblok Bridge
|
|
200
|
-
|
|
201
|
-
#### Fetching one Story
|
|
30
|
+
## Features
|
|
202
31
|
|
|
203
|
-
|
|
32
|
+
- Fetch content from the Content Delivery API
|
|
33
|
+
- Connect frontend components with the Visual Editor via StoryblokBridge
|
|
34
|
+
- Render rich text content with the Storyblok Rich Text Renderer based on `@storyblok/richtext`
|
|
35
|
+
- `StoryblokComponent` for dynamic component rendering
|
|
36
|
+
- Visual Editor integration using `storyblokEditable`
|
|
37
|
+
- Real-time preview capability using `getLiveStory`
|
|
38
|
+
- Built-in TypeScript support with comprehensive type definitions
|
|
39
|
+
- SSR/SSG compatibility for Astro applications
|
|
204
40
|
|
|
205
|
-
|
|
206
|
-
---
|
|
207
|
-
import { useStoryblokApi } from "@storyblok/astro";
|
|
208
|
-
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
|
|
41
|
+
## Documentation
|
|
209
42
|
|
|
210
|
-
|
|
211
|
-
const { data } = await storyblokApi.get("cdn/stories/home", {
|
|
212
|
-
version: "draft",
|
|
213
|
-
});
|
|
43
|
+
For complete documentation, please visit [package reference](https://www.storyblok.com/docs/packages/storyblok-astro).
|
|
214
44
|
|
|
215
|
-
|
|
216
|
-
---
|
|
217
|
-
|
|
218
|
-
<StoryblokComponent blok={story.content} />
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
> [!NOTE]
|
|
222
|
-
> The available methods are described in the [storyblok-js-client](https://github.com/storyblok/storyblok-js-client#method-storyblokget) repository.
|
|
223
|
-
|
|
224
|
-
#### Dynamic Routing
|
|
225
|
-
|
|
226
|
-
In order to dynamically generate Astro pages based on the Stories in your Storyblok Space, you can use the [Storyblok Links API](https://www.storyblok.com/docs/api/content-delivery/v2#core-resources/links/links) and the Astro [`getStaticPaths()` function](https://docs.astro.build/en/reference/api-reference/#getstaticpaths) similar to this example:
|
|
227
|
-
|
|
228
|
-
```jsx
|
|
229
|
-
---
|
|
230
|
-
import { useStoryblokApi } from "@storyblok/astro";
|
|
231
|
-
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
|
|
232
|
-
|
|
233
|
-
export async function getStaticPaths() {
|
|
234
|
-
const storyblokApi = useStoryblokApi();
|
|
235
|
-
|
|
236
|
-
const { data } = await storyblokApi.getAll("cdn/links", {
|
|
237
|
-
version: "draft",
|
|
238
|
-
});
|
|
239
|
-
let links = data.links;
|
|
240
|
-
links = Object.values(links);
|
|
241
|
-
|
|
242
|
-
return links.map((link) => {
|
|
243
|
-
return {
|
|
244
|
-
params: { slug: link.slug },
|
|
245
|
-
};
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
const { slug } = Astro.params;
|
|
250
|
-
|
|
251
|
-
const storyblokApi = useStoryblokApi();
|
|
252
|
-
|
|
253
|
-
const { data } = await storyblokApi.get(`cdn/stories/${slug}`, {
|
|
254
|
-
version: "draft",
|
|
255
|
-
});
|
|
256
|
-
|
|
257
|
-
const story = data.story;
|
|
258
|
-
---
|
|
259
|
-
|
|
260
|
-
<StoryblokComponent blok={story.content} />
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
### Using the Storyblok Bridge
|
|
264
|
-
|
|
265
|
-
The Storyblok Bridge is enabled by default. If you would like to disable it or enable it conditionally (e.g. depending on the environment) you can set the `bridge` parameter to `true` or `false` in `astro.config.mjs`:
|
|
266
|
-
|
|
267
|
-
You can also provide a `StoryblokBridgeConfigV2` configuration object to the `bridge` parameter.
|
|
268
|
-
|
|
269
|
-
```ts
|
|
270
|
-
bridge: {
|
|
271
|
-
customParent?: string,
|
|
272
|
-
preventClicks?: boolean, // Defaults to false.
|
|
273
|
-
resolveRelations?: strings[],
|
|
274
|
-
resolveLinks?: string
|
|
275
|
-
}
|
|
276
|
-
```
|
|
277
|
-
|
|
278
|
-
- `customParent` is used to provide a custom URL for the Storyblok editor iframe.
|
|
279
|
-
- `preventClicks` prevents the default behaviour of clicks when inside the Storyblok editor.
|
|
280
|
-
- `resolveRelations` may be needed to resolve the same relations that are already resolved in the API requests via the `resolve_relations` parameter.
|
|
281
|
-
- `resolveLinks` may be needed to resolve link fields.
|
|
282
|
-
|
|
283
|
-
> [!NOTE]
|
|
284
|
-
> `resolveRelations` and `resolveLinks` will only become effective if the live preview feature is used (`getLiveStory()`).
|
|
285
|
-
|
|
286
|
-
The provided options will be used when initializing the Storyblok Bridge. You can find more information about the Storyblok Bridge and its configuration options on the [In Depth Storyblok Bridge guide](https://www.storyblok.com/docs/guide/in-depth/storyblok-latest-js-v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro).
|
|
287
|
-
|
|
288
|
-
If you want to deploy a dedicated preview environment with the Bridge enabled, allowing users of the Storyblok CMS to see their changes being reflected on the frontend directly without having to rebuild the static site, you can enable Server Side Rendering for that particular use case. More information can be found in the [Astro Docs](https://docs.astro.build/en/guides/server-side-rendering/).
|
|
289
|
-
|
|
290
|
-
## Enabling Live Preview for Storyblok's Visual Editor
|
|
291
|
-
|
|
292
|
-
The Astro SDK provides a live preview feature, designed to offer real-time editing capabilities for an enhanced user experience in Storyblok's Visual Editor.
|
|
293
|
-
|
|
294
|
-
> [!NOTE]
|
|
295
|
-
> To utilize the Astro Storyblok Live feature, Astro must be configured to run in SSR mode.
|
|
296
|
-
|
|
297
|
-
To activate the live preview feature, follow these steps:
|
|
298
|
-
|
|
299
|
-
1. Set `livePreview` to `true` in your `astro.config.mjs` file.
|
|
300
|
-
|
|
301
|
-
```js
|
|
302
|
-
//astro.config.mjs
|
|
303
|
-
export default defineConfig({
|
|
304
|
-
integrations: [
|
|
305
|
-
storyblok({
|
|
306
|
-
accessToken: "OsvN..",
|
|
307
|
-
livePreview: true,
|
|
308
|
-
}),
|
|
309
|
-
],
|
|
310
|
-
output: "server", // Astro must be configured to run in SSR mode
|
|
311
|
-
});
|
|
312
|
-
```
|
|
313
|
-
|
|
314
|
-
2. Additionally, use `getLiveStory` on your Astro pages.
|
|
315
|
-
|
|
316
|
-
```jsx
|
|
317
|
-
//pages/[...slug].astro
|
|
318
|
-
---
|
|
319
|
-
import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
|
|
320
|
-
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
|
|
321
|
-
|
|
322
|
-
const { slug } = Astro.params;
|
|
323
|
-
let story = null;
|
|
324
|
-
|
|
325
|
-
const liveStory = await getLiveStory(Astro);
|
|
326
|
-
if (liveStory) {
|
|
327
|
-
story = liveStory;
|
|
328
|
-
} else {
|
|
329
|
-
const sbApi = useStoryblokApi();
|
|
330
|
-
const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
|
|
331
|
-
version: 'draft',
|
|
332
|
-
resolve_relations: ['featured-articles.posts'],
|
|
333
|
-
});
|
|
334
|
-
story = data?.story;
|
|
335
|
-
}
|
|
336
|
-
// If you are using `resolve_relations` or `resolve_links`, you must also pass them to the Bridge configuration in `astro.config.mjs`.
|
|
337
|
-
---
|
|
338
|
-
|
|
339
|
-
<StoryblokComponent blok={story.content} />
|
|
340
|
-
```
|
|
341
|
-
## Dom update event
|
|
342
|
-
|
|
343
|
-
```js
|
|
344
|
-
//page.astro
|
|
345
|
-
|
|
346
|
-
<script>
|
|
347
|
-
document.addEventListener('storyblok-live-preview-updated', () => {
|
|
348
|
-
// Here is the callback we could run code every time the body is updated via live preview
|
|
349
|
-
console.log('Live preview: body updated');
|
|
350
|
-
// Example regenerated all your css
|
|
351
|
-
});
|
|
352
|
-
</script>
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
## Rendering Rich Text
|
|
356
|
-
|
|
357
|
-
> [!NOTE]
|
|
358
|
-
> The `@storyblok/astro` now provides the exports for the new `richTextResolver` API from `@storyblok/js`. Until a dedicated `StoryblokRichText.astro` is developed, we recommend using the vanilla solution below.
|
|
359
|
-
|
|
360
|
-
```jsx
|
|
361
|
-
---
|
|
362
|
-
import { richTextResolver } from "@storyblok/astro";
|
|
363
|
-
|
|
364
|
-
const renderedRichText = richTextResolver({
|
|
365
|
-
// options like custom resolvers
|
|
366
|
-
}).render(doc);
|
|
367
|
-
---
|
|
368
|
-
|
|
369
|
-
<div set:html={renderedRichText}></div>
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
To learn more about the new `richTextResolver` API, please refer to the [storyblok-richtext docs](https://github.com/storyblok/richtext).
|
|
373
|
-
|
|
374
|
-
Or use the `renderRichText` function to render rich text.
|
|
375
|
-
|
|
376
|
-
```jsx
|
|
377
|
-
---
|
|
378
|
-
import { renderRichText } from "@storyblok/astro";
|
|
379
|
-
|
|
380
|
-
const renderedRichText = renderRichText(data, options);
|
|
381
|
-
---
|
|
382
|
-
|
|
383
|
-
<div set:html={renderedRichText}></div>
|
|
384
|
-
```
|
|
385
|
-
|
|
386
|
-
## API
|
|
387
|
-
|
|
388
|
-
### useStoryblokApi()
|
|
389
|
-
|
|
390
|
-
Returns the instance of the `storyblok-js-client`.
|
|
45
|
+
## Contributing
|
|
391
46
|
|
|
392
|
-
|
|
47
|
+
If you'd like to contribute, please refer to the [contributing guidelines](CONTRIBUTING.md).
|
|
393
48
|
|
|
394
|
-
|
|
49
|
+
## Community
|
|
395
50
|
|
|
396
|
-
|
|
51
|
+
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
|
|
397
52
|
|
|
398
|
-
|
|
53
|
+
- [Discuss Storyblok on Github Discussions](https://github.com/storyblok/monoblok/discussions)
|
|
399
54
|
|
|
400
|
-
|
|
55
|
+
For community support, chatting with other users, please visit:
|
|
401
56
|
|
|
402
|
-
|
|
57
|
+
- [Discuss Storyblok on Discord](https://storyblok.com/join-discord)
|
|
403
58
|
|
|
404
|
-
|
|
59
|
+
## Support
|
|
405
60
|
|
|
406
|
-
|
|
61
|
+
For bugs or feature requests, please [submit an issue](https://github.com/storyblok/monoblok/issues/new/choose).
|
|
407
62
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
- [Developer Tutorials](https://www.storyblok.com/tutorials?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro)
|
|
411
|
-
- [Developer Guides](https://www.storyblok.com/docs/guide/introduction?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro)
|
|
412
|
-
- [FAQs](https://www.storyblok.com/faqs?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro)
|
|
63
|
+
> [!IMPORTANT]
|
|
64
|
+
> Please search existing issues before submitting a new one. Issues without a minimal reproducible example will be closed. [Why reproductions are Required](https://antfu.me/posts/why-reproductions-are-required).
|
|
413
65
|
|
|
414
|
-
|
|
66
|
+
### I can't share my company project code
|
|
415
67
|
|
|
416
|
-
|
|
417
|
-
- Do you have questions about this SDK? Or would you like to join the growing community of `@storyblok/astro` users? [Join the Astro Discord Community](https://discord.com/channels/830184174198718474/1002802280267001858)
|
|
418
|
-
- Do you have questions about Storyblok or do you need help? [Join the Storyblok Discord Community](https://storyblok.com/join-discord).
|
|
68
|
+
We understand that you might not be able to share your company's project code. Please provide a minimal reproducible example that demonstrates the issue by using tools like [Stackblitz](https://stackblitz.com) or a link to a Github Repo lease make sure you include a README file with the instructions to build and run the project, important not to include any access token, password or personal information of any kind.
|
|
419
69
|
|
|
420
|
-
|
|
70
|
+
### Feedback
|
|
421
71
|
|
|
422
|
-
|
|
72
|
+
If you have a question, please ask in the [Discuss Storyblok on Discord](https://storyblok.com/join-discord) channel.
|
|
423
73
|
|
|
424
|
-
|
|
74
|
+
## License
|
|
425
75
|
|
|
426
|
-
|
|
76
|
+
[License](/LICENSE)
|