1 line
17 KiB
JavaScript
1 line
17 KiB
JavaScript
(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9797"],{3651:function(e,t,s){"use strict";s.r(t),s.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>r,assets:()=>l,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"features/assets","title":"Assets","description":"Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them.","source":"@site/docs/features/assets.mdx","sourceDirName":"features","slug":"/features/assets","permalink":"/docs/features/assets","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/assets.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Default Template/Language","permalink":"/docs/features/default-template-language"},"next":{"title":"Code Snippets","permalink":"/docs/features/snippets"}}'),n=s("5893"),o=s("65"),i=s("8500");let a={},c="Assets",l={},d=[];function u(e){let t={a:"a",code:"code",h1:"h1",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"assets",children:"Assets"})}),"\n",(0,n.jsx)(t.p,{children:"Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them."}),"\n",(0,n.jsx)(t.p,{children:"The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times)."}),"\n",(0,n.jsxs)(t.p,{children:["In addition, assets are supported in ",(0,n.jsx)(t.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,n.jsx)(t.a,{href:"/docs/features/backup-restore#backup",children:"backup"})," and ",(0,n.jsx)(t.a,{href:"/docs/features/backup-restore#restore",children:"restore"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Assets"})," screen can be accessed from Settings menu \u2192 Assets"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Assets",src:s(6884).Z+"",width:"2240",height:"1400"})}),"\n","\n",(0,n.jsx)(i.Z,{params:{screen:"assets"},linkText:"direct link"}),"\n",(0,n.jsx)(t.p,{children:"Assets are either:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Encoded as ",(0,n.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Uploaded to a ",(0,n.jsx)(t.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),". This requires login with a ",(0,n.jsx)(t.a,{href:"/docs/features/github-integration",children:"GitHub account"})," (allowing access to repos). A ",(0,n.jsx)(t.strong,{children:"public"})," repo called ",(0,n.jsx)(t.code,{children:"livecodes-assets"})," is created if not present. The assets are pushed to ",(0,n.jsx)(t.code,{children:"gh-pages"})," branch. They can then be accessed by URLs like:"]}),"\n",(0,n.jsx)(t.p,{children:"https://{user}.github.io/livecodes-assets/assets/..."}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Assets",src:s(3808).Z+"",width:"2240",height:"1400"})})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},6884:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/assets-1-bc942edb19a81002953065dc3fa29544.jpg"},3808:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/assets-2-8312924d50bae171b9875269d3945b7b.jpg"},7728:function(e,t,s){e=s.nmd(e);var r=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",r={};function n(e,t){if(!r[e]){r[e]={};for(var s=0;s<e.length;s++)r[e][e.charAt(s)]=s}return r[e][t]}var o={compressToBase64:function(e){if(null==e)return"";var s=o._compress(e,6,function(e){return t.charAt(e)});switch(s.length%4){default:case 0:return s;case 1:return s+"===";case 2:return s+"==";case 3:return s+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:o._decompress(e.length,32,function(s){return n(t,e.charAt(s))})},compressToUTF16:function(t){return null==t?"":o._compress(t,15,function(t){return e(t+32)})+" "},decompressFromUTF16:function(e){return null==e?"":""==e?null:o._decompress(e.length,16384,function(t){return e.charCodeAt(t)-32})},compressToUint8Array:function(e){for(var t=o.compress(e),s=new Uint8Array(2*t.length),r=0,n=t.length;r<n;r++){var i=t.charCodeAt(r);s[2*r]=i>>>8,s[2*r+1]=i%256}return s},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var s=Array(t.length/2),r=0,n=s.length;r<n;r++)s[r]=256*t[2*r]+t[2*r+1];var i=[];return s.forEach(function(t){i.push(e(t))}),o.decompress(i.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":o._compress(e,6,function(e){return s.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),o._decompress(e.length,32,function(t){return n(s,e.charAt(t))}))},compress:function(t){return o._compress(t,16,function(t){return e(t)})},_compress:function(e,t,s){if(null==e)return"";var r,n,o,i={},a={},c="",l="",d="",u=2,h=3,p=2,f=[],m=0,g=0;for(o=0;o<e.length;o+=1)if(c=e.charAt(o),Object.prototype.hasOwnProperty.call(i,c)||(i[c]=h++,a[c]=!0),l=d+c,Object.prototype.hasOwnProperty.call(i,l))d=l;else{if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,g==t-1?(g=0,f.push(s(m)),m=0):g++;for(r=0,n=d.charCodeAt(0);r<8;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}else{for(r=0,n=1;r<p;r++)m=m<<1|n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n=0;for(r=0,n=d.charCodeAt(0);r<16;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,n=i[d];r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++),i[l]=h++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,g==t-1?(g=0,f.push(s(m)),m=0):g++;for(r=0,n=d.charCodeAt(0);r<8;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}else{for(r=0,n=1;r<p;r++)m=m<<1|n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n=0;for(r=0,n=d.charCodeAt(0);r<16;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,n=i[d];r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++)}for(r=0,n=2;r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;for(;;){if(m<<=1,g==t-1){f.push(s(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,s,r){var n,o,i,a,c,l,d,u=[],h=4,p=4,f=3,m="",g=[],y={val:r(0),position:s,index:1};for(n=0;n<3;n+=1)u[n]=n;for(i=0,c=4,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(u[3]=d,o=d,g.push(d);;){if(y.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 2:return g.join("")}if(0==h&&(h=Math.pow(2,f),f++),u[d])m=u[d];else{if(d!==p)return null;m=o+o.charAt(0)}g.push(m),u[p++]=o+m.charAt(0),h--,o=m,0==h&&(h=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return r}):null!=e&&(e.exports=r)},8500:function(e,t,s){"use strict";s.d(t,{Z:()=>l});var r=s("5893");s("7294");var n=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,n.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),c=s("1858");function l(e){let{params:t,config:s,code:n,language:l="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:s});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[n&&(0,r.jsx)(o,{children:()=>(0,r.jsx)(i.Z,{language:l,title:d,showLineNumbers:u,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(n,l):n})}),(0,r.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){"use strict";s.d(t,{T:function(){return n},r:function(){return o}});var r=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:n="lazy",view:i}=t,a=r||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)C(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let h=t.params;"object"==typeof h&&Object.keys(h).length>0&&JSON.stringify(h).length<1800&&Object.keys(h).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(h[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let r="livecodes",o=c.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||c.appendChild(i)}),g=new Promise(e=>{addEventListener("message",function t(s){s.source===m.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),y=()=>p?Promise.reject(f):new Promise(async e=>{g.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},u),await g,e()}),v=(e,t)=>new Promise(async(s,r)=>{if(p)return r(f);await y();let n=k();addEventListener("message",function t(o){if(o.source===m.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):s(e)}}),m.contentWindow?.postMessage({method:e,id:n,args:t},u)}),w={},b=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(p)throw Error(f);return b.includes(e)?(v("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},j=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=j(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==u||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let A=()=>{Object.values(w).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;r<t;r++)s[r-1]=arguments[r];return v("exec",[e,...s])},destroy:()=>g.settled?v("destroy").then(A):p?Promise.reject(f):(A(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:o={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let h="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==l?o.view=l:e.searchParams.set("view",l)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){"use strict";s.d(t,{Z:function(){return a},a:function(){return i}});var r=s(7294);let n={},o=r.createContext(n);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); |