@storyblok/astro 3.0.1 → 3.1.0-next.2
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 +3 -5
- package/dist/storyblok-astro.js +6 -6
- package/dist/storyblok-astro.mjs +19 -14
- package/dist/types/toolbar-app-storyblok.d.ts +7 -0
- package/package.json +17 -11
- package/toolbar-app-storyblok.ts +185 -0
package/README.md
CHANGED
|
@@ -31,9 +31,6 @@
|
|
|
31
31
|
|
|
32
32
|
If you are in a hurry, check out our official **[live demo](https://stackblitz.com/edit/astro-sdk-demo)** on StackBlitz.
|
|
33
33
|
|
|
34
|
-
> **Note**
|
|
35
|
-
> Since Astro 3.0 dropped Node 16 support, the StackBlitz live demo currently does not work.
|
|
36
|
-
|
|
37
34
|
## Usage
|
|
38
35
|
|
|
39
36
|
> If you are first-time user of Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-astro) guide to get a project ready in less than 5 minutes.
|
|
@@ -135,7 +132,8 @@ components: {
|
|
|
135
132
|
>
|
|
136
133
|
> You can choose any other folder in the `src` directory for your Astro components.
|
|
137
134
|
|
|
138
|
-
> Note
|
|
135
|
+
> **Note**
|
|
136
|
+
> If you prefer to use a different folder than `src`, you can specify one using the `componentsDir` option:
|
|
139
137
|
>
|
|
140
138
|
> ```js
|
|
141
139
|
> storyblok({
|
|
@@ -143,7 +141,7 @@ components: {
|
|
|
143
141
|
> });
|
|
144
142
|
> ```
|
|
145
143
|
>
|
|
146
|
-
> Now, your Storyblok components can be located anywhere in the `app` folder, e.g. `app/storyblok/Page.astro`.
|
|
144
|
+
> 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`.
|
|
147
145
|
|
|
148
146
|
For each component, use the `storyblokEditable()` function on its root element, passing the `blok` property that they receive:
|
|
149
147
|
|
package/dist/storyblok-astro.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(g,
|
|
1
|
+
(function(g,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(g=typeof globalThis<"u"?globalThis:g||self,b(g.storyblokAstro={}))})(this,function(g){"use strict";function b(r,t,e){const o="virtual:storyblok-init",s="\0"+o;return{name:"vite-plugin-storyblok-init",async resolveId(n){if(n===o)return s},async load(n){if(n===s)return`
|
|
2
2
|
import { storyblokInit, apiPlugin } from "@storyblok/js";
|
|
3
3
|
const { storyblokApi } = storyblokInit({
|
|
4
4
|
accessToken: "${r}",
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
apiOptions: ${JSON.stringify(e)},
|
|
7
7
|
});
|
|
8
8
|
export const storyblokApiInstance = storyblokApi;
|
|
9
|
-
`}}}const R=/[\p{Lu}]/u,x=/[\p{Ll}]/u,$=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,
|
|
9
|
+
`}}}const R=/[\p{Lu}]/u,x=/[\p{Ll}]/u,$=/^[\p{Lu}](?![\p{Lu}])/gu,v=/([\p{Alpha}\p{N}_]|$)/u,m=/[_.\- ]+/,O=new RegExp("^"+m.source),I=new RegExp(m.source+v.source,"gu"),w=new RegExp("\\d+"+v.source,"gu"),M=(r,t,e,o)=>{let s=!1,n=!1,a=!1,c=!1;for(let l=0;l<r.length;l++){const i=r[l];c=l>2?r[l-3]==="-":!0,s&&R.test(i)?(r=r.slice(0,l)+"-"+r.slice(l),s=!1,a=n,n=!0,l++):n&&a&&x.test(i)&&(!c||o)?(r=r.slice(0,l-1)+"-"+r.slice(l-1),a=n,n=!1,s=!0):(s=t(i)===i&&e(i)!==i,a=n,n=e(i)===i&&t(i)!==i)}return r},N=(r,t)=>($.lastIndex=0,r.replaceAll($,e=>t(e))),P=(r,t)=>(I.lastIndex=0,w.lastIndex=0,r.replaceAll(w,(e,o,s)=>["_","-"].includes(r.charAt(s+e.length))?e:t(e)).replaceAll(I,(e,o)=>t(o)));function T(r,t){if(!(typeof r=="string"||Array.isArray(r)))throw new TypeError("Expected the input to be `string | string[]`");if(t={pascalCase:!1,preserveConsecutiveUppercase:!1,...t},Array.isArray(r)?r=r.map(n=>n.trim()).filter(n=>n.length).join("-"):r=r.trim(),r.length===0)return"";const e=t.locale===!1?n=>n.toLowerCase():n=>n.toLocaleLowerCase(t.locale),o=t.locale===!1?n=>n.toUpperCase():n=>n.toLocaleUpperCase(t.locale);return r.length===1?m.test(r)?"":t.pascalCase?o(r):e(r):(r!==e(r)&&(r=M(r,e,o,t.preserveConsecutiveUppercase)),r=r.replace(O,""),r=t.preserveConsecutiveUppercase?N(r,e):e(r),t.pascalCase&&(r=o(r.charAt(0))+r.slice(1)),P(r,o))}function L(r,t,e,o){const s="virtual:storyblok-components",n="\0"+s;return{name:"vite-plugin-storyblok-components",async resolveId(a){if(a===s)return n},async load(a){if(a===n){const c=[],l=[];for await(const[u,d]of Object.entries(t)){const h=await this.resolve("/"+r+"/"+d+".astro");if(h)c.push(`import ${T(u)} from "${h.id}"`);else if(e)l.push(u);else throw new Error(`Component could not be found for blok "${u}"! Does "${"/"+r+"/"+d}.astro" exist?`)}let i="";if(e)if(i=",FallbackComponent",o){const u=await this.resolve("/"+r+"/"+o+".astro");if(!u)throw new Error(`Custom fallback component could not be found. Does "${"/"+r+"/"+o}.astro" exist?`);c.push(`import FallbackComponent from "${u.id}"`)}else c.push("import FallbackComponent from '@storyblok/astro/FallbackComponent.astro'");if(Object.values(t).length)return`${c.join(";")};export default {${Object.keys(t).filter(u=>!l.includes(u)).map(u=>T(u)).join(",")}${i}}`;if(e)return`${c[0]}; export default {${i.replace(",","")}}`;throw new Error(`Currently, no Storyblok components are registered in astro.config.mjs.
|
|
10
10
|
Please register your components or enable the fallback component.
|
|
11
11
|
Detailed information can be found here: https://github.com/storyblok/storyblok-astro`)}}}}function _(r){const t="virtual:storyblok-options",e="\0"+t;return{name:"vite-plugin-storyblok-options",async resolveId(o){if(o===t)return e},async load(o){if(o===e)return`export default ${JSON.stringify(r)}`}}}let A=!1;const C=[],z=r=>new Promise((t,e)=>{if(typeof window>"u"||(window.storyblokRegisterEvent=s=>{if(window.location===window.parent.location){console.warn("You are not in Draft Mode or in the Visual Editor.");return}A?s():C.push(s)},document.getElementById("storyblok-javascript-bridge")))return;const o=document.createElement("script");o.async=!0,o.src=r,o.id="storyblok-javascript-bridge",o.onerror=s=>e(s),o.onload=s=>{C.forEach(n=>n()),A=!0,t(s)},document.getElementsByTagName("head")[0].appendChild(o)});var U=Object.defineProperty,D=(r,t,e)=>t in r?U(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,p=(r,t,e)=>(D(r,typeof t!="symbol"?t+"":t,e),e);class B{constructor(){p(this,"isCDNUrl",(t="")=>t.indexOf("/cdn/")>-1),p(this,"getOptionsPage",(t,e=25,o=1)=>({...t,per_page:e,page:o})),p(this,"delay",t=>new Promise(e=>setTimeout(e,t))),p(this,"arrayFrom",(t=0,e)=>[...Array(t)].map(e)),p(this,"range",(t=0,e=t)=>{const o=Math.abs(e-t)||0,s=t<e?1:-1;return this.arrayFrom(o,(n,a)=>a*s+t)}),p(this,"asyncMap",async(t,e)=>Promise.all(t.map(e))),p(this,"flatMap",(t=[],e)=>t.map(e).reduce((o,s)=>[...o,...s],[])),p(this,"escapeHTML",function(t){const e={"&":"&","<":"<",">":">",'"':""","'":"'"},o=/[&<>"']/g,s=RegExp(o.source);return t&&s.test(t)?t.replace(o,n=>e[n]):t})}stringify(t,e,o){const s=[];for(const n in t){if(!Object.prototype.hasOwnProperty.call(t,n))continue;const a=t[n],c=o?"":encodeURIComponent(n);let l;typeof a=="object"?l=this.stringify(a,e?e+encodeURIComponent("["+c+"]"):c,Array.isArray(a)):l=(e?e+encodeURIComponent("["+c+"]"):c)+"="+encodeURIComponent(a),s.push(l)}return s.join("&")}getRegionURL(t){const e="api.storyblok.com",o="api-us.storyblok.com",s="app.storyblokchina.cn";switch(t){case"us":return o;case"cn":return s;default:return e}}}const q=function(r,t){const e={};for(const o in r){const s=r[o];t.indexOf(o)>-1&&s!==null&&(e[o]=s)}return e},F=r=>r==="email",J=()=>({singleTag:"hr"}),K=()=>({tag:"blockquote"}),V=()=>({tag:"ul"}),H=r=>({tag:["pre",{tag:"code",attrs:r.attrs}]}),G=()=>({singleTag:"br"}),W=r=>({tag:`h${r.attrs.level}`}),Y=r=>({singleTag:[{tag:"img",attrs:q(r.attrs,["src","alt","title"])}]}),Q=()=>({tag:"li"}),X=()=>({tag:"ol"}),Z=()=>({tag:"p"}),ee=r=>({tag:[{tag:"span",attrs:{"data-type":"emoji","data-name":r.attrs.name,emoji:r.attrs.emoji}}]}),te=()=>({tag:"b"}),re=()=>({tag:"strike"}),oe=()=>({tag:"u"}),se=()=>({tag:"strong"}),ne=()=>({tag:"code"}),ae=()=>({tag:"i"}),le=r=>{const t=new B().escapeHTML,e={...r.attrs},{linktype:o="url"}=r.attrs;if(e.href&&(e.href=t(r.attrs.href||"")),F(o)&&(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}]}),ce=()=>({tag:"sub"}),ue=()=>({tag:"sup"}),ge=r=>({tag:[{tag:"span",attrs:r.attrs}]}),fe=r=>{var t;return(t=r.attrs)!=null&&t.color?{tag:[{tag:"span",attrs:{style:`background-color:${r.attrs.color};`}}]}:{tag:""}},pe=r=>{var t;return(t=r.attrs)!=null&&t.color?{tag:[{tag:"span",attrs:{style:`color:${r.attrs.color}`}}]}:{tag:""}},E={nodes:{horizontal_rule:J,blockquote:K,bullet_list:V,code_block:H,hard_break:G,heading:W,image:Y,list_item:Q,ordered_list:X,paragraph:Z,emoji:ee},marks:{bold:te,strike:re,underline:oe,strong:se,code:ne,italic:ae,link:le,styled:ie,subscript:ce,superscript:ue,anchor:ge,highlight:fe,textStyle:pe}},de=function(r){const t={"&":"&","<":"<",">":">",'"':""","'":"'"},e=/[&<>"']/g,o=RegExp(e.source);return r&&o.test(r)?r.replace(e,s=>t[s]):r};class S{constructor(t){p(this,"marks"),p(this,"nodes"),t||(t=E),this.marks=t.marks||[],this.nodes=t.nodes||[]}addNode(t,e){this.nodes[t]=e}addMark(t,e){this.marks[t]=e}render(t,e={optimizeImages:!1}){if(t&&t.content&&Array.isArray(t.content)){let o="";return t.content.forEach(s=>{o+=this.renderNode(s)}),e.optimizeImages?this.optimizeImages(o,e.optimizeImages):o}return console.warn(`The render method must receive an Object with a "content" field.
|
|
12
12
|
The "content" field must be an array of nodes as the type ISbRichtext.
|
|
@@ -31,14 +31,14 @@ Detailed information can be found here: https://github.com/storyblok/storyblok-a
|
|
|
31
31
|
}
|
|
32
32
|
],
|
|
33
33
|
type: 'doc'
|
|
34
|
-
}`),""}optimizeImages(t,e){let o=0,s=0,n="",a="";typeof e!="boolean"&&(typeof e.width=="number"&&e.width>0&&(n+=`width="${e.width}" `,o=e.width),typeof e.height=="number"&&e.height>0&&(n+=`height="${e.height}" `,s=e.height),(e.loading==="lazy"||e.loading==="eager")&&(n+=`loading="${e.loading}" `),typeof e.class=="string"&&e.class.length>0&&(n+=`class="${e.class}" `),e.filters&&(typeof e.filters.blur=="number"&&e.filters.blur>=0&&e.filters.blur<=100&&(a+=`:blur(${e.filters.blur})`),typeof e.filters.brightness=="number"&&e.filters.brightness>=-100&&e.filters.brightness<=100&&(a+=`:brightness(${e.filters.brightness})`),e.filters.fill&&(e.filters.fill.match(/[0-9A-Fa-f]{6}/g)||e.filters.fill==="transparent")&&(a+=`:fill(${e.filters.fill})`),e.filters.format&&["webp","png","jpeg"].includes(e.filters.format)&&(a+=`:format(${e.filters.format})`),typeof e.filters.grayscale=="boolean"&&e.filters.grayscale&&(a+=":grayscale()"),typeof e.filters.quality=="number"&&e.filters.quality>=0&&e.filters.quality<=100&&(a+=`:quality(${e.filters.quality})`),e.filters.rotate&&[90,180,270].includes(e.filters.rotate)&&(a+=`:rotate(${e.filters.rotate})`),a.length>0&&(a="/filters"+a))),n.length>0&&(t=t.replace(/<img/g,`<img ${n.trim()}`));const c=o>0||s>0||a.length>0?`${o}x${s}${a}`:"";return t=t.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof e!="boolean"&&(e.sizes||e.srcset)&&(t=t.replace(/<img.*?src=["|'](.*?)["|']/g,l=>{var i,u;const d=l.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const h={srcset:(i=e.srcset)==null?void 0:i.map(f=>{if(typeof f=="number")return`//${d}/m/${f}x0${a} ${f}w`;if(typeof f=="object"&&f.length===2){let k=0,j=0;return typeof f[0]=="number"&&(k=f[0]),typeof f[1]=="number"&&(j=f[1]),`//${d}/m/${k}x${j}${a} ${k}w`}}).join(", "),sizes:(u=e.sizes)==null?void 0:u.map(f=>f).join(", ")};let y="";return h.srcset&&(y+=`srcset="${h.srcset}" `),h.sizes&&(y+=`sizes="${h.sizes}" `),l.replace(/<img/g,`<img ${y.trim()}`)}return l})),t}renderNode(t){const e=[];t.marks&&t.marks.forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&e.push(this.renderOpeningTag(n.tag))});const o=this.getMatchingNode(t);return o&&o.tag&&e.push(this.renderOpeningTag(o.tag)),t.content?t.content.forEach(s=>{e.push(this.renderNode(s))}):t.text?e.push(de(t.text)):o&&o.singleTag?e.push(this.renderTag(o.singleTag," /")):o&&o.html?e.push(o.html):t.type==="emoji"&&e.push(this.renderEmoji(t)),o&&o.tag&&e.push(this.renderClosingTag(o.tag)),t.marks&&t.marks.slice(0).reverse().forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&e.push(this.renderClosingTag(n.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(o=>{if(o.constructor===String)return`<${o}${e}>`;{let s=`<${o.tag}`;if(o.attrs)for(const n in o.attrs){const a=o.attrs[n];a!==null&&(s+=` ${n}="${a}"`)}return`${s}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(e=>e.constructor===String?`</${e}>`:`</${e.tag}>`).join("")}getMatchingNode(t){const e=this.nodes[t.type];if(typeof e=="function")return e(t)}getMatchingMark(t){const e=this.marks[t.type];if(typeof e=="function")return e(t)}renderEmoji(t){if(t.attrs.emoji)return t.attrs.emoji;const e=[{tag:"img",attrs:{src:t.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(e," /")}}const he=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const t=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return t?{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}:{}};let me
|
|
34
|
+
}`),""}optimizeImages(t,e){let o=0,s=0,n="",a="";typeof e!="boolean"&&(typeof e.width=="number"&&e.width>0&&(n+=`width="${e.width}" `,o=e.width),typeof e.height=="number"&&e.height>0&&(n+=`height="${e.height}" `,s=e.height),(e.loading==="lazy"||e.loading==="eager")&&(n+=`loading="${e.loading}" `),typeof e.class=="string"&&e.class.length>0&&(n+=`class="${e.class}" `),e.filters&&(typeof e.filters.blur=="number"&&e.filters.blur>=0&&e.filters.blur<=100&&(a+=`:blur(${e.filters.blur})`),typeof e.filters.brightness=="number"&&e.filters.brightness>=-100&&e.filters.brightness<=100&&(a+=`:brightness(${e.filters.brightness})`),e.filters.fill&&(e.filters.fill.match(/[0-9A-Fa-f]{6}/g)||e.filters.fill==="transparent")&&(a+=`:fill(${e.filters.fill})`),e.filters.format&&["webp","png","jpeg"].includes(e.filters.format)&&(a+=`:format(${e.filters.format})`),typeof e.filters.grayscale=="boolean"&&e.filters.grayscale&&(a+=":grayscale()"),typeof e.filters.quality=="number"&&e.filters.quality>=0&&e.filters.quality<=100&&(a+=`:quality(${e.filters.quality})`),e.filters.rotate&&[90,180,270].includes(e.filters.rotate)&&(a+=`:rotate(${e.filters.rotate})`),a.length>0&&(a="/filters"+a))),n.length>0&&(t=t.replace(/<img/g,`<img ${n.trim()}`));const c=o>0||s>0||a.length>0?`${o}x${s}${a}`:"";return t=t.replace(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g,`a.storyblok.com/f/$1/$2.$3/m/${c}`),typeof e!="boolean"&&(e.sizes||e.srcset)&&(t=t.replace(/<img.*?src=["|'](.*?)["|']/g,l=>{var i,u;const d=l.match(/a.storyblok.com\/f\/(\d+)\/([^.]+)\.(gif|jpg|jpeg|png|tif|tiff|bmp)/g);if(d&&d.length>0){const h={srcset:(i=e.srcset)==null?void 0:i.map(f=>{if(typeof f=="number")return`//${d}/m/${f}x0${a} ${f}w`;if(typeof f=="object"&&f.length===2){let k=0,j=0;return typeof f[0]=="number"&&(k=f[0]),typeof f[1]=="number"&&(j=f[1]),`//${d}/m/${k}x${j}${a} ${k}w`}}).join(", "),sizes:(u=e.sizes)==null?void 0:u.map(f=>f).join(", ")};let y="";return h.srcset&&(y+=`srcset="${h.srcset}" `),h.sizes&&(y+=`sizes="${h.sizes}" `),l.replace(/<img/g,`<img ${y.trim()}`)}return l})),t}renderNode(t){const e=[];t.marks&&t.marks.forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&e.push(this.renderOpeningTag(n.tag))});const o=this.getMatchingNode(t);return o&&o.tag&&e.push(this.renderOpeningTag(o.tag)),t.content?t.content.forEach(s=>{e.push(this.renderNode(s))}):t.text?e.push(de(t.text)):o&&o.singleTag?e.push(this.renderTag(o.singleTag," /")):o&&o.html?e.push(o.html):t.type==="emoji"&&e.push(this.renderEmoji(t)),o&&o.tag&&e.push(this.renderClosingTag(o.tag)),t.marks&&t.marks.slice(0).reverse().forEach(s=>{const n=this.getMatchingMark(s);n&&n.tag!==""&&e.push(this.renderClosingTag(n.tag))}),e.join("")}renderTag(t,e){return t.constructor===String?`<${t}${e}>`:t.map(o=>{if(o.constructor===String)return`<${o}${e}>`;{let s=`<${o.tag}`;if(o.attrs)for(const n in o.attrs){const a=o.attrs[n];a!==null&&(s+=` ${n}="${a}"`)}return`${s}${e}>`}}).join("")}renderOpeningTag(t){return this.renderTag(t,"")}renderClosingTag(t){return t.constructor===String?`</${t}>`:t.slice(0).reverse().map(e=>e.constructor===String?`</${e}>`:`</${e.tag}>`).join("")}getMatchingNode(t){const e=this.nodes[t.type];if(typeof e=="function")return e(t)}getMatchingMark(t){const e=this.marks[t.type];if(typeof e=="function")return e(t)}renderEmoji(t){if(t.attrs.emoji)return t.attrs.emoji;const e=[{tag:"img",attrs:{src:t.attrs.fallbackImage,draggable:"false",loading:"lazy",align:"absmiddle"}}];return this.renderTag(e," /")}}const he=r=>{if(typeof r!="object"||typeof r._editable>"u")return{};const t=JSON.parse(r._editable.replace(/^<!--#storyblok#/,"").replace(/-->$/,""));return t?{"data-blok-c":JSON.stringify(t),"data-blok-uid":t.id+"-"+t.uid}:{}};let be,me="https://app.storyblok.com/f/storyblok-v2-latest.js";const ye=(r,t)=>{r.addNode("blok",e=>{let o="";return e.attrs.body.forEach(s=>{o+=t(s.component,s)}),{html:o}})},ke=r=>!r||!(r!=null&&r.content.some(t=>t.content||t.type==="blok"||t.type==="horizontal_rule")),$e=(r,t,e)=>{let o=e||be;if(!o){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return ke(r)?"":(t&&(o=new S(t.schema),t.resolver&&ye(o,t.resolver)),o.render(r))},ve=()=>z(me);function Ie(){return globalThis.storyblokApiInstance||console.error("storyblokApiInstance has not been initialized correctly"),globalThis.storyblokApiInstance}function we(r,t){const e=globalThis.storyblokApiInstance.richTextResolver;if(!e){console.error("Please initialize the Storyblok SDK before calling the renderRichText function");return}return $e(r,t,e)}function Te(r){const t={useCustomApi:!1,bridge:!0,componentsDir:"src",enableFallbackComponent:!1,...r};return{name:"@storyblok/astro",hooks:{"astro:config:setup":({injectScript:e,updateConfig:o,addDevOverlayPlugin:s})=>{if(o({vite:{plugins:[b(t.accessToken,t.useCustomApi,t.apiOptions),L(t.componentsDir,t.components,t.enableFallbackComponent,t.customFallbackComponent),_(t)]}}),e("page-ssr",`
|
|
35
35
|
import { storyblokApiInstance } from "virtual:storyblok-init";
|
|
36
36
|
globalThis.storyblokApiInstance = storyblokApiInstance;
|
|
37
|
-
`),t.bridge){let
|
|
37
|
+
`),t.bridge){let n="";if(typeof t.bridge=="object"){const a={...t.bridge};n=`const storyblokInstance = new StoryblokBridge(${JSON.stringify(a)});`}else n="const storyblokInstance = new StoryblokBridge()";e("page",`
|
|
38
38
|
import { loadStoryblokBridge } from "@storyblok/astro";
|
|
39
39
|
loadStoryblokBridge().then(() => {
|
|
40
40
|
const { StoryblokBridge, location } = window;
|
|
41
|
-
${
|
|
41
|
+
${n}
|
|
42
42
|
|
|
43
43
|
storyblokInstance.on(["published", "change"], (event) => {
|
|
44
44
|
if (!event.slugChanged) {
|
|
@@ -46,4 +46,4 @@ Detailed information can be found here: https://github.com/storyblok/storyblok-a
|
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
});
|
|
49
|
-
`)}}}}}g.RichTextResolver=S,g.RichTextSchema=E,g.default=Te,g.loadStoryblokBridge=ve,g.renderRichText=we,g.storyblokEditable=he,g.useStoryblokApi=Ie,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
49
|
+
`)}s("@storyblok/astro/toolbar-app-storyblok.ts")}}}}g.RichTextResolver=S,g.RichTextSchema=E,g.default=Te,g.loadStoryblokBridge=ve,g.renderRichText=we,g.storyblokEditable=he,g.useStoryblokApi=Ie,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/storyblok-astro.mjs
CHANGED
|
@@ -20,7 +20,7 @@ function E(r, t, e) {
|
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
const T = /[\p{Lu}]/u, x = /[\p{Ll}]/u, k = /^[\p{Lu}](?![\p{Lu}])/gu, A = /([\p{Alpha}\p{N}_]|$)/u,
|
|
23
|
+
const T = /[\p{Lu}]/u, x = /[\p{Ll}]/u, k = /^[\p{Lu}](?![\p{Lu}])/gu, A = /([\p{Alpha}\p{N}_]|$)/u, m = /[_.\- ]+/, j = new RegExp("^" + m.source), $ = new RegExp(m.source + A.source, "gu"), v = new RegExp("\\d+" + A.source, "gu"), S = (r, t, e, o) => {
|
|
24
24
|
let s = !1, a = !1, n = !1, c = !1;
|
|
25
25
|
for (let l = 0; l < r.length; l++) {
|
|
26
26
|
const i = r[l];
|
|
@@ -38,7 +38,7 @@ function I(r, t) {
|
|
|
38
38
|
}, Array.isArray(r) ? r = r.map((a) => a.trim()).filter((a) => a.length).join("-") : r = r.trim(), r.length === 0)
|
|
39
39
|
return "";
|
|
40
40
|
const e = t.locale === !1 ? (a) => a.toLowerCase() : (a) => a.toLocaleLowerCase(t.locale), o = t.locale === !1 ? (a) => a.toUpperCase() : (a) => a.toLocaleUpperCase(t.locale);
|
|
41
|
-
return r.length === 1 ?
|
|
41
|
+
return r.length === 1 ? m.test(r) ? "" : t.pascalCase ? o(r) : e(r) : (r !== e(r) && (r = S(r, e, o, t.preserveConsecutiveUppercase)), r = r.replace(j, ""), r = t.preserveConsecutiveUppercase ? R(r, e) : e(r), t.pascalCase && (r = o(r.charAt(0)) + r.slice(1)), O(r, o));
|
|
42
42
|
}
|
|
43
43
|
function N(r, t, e, o) {
|
|
44
44
|
const s = "virtual:storyblok-components", a = "\0" + s;
|
|
@@ -406,8 +406,8 @@ class fe {
|
|
|
406
406
|
if (typeof u == "number")
|
|
407
407
|
return `//${f}/m/${u}x0${n} ${u}w`;
|
|
408
408
|
if (typeof u == "object" && u.length === 2) {
|
|
409
|
-
let
|
|
410
|
-
return typeof u[0] == "number" && (
|
|
409
|
+
let b = 0, y = 0;
|
|
410
|
+
return typeof u[0] == "number" && (b = u[0]), typeof u[1] == "number" && (y = u[1]), `//${f}/m/${b}x${y}${n} ${b}w`;
|
|
411
411
|
}
|
|
412
412
|
}).join(", "),
|
|
413
413
|
sizes: (g = e.sizes) == null ? void 0 : g.map((u) => u).join(", ")
|
|
@@ -492,7 +492,7 @@ const ke = (r) => {
|
|
|
492
492
|
} : {};
|
|
493
493
|
};
|
|
494
494
|
let de, he = "https://app.storyblok.com/f/storyblok-v2-latest.js";
|
|
495
|
-
const
|
|
495
|
+
const be = (r, t) => {
|
|
496
496
|
r.addNode("blok", (e) => {
|
|
497
497
|
let o = "";
|
|
498
498
|
return e.attrs.body.forEach((s) => {
|
|
@@ -501,7 +501,7 @@ const me = (r, t) => {
|
|
|
501
501
|
html: o
|
|
502
502
|
};
|
|
503
503
|
});
|
|
504
|
-
},
|
|
504
|
+
}, me = (r) => !r || !(r != null && r.content.some((t) => t.content || t.type === "blok" || t.type === "horizontal_rule")), ye = (r, t, e) => {
|
|
505
505
|
let o = e || de;
|
|
506
506
|
if (!o) {
|
|
507
507
|
console.error(
|
|
@@ -509,7 +509,7 @@ const me = (r, t) => {
|
|
|
509
509
|
);
|
|
510
510
|
return;
|
|
511
511
|
}
|
|
512
|
-
return
|
|
512
|
+
return me(r) ? "" : (t && (o = new fe(t.schema), t.resolver && be(o, t.resolver)), o.render(r));
|
|
513
513
|
}, $e = () => M(he);
|
|
514
514
|
function ve() {
|
|
515
515
|
return globalThis.storyblokApiInstance || console.error("storyblokApiInstance has not been initialized correctly"), globalThis.storyblokApiInstance;
|
|
@@ -535,7 +535,11 @@ function we(r) {
|
|
|
535
535
|
return {
|
|
536
536
|
name: "@storyblok/astro",
|
|
537
537
|
hooks: {
|
|
538
|
-
"astro:config:setup": ({
|
|
538
|
+
"astro:config:setup": ({
|
|
539
|
+
injectScript: e,
|
|
540
|
+
updateConfig: o,
|
|
541
|
+
addDevOverlayPlugin: s
|
|
542
|
+
}) => {
|
|
539
543
|
if (o({
|
|
540
544
|
vite: {
|
|
541
545
|
plugins: [
|
|
@@ -560,21 +564,21 @@ function we(r) {
|
|
|
560
564
|
globalThis.storyblokApiInstance = storyblokApiInstance;
|
|
561
565
|
`
|
|
562
566
|
), t.bridge) {
|
|
563
|
-
let
|
|
567
|
+
let a = "";
|
|
564
568
|
if (typeof t.bridge == "object") {
|
|
565
|
-
const
|
|
566
|
-
|
|
567
|
-
|
|
569
|
+
const n = { ...t.bridge };
|
|
570
|
+
a = `const storyblokInstance = new StoryblokBridge(${JSON.stringify(
|
|
571
|
+
n
|
|
568
572
|
)});`;
|
|
569
573
|
} else
|
|
570
|
-
|
|
574
|
+
a = "const storyblokInstance = new StoryblokBridge()";
|
|
571
575
|
e(
|
|
572
576
|
"page",
|
|
573
577
|
`
|
|
574
578
|
import { loadStoryblokBridge } from "@storyblok/astro";
|
|
575
579
|
loadStoryblokBridge().then(() => {
|
|
576
580
|
const { StoryblokBridge, location } = window;
|
|
577
|
-
${
|
|
581
|
+
${a}
|
|
578
582
|
|
|
579
583
|
storyblokInstance.on(["published", "change"], (event) => {
|
|
580
584
|
if (!event.slugChanged) {
|
|
@@ -585,6 +589,7 @@ function we(r) {
|
|
|
585
589
|
`
|
|
586
590
|
);
|
|
587
591
|
}
|
|
592
|
+
s("@storyblok/astro/toolbar-app-storyblok.ts");
|
|
588
593
|
}
|
|
589
594
|
}
|
|
590
595
|
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
id: string;
|
|
3
|
+
name: string;
|
|
4
|
+
icon: "<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>";
|
|
5
|
+
init(canvas: ShadowRoot): void;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storyblok/astro",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.1.0-next.2",
|
|
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",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
|
-
"components"
|
|
9
|
+
"components",
|
|
10
|
+
"toolbar-app-storyblok.ts"
|
|
10
11
|
],
|
|
11
12
|
"exports": {
|
|
12
13
|
".": {
|
|
@@ -28,6 +29,11 @@
|
|
|
28
29
|
"types": "./components/RichTextRenderer.ts",
|
|
29
30
|
"import": "./components/RichTextRenderer.ts",
|
|
30
31
|
"require": "./components/RichTextRenderer.ts"
|
|
32
|
+
},
|
|
33
|
+
"./toolbar-app-storyblok.ts": {
|
|
34
|
+
"types": "./toolbar-app-storyblok.ts",
|
|
35
|
+
"import": "./toolbar-app-storyblok.ts",
|
|
36
|
+
"require": "./toolbar-app-storyblok.ts"
|
|
31
37
|
}
|
|
32
38
|
},
|
|
33
39
|
"types": "./dist/types/index.d.ts",
|
|
@@ -48,18 +54,18 @@
|
|
|
48
54
|
},
|
|
49
55
|
"devDependencies": {
|
|
50
56
|
"@cypress/vite-dev-server": "^5.0.6",
|
|
51
|
-
"@rollup/plugin-dynamic-import-vars": "^2.
|
|
52
|
-
"@types/node": "20.
|
|
53
|
-
"astro": "^
|
|
54
|
-
"cypress": "^13.
|
|
57
|
+
"@rollup/plugin-dynamic-import-vars": "^2.1.2",
|
|
58
|
+
"@types/node": "20.10.0",
|
|
59
|
+
"astro": "^4.0.0-beta.4",
|
|
60
|
+
"cypress": "^13.6.0",
|
|
55
61
|
"eslint-plugin-cypress": "^2.14.0",
|
|
56
|
-
"start-server-and-test": "^2.0.
|
|
57
|
-
"typescript": "5.
|
|
58
|
-
"vite": "^
|
|
59
|
-
"vite-plugin-dts": "^3.
|
|
62
|
+
"start-server-and-test": "^2.0.3",
|
|
63
|
+
"typescript": "5.3.2",
|
|
64
|
+
"vite": "^5.0.4",
|
|
65
|
+
"vite-plugin-dts": "^3.6.4"
|
|
60
66
|
},
|
|
61
67
|
"peerDependencies": {
|
|
62
|
-
"astro": "^
|
|
68
|
+
"astro": "^4.0.0-beta.4"
|
|
63
69
|
},
|
|
64
70
|
"repository": {
|
|
65
71
|
"type": "git",
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import type { DevOverlayPlugin, DevOverlayMetadata } from "astro";
|
|
2
|
+
import {
|
|
3
|
+
isDefinedIcon,
|
|
4
|
+
type Icon,
|
|
5
|
+
} from "astro/runtime/client/dev-overlay/ui-library/icons.js";
|
|
6
|
+
|
|
7
|
+
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">
|
|
8
|
+
<g id="storyblok-logo-kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
9
|
+
<g id="storyblok-partner-logo" transform="translate(-59.000000, -169.000000)" fill-rule="nonzero">
|
|
10
|
+
<g id="storyblok-symbol" transform="translate(59.000000, 169.000000)">
|
|
11
|
+
<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>
|
|
12
|
+
<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>
|
|
13
|
+
</g>
|
|
14
|
+
</g>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>`;
|
|
17
|
+
|
|
18
|
+
const storyblokLogoFull = `<svg width="180px" height="38px" viewBox="0 0 251 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
19
|
+
<g id="storyblok-logo-kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
20
|
+
<g id="storyblok-partner-logo" transform="translate(-59.000000, -105.000000)" fill-rule="nonzero">
|
|
21
|
+
<g id="sb-partner-logo" transform="translate(59.000000, 105.000000)">
|
|
22
|
+
<path d="M72.9131069,37.088562 C71.0830889,37.088562 69.3053572,36.8267055 67.5276254,36.2506214 C65.8593684,35.7091705 64.3261491,34.816314 63.0310098,33.6320569 L65.3838901,29.6518391 C66.6910458,30.5421508 67.9459152,31.2229776 69.2007847,31.7466906 C70.403368,32.2704033 71.6059512,32.4798885 72.7562482,32.4798885 C73.5928279,32.4798885 74.2725488,32.3227747 74.7431249,32.0085468 C75.2137009,31.7466906 75.4228459,31.2753489 75.4228459,30.6992648 C75.4228459,30.1755518 75.1614147,29.6518391 74.53398,29.3376112 C73.5513119,28.8658917 72.5155832,28.5142261 71.4490925,28.2901855 L67.7890565,27.0856459 C66.7956182,26.6666756 66.0113248,26.2477053 65.3838901,25.7763637 C64.7564553,25.3573933 64.2858793,24.7813092 64.0244481,24.205225 C63.7398624,23.5440587 63.5973455,22.830315 63.6061583,22.1103735 C63.5755508,20.0489068 64.4792085,18.0845869 66.063611,16.7685021 C66.7956182,16.1400466 67.7367703,15.668705 68.7824949,15.302106 C69.8282194,14.935507 70.9785165,14.7783931 72.1810997,14.7783931 C73.8019728,14.7783931 75.3182734,14.9878783 76.7300015,15.4068486 C78.1417297,15.8781902 79.5011716,16.6637595 80.8083274,17.8159279 L78.2463022,21.7437745 C77.2342235,21.0184947 76.1474315,20.403985 75.004556,19.9107794 C74.0111177,19.4918091 73.1222518,19.3346952 72.1810997,19.3346952 C71.5013787,19.3346952 70.873944,19.4394378 70.403368,19.7536655 C69.8805057,20.015522 69.6713608,20.4868636 69.6713608,21.115319 C69.6713608,21.7437745 69.9327919,22.1627448 70.4556542,22.4769725 C70.9785165,22.7912002 72.024241,23.105428 73.4359692,23.472027 C74.7466265,23.802691 76.0382768,24.204803 77.3051501,24.6765666 C78.3508746,25.0955369 79.1874543,25.5668785 79.8671753,26.0382201 C81.1526056,26.9863531 81.8631074,28.528278 81.7494795,30.1231805 C81.7494795,32.2704033 80.965186,33.9462845 79.344313,35.2031954 C77.7757261,36.4601065 75.684277,37.088562 72.9131069,37.088562 Z M98.7947898,35.5697946 C97.905924,35.9363936 96.8601995,36.3029925 95.7099025,36.6172204 C94.5596054,36.931448 93.4093084,37.1409331 92.206725,37.1409331 C91.3701454,37.1409331 90.6381382,37.0361907 89.906131,36.8267055 C89.1944263,36.6188813 88.534979,36.2618433 87.9715407,35.7792798 C87.4486783,35.3603095 87.0303885,34.731854 86.7166711,34.0510272 C86.4029538,33.3178291 86.1938088,32.4275174 86.1938088,31.3800914 L86.1938088,20.1202645 L83.4749251,20.1202645 L83.4749251,15.1973634 L86.2460951,15.1973634 L86.2460951,8.33672469 L92.7295874,8.33672469 L92.7295874,15.1449921 L97.1216305,15.1449921 L97.1216305,20.1202645 L92.7295874,20.1202645 L92.7295874,29.1281261 C92.7295874,29.8089529 92.8864461,30.3326656 93.2524496,30.6992648 C93.6184532,30.9611211 94.0890292,31.1182351 94.6118916,31.1182351 C95.134754,31.1182351 95.6576161,31.0658638 96.1281921,30.8563786 C96.6510545,30.6992648 97.1216305,30.5421508 97.4876341,30.3326656 L98.7425037,35.5697946 L98.7947898,35.5697946 Z M111.029767,37.088562 C109.365992,37.1176567 107.713055,36.8150153 106.167148,36.19825 C103.446225,35.1201312 101.315176,32.9284411 100.311091,30.1755518 C99.2838371,27.4410902 99.2838371,24.4258648 100.311091,21.6914032 C101.315176,18.938514 103.446225,16.7468239 106.167148,15.668705 C107.578876,15.0926209 109.199749,14.7783931 111.029767,14.7783931 C114.212605,14.6283289 117.303553,15.8705417 119.500136,18.1825269 C120.493575,19.1775813 121.225582,20.382121 121.748444,21.6914032 C122.818748,24.4359365 122.818748,27.4833897 121.748444,30.2279232 C120.737974,32.946857 118.631284,35.1140038 115.944673,36.19825 C114.382482,36.8218907 112.711079,37.1246574 111.029767,37.088562 Z M106.324007,25.9858488 C106.324007,27.66173 106.742296,29.0233836 107.631162,30.018438 C108.572315,31.0658638 109.722612,31.5895765 111.082053,31.5895765 C112.395396,31.6149923 113.647896,31.0359748 114.480658,30.018438 C114.898948,29.494725 115.212665,28.9710123 115.474097,28.2378141 C115.735528,27.5569874 115.8401,26.7714181 115.8401,25.9858488 C115.8401,24.2575963 115.369524,22.8959428 114.480658,21.9008883 C113.591792,20.8534626 112.441495,20.3297269 111.082053,20.3297269 C109.773507,20.3267828 108.530154,20.9015714 107.683449,21.9008883 C107.265159,22.4246012 106.899155,22.9483141 106.637724,23.6815121 C106.401978,24.4259172 106.295858,25.2053995 106.324007,25.9858488 Z M139.421189,20.8010913 C137.852602,20.8010913 136.388588,21.0629477 135.081432,21.5866606 C133.930721,21.9752826 132.950942,22.752974 132.310262,23.7862547 L132.310262,36.7219628 L125.774484,36.7219628 L125.774484,15.1973634 L131.7874,15.1973634 L131.7874,19.4918091 C132.519407,18.025413 133.460559,16.8732447 134.663142,16.0876753 C135.813439,15.2497347 137.016023,14.8307644 138.323178,14.7783931 L139.002899,14.7783931 L139.421189,14.8307644 L139.421189,20.74872 L139.421189,20.8010913 Z M142.296932,39.9166114 C143.20622,40.2332226 144.158207,40.4098033 145.120388,40.4403244 C145.904681,40.4403244 146.532116,40.1784679 147.002692,39.6547549 C147.420982,39.1310422 147.786986,38.0836164 148.152989,36.7219628 L139.996338,15.1973634 L146.741261,15.1973634 L151.708453,31.0658638 L156.04821,15.1973634 L162.165698,15.1973634 L153.95676,40.1784679 C152.669117,44.4215044 148.352245,46.9703268 144.022377,46.0440521 C143.499515,45.9393096 142.87208,45.7821958 142.296932,45.5203393 L142.296932,39.9166114 Z M177.642422,37.0888768 C176.021549,37.0888768 174.557535,36.7743342 173.354951,36.041136 C172.133117,35.3688863 171.119985,34.3722266 170.426922,33.1607153 L170.426922,36.7219628 L164.727723,36.7219628 L164.727723,6.76558605 L171.315788,6.76558605 L171.315788,18.7062398 C172.745953,16.1995254 175.441074,14.6886082 178.322143,14.7783931 C179.681585,14.7783931 180.936454,15.0402496 182.086751,15.668705 C183.237048,16.1924179 184.178201,17.0303585 185.067066,18.025413 C187.640848,21.6029896 188.341185,26.201555 186.949371,30.385037 C186.426508,31.7466906 185.694501,32.9512301 184.805635,33.9462845 C182.969765,35.9623126 180.366637,37.1042233 177.642422,37.0888768 Z M175.812404,31.5895988 C177.93482,31.5940555 179.82559,30.247321 180.518164,28.2378141 C181.28484,26.1280819 180.909166,23.7713492 179.524726,22.0056309 C178.707315,20.9274559 177.425216,20.3048211 176.073835,20.3297497 C175.080397,20.3297497 174.139245,20.6963487 173.250379,21.3771755 C172.413799,22.1103735 171.734078,23.0006854 171.263502,24.1004824 L171.263502,28.6044133 C172.107299,30.3862656 173.89579,31.5262481 175.86469,31.5372054 L175.812404,31.5895988 Z M190.870838,6.76558605 L197.406616,6.76558605 L197.406616,29.0233836 C197.406616,30.6992648 198.086337,31.4848341 199.498065,31.4848341 C200.244476,31.4870105 200.98021,31.3072714 201.641801,30.9611211 L202.530666,35.8316509 C200.699408,36.6349957 198.725918,37.0623904 196.726895,37.088562 C194.844591,37.088562 193.380576,36.564849 192.387138,35.6221657 C191.341414,34.57474 190.818551,33.2130866 190.818551,31.3277203 L190.818551,6.76558605 L190.870838,6.76558605 Z M214.870216,37.088562 C213.206441,37.1176567 211.553504,36.8150153 210.007597,36.19825 C207.270596,35.1267709 205.120814,32.9353803 204.099253,30.1755518 C202.587276,26.0594002 203.428464,21.4454016 206.295275,18.1301556 C207.341,17.0827298 208.491297,16.2971605 209.955311,15.668705 C211.367039,15.0926209 212.987912,14.7783931 214.81793,14.7783931 C218.000768,14.6283289 221.091716,15.8705417 223.288299,18.1825269 C224.334024,19.1775813 225.013745,20.382121 225.536607,21.6914032 C227.108274,25.8022039 226.261346,30.4476897 223.340585,33.7367994 C222.347147,34.7842251 221.144564,35.6221657 219.680549,36.19825 C218.134643,36.8150153 216.481705,37.1176567 214.81793,37.088562 L214.870216,37.088562 Z M210.11217,25.9858488 C210.11217,27.66173 210.530459,29.0233836 211.419325,30.018438 C212.360477,31.0658638 213.510774,31.5895765 214.870216,31.5895765 C216.181936,31.6072894 217.43126,31.0297402 218.268821,30.018438 C218.687111,29.494725 219.000828,28.9710123 219.262259,28.2378141 C219.523691,27.5569874 219.628263,26.7714181 219.628263,25.9858488 C219.628263,24.2575963 219.157687,22.8959428 218.268821,21.9008883 C217.379955,20.8534626 216.229658,20.3297269 214.870216,20.3297269 C213.561669,20.3267828 212.318317,20.9015714 211.471611,21.9008883 C211.053322,22.4246012 210.687318,22.9483141 210.425887,23.6815121 C210.164456,24.4147102 210.11217,25.1479082 210.11217,25.9858488 Z M244.045932,36.7219628 L238.451305,28.028329 L236.150711,30.4374083 L236.150711,36.7219628 L229.614933,36.7219628 L229.614933,6.76558605 L236.150711,6.76558605 L236.150711,24.1004824 L243.418497,15.1973634 L250.372565,15.1973634 L242.634204,24.4670814 L251,36.7219628 L244.045932,36.7219628 Z" id="Shape" fill="#FFFFFF"></path>
|
|
23
|
+
<g id="storyblok-symbol">
|
|
24
|
+
<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>
|
|
25
|
+
<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>
|
|
26
|
+
</g>
|
|
27
|
+
</g>
|
|
28
|
+
</g>
|
|
29
|
+
</g>
|
|
30
|
+
</svg>`;
|
|
31
|
+
|
|
32
|
+
function createWindowElement(content: string) {
|
|
33
|
+
const windowElement = document.createElement("astro-dev-toolbar-window");
|
|
34
|
+
windowElement.innerHTML = content;
|
|
35
|
+
return windowElement;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export default {
|
|
39
|
+
id: "storyblok",
|
|
40
|
+
name: "Storyblok",
|
|
41
|
+
icon: storyblokLogo,
|
|
42
|
+
init(canvas) {
|
|
43
|
+
createCanvas();
|
|
44
|
+
|
|
45
|
+
document.addEventListener("astro:after-swap", createCanvas);
|
|
46
|
+
|
|
47
|
+
function createCanvas() {
|
|
48
|
+
const links: {
|
|
49
|
+
icon: Icon;
|
|
50
|
+
name: string;
|
|
51
|
+
description: string;
|
|
52
|
+
link: string;
|
|
53
|
+
}[] = [
|
|
54
|
+
{
|
|
55
|
+
icon: "star",
|
|
56
|
+
name: "Ultimate Tutorial",
|
|
57
|
+
description: "Practical step-by-step guide.",
|
|
58
|
+
link: "https://www.storyblok.com/tp/the-storyblok-astro-ultimate-tutorial",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
icon: "lightbulb",
|
|
62
|
+
name: "Further Tutorials",
|
|
63
|
+
description: "Browse our other tutorials.",
|
|
64
|
+
link: "https://www.storyblok.com/tutorials?technologies=astro",
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
icon: "file-search",
|
|
68
|
+
name: "API Docs",
|
|
69
|
+
description: "Storyblok's Content Delivery and Management APIs.",
|
|
70
|
+
link: "https://www.storyblok.com/docs#api-documentations",
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
icon: "astro:logo",
|
|
74
|
+
name: "Astro Docs",
|
|
75
|
+
description: "Astro's official Storyblok docs.",
|
|
76
|
+
link: "https://docs.astro.build/en/guides/cms/storyblok/",
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
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>`,
|
|
80
|
+
name: "Community",
|
|
81
|
+
description: "Engage with our Discord community.",
|
|
82
|
+
link: "https://discord.com/channels/830184174198718474/1002802280267001858",
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
icon: "bug",
|
|
86
|
+
name: "Report a Bug",
|
|
87
|
+
description: "Help us make @storyblok/astro even better.",
|
|
88
|
+
link: "https://github.com/withastro/astro/issues/new/choose",
|
|
89
|
+
},
|
|
90
|
+
];
|
|
91
|
+
|
|
92
|
+
const windowComponent = createWindowElement(
|
|
93
|
+
`
|
|
94
|
+
<style>
|
|
95
|
+
p {
|
|
96
|
+
margin-top: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
header {
|
|
100
|
+
display: flex;
|
|
101
|
+
justify-content: space-between;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
a {
|
|
106
|
+
color: rgba(224, 204, 250, 1);
|
|
107
|
+
text-decoration: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
a:hover {
|
|
111
|
+
color: #f4ecfd;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
#links {
|
|
115
|
+
margin: auto 0;
|
|
116
|
+
display: grid;
|
|
117
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
118
|
+
gap: 16px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
#links astro-dev-toolbar-card {
|
|
122
|
+
color: white;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
#links astro-dev-toolbar-card h3 {
|
|
126
|
+
margin: 0.5em 0;
|
|
127
|
+
color: white;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
#links astro-dev-toolbar-card p {
|
|
131
|
+
margin: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
#links astro-dev-toolbar-card:hover {
|
|
135
|
+
color: rgba(145, 152, 173, 1);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
#links astro-dev-toolbar-icon {
|
|
139
|
+
width: 1.5em;
|
|
140
|
+
height: 1.5em;
|
|
141
|
+
display: block;
|
|
142
|
+
color: white;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@media (forced-colors: active) {
|
|
146
|
+
svg path[fill="#fff"] {
|
|
147
|
+
fill: black;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
</style>
|
|
151
|
+
|
|
152
|
+
<header>
|
|
153
|
+
<a href="https://storyblok.com" target="_blank" id="logo">
|
|
154
|
+
${storyblokLogoFull}
|
|
155
|
+
</a>
|
|
156
|
+
<a href="https://github.com/storyblok/storyblok-astro" target="_blank">
|
|
157
|
+
<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."/>
|
|
158
|
+
</a>
|
|
159
|
+
</header>
|
|
160
|
+
<hr />
|
|
161
|
+
<div id="main-container">
|
|
162
|
+
<section id="links">
|
|
163
|
+
${links
|
|
164
|
+
.map(
|
|
165
|
+
(link) =>
|
|
166
|
+
`<astro-dev-toolbar-card link="${
|
|
167
|
+
link.link
|
|
168
|
+
}"><astro-dev-toolbar-icon ${
|
|
169
|
+
isDefinedIcon(link.icon)
|
|
170
|
+
? `icon="${link.icon}">`
|
|
171
|
+
: `>${link.icon}`
|
|
172
|
+
}</astro-dev-toolbar-icon><h3>${link.name}</h3><p>${
|
|
173
|
+
link.description
|
|
174
|
+
}</p></astro-dev-toolbar-card>`
|
|
175
|
+
)
|
|
176
|
+
.join("")}
|
|
177
|
+
</section>
|
|
178
|
+
</div>
|
|
179
|
+
`
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
canvas.append(windowComponent);
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
} satisfies DevOverlayPlugin;
|