Hosting Snippets
This hack allows you to host snippets of code and display them in realtime. It is built in the same way as the Saving a Markdown. It builds on the following 2 hacks.
https://solid.gitbook.io/solid-hacks/section-1/creating-a-realtime-markdown-editor
https://solid.gitbook.io/solid-hacks/section-1/url-shortening
In a similar way to creating a markdown editor create a minimalist code pen using the following code.
<body id=e><a href=..>Home</a><script>for(i=4;--i;)e.innerHTML+="<textarea id=t"+i+" placeholder="+[,"JS","CSS","HTML"][i]+" rows=9 onkeydown='if((K=event).keyCode==9){K.preventDefault();s=this.selectionStart;this.value=this.value.substring(0,this.selectionStart)+\"\t\"+this.value.substring(this.selectionEnd);this.selectionEnd=s+1}'>"+(unescape((l=location).hash.slice(1,-1)).split("\x7F")[i-1]||"");onload=onkeyup=function(a){q=[(E=escape)(j=t1[v="value"]),E(c=t2[v]),E(h=t3[v])].join("\x7f")+1;(H=history)&&H.replaceState?H.replaceState(0,0,"#"+q):location.hash=q;I=h||c||j?h+"<script>"+j+"<\/script><style>"+c:"<pre>Result";navigator.userAgent.match(/IE|Tr/)?((D=e.lastChild.contentWindow.document).write(I),D.close()):frames[0].location.replace("data:text/html,"+escape(I))}</script><style>html,body{height:100%}*{box-sizing:border-box;-moz-box-sizing:border-box;margin:0;vertical-align:top}textarea,iframe{border:1px solid}textarea{resize:none;width:33.333%;height:40%;*width:32%}iframe{width:100%;height:60%}a{position:absolute;bottom:0;right:0;background:#555;color:#fff;text-decoration:none;padding:0px 5px}</style><iframe>
Save it as snippet.html It should look something like this.
https://solidhacks.solid.community/public/demos/snippet.html
Next we're going to use the query string to shorten some code. Create a shortened url, neon.html
With the following long URL :
Save it as neon.html and you should have your first saved code snippet on your pod!
Tip 1 : It is now possible in this way to run arbitrary code in your solid pod, which can interact with other services (including solid!). Here is an example:
