(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8481"],{3722:function(e,t,r){"use strict";r.r(t),r.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"features/external-resources","title":"External Resources","description":"Stylesheets and Scripts","source":"@site/docs/features/external-resources.mdx","sourceDirName":"features","slug":"/features/external-resources","permalink":"/docs/features/external-resources","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/external-resources.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Result Page","permalink":"/docs/features/result"},"next":{"title":"Tools Pane","permalink":"/docs/features/tools-pane"}}'),n=r("5893"),o=r("65"),i=r("8500");let a={},l="External Resources",c={},d=[{value:"Stylesheets and Scripts",id:"stylesheets-and-scripts",level:2},{value:"Search for NPM Packages",id:"search-for-npm-packages",level:2},{value:"Fonts",id:"fonts",level:2},{value:"CSS Presets",id:"css-presets",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",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:"external-resources",children:"External Resources"})}),"\n",(0,n.jsx)(t.h2,{id:"stylesheets-and-scripts",children:"Stylesheets and Scripts"}),"\n",(0,n.jsx)(t.p,{children:"URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu \u2192 External Resources. In addition, there is a button to the External Resources in the toolbar below the editors."}),"\n","\n",(0,n.jsx)(i.Z,{params:{screen:"resources"},linkText:"direct link"}),"\n",(0,n.jsx)(t.p,{children:"URLs to stylesheets/scripts should be added each in a separate line."}),"\n",(0,n.jsxs)(t.p,{children:["Stylesheets and scripts are loaded in the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," before editor codes. Thus, CSS properties defined in external stylesheets can be overridden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"External Resources",src:r(934).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"Importing and Exporting code to other services (e.g. Codepen and Github gists) takes into consiedration the external resources."}),"\n",(0,n.jsx)(t.h2,{id:"search-for-npm-packages",children:"Search for NPM Packages"}),"\n",(0,n.jsxs)(t.p,{children:["Package search allows finding NPM Packages and adding URLs to default scripts/stylesheets (hosted by ",(0,n.jsx)(t.a,{href:"https://www.jsdelivr.com/",children:"jsDelivr"}),"). Specific package version can be specified."]}),"\n",(0,n.jsx)(t.p,{children:"Examples for search terms:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:"jque\n\njquery\n\njquery@3\n\njquery@3.6\n\njquery@3.6.3\n\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"External Resources Search",src:r(3414).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.h2,{id:"fonts",children:"Fonts"}),"\n",(0,n.jsxs)(t.p,{children:["Fonts can be added from ",(0,n.jsx)(t.a,{href:"https://fonts.google.com/",children:"Google fonts"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"css-presets",children:"CSS Presets"}),"\n",(0,n.jsxs)(t.p,{children:["CSS presets currently include ",(0,n.jsx)(t.a,{href:"https://necolas.github.io/normalize.css/",children:"Normalize.css"})," and ",(0,n.jsx)(t.a,{href:"https://meyerweb.com/eric/tools/css/reset/",children:"Reset CSS"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n"]})]})}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)}},3414:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/resources-search-682ed2f25e65a5b5688ca2e1a36bb55e.jpg"},934:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/resources-5c3f57e775f433671928dd9025a1e8e1.jpg"},7728:function(e,t,r){e=r.nmd(e);var s=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",s={};function n(e,t){if(!s[e]){s[e]={};for(var r=0;r<e.length;r++)s[e][e.charAt(r)]=r}return s[e][t]}var o={compressToBase64:function(e){if(null==e)return"";var r=o._compress(e,6,function(e){return t.charAt(e)});switch(r.length%4){default:case 0:return r;case 1:return r+"===";case 2:return r+"==";case 3:return r+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:o._decompress(e.length,32,function(r){return n(t,e.charAt(r))})},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),r=new Uint8Array(2*t.length),s=0,n=t.length;s<n;s++){var i=t.charCodeAt(s);r[2*s]=i>>>8,r[2*s+1]=i%256}return r},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var r=Array(t.length/2),s=0,n=r.length;s<n;s++)r[s]=256*t[2*s]+t[2*s+1];var i=[];return r.forEach(function(t){i.push(e(t))}),o.decompress(i.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":o._compress(e,6,function(e){return r.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),o._decompress(e.length,32,function(t){return n(r,e.charAt(t))}))},compress:function(t){return o._compress(t,16,function(t){return e(t)})},_compress:function(e,t,r){if(null==e)return"";var s,n,o,i={},a={},l="",c="",d="",u=2,h=3,p=2,f=[],m=0,g=0;for(o=0;o<e.length;o+=1)if(l=e.charAt(o),Object.prototype.hasOwnProperty.call(i,l)||(i[l]=h++,a[l]=!0),c=d+l,Object.prototype.hasOwnProperty.call(i,c))d=c;else{if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(s=0;s<p;s++)m<<=1,g==t-1?(g=0,f.push(r(m)),m=0):g++;for(s=0,n=d.charCodeAt(0);s<8;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1}else{for(s=0,n=1;s<p;s++)m=m<<1|n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n=0;for(s=0,n=d.charCodeAt(0);s<16;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(s=0,n=i[d];s<p;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++),i[c]=h++,d=String(l)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(s=0;s<p;s++)m<<=1,g==t-1?(g=0,f.push(r(m)),m=0):g++;for(s=0,n=d.charCodeAt(0);s<8;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1}else{for(s=0,n=1;s<p;s++)m=m<<1|n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n=0;for(s=0,n=d.charCodeAt(0);s<16;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(s=0,n=i[d];s<p;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++)}for(s=0,n=2;s<p;s++)m=m<<1|1&n,g==t-1?(g=0,f.push(r(m)),m=0):g++,n>>=1;for(;;){if(m<<=1,g==t-1){f.push(r(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,r,s){var n,o,i,a,l,c,d,u=[],h=4,p=4,f=3,m="",g=[],v={val:s(0),position:r,index:1};for(n=0;n<3;n+=1)u[n]=n;for(i=0,l=4,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;switch(i){case 0:for(i=0,l=256,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;d=e(i);break;case 1:for(i=0,l=65536,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;d=e(i);break;case 2:return""}for(u[3]=d,o=d,g.push(d);;){if(v.index>t)return"";for(i=0,l=Math.pow(2,f),c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;switch(d=i){case 0:for(i=0,l=256,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,l=65536,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=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 s}):null!=e&&(e.exports=s)},8500:function(e,t,r){"use strict";r.d(t,{Z:()=>c});var s=r("5893");r("7294");var n=r("6735");function o(e){let{children:t,fallback:r}=e;return(0,n.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):r??null}var i=r("1705"),a=r("8294"),l=r("1858");function c(e){let{params:t,config:r,code:n,language:c="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:l.G,params:t,config:r});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[n&&(0,s.jsx)(o,{children:()=>(0,s.jsx)(i.Z,{language:c,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,c):n})}),(0,s.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,s.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,s.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,r){"use strict";r.d(t,{T:function(){return n},r:function(){return o}});var s=r(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:r={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)S(l=document.createElement("div")),document.body.appendChild(l);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 r&&Object.keys(r).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(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",o=l.querySelector(`iframe.${s}`),i=o||document.createElement("iframe");i.classList.add(s),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?S(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<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:r},u))}),i.onload=()=>{e(i)},i.src=d.href,o||l.appendChild(i)}),g=new Promise(e=>{addEventListener("message",function t(r){r.source===m.contentWindow&&r.origin===u&&r.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{g.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},u),await g,e()}),y=(e,t)=>new Promise(async(r,s)=>{if(p)return s(f);await v();let n=P();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?s(e.error):r(e)}}),m.contentWindow?.postMessage({method:e,id:n,args:t},u)}),x={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(f);return w.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("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||!x[t])return;let r=e.data?.payload;x[t]?.forEach(e=>{e(r)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function S(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 v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),s=1;s<t;s++)r[s-1]=arguments[s];return y("exec",[e,...r])},destroy:()=>g.settled?y("destroy").then(C):p?Promise.reject(f):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:r="https://livecodes.io",params:n={},config:o={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(r)}catch{throw Error(`${r} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[r,s]=t;void 0!==s&&e.searchParams.set(r,String(s))});let h="headless"===t.view||i;if(l&&(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")),c&&(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"!==c?o.view=c:e.searchParams.set("view",c)),"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,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,s.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,r){"use strict";r.d(t,{Z:function(){return a},a:function(){return i}});var s=r(7294);let n={},o=s.createContext(n);function i(e){let t=s.useContext(o);return s.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),s.createElement(o.Provider,{value:t},e.children)}}}]);