Merge b02ed808fc
into f2517187bf
This commit is contained in:
commit
257b821f60
129
doc/scittle.svg
Normal file
129
doc/scittle.svg
Normal file
|
@ -0,0 +1,129 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="279.22012"
|
||||
height="373.3071"
|
||||
viewBox="0 0 932.00005 1245.5092"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg884"
|
||||
sodipodi:docname="scittle.svg"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
inkscape:export-filename="scittle.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<metadata
|
||||
id="metadata888">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1080"
|
||||
id="namedview886"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.72497901"
|
||||
inkscape:cx="130.3486"
|
||||
inkscape:cy="216.55799"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg884"
|
||||
inkscape:pagecheckerboard="0" />
|
||||
<defs
|
||||
id="defs882">
|
||||
<linearGradient
|
||||
id="paint0_linear"
|
||||
x1="1499"
|
||||
y1="139"
|
||||
x2="1499"
|
||||
y2="1385.52"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop
|
||||
stop-color="#E41F26"
|
||||
id="stop877" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#B70000"
|
||||
id="stop879" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="m 295.11059,227.09477 c 0,85.44468 56.96315,113.92624 56.96315,227.85248 0,142.40781 -113.92612,256.33404 -113.92612,398.7419 0,148.10395 108.22992,341.77875 108.22992,341.77875 h 233.54877 c 0,0 113.92612,-193.6748 113.92612,-341.77875 0,-142.40786 -113.92612,-256.33409 -113.92612,-398.7419 0,-113.92624 56.96297,-142.4078 56.96297,-227.85248 a 170.88937,170.88937 0 1 0 -341.77869,0"
|
||||
id="path1165"
|
||||
style="stroke:#000000;stroke-width:56.9632;fill:#f2f2f2" />
|
||||
<rect
|
||||
style="fill:#d40000;stroke:none;stroke-width:126.156;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="rect1399"
|
||||
width="380.50467"
|
||||
height="92.84938"
|
||||
x="275.74768"
|
||||
y="662.68774" />
|
||||
<rect
|
||||
style="fill:#d40000;stroke:none;stroke-width:126.156;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
|
||||
id="rect1649"
|
||||
width="286.06406"
|
||||
height="92.849365"
|
||||
x="322.96799"
|
||||
y="528.86871" />
|
||||
<path
|
||||
d="m 295.11059,227.09477 c 0,85.44468 56.96315,113.92624 56.96315,227.85248 0,142.40781 -113.92612,256.33404 -113.92612,398.7419 0,148.10395 108.22992,341.77875 108.22992,341.77875 h 233.54877 c 0,0 113.92612,-193.6748 113.92612,-341.77875 0,-142.40786 -113.92612,-256.33409 -113.92612,-398.7419 0,-113.92624 56.96297,-142.4078 56.96297,-227.85248 a 170.88937,170.88937 0 1 0 -341.77869,0"
|
||||
id="path1547"
|
||||
style="stroke:#000000;stroke-width:56.9632;fill:none" />
|
||||
<g
|
||||
id="g1375"
|
||||
transform="matrix(0.67691895,0,0,0.67691895,150.85364,-223.17751)">
|
||||
<g
|
||||
id="g1901"
|
||||
transform="translate(0,47.66369)">
|
||||
<path
|
||||
d="M 527,605.53061 H 404 l 30,30 v 90 c 4.5,-29.5 60.5,-30.5 63.5,0 l 7.5,-90 z"
|
||||
fill="#000000"
|
||||
id="path843" />
|
||||
<path
|
||||
d="m 81.12,645.53061 c 0,-22.091 17.91,-40 40,-40 h 284.9 c 24.18,0 42.83,21.292 39.65,45.264 l -24.76,186.5 c -2.64,19.882 -19.6,34.736 -39.65,34.736 H 121.12 c -22.09,0 -40,-17.909 -40,-40 z"
|
||||
fill="#000000"
|
||||
id="path845" />
|
||||
<path
|
||||
d="m 199.1,828.08061 v -16.5 h -5.55 c -3.6,0 -6,-2.55 -7.2,-6.3 l -22.8,-68.7 c -1.5,-4.35 -3.3,-7.5 -5.7,-9.9 -4.5,-4.65 -10.35,-6.15 -16.95,-6.15 h -7.2 v 17.25 h 4.8 c 4.05,0 7.2,1.5 8.55,6.3 l 3.15,11.1 -28.2,72.9 h 20.55 l 16.95,-48 9,28.95 c 3.45,11.25 9.3,19.05 22.5,19.05 z"
|
||||
fill="#ffffff"
|
||||
id="path847" />
|
||||
<path
|
||||
d="m 231.8,811.58061 v 16.5 h 56 v -16.5 z"
|
||||
fill="#ffffff"
|
||||
id="path849" />
|
||||
<path
|
||||
d="m 486.01,650.79761 c -3.18,-23.973 15.47,-45.267 39.65,-45.267 H 810 c 22.09,0 40,17.909 40,40 v 186.096 c 0,22.091 -17.91,40.004 -40,40.004 H 550.38 c -20.05,0 -37.01,-14.856 -39.65,-34.738 z"
|
||||
fill="#000000"
|
||||
id="path851" />
|
||||
<path
|
||||
d="m 632.3,828.53061 v -16.5 h -5.55 c -3.6,0 -6,-2.55 -7.2,-6.3 l -22.8,-68.7 c -1.5,-4.35 -3.3,-7.5 -5.7,-9.9 -4.5,-4.65 -10.35,-6.15 -16.95,-6.15 h -7.2 v 17.25 h 4.8 c 4.05,0 7.2,1.5 8.55,6.3 l 3.15,11.1 -28.2,72.9 h 20.55 l 16.95,-48 9,28.95 c 3.45,11.25 9.3,19.05 22.5,19.05 z"
|
||||
fill="#ffffff"
|
||||
id="path853" />
|
||||
<path
|
||||
d="m 665,812.03061 v 16.5 h 56 v -16.5 z"
|
||||
fill="#ffffff"
|
||||
id="path855" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 5.1 KiB |
|
@ -1,7 +1,51 @@
|
|||
body {
|
||||
font-family: Arial;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
background-color: #FBFAF8;
|
||||
color: #302F2B;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h1 > img {
|
||||
height: 1em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2176BC;
|
||||
}
|
||||
|
||||
button:not(#app button) {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
background-color: #4299e1;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
border-bottom: 4px solid #2b6cb0;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
border: 2px solid #888;
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
div#app
|
||||
{
|
||||
color:#666;
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
div#app td
|
||||
|
|
|
@ -66,10 +66,12 @@
|
|||
(.highlightElement js/hljs code))))
|
||||
(.send req)))
|
||||
|
||||
(.highlightAll js/hljs)
|
||||
</script>
|
||||
|
||||
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/clojure.min.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/zenburn.min.css" integrity="sha512-JPxjD2t82edI35nXydY/erE9jVPpqxEJ++6nYEoZEpX2TRsmp2FpZuQqZa+wBCen5U16QZOkMadGXHCfp+tUdg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
</head>
|
||||
|
@ -77,7 +79,7 @@
|
|||
<div style="float: right;">
|
||||
<a href="https://gitHub.com/babashka/scittle"><img src="https://img.shields.io/github/stars/babashka/scittle.svg?style=social&label=Star"></a></div>
|
||||
|
||||
<h1>Scittle</h1>
|
||||
<h1><img src='scittle.svg'>Scittle</h1>
|
||||
<h2>What is this?</h2>
|
||||
<p>This project exposes the <a href="https://github.com/babashka/sci">Small Clojure Interpreter</a> in the
|
||||
browser in such a way that you can use it with the <tt>script</tt> tag.</p>
|
||||
|
@ -105,7 +107,7 @@
|
|||
When you have a file on your server, say <tt>cljs/script.cljs</tt>, you can load it using the <tt>src</tt> attribute:
|
||||
|
||||
<pre><code id="scittle-tag-example" class="html">
|
||||
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
<script src="cljs/script.cljs" type="application/x-scittle"></script>
|
||||
</code></pre>
|
||||
|
||||
<script type="text/javascript">hljs.highlightElement(document.getElementById("scittle-tag-example"));</script>
|
||||
|
@ -136,7 +138,6 @@
|
|||
in addition to <tt>scittle.js</tt>, you need to include <tt>scittle.cljs-ajax.js</tt>:
|
||||
|
||||
<pre><code data-type="scittle" data-src="html/cljs-ajax.html" class="html"></code></pre>
|
||||
|
||||
<button onclick="make_request()">
|
||||
Click me!
|
||||
</button>
|
||||
|
@ -151,20 +152,20 @@
|
|||
<h2><a href="#reader-conditional">Target :scittle in cljc</a></h2>
|
||||
You can target scittle in .cljc files (use a script tag to include the cljc file) with the <code>:scittle</code> reader conditional like this:<br>
|
||||
|
||||
<pre><code class="clojure">
|
||||
#?(:scittle
|
||||
(js/console.log "In scittle")
|
||||
:org.babashka/nbb
|
||||
(js/console.log "In nbb")
|
||||
:cljs
|
||||
(js/console.log "In cljs"))
|
||||
<pre><code class="language-clojure hljs">
|
||||
#?(:scittle
|
||||
(js/console.log "In scittle")
|
||||
:org.babashka/nbb
|
||||
(js/console.log "In nbb")
|
||||
:cljs
|
||||
(js/console.log "In cljs"))
|
||||
</code></pre>
|
||||
|
||||
<a name="JS libraries"></a>
|
||||
<h2><a href="#js-libraries">JS libraries</a></h2>
|
||||
|
||||
To use JavaScript libraries with Scittle,
|
||||
see <a href="https://github.com/babashka/scittle/blob/main/doc/js-libraries.md">README.md</a>
|
||||
see <a href="https://github.com/babashka/scittle/blob/main/doc/js-libraries.md">js-libraries.md</a>
|
||||
|
||||
<a name="repl"></a>
|
||||
<h2><a href="#nrepl">REPL</a></h2>
|
||||
|
|
1
resources/public/scittle.svg
Symbolic link
1
resources/public/scittle.svg
Symbolic link
|
@ -0,0 +1 @@
|
|||
../../doc/scittle.svg
|
Loading…
Reference in a new issue