diff --git a/README.md b/README.md
index 716a39b8..6b3b240b 100644
--- a/README.md
+++ b/README.md
@@ -360,7 +360,7 @@ The Astro SDK now provides a live preview feature, designed to offer real-time e
To activate the experimental live preview feature, follow these steps:
-1. Set `livePreview` to `true` within your `astro.config.mjs` file.
+1. Set `livePreview` to `true` in your astro.config.mjs file. You can also add your `bridge` configuration here, which will be applied to your bridge.
```js
//astro.config.mjs
@@ -369,13 +369,16 @@ export default defineConfig({
storyblok({
accessToken: "OsvN..",
livePreview: true,
+ bridge: {
+ resolveRelations: ["featured.posts"],//Your bridge config
+ }
}),
],
output: "server", // Astro must be configured to run in SSR mode
});
```
-1. Additionally, please use `getLiveStory` on your Astro pages for getting live story.
+2. Additionally, please use `getLiveStory` on your Astro pages for getting live story.
```jsx
//pages/[...slug].astro
@@ -406,7 +409,7 @@ if (liveStory) {
```
-2. You can also listen to when the live preview is updated.
+3. You can also listen to when the live preview is updated.
```js
```
+
+## Enabling Storyblok Loader
+
+> [!WARNING]
+> This feature is currently experimental and optional. You may encounters bugs or performance issues.
+
+The Astro SDK now provides Storyblok Loader feature, It is designed to scale efficiently and handle large sites with thousands of pages highly performantly.
+
+To activate the experimental Storyblok Loader feature, follow these steps:
+
+1. Set `contentLayer` to `true` in your `astro.config.mjs` file.
+
+```js
+//astro.config.mjs
+export default defineConfig({
+ integrations: [
+ storyblok({
+ accessToken: "OsvN..",
+ contentLayer: true,
+ }),
+ ],
+});
+```
+
+2. Additionally, in your `src/content/config.ts` file define your collection.
+
+```jsx
+//src/content/config.ts
+import { storyblokLoader } from "@storyblok/astro";
+import { defineCollection } from "astro:content";
+
+const storyblokCollection = defineCollection({
+ loader: storyblokLoader({
+ accessToken: "fV...",
+ apiOptions: {
+ region: "us",
+ },
+ version: "draft",
+ }),
+});
+
+export const collections = {
+ storyblok: storyblokCollection,
+};
+
+```
+3. You can now use the storyblokCollection in your pages.
+
+```jsx
+//src/pages/[...slug].astro
+---
+import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
+import BaseLayout from "~/layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+import { type ISbStoryData } from "@storyblok/astro";
+
+export async function getStaticPaths() {
+ const stories = await getCollection("storyblok");
+
+ return stories.map(({ data }: { data: ISbStoryData }) => {
+ return {
+ params: { slug: data.full_slug },
+ props: { story: data },
+ };
+ });
+}
+
+interface Props {
+ story: ISbStoryData;
+}
+
+const { story } = Astro.props;
+---
+
+
+
+
+```
+
## The Storyblok JavaScript SDK Ecosystem
![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)
diff --git a/lib/content-layer/storyblokLoader.ts b/lib/content-layer/storyblokLoader.ts
index 7dddd4b8..9c68cfd0 100644
--- a/lib/content-layer/storyblokLoader.ts
+++ b/lib/content-layer/storyblokLoader.ts
@@ -1,14 +1,16 @@
import type { Loader } from "astro/loaders";
-import { storyblokInit, apiPlugin } from "@storyblok/js";
+import { storyblokInit, apiPlugin, type ISbConfig } from "@storyblok/js";
interface StoryblokLoaderConfig {
accessToken: string;
+ apiOptions?: ISbConfig;
version: "draft" | "published";
}
export function storyblokLoader(config: StoryblokLoaderConfig): Loader {
const { storyblokApi } = storyblokInit({
accessToken: config.accessToken,
+ apiOptions: config.apiOptions,
use: [apiPlugin],
});
return {