Merge b02ed808fc into f2517187bf

doc/scittle.svg

@@ -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>

resources/public/css/style.css

@@ -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

resources/public/index.html

@@ -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">
-        &lt;script src=&quot;cljs/script.cljs&quot; type=&quot;application/x-scittle&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;cljs/script.cljs&quot; type=&quot;application/x-scittle&quot;&gt;&lt;/script&gt;
     </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">
+    <pre><code class="language-clojure hljs">
-    #?(:scittle
+#?(:scittle
-       (js/console.log "In scittle")
+   (js/console.log "In scittle")
-       :org.babashka/nbb
+   :org.babashka/nbb
-       (js/console.log "In nbb")
+   (js/console.log "In nbb")
-       :cljs
+   :cljs
-       (js/console.log "In 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>

resources/public/scittle.svg

@@ -0,0 +1 @@
+../../doc/scittle.svg