chore: move site example loader to be inline in the index.html page

dali-lab · Dec 19, 2023 · b2638fe · b2638fe
1 parent b5f1104
commit b2638fe
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 38 deletions.
diff --git a/site/index.html b/site/index.html
@@ -100,13 +100,15 @@ <h1>
   <div class="container">Playground</div>
 </section>
 
+
 <p class="center-block">
-  <iframe src="https://codesandbox.io/embed/muddy-cdn-ibl5x?fontsize=14&hidenavigation=1&theme=light"
-          style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-          title="muddy-cdn-ibl5x"
-          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+    <iframe
+            src="https://codesandbox.io/embed/ibl5x?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1&theme=light"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="muddy-cdn-ibl5x"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </p>
 
 <section>
@@ -199,6 +201,21 @@ <h1>
   }
 </script>
 <script src="js/site.js"></script>
+<script>
+$('#recipes').load('partials/recipes.html')
+$('#examples').load('partials/examples.html', function () {
+  // declared in js/site.js
+  onSiteDependenciesLoaded()
+  $('pre code').each(function (i, block) {
+    hljs.highlightBlock(block)
+  })
+
+  $('#p-slider').on('change', function () {
+    var value = +this.value
+    $('#p-slider-value').html(value)
+  })
+})
+</script>
 <script type="text/javascript"
 src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 <script type="text/x-mathjax-config">

diff --git a/site/js/site.js b/site/js/site.js
@@ -1080,20 +1080,4 @@ function onSiteDependenciesLoaded() {
       }
     ]
   })
-
-  // Important to leave the space before this line!
-  // It's because the script site.cjs parses this file to create the examples
 }
-
-$('#recipes').load('partials/recipes.html')
-$('#examples').load('partials/examples.html', function () {
-  onSiteDependenciesLoaded()
-  $('pre code').each(function (i, block) {
-    hljs.highlightBlock(block)
-  })
-
-  $('#p-slider').on('change', function () {
-    var value = +this.value
-    $('#p-slider-value').html(value)
-  })
-})
diff --git a/site/partials/examples.html b/site/partials/examples.html
@@ -787,19 +787,4 @@
   ]
 })
 
-// Important to leave the space before this line!
-// It's because the script site.cjs parses this file to create the examples
-}
-
-$('#recipes').load('partials/recipes.html')
-$('#examples').load('partials/examples.html', function () {
-onSiteDependenciesLoaded()
-$('pre code').each(function (i, block) {
-  hljs.highlightBlock(block)
-})
-
-$('#p-slider').on('change', function () {
-  var value = +this.value
-  $('#p-slider-value').html(value)
-})
-})</code></pre></div></div><div class="col-md-6 center-block demos"><span id="built-in-eval-function" class="graph"></span><span id="interval-arithmetic-eval-function" class="graph"></span></div></div></div></div>
+}</code></pre></div></div><div class="col-md-6 center-block demos"><span id="built-in-eval-function" class="graph"></span><span id="interval-arithmetic-eval-function" class="graph"></span></div></div></div></div>