@storyblok/astro 2.0.16 → 2.1.0

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  <div align="center">
2
2
  <a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro" align="center">
3
- <img src="https://a.storyblok.com/f/88751/1500x500/7974d6bc34/storyblok-astro.png" width="300" height="100" alt="Storyblok + Astro">
3
+ <img src="https://a.storyblok.com/f/88751/1500x500/7974d6bc34/storyblok-astro.png" width="300" height="100" alt="Storyblok + Astro">
4
4
  </a>
5
5
  <h1 align="center">@storyblok/astro</h1>
6
6
  <p align="center">Astro integration 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 />
@@ -72,6 +72,7 @@ storyblok({
72
72
  bridge: true,
73
73
  apiOptions: {}, // storyblok-js-client options
74
74
  components: {},
75
+ componentsDir: "src",
75
76
  useCustomApi: false,
76
77
  });
77
78
  ```
@@ -79,17 +80,20 @@ storyblok({
79
80
  > Note: 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.
80
81
 
81
82
  #### Region parameter
83
+
82
84
  Possible values:
85
+
83
86
  - `eu` (default): For spaces created in the EU
84
87
  - `us`: For spaces created in the US
85
88
  - `cn`: For spaces created in China
86
89
 
87
90
  Full example for a space created in the US:
91
+
88
92
  ```js
89
93
  storyblok({
90
94
  accessToken: "<your-access-token>",
91
95
  apiOptions: {
92
- region: 'us'
96
+ region: "us",
93
97
  },
94
98
  });
95
99
  ```
@@ -119,7 +123,18 @@ components: {
119
123
  > - `src/storyblok/Feature.astro`
120
124
  > - `src/storyblok/Grid.astro`
121
125
  > - `src/storyblok/Teaser.astro`
122
- > You can choose any other folder in the `src` directory for your Astro components.
126
+ >
127
+ > You can choose any other folder in the `src` directory for your Astro components.
128
+
129
+ > Note: If you prefer to use a different folder than `src`, you can specify one using the `componentsDir` option:
130
+ >
131
+ > ```js
132
+ > storyblok({
133
+ > componentsDir: "/app/",
134
+ > });
135
+ > ```
136
+ >
137
+ > Now, your Storyblok components can be located anywhere in the `app` folder, e.g. `app/storyblok/Page.astro`.
123
138
 
124
139
  For each component, use the `storyblokEditable()` function on its root element, passing the `blok` property that they receive:
125
140
 
@@ -282,6 +297,7 @@ const renderedRichText = renderRichText(blok.text, {
282
297
  Returns the instance of the `storyblok-js-client`.
283
298
 
284
299
  ## The Storyblok JavaScript SDK Ecosystem
300
+
285
301
  ![A visual representation of the Storyblok JavaScript SDK Ecosystem](https://a.storyblok.com/f/88751/2400x1350/be4a4a4180/sdk-ecosystem.png/m/1200x0)
286
302
 
287
303
  ## Acknowledgements
@@ -291,7 +307,7 @@ A huge thank you goes to the Astro Team. In particular to [Tony Sullivan](https:
291
307
  ## Related Links
292
308
 
293
309
  - **[Live Demo on Stackblitz](https://stackblitz.com/edit/astro-sdk-demo)**
294
- - **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
310
+ - **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects.
295
311
 
296
312
  ## More Resources
297
313
 
@@ -299,7 +315,7 @@ A huge thank you goes to the Astro Team. In particular to [Tony Sullivan](https:
299
315
 
300
316
  - Bugs or Feature Requests? [Submit an issue](/../../issues/new);
301
317
  - 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)
302
- - Do you have questions about Storyblok or you need help? [Join the Storyblok Discord Community](https://discord.gg/jKrbAMz).
318
+ - Do you have questions about Storyblok or do you need help? [Join the Storyblok Discord Community](https://discord.gg/jKrbAMz).
303
319
 
304
320
  ### Contributing
305
321
 
@@ -6,9 +6,9 @@
6
6
  apiOptions: ${JSON.stringify(t)},
7
7
  });
8
8
  export const storyblokApiInstance = storyblokApi;
9
- `}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,y=/^[\p{Lu}](?![\p{Lu}])/gu,k=/([\p{Alpha}\p{N}_]|$)/u,p=/[_.\- ]+/,N=new RegExp("^"+p.source),$=new RegExp(p.source+k.source,"gu"),v=new RegExp("\\d+"+k.source,"gu"),L=(r,e,t,s)=>{let a=!1,o=!1,i=!1,u=!1;for(let n=0;n<r.length;n++){const l=r[n];u=n>2?r[n-3]==="-":!0,a&&x.test(l)?(r=r.slice(0,n)+"-"+r.slice(n),a=!1,i=o,o=!0,n++):o&&i&&R.test(l)&&(!u||s)?(r=r.slice(0,n-1)+"-"+r.slice(n-1),i=o,o=!1,a=!0):(a=e(l)===l&&t(l)!==l,i=o,o=t(l)===l&&e(l)!==l)}return r},O=(r,e)=>(y.lastIndex=0,r.replace(y,t=>e(t))),_=(r,e)=>($.lastIndex=0,v.lastIndex=0,r.replace($,(t,s)=>e(s)).replace(v,t=>e(t)));function I(r,e){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(e={pascalCase:!1,preserveConsecutiveUppercase:!1,...e},Array.isArray(r)?r=r.map(o=>o.trim()).filter(o=>o.length).join("-"):r=r.trim(),r.length===0)return"";const t=e.locale===!1?o=>o.toLowerCase():o=>o.toLocaleLowerCase(e.locale),s=e.locale===!1?o=>o.toUpperCase():o=>o.toLocaleUpperCase(e.locale);return r.length===1?p.test(r)?"":e.pascalCase?s(r):t(r):(r!==t(r)&&(r=L(r,t,s,e.preserveConsecutiveUppercase)),r=r.replace(N,""),r=e.preserveConsecutiveUppercase?O(r,t):t(r),e.pascalCase&&(r=s(r.charAt(0))+r.slice(1)),_(r,s))}function z(r){const e="virtual:storyblok-components",t="\0"+e;return{name:"vite-plugin-storyblok-components",async resolveId(s){if(s===e)return t},async load(s){if(s===t){const a=[];for await(const[o,i]of Object.entries(r)){const u=await this.resolve("/src/"+i+".astro");if(!u)throw new Error(`Component could not be found for blok "${o}"! Does "/src/${i}.astro" exist?`);a.push(`import ${I(o)} from "${u.id}"`)}return`${a.join(";")};export default {${Object.keys(r).map(o=>I(o)).join(",")}}`}}}}let T=!1;const w=[],M=r=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=a=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}T?a():w.push(a)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=r,s.id="storyblok-javascript-bridge",s.onerror=a=>t(a),s.onload=a=>{w.forEach(o=>o()),T=!0,e(a)},document.getElementsByTagName("head")[0].appendChild(s)});var P=Object.defineProperty,D=(r,e,t)=>e in r?P(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,A=(r,e,t)=>(D(r,typeof e!="symbol"?e+"":e,t),t);const U=function(r,e){const t={};for(const s in r){const a=r[s];e.indexOf(s)>-1&&a!==null&&(t[s]=a)}return t},q=r=>r==="email",B=()=>({singleTag:"hr"}),F=()=>({tag:"blockquote"}),J=()=>({tag:"ul"}),V=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),K=r=>({tag:`h${r.attrs.level}`}),W=r=>({singleTag:[{tag:"img",attrs:U(r.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),H=()=>({tag:"ol"}),Q=()=>({tag:"p"}),X=r=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:r.attrs.name,emoji:r.attrs.emoji}}]}),Z=()=>({tag:"b"}),ee=()=>({tag:"strike"}),te=()=>({tag:"u"}),re=()=>({tag:"strong"}),se=()=>({tag:"code"}),oe=()=>({tag:"i"}),ae=r=>{const e={...r.attrs},{linktype:t="url"}=r.attrs;if(q(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),e.custom){for(const s in e.custom)e[s]=e.custom[s];delete e.custom}return{tag:[{tag:"a",attrs:e}]}},ie=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ne=()=>({tag:"sub"}),le=()=>({tag:"sup"}),ce=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ge=r=>({tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}),ue=r=>({tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color}`}}]}),E={nodes:{horizontal_rule:B,blockquote:F,bullet_list:J,code_block:V,hard_break:G,heading:K,image:W,list_item:Y,ordered_list:H,paragraph:Q,emoji:X},marks:{bold:Z,strike:ee,underline:te,strong:re,code:se,italic:oe,link:ae,styled:ie,subscript:ne,superscript:le,anchor:ce,highlight:ge,textStyle:ue}},fe=function(r){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,s=RegExp(t.source);return r&&s.test(r)?r.replace(t,a=>e[a]):r};class j{constructor(e){A(this,"marks"),A(this,"nodes"),e||(e=E),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let s="";return e.content.forEach(a=>{s+=this.renderNode(a)}),t.optimizeImages?this.optimizeImages(s,t.optimizeImages):s}return console.warn("The render method must receive an object with a content field, which is an array"),""}optimizeImages(e,t){let s=0,a=0,o="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(o+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(o+=`height="${t.height}" `,a=t.height),(t.loading==="lazy"||t.loading==="eager")&&(o+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(o+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),o.length>0&&(e=e.replace(/<img/g,`<img ${o.trim()}`));const u=s>0||a>0||i.length>0?`${s}x${a}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${u}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,n=>{var l,C;const d=n.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const h={srcset:(l=t.srcset)==null?void 0:l.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${i} ${g}w`;if(typeof g=="object"&&g.length===2){let m=0,S=0;return typeof g[0]=="number"&&(m=g[0]),typeof g[1]=="number"&&(S=g[1]),`//${d}/m/${m}x${S}${i} ${m}w`}}).join(", "),sizes:(C=t.sizes)==null?void 0:C.map(g=>g).join(", ")};let b="";return h.srcset&&(b+=`srcset="${h.srcset}" `),h.sizes&&(b+=`sizes="${h.sizes}" `),n.replace(/<img/g,`<img ${b.trim()}`)}return n})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(a=>{const o=this.getMatchingMark(a);o&&t.push(this.renderOpeningTag(o.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(a=>{t.push(this.renderNode(a))}):e.text?t.push(fe(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(a=>{const o=this.getMatchingMark(a);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let a=`<${s.tag}`;if(s.attrs)for(const o in s.attrs){const i=s.attrs[o];i!==null&&(a+=` ${o}="${i}"`)}return`${a}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}const de=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let he;const pe="https://app.storyblok.com/f/storyblok-v2-latest.js",be=(r,e)=>{r.addNode("blok",t=>{let s="";return t.attrs.body.forEach(a=>{s+=e(a.component,a)}),{html:s}})},me=(r,e,t)=>{let s=t||he;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return r===""?"":r?(e&&(s=new j(e.schema),e.resolver&&be(s,e.resolver)),s.render(r)):(console.warn(`${r} is not a valid Richtext object. This might be because the value of the richtext field is empty.
9
+ `}}}const x=/[\p{Lu}]/u,R=/[\p{Ll}]/u,y=/^[\p{Lu}](?![\p{Lu}])/gu,k=/([\p{Alpha}\p{N}_]|$)/u,p=/[_.\- ]+/,N=new RegExp("^"+p.source),$=new RegExp(p.source+k.source,"gu"),v=new RegExp("\\d+"+k.source,"gu"),L=(r,e,t,s)=>{let a=!1,o=!1,i=!1,u=!1;for(let n=0;n<r.length;n++){const l=r[n];u=n>2?r[n-3]==="-":!0,a&&x.test(l)?(r=r.slice(0,n)+"-"+r.slice(n),a=!1,i=o,o=!0,n++):o&&i&&R.test(l)&&(!u||s)?(r=r.slice(0,n-1)+"-"+r.slice(n-1),i=o,o=!1,a=!0):(a=e(l)===l&&t(l)!==l,i=o,o=t(l)===l&&e(l)!==l)}return r},O=(r,e)=>(y.lastIndex=0,r.replace(y,t=>e(t))),_=(r,e)=>($.lastIndex=0,v.lastIndex=0,r.replace($,(t,s)=>e(s)).replace(v,t=>e(t)));function I(r,e){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(e={pascalCase:!1,preserveConsecutiveUppercase:!1,...e},Array.isArray(r)?r=r.map(o=>o.trim()).filter(o=>o.length).join("-"):r=r.trim(),r.length===0)return"";const t=e.locale===!1?o=>o.toLowerCase():o=>o.toLocaleLowerCase(e.locale),s=e.locale===!1?o=>o.toUpperCase():o=>o.toLocaleUpperCase(e.locale);return r.length===1?p.test(r)?"":e.pascalCase?s(r):t(r):(r!==t(r)&&(r=L(r,t,s,e.preserveConsecutiveUppercase)),r=r.replace(N,""),r=e.preserveConsecutiveUppercase?O(r,t):t(r),e.pascalCase&&(r=s(r.charAt(0))+r.slice(1)),_(r,s))}function z(r,e){const t="virtual:storyblok-components",s="\0"+t;return{name:"vite-plugin-storyblok-components",async resolveId(a){if(a===t)return s},async load(a){if(a===s){const o=[];for await(const[i,u]of Object.entries(e)){const n=await this.resolve("/"+r+"/"+u+".astro");if(!n)throw new Error(`Component could not be found for blok "${i}"! Does "${"/"+r+"/"+u}.astro" exist?`);o.push(`import ${I(i)} from "${n.id}"`)}return`${o.join(";")};export default {${Object.keys(e).map(i=>I(i)).join(",")}}`}}}}let T=!1;const w=[],M=r=>new Promise((e,t)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=a=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}T?a():w.push(a)},document.getElementById("storyblok-javascript-bridge")))return;const s=document.createElement("script");s.async=!0,s.src=r,s.id="storyblok-javascript-bridge",s.onerror=a=>t(a),s.onload=a=>{w.forEach(o=>o()),T=!0,e(a)},document.getElementsByTagName("head")[0].appendChild(s)});var P=Object.defineProperty,D=(r,e,t)=>e in r?P(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,A=(r,e,t)=>(D(r,typeof e!="symbol"?e+"":e,t),t);const U=function(r,e){const t={};for(const s in r){const a=r[s];e.indexOf(s)>-1&&a!==null&&(t[s]=a)}return t},q=r=>r==="email",B=()=>({singleTag:"hr"}),F=()=>({tag:"blockquote"}),J=()=>({tag:"ul"}),V=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),K=r=>({tag:`h${r.attrs.level}`}),W=r=>({singleTag:[{tag:"img",attrs:U(r.attrs,["src","alt","title"])}]}),Y=()=>({tag:"li"}),H=()=>({tag:"ol"}),Q=()=>({tag:"p"}),X=r=>({tag:[{tag:"span",attrs:{["data-type"]:"emoji",["data-name"]:r.attrs.name,emoji:r.attrs.emoji}}]}),Z=()=>({tag:"b"}),ee=()=>({tag:"strike"}),te=()=>({tag:"u"}),re=()=>({tag:"strong"}),se=()=>({tag:"code"}),oe=()=>({tag:"i"}),ae=r=>{const e={...r.attrs},{linktype:t="url"}=r.attrs;if(q(t)&&(e.href=`mailto:${e.href}`),e.anchor&&(e.href=`${e.href}#${e.anchor}`,delete e.anchor),e.custom){for(const s in e.custom)e[s]=e.custom[s];delete e.custom}return{tag:[{tag:"a",attrs:e}]}},ie=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ne=()=>({tag:"sub"}),le=()=>({tag:"sup"}),ce=r=>({tag:[{tag:"span",attrs:r.attrs}]}),ge=r=>({tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}),ue=r=>({tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color}`}}]}),E={nodes:{horizontal_rule:B,blockquote:F,bullet_list:J,code_block:V,hard_break:G,heading:K,image:W,list_item:Y,ordered_list:H,paragraph:Q,emoji:X},marks:{bold:Z,strike:ee,underline:te,strong:re,code:se,italic:oe,link:ae,styled:ie,subscript:ne,superscript:le,anchor:ce,highlight:ge,textStyle:ue}},fe=function(r){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"},t=/[&<>"']/g,s=RegExp(t.source);return r&&s.test(r)?r.replace(t,a=>e[a]):r};class j{constructor(e){A(this,"marks"),A(this,"nodes"),e||(e=E),this.marks=e.marks||[],this.nodes=e.nodes||[]}addNode(e,t){this.nodes[e]=t}addMark(e,t){this.marks[e]=t}render(e,t={optimizeImages:!1}){if(e&&e.content&&Array.isArray(e.content)){let s="";return e.content.forEach(a=>{s+=this.renderNode(a)}),t.optimizeImages?this.optimizeImages(s,t.optimizeImages):s}return console.warn("The render method must receive an object with a content field, which is an array"),""}optimizeImages(e,t){let s=0,a=0,o="",i="";typeof t!="boolean"&&(typeof t.width=="number"&&t.width>0&&(o+=`width="${t.width}" `,s=t.width),typeof t.height=="number"&&t.height>0&&(o+=`height="${t.height}" `,a=t.height),(t.loading==="lazy"||t.loading==="eager")&&(o+=`loading="${t.loading}" `),typeof t.class=="string"&&t.class.length>0&&(o+=`class="${t.class}" `),t.filters&&(typeof t.filters.blur=="number"&&t.filters.blur>=0&&t.filters.blur<=100&&(i+=`:blur(${t.filters.blur})`),typeof t.filters.brightness=="number"&&t.filters.brightness>=-100&&t.filters.brightness<=100&&(i+=`:brightness(${t.filters.brightness})`),t.filters.fill&&(t.filters.fill.match(/[0-9A-Fa-f]{6}/g)||t.filters.fill==="transparent")&&(i+=`:fill(${t.filters.fill})`),t.filters.format&&["webp","png","jpeg"].includes(t.filters.format)&&(i+=`:format(${t.filters.format})`),typeof t.filters.grayscale=="boolean"&&t.filters.grayscale&&(i+=":grayscale()"),typeof t.filters.quality=="number"&&t.filters.quality>=0&&t.filters.quality<=100&&(i+=`:quality(${t.filters.quality})`),t.filters.rotate&&[90,180,270].includes(t.filters.rotate)&&(i+=`:rotate(${t.filters.rotate})`),i.length>0&&(i="/filters"+i))),o.length>0&&(e=e.replace(/<img/g,`<img ${o.trim()}`));const u=s>0||a>0||i.length>0?`${s}x${a}${i}`:"";return e=e.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${u}`),typeof t!="boolean"&&(t.sizes||t.srcset)&&(e=e.replace(/<img.*?src=["|'](.*?)["|']/g,n=>{var l,C;const d=n.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const h={srcset:(l=t.srcset)==null?void 0:l.map(g=>{if(typeof g=="number")return`//${d}/m/${g}x0${i} ${g}w`;if(typeof g=="object"&&g.length===2){let m=0,S=0;return typeof g[0]=="number"&&(m=g[0]),typeof g[1]=="number"&&(S=g[1]),`//${d}/m/${m}x${S}${i} ${m}w`}}).join(", "),sizes:(C=t.sizes)==null?void 0:C.map(g=>g).join(", ")};let b="";return h.srcset&&(b+=`srcset="${h.srcset}" `),h.sizes&&(b+=`sizes="${h.sizes}" `),n.replace(/<img/g,`<img ${b.trim()}`)}return n})),e}renderNode(e){const t=[];e.marks&&e.marks.forEach(a=>{const o=this.getMatchingMark(a);o&&t.push(this.renderOpeningTag(o.tag))});const s=this.getMatchingNode(e);return s&&s.tag&&t.push(this.renderOpeningTag(s.tag)),e.content?e.content.forEach(a=>{t.push(this.renderNode(a))}):e.text?t.push(fe(e.text)):s&&s.singleTag?t.push(this.renderTag(s.singleTag," /")):s&&s.html?t.push(s.html):e.type==="emoji"&&t.push(this.renderEmoji(e)),s&&s.tag&&t.push(this.renderClosingTag(s.tag)),e.marks&&e.marks.slice(0).reverse().forEach(a=>{const o=this.getMatchingMark(a);o&&t.push(this.renderClosingTag(o.tag))}),t.join("")}renderTag(e,t){return e.constructor===String?`<${e}${t}>`:e.map(s=>{if(s.constructor===String)return`<${s}${t}>`;{let a=`<${s.tag}`;if(s.attrs)for(const o in s.attrs){const i=s.attrs[o];i!==null&&(a+=` ${o}="${i}"`)}return`${a}${t}>`}}).join("")}renderOpeningTag(e){return this.renderTag(e,"")}renderClosingTag(e){return e.constructor===String?`</${e}>`:e.slice(0).reverse().map(t=>t.constructor===String?`</${t}>`:`</${t.tag}>`).join("")}getMatchingNode(e){const t=this.nodes[e.type];if(typeof t=="function")return t(e)}getMatchingMark(e){const t=this.marks[e.type];if(typeof t=="function")return t(e)}renderEmoji(e){if(e.attrs.emoji)return e.attrs.emoji;const t=[{tag:"img",attrs:{src:e.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(t," /")}}const de=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const e=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return{"data-blok-c":JSON.stringify(e),"data-blok-uid":e.id+"-"+e.uid}};let he;const pe="https://app.storyblok.com/f/storyblok-v2-latest.js",be=(r,e)=>{r.addNode("blok",t=>{let s="";return t.attrs.body.forEach(a=>{s+=e(a.component,a)}),{html:s}})},me=(r,e,t)=>{let s=t||he;if(!s){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return r===""?"":r?(e&&(s=new j(e.schema),e.resolver&&be(s,e.resolver)),s.render(r)):(console.warn(`${r} is not a valid Richtext object. This might be because the value of the richtext field is empty.
10
10
 
11
- For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},ye=()=>M(pe);function ke(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function $e(r,e){const t=globalThis.storyblokApiInstance.richTextResolver;if(!t){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return me(r,e,t)}function ve(r){const e={useCustomApi:!1,bridge:!0,...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:t,updateConfig:s})=>{s({vite:{plugins:[f(e.accessToken,e.useCustomApi,e.apiOptions),z(e.components)]}}),t("page-ssr",`
11
+ For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`),"")},ye=()=>M(pe);function ke(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function $e(r,e){const t=globalThis.storyblokApiInstance.richTextResolver;if(!t){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return me(r,e,t)}function ve(r){const e={useCustomApi:!1,bridge:!0,componentsDir:"src",...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:t,updateConfig:s})=>{s({vite:{plugins:[f(e.accessToken,e.useCustomApi,e.apiOptions),z(e.componentsDir,e.components)]}}),t("page-ssr",`
12
12
  import { storyblokApiInstance } from "virtual:storyblok-init";
13
13
  globalThis.storyblokApiInstance = storyblokApiInstance;
14
14
  `),e.bridge&&t("page",`
@@ -40,26 +40,28 @@ function v(r, e) {
40
40
  const t = e.locale === !1 ? (o) => o.toLowerCase() : (o) => o.toLocaleLowerCase(e.locale), s = e.locale === !1 ? (o) => o.toUpperCase() : (o) => o.toLocaleUpperCase(e.locale);
41
41
  return r.length === 1 ? p.test(r) ? "" : e.pascalCase ? s(r) : t(r) : (r !== t(r) && (r = S(r, t, s, e.preserveConsecutiveUppercase)), r = r.replace(x, ""), r = e.preserveConsecutiveUppercase ? R(r, t) : t(r), e.pascalCase && (r = s(r.charAt(0)) + r.slice(1)), N(r, s));
42
42
  }
43
- function L(r) {
44
- const e = "virtual:storyblok-components", t = "\0" + e;
43
+ function L(r, e) {
44
+ const t = "virtual:storyblok-components", s = "\0" + t;
45
45
  return {
46
46
  name: "vite-plugin-storyblok-components",
47
- async resolveId(s) {
48
- if (s === e)
49
- return t;
47
+ async resolveId(a) {
48
+ if (a === t)
49
+ return s;
50
50
  },
51
- async load(s) {
52
- if (s === t) {
53
- const a = [];
54
- for await (const [o, i] of Object.entries(r)) {
55
- const g = await this.resolve("/src/" + i + ".astro");
56
- if (!g)
51
+ async load(a) {
52
+ if (a === s) {
53
+ const o = [];
54
+ for await (const [i, g] of Object.entries(e)) {
55
+ const n = await this.resolve(
56
+ "/" + r + "/" + g + ".astro"
57
+ );
58
+ if (!n)
57
59
  throw new Error(
58
- `Component could not be found for blok "${o}"! Does "/src/${i}.astro" exist?`
60
+ `Component could not be found for blok "${i}"! Does "${"/" + r + "/" + g}.astro" exist?`
59
61
  );
60
- a.push(`import ${v(o)} from "${g.id}"`);
62
+ o.push(`import ${v(i)} from "${n.id}"`);
61
63
  }
62
- return `${a.join(";")};export default {${Object.keys(r).map((o) => v(o)).join(",")}}`;
64
+ return `${o.join(";")};export default {${Object.keys(e).map((i) => v(i)).join(",")}}`;
63
65
  }
64
66
  }
65
67
  };
@@ -394,6 +396,7 @@ function $e(r) {
394
396
  const e = {
395
397
  useCustomApi: !1,
396
398
  bridge: !0,
399
+ componentsDir: "src",
397
400
  ...r
398
401
  };
399
402
  return {
@@ -408,7 +411,10 @@ function $e(r) {
408
411
  e.useCustomApi,
409
412
  e.apiOptions
410
413
  ),
411
- L(e.components)
414
+ L(
415
+ e.componentsDir,
416
+ e.components
417
+ )
412
418
  ]
413
419
  }
414
420
  }), t(
@@ -34,6 +34,10 @@ export type IntegrationOptions = {
34
34
  * ```
35
35
  */
36
36
  components?: object;
37
+ /**
38
+ * The directory containing your Astro components are. Defaults to "src".
39
+ */
40
+ componentsDir?: string;
37
41
  };
38
42
  export default function storyblokIntegration(options: IntegrationOptions): AstroIntegration;
39
43
  export * from "./types";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storyblok/astro",
3
- "version": "2.0.16",
3
+ "version": "2.1.0",
4
4
  "description": "Official Astro integration for the Storyblok Headless CMS",
5
5
  "main": "./dist/storyblok-astro.js",
6
6
  "module": "./dist/storyblok-astro.mjs",
@@ -32,16 +32,16 @@
32
32
  "camelcase": "^7.0.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@cypress/vite-dev-server": "^5.0.4",
35
+ "@cypress/vite-dev-server": "^5.0.5",
36
36
  "@rollup/plugin-dynamic-import-vars": "^2.0.3",
37
37
  "@types/node": "18.15.11",
38
38
  "astro": "2.1.8",
39
39
  "cypress": "^12.9.0",
40
- "eslint-plugin-cypress": "^2.12.1",
40
+ "eslint-plugin-cypress": "^2.13.2",
41
41
  "start-server-and-test": "^2.0.0",
42
- "typescript": "4.9.5",
42
+ "typescript": "5.0.3",
43
43
  "vite": "^4.2.1",
44
- "vite-plugin-dts": "^2.1.0"
44
+ "vite-plugin-dts": "^2.2.0"
45
45
  },
46
46
  "repository": {
47
47
  "type": "git",