Better noscript handling.

rameshvarun · Aug 30, 2023 · e160366 · e160366
1 parent 4d456a3
commit e160366
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 46 deletions.
diff --git a/src/blog-cells.css b/src/blog-cells.css
@@ -1,7 +1,7 @@
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");
 
 .cell-editor {
-  font-family: "Roboto Mono", monospace;
+  font-family: monospace;
   font-weight: 400;
 
   border: none;
@@ -57,7 +57,7 @@
 
   justify-content: center;
 
-  font-family: "Roboto Mono", monospace;
+  font-family: monospace;
   font-weight: 400;
   font-size: 14px;
   height: 2.5em;
@@ -89,7 +89,7 @@
   justify-content: center;
   align-items: center;
 
-  font-family: "Roboto Mono", monospace;
+  font-family: monospace;
   font-weight: 400;
 
   font-size: 14px;
@@ -109,16 +109,24 @@
   padding-right: 4px;
 }
 
-/* 
-.CodeMirror pre.CodeMirror-line {
-  padding: 0px 8px;
-}
-.CodeMirror-lines {
-  padding: 8px 0px;
-}
+script[type="text/notebook-cell"] {
+  display: block;
+  white-space: pre;
 
-.CodeMirror-linenumber {
-  padding-right: 8px;
-  padding-left: 10px;
-}
-*/
+  background-color: rgb(40, 44, 52);
+  color: rgb(171, 178, 191);
+  padding: 10px;
+
+  font-family: monospace;
+
+  font-size: 14px;
+  line-height: 1.45em;
+
+  overflow-x: scroll;
+
+  box-shadow: 0 0 5px 1px #000000c6;
+  border-radius: 4px;
+
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
diff --git a/src/index.html b/src/index.html
@@ -22,25 +22,20 @@ <h1><a href="https://github.com/rameshvarun/blog-cells">blog-cells</a> demo</h1>
 <p>You create your program in cells, just like the one below.</p>
 
 <p>
-<script type="text/notebook-cell" data-autorun="true">
-console.log("Hello World!");
-</script>
+<script type="text/notebook-cell" data-autorun="true">console.log("Hello World!");</script>
 </p>
 
 <p>Cells can run either automatically on page load, or can wait until the reader
 explicitly runs them.</p>
 
 <p>
-<script type="text/notebook-cell">
-console.log("Hello World, but not automatic.");
-</script>
+<script type="text/notebook-cell">console.log("Hello World, but not automatic.");</script>
 </p>
 
 <p>Each cell is a module. You can export functions and values from one cell to be used in others.</p>
 
 <p>
-<script type="text/notebook-cell" data-autorun="true">
-export function hello() {
+<script type="text/notebook-cell" data-autorun="true">export function hello() {
   console.log("Hello World, from an exported function!");
 }
 
@@ -51,25 +46,22 @@ <h1><a href="https://github.com/rameshvarun/blog-cells">blog-cells</a> demo</h1>
 <p>The exported values are available in other cells using the <code>$</code> global.</p>
 
 <p>
-<script type="text/notebook-cell" data-autorun="true">
-$.hello();
+<script type="text/notebook-cell" data-autorun="true">$.hello();
 console.log($.test);
 </script>
 </p>
 
 <p>Cells can be hidden by default.</p>
 
 <p>
-<script type="text/notebook-cell" data-autorun="true" data-hidden="true">
-// The cell is hidden but the code is still evaluated.
+<script type="text/notebook-cell" data-autorun="true" data-hidden="true">// The cell is hidden but the code is still evaluated.
 console.log("This cell is hidden by default.");
 </script>
 </p>
 
 <p>You can use top-level await syntax.</p>
 
-<script type="text/notebook-cell">
-function wait(time) {
+<script type="text/notebook-cell">function wait(time) {
   return new Promise((resolve, reject) => {
     setTimeout(() => resolve(), time);
   });
@@ -83,39 +75,25 @@ <h1><a href="https://github.com/rameshvarun/blog-cells">blog-cells</a> demo</h1>
 
 <p>You can query CORS-enabled APIs using fetch.</p>
 
-<script type="text/notebook-cell" data-autorun="true">
-const response = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");
+<script type="text/notebook-cell" data-autorun="true">const response = await fetch("https://pokeapi.co/api/v2/pokemon/ditto");
 const data = await response.json();
 console.log(data);
 </script>
 
 <p>You can import third-party ES modules.</p>
 
-<script type="text/notebook-cell" data-autorun="true">
-import sum from "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/sum.js";
+<script type="text/notebook-cell" data-autorun="true">import sum from "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/sum.js";
 console.log(sum([1, 2, 3]));
 </script>
 
 <p>You can use several different console functions.</p>
 
-<script type="text/notebook-cell" data-autorun="true">
-console.log("Regular output.")
+<script type="text/notebook-cell" data-autorun="true">console.log("Regular output.")
 console.error("Error output.")
 console.warn("Warning output.")
 console.assert(3 == 4, "3 does not equal 4.");
 </script>
 
-<script>
-document.querySelectorAll("script[type='text/notebook-cell']").forEach(script => {
-  const cell = document.createElement("pre");
-  cell.classList.add("notebook-cell");
-  cell.textContent = script.textContent.trim();
-  Object.assign(cell.dataset, script.dataset);
-  script.parentNode.insertBefore(cell, script);
-  script.parentNode.removeChild(script);
-});
-</script>
-
 <link rel="stylesheet" href="./blog-cells.css" />
 <script type="module" src="./blog-cells.js"></script>