@storyblok/astro 5.1.0-alpha.4 → 5.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Storyblok GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -29,7 +29,7 @@
 
 ## Kickstart a new project
 
-Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Astro](https://www.storyblok.com/technologies#astro?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro)**, and get started in just a few minutes!
+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!
 
 ## Ultimate Tutorial
 
@@ -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` in your astro.config.mjs file. You can also add your `bridge` configuration here, which will be applied to your bridge.
+1. Set `livePreview` to `true` within your `astro.config.mjs` file.
 
 ```js
 //astro.config.mjs
@@ -369,133 +369,37 @@ 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
 });
 ```
 
-2. Additionally, please use `getLiveStory` on your Astro pages for getting live story.
+2. Additionally, please use `useStoryblok` on your Astro pages for story fetching. This replaces the previously used `useStoryblokApi` method.
 
 ```jsx
 //pages/[...slug].astro
 ---
-import { getLiveStory, useStoryblokApi, type ISbStoryData } from "@storyblok/astro";
+import { useStoryblok } from "@storyblok/astro";
 import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
 
 const { slug } = Astro.params;
 
-let story: ISbStoryData = null;
-
-const liveStory = await getLiveStory(Astro);
-
-if (liveStory) {
-  story = liveStory;
-} else {
-  const sbApi = useStoryblokApi();
-  const { data } = await sbApi.get(
-    `cdn/stories/${slug === undefined ? "home" : slug}`,
-    {
-      version: "draft",
-      resolve_relations: ["featured-articles.posts"],
-    }
-  );
-  story = data?.story;
-}
----
-
-<StoryblokComponent blok={story.content} />
-```
-3. You can also listen to when the live preview is updated.
-
-```js
-<script>
-  document.addEventListener("storyblok-live-preview-updated", () => {
-    // console.log("Live preview: body updated");
-    // initUnoCssRuntime(); regenerate all the css
-  });
-</script>
-```
-
-## 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",
-    },
+const story = await useStoryblok(
+  // The slug to fetch
+  `cdn/stories/${slug === undefined ? "home" : slug}`,
+  // The API options
+  {
     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 Bridge options (optional, if an empty object, null, or false are set, the API options will be considered automatically as far as applicable)
+  {},
+  // The Astro object (essential for the live preview functionality)
+  Astro
+);
 ---
 
-<BaseLayout>
-  <StoryblokComponent blok={story.content} />
-</BaseLayout>
+<StoryblokComponent blok={story.content} />
 ```
 
 ## The Storyblok JavaScript SDK Ecosystem
@@ -528,5 +432,8 @@ Our heartfelt thanks go to [Virtual Identity](https://www.virtual-identity.com/)
 
 ## Contributing
 
-Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro).
-This project uses [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generating new versions by using commit messages. We use the Angular Convention to name the commits.
+Please review our [Contributing Guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and [Code of Conduct](https://www.storyblok.com/trust-center?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro#code-of-conduct) before contributing.  
+
+This project employs [semantic-release](https://semantic-release.gitbook.io/semantic-release/) to generate new versions based on commit messages, following the Angular Commit Message Convention.  
+
+When using playgrounds during development, ensure the build is running in watch mode for an efficient workflow.

package/{components → dist/components}/FallbackComponent.astro

@@ -1,5 +1,5 @@
 ---
-import type { SbBlokData } from "../dist/types";
+import type { SbBlokData } from "@storyblok/js";
 
 export interface Props {
   blok: SbBlokData;

package/dist/components/FallbackComponent.d.ts

@@ -0,0 +1,6 @@
+import { SbBlokData } from '@storyblok/js';
+declare const FallbackComponent: (_props: {
+    blok: SbBlokData;
+    [prop: string]: unknown;
+}) => any;
+export default FallbackComponent;

package/{components → dist/components}/StoryblokComponent.astro

@@ -1,8 +1,8 @@
 ---
 import components from "virtual:storyblok-components";
 import options from "virtual:storyblok-options";
-import camelcase from "camelcase";
-import type { SbBlokData } from "../dist/types";
+import { toCamelCase } from "@storyblok/astro";
+import type { SbBlokData } from "@storyblok/js";
 import type { AstroComponentFactory } from "astro/runtime/server/index.js";
 
 export interface Props {
@@ -21,7 +21,7 @@ if (!blok) {
 /**
  * convert blok components to camel case to match vite-plugin-storyblok-components
  */
-let key = camelcase(blok.component);
+let key = toCamelCase(blok.component as string);
 
 const componentFound: boolean = key in components;
 

package/dist/components/StoryblokComponent.d.ts

@@ -0,0 +1,6 @@
+import { SbBlokData } from '@storyblok/js';
+declare const StoryblokComponent: (_props: {
+    blok: SbBlokData;
+    [prop: string]: unknown;
+}) => any;
+export default StoryblokComponent;

package/dist/{types/dev-toolbar → dev-toolbar}/toolbarApp.d.ts

@@ -1,3 +1,3 @@
 export declare const storyblokLogo = "<svg width=\"45px\" height=\"53px\" viewBox=\"0 0 45 53\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <g id=\"storyblok-logo-kit\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"storyblok-partner-logo\" transform=\"translate(-59.000000, -169.000000)\" fill-rule=\"nonzero\">\n            <g id=\"storyblok-symbol\" transform=\"translate(59.000000, 169.000000)\">\n                <path d=\"M2.32662261,0 C1.03405449,0 0,1.0331384 0,2.27290448 L0,42.8752437 C0,44.1150097 1.03405449,44.8898635 2.27491989,44.8898635 L8.27243596,44.8898635 L8.27243596,53 L15.7176283,44.9415205 L42.9132615,44.9415205 C44.1541269,44.9415205 44.9296678,44.1666667 44.9296678,42.8752437 L44.9296678,2.3245614 C44.9296678,1.08479532 44.2058296,0 42.9132615,0 L2.32662261,0 Z\" id=\"Shape-path-Copy\" fill=\"#0AB3AF\"></path>\n                <path d=\"M29.1016723,8.11483254 C30.1351059,8.11483254 31.0135245,8.32132604 31.8402713,8.78593643 C32.6153465,9.19892344 33.33875,9.76678059 33.9071385,10.4378845 C35.0647615,11.8482391 35.6869248,13.6215753 35.6639755,15.445352 C35.6639755,16.7875598 35.3022738,18.0781442 34.630542,19.3171053 C33.9341248,20.5632996 32.8438147,21.5436614 31.5302412,22.1047676 C33.183735,22.569378 34.4755269,23.395352 35.4572888,24.5826897 C36.387379,25.8216507 36.8524241,27.4219754 36.8524241,29.4352871 C36.8524241,30.7258715 36.6168825,31.8756998 36.1290206,32.7391832 C35.6123039,33.668404 34.8372287,34.4427546 33.9071385,35.0106118 C32.9253766,35.6300923 31.8402713,36.1979494 30.600151,36.4560663 C29.3600307,36.7658066 28.0165671,37.0239234 26.6214318,37.0239234 L8.32965751,37.0239234 L8.32965751,8.11483254 L29.1016723,8.11483254 Z M26.1340815,24.271851 L15.77813,24.271851 L15.77813,29.1552028 L25.8851404,29.1552028 C26.4825991,29.1552028 27.0302696,28.9110352 27.4783637,28.5203671 C27.8766695,28.1296989 28.1256107,27.5436967 28.1256107,26.811194 C28.140051,26.1827412 27.948041,25.5663945 27.5779401,25.0531873 C27.1796343,24.5648522 26.7315403,24.271851 26.1340815,24.271851 Z M25.2876816,14.5051475 L15.77813,14.5051475 L15.77813,18.9001641 L25.0885287,18.9001641 C25.586411,18.9001641 26.0842933,18.6559965 26.4825991,18.3629954 C26.9306932,18.0699943 27.1298461,17.4351586 27.1298461,16.6049888 C27.1298461,15.872486 26.9306932,15.3353173 26.5821756,14.9934827 C26.233658,14.7004816 25.7855639,14.5051475 25.2876816,14.5051475 Z\" id=\"Combined-Shape-Copy-3\" fill=\"#FFFFFF\"></path>\n            </g>\n        </g>\n    </g>\n</svg>";
-declare const _default: import("astro").DevToolbarApp;
+declare const _default: import('astro').DevToolbarApp;
 export default _default;

package/{dev-toolbar → dist/dev-toolbar}/toolbarApp.ts

@@ -1,9 +1,8 @@
-import { defineToolbarApp } from "astro/toolbar";
-
 import {
-  isDefinedIcon,
   type Icon,
-} from "astro/runtime/client/dev-toolbar/ui-library/icons.js";
+  isDefinedIcon,
+} from 'astro/runtime/client/dev-toolbar/ui-library/icons.js';
+import { defineToolbarApp } from 'astro/toolbar';
 
 export const storyblokLogo = `<svg width="45px" height="53px" viewBox="0 0 45 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="storyblok-logo-kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -31,153 +30,151 @@ const storyblokLogoFull = `<svg width="180px" height="38px" viewBox="0 0 251 53"
 </svg>`;
 
 function createWindowElement(content: string) {
-  const windowElement = document.createElement("astro-dev-toolbar-window");
+  const windowElement = document.createElement('astro-dev-toolbar-window');
   windowElement.innerHTML = content;
   return windowElement;
 }
 
+interface LinkItem {
+  icon: Icon;
+  name: string;
+  description: string;
+  link: string;
+}
+const links: LinkItem[] = [
+  {
+    icon: 'star',
+    name: 'Ultimate Tutorial',
+    description: 'Practical step-by-step guide.',
+    link: 'https://www.storyblok.com/tp/the-storyblok-astro-ultimate-tutorial',
+  },
+  {
+    icon: 'lightbulb',
+    name: 'Further Tutorials',
+    description: 'Browse our other tutorials.',
+    link: 'https://www.storyblok.com/tutorials?technologies=astro',
+  },
+  {
+    icon: 'file-search',
+    name: 'API Docs',
+    description: 'Storyblok\'s Content Delivery and Management APIs.',
+    link: 'https://www.storyblok.com/docs#api-documentations',
+  },
+  {
+    icon: 'astro:logo',
+    name: 'Astro Docs',
+    description: 'Astro\'s official Storyblok docs.',
+    link: 'https://docs.astro.build/en/guides/cms/storyblok/',
+  },
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>`,
+    name: 'Community',
+    description: 'Engage with our Discord community.',
+    link: 'https://discord.com/channels/830184174198718474/1002802280267001858',
+  },
+  {
+    icon: 'bug',
+    name: 'Report a Bug',
+    description: 'Help us make @storyblok/astro even better.',
+    link: 'https://github.com/withastro/astro/issues/new/choose',
+  },
+];
+function createCanvas() {
+  return createWindowElement(
+    `
+        <style>
+        p {
+          margin-top: 0;
+        }
+
+        header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        a {
+          color: rgba(224, 204, 250, 1);
+          text-decoration: none;
+        }
+
+        a:hover {
+          color: #f4ecfd;
+        }
+
+        #links {
+          margin: auto 0;
+          display: grid;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 16px;
+        }
+
+        #links astro-dev-toolbar-card {
+          color: white;
+        }
+
+        #links astro-dev-toolbar-card h3 {
+          margin: 0.5em 0;
+          color: white;
+        }
+
+        #links astro-dev-toolbar-card p {
+          margin: 0;
+        }
+
+        #links astro-dev-toolbar-card:hover {
+          color: rgba(145, 152, 173, 1);
+        }
+
+        #links astro-dev-toolbar-icon {
+          width: 1.5em;
+          height: 1.5em;
+          display: block;
+          color: white;
+        }
+
+        @media (forced-colors: active) {
+          svg path[fill='#fff'] {
+            fill: black;
+          }
+        }
+      </style>
+
+      <header>
+        <a href="https://storyblok.com" target="_blank" id="logo">
+          ${storyblokLogoFull}
+        </a>
+        <a href="https://github.com/storyblok/storyblok-astro" target="_blank">
+          <img
+            src="https://img.shields.io/npm/v/@storyblok/astro?color=40C6C4&label=Astro&labelColor=1B243F&logo=storyblok"
+            alt="Storyblok Astro Version v.3.0.1."
+          />
+        </a>
+      </header>
+      <hr />
+      <div id="main-container">
+        <section id="links">
+          ${links
+            .map(
+              link =>
+                `<astro-dev-toolbar-card link="${
+                  link.link
+                }"><astro-dev-toolbar-icon ${
+                  isDefinedIcon(link.icon)
+                    ? `icon="${link.icon}">`
+                    : `>${link.icon}`
+                }</astro-dev-toolbar-icon><h3>${link.name}</h3><p>${
+                  link.description
+                }</p></astro-dev-toolbar-card>`,
+            )
+            .join('')}
+        </section>
+      </div>`,
+  );
+}
 export default defineToolbarApp({
   init(canvas) {
-    createCanvas();
-
-    document.addEventListener("astro:after-swap", createCanvas);
-
-    function createCanvas() {
-      const links: {
-        icon: Icon;
-        name: string;
-        description: string;
-        link: string;
-      }[] = [
-        {
-          icon: "star",
-          name: "Ultimate Tutorial",
-          description: "Practical step-by-step guide.",
-          link: "https://www.storyblok.com/tp/the-storyblok-astro-ultimate-tutorial",
-        },
-        {
-          icon: "lightbulb",
-          name: "Further Tutorials",
-          description: "Browse our other tutorials.",
-          link: "https://www.storyblok.com/tutorials?technologies=astro",
-        },
-        {
-          icon: "file-search",
-          name: "API Docs",
-          description: "Storyblok's Content Delivery and Management APIs.",
-          link: "https://www.storyblok.com/docs#api-documentations",
-        },
-        {
-          icon: "astro:logo",
-          name: "Astro Docs",
-          description: "Astro's official Storyblok docs.",
-          link: "https://docs.astro.build/en/guides/cms/storyblok/",
-        },
-        {
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>`,
-          name: "Community",
-          description: "Engage with our Discord community.",
-          link: "https://discord.com/channels/830184174198718474/1002802280267001858",
-        },
-        {
-          icon: "bug",
-          name: "Report a Bug",
-          description: "Help us make @storyblok/astro even better.",
-          link: "https://github.com/withastro/astro/issues/new/choose",
-        },
-      ];
-
-      const windowComponent = createWindowElement(
-        `
-				<style>
-				p {
-					margin-top: 0;
-				}
-
-				header {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-				}
-
-				a {
-					color: rgba(224, 204, 250, 1);
-					text-decoration: none;
-				}
-
-				a:hover {
-					color: #f4ecfd;
-				}
-
-				#links {
-					margin: auto 0;
-					display: grid;
-					grid-template-columns: repeat(3, minmax(0, 1fr));
-					gap: 16px;
-				}
-
-				#links astro-dev-toolbar-card {
-					color: white;
-				}
-
-				#links astro-dev-toolbar-card h3 {
-					margin: 0.5em 0;
-					color: white;
-				}
-
-				#links astro-dev-toolbar-card p {
-					margin: 0;
-				}
-
-				#links astro-dev-toolbar-card:hover {
-					color: rgba(145, 152, 173, 1);
-				}
-
-				#links astro-dev-toolbar-icon {
-					width: 1.5em;
-					height: 1.5em;
-					display: block;
-					color: white;
-				}
-
-				@media (forced-colors: active) {
-					svg path[fill="#fff"] {
-						fill: black;
-					}
-				}
-			</style>
-
-			<header>
-				<a href="https://storyblok.com" target="_blank" id="logo">
-					${storyblokLogoFull}
-				</a>
-				<a href="https://github.com/storyblok/storyblok-astro" target="_blank">
-          <img src="https://img.shields.io/npm/v/@storyblok/astro?color=40C6C4&label=Astro&labelColor=1B243F&logo=storyblok" alt="Storyblok Astro Version v.3.0.1."/>
-				</a>
-			</header>
-			<hr />
-			<div id="main-container">
-				<section id="links">
-				${links
-          .map(
-            (link) =>
-              `<astro-dev-toolbar-card link="${
-                link.link
-              }"><astro-dev-toolbar-icon ${
-                isDefinedIcon(link.icon)
-                  ? `icon="${link.icon}">`
-                  : `>${link.icon}`
-              }</astro-dev-toolbar-icon><h3>${link.name}</h3><p>${
-                link.description
-              }</p></astro-dev-toolbar-card>`
-          )
-          .join("")}
-				</section>
-			</div>
-			`
-      );
-
-      canvas.append(windowComponent);
-    }
+    const text = createCanvas();
+    canvas.appendChild(text);
   },
 });

package/dist/{types/index.d.ts → index.d.ts}

@@ -1,15 +1,15 @@
-import type { AstroGlobal, AstroIntegration } from "astro";
-import type { ISbConfig, ISbRichtext, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from "./types";
-export { handleStoryblokMessage } from "./live-preview/handleStoryblokMessage";
-export { syncContentUpdate } from "./content-layer/syncContentUpdate";
-export { storyblokLoader } from "./content-layer/storyblokLoader";
-export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
+import { AstroGlobal, AstroIntegration } from 'astro';
+import { ISbConfig, ISbRichtext, ISbStoriesParams, ISbStoryData, SbRichTextOptions, StoryblokBridgeConfigV2, StoryblokClient } from './types';
+export { handleStoryblokMessage } from './live-preview/handleStoryblokMessage';
+export * from './types';
+export { toCamelCase } from './utils/toCamelCase';
+export { loadStoryblokBridge, RichTextResolver, RichTextSchema, storyblokEditable, } from '@storyblok/js';
 export declare function useStoryblokApi(): StoryblokClient;
-export declare function getLiveStory(Astro: AstroGlobal): Promise<ISbStoryData<import("@storyblok/js").StoryblokComponentType<string> & {
+export declare function useStoryblok(slug: string, apiOptions: ISbStoriesParams | undefined, _: StoryblokBridgeConfigV2 | undefined, Astro: AstroGlobal): Promise<ISbStoryData<import('@storyblok/js').StoryblokComponentType<string> & {
     [index: string]: any;
-}>>;
+}> | null>;
 export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
-export type IntegrationOptions = {
+export interface IntegrationOptions {
     /**
      * The access token from your space.
      */
@@ -38,7 +38,7 @@ export type IntegrationOptions = {
      * },
      * ```
      */
-    components?: object;
+    components?: Record<string, string>;
     /**
      * The directory containing your Astro components are. Defaults to "src".
      */
@@ -56,10 +56,5 @@ export type IntegrationOptions = {
      * A boolean to enable/disable the Experimental Live Preview feature. Disabled by default.
      */
     livePreview?: boolean;
-    /**
-     * A boolean to enable/disable storyblok content layer.
-     */
-    contentLayer?: boolean;
-};
-export default function storyblokIntegration({ useCustomApi, bridge, componentsDir, enableFallbackComponent, livePreview, contentLayer, ...restOptions }: IntegrationOptions): AstroIntegration;
-export * from "./types";
+}
+export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;

package/dist/{types/live-preview → live-preview}/handleStoryblokMessage.d.ts

@@ -1,4 +1,4 @@
-import type { ISbStoryData } from "@storyblok/js";
+import { ISbStoryData } from '@storyblok/js';
 /**
  * Our current tests indicate that the post request section
  * is the bottleneck in terms of time consumption.

package/dist/live-preview/middleware.d.ts

@@ -0,0 +1 @@
+export declare const onRequest: import('astro').MiddlewareHandler;

package/dist/live-preview/middleware.ts

@@ -0,0 +1,25 @@
+import { defineMiddleware } from 'astro/middleware';
+
+export const onRequest = defineMiddleware(async ({ locals, request }, next) => {
+  if (request.method === 'POST') {
+    const url = new URL(request.url);
+    // First do a basic check if its coming from within storyblok
+    const isStoryblokRequest
+      = url.searchParams.has('_storyblok')
+      && url.searchParams.has('_storyblok_c');
+
+    if (isStoryblokRequest) {
+      try {
+        // Create a copy of the request
+        const requestBody = await request.clone().json();
+        if (requestBody && requestBody.is_storyblok_preview) {
+          locals._storyblok_preview_data = requestBody;
+        }
+      }
+      catch (error) {
+        console.error('Error reading request body:', error);
+      }
+    }
+  }
+  return next();
+});