Add runnable code (#28)

* modified:   out.json
	modified:   src/SUMMARY.md

* yep

* buttons

* Yes

* Fix

* Works

* Remove play button works

* no_run works

* ferris added as button not as  a pic

* release 21

---------

Co-authored-by: LeonardoA77 <Lemniscate4356@Knights.ucf.edu>

Author: s-hassanin

book.toml

@@ -9,6 +9,8 @@ multilingual = false
 git-repository-url = "https://github.com/Together-Java/ModernJava"
 edit-url-template = "https://github.com/Together-Java/ModernJava/edit/develop/{path}"
 mathjax-support = true
+additional-css = ["ferris.css"]
+additional-js = ["ferris.js"]
 
 [output.html.fold]
 enable = true    # whether or not to enable section folding
@@ -25,4 +27,5 @@ simple_io = false
 java_21 = false
 
 [output.html.playground]
-editable = true
+editable = true
+

ferris.css

@@ -0,0 +1,45 @@
+body.light .does_not_compile,
+body.light .panics,
+body.light .not_desired_behavior,
+body.rust .does_not_compile,
+body.rust .panics,
+body.rust .not_desired_behavior {
+  background: #fff1f1;
+}
+
+body.coal .does_not_compile,
+body.coal .panics,
+body.coal .not_desired_behavior,
+body.navy .does_not_compile,
+body.navy .panics,
+body.navy .not_desired_behavior,
+body.ayu .does_not_compile,
+body.ayu .panics,
+body.ayu .not_desired_behavior {
+  background: #501f21;
+}
+
+.ferris-container {
+  position: absolute;
+  z-index: 99;
+  right: 5px;
+  top: 30px;
+}
+
+.ferris {
+  vertical-align: top;
+  margin-left: 0.2em;
+  height: auto;
+}
+
+.ferris-large {
+  width: 4.5em;
+}
+
+.ferris-small {
+  width: 2.3em;
+}
+
+.ferris-explain {
+  width: 100px;
+}

ferris.js

@@ -0,0 +1,66 @@
+var ferrisTypes = [
+    {
+      attr: 'does_not_compile',
+      title: 'This code does not compile!'
+    },
+    {
+      attr: 'panics',
+      title: 'This code panics!'
+    },
+    {
+      attr: 'not_desired_behavior',
+      title: 'This code does not produce the desired behavior.'
+    }
+  ]
+  
+  document.addEventListener('DOMContentLoaded', () => {
+    for (var ferrisType of ferrisTypes) {
+      attachFerrises(ferrisType)
+    }
+  })
+  
+  function attachFerrises(type) {
+    var elements = document.getElementsByClassName(type.attr)
+  
+    for (var codeBlock of elements) {
+      var lines = codeBlock.innerText.replace(/\n$/, '').split(/\n/).length
+      var size = 'large'
+      if (lines < 4) {
+        size = 'small'
+      }
+  
+      var container = prepareFerrisContainer(codeBlock, size == 'small')
+      container.appendChild(createFerris(type, size))
+    }
+  }
+  
+  function prepareFerrisContainer(element, useButtons) {
+    var foundButtons = element.parentElement.querySelector('.buttons')
+    if (useButtons && foundButtons) {
+      return foundButtons
+    }
+  
+    var div = document.createElement('div')
+    div.classList.add('ferris-container')
+  
+    element.parentElement.insertBefore(div, element)
+  
+    return div
+  }
+  
+  function createFerris(type, size) {
+    var a = document.createElement('a')
+    a.setAttribute('href', 'ch00-00-introduction.html#ferris')
+    a.setAttribute('target', '_blank')
+  
+    var img = document.createElement('img')
+    img.setAttribute('src', '../img/' + type.attr + '.svg')
+    img.setAttribute('title', type.title)
+    img.classList.add('ferris')
+    img.classList.add('ferris-' + size)
+  
+    a.appendChild(img)
+  
+    return a
+  }
+  

out.json

@@ -186,7 +186,6 @@
 # User Input
 
 - [User Input](./user_input.md)
-  - [readLine](./user_input/readLine.md)
 
 # Data Types III
 

src/SUMMARY.md

@@ -8,7 +8,7 @@ words.
 
 ~IF toplevel_anonymous_class
 
-```java
+```java, no_run
 void main() {
     // This prints hello world!
     System.out.println("Hello, World!");
@@ -17,7 +17,7 @@ void main() {
 
 ~ELSE
 
-```java
+```java, no_run
 public class Main {
     public static void main(String[] args) {
         // This prints hello world!

src/first_steps/comments.md

@@ -5,8 +5,10 @@ You may have noticed that after each `{` all the code that comes after it is "in
 ~IF toplevel_anonymous_class
 
 ```java
-void main() {
-    System.out.println("Hello, World!");
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
 }
 ```
 

src/first_steps/formatting.md

@@ -16,7 +16,18 @@ edit the following code.
 
 ~IF toplevel_anonymous_class
 
-```java
+<span id="ferris"></span>
+
+| Ferris                                                                                                           | Meaning                                          |
+|------------------------------------------------------------------------------------------------------------------|--------------------------------------------------|
+| <img src="img/does_not_compile.svg" class="ferris-explain" alt="Ferris with a question mark"/>            | This code does not compile!                      |
+| <img src="img/panics.svg" class="ferris-explain" alt="Ferris throwing up their hands"/>                   | This code panics!                                |
+| <img src="img/not_desired_behavior.svg" class="ferris-explain" alt="Ferris with one claw up, shrugging"/> | This code does not produce the desired behavior. |
+
+In most situations, we’ll lead you to the correct version of any code that
+doesn’t compile.
+
+```java,panics
 void main() {
     System.out.println("Hello, World");
 }