From d7156405c1fe528a80da3f94853bd53a1227dd2f Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mike@mikegerwitz.com>
Date: Sun, 8 Jan 2012 16:14:38 -0500
Subject: [PATCH] Began moving examples from trybox to index page

---
 Makefile            |   3 +-
 index.html          |   8 ++-
 scripts/ex/class.js |   1 -
 scripts/ui.js       |  99 ++++++-------------------------
 style.css           | 140 ++++++++++++++++++++------------------------
 tools/page-parse    |  28 +++++++++
 6 files changed, 118 insertions(+), 161 deletions(-)
 create mode 100755 tools/page-parse

diff --git a/Makefile b/Makefile
index e3bc7c6..dcff948 100644
--- a/Makefile
+++ b/Makefile
@@ -34,7 +34,8 @@ $(outdir)/%.html: %.html $(header) $(footer) | $(outdir)
 	cat $(header) \
 		| sed 's/\(<body\)/\1 class="$*"/' \
 		| cat - $< $(footer) \
-		| sed 's/^ \+//' \
+		| sed 's/^ \+//;s/^ *#//;' \
+		| tools/page-parse \
 		> $@
 
 # requires git-weblog from mikegerwitz's git-supp package
diff --git a/index.html b/index.html
index fef8c39..ff24822 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,11 @@
   Object-Oriented languages. Features include:
 </p>
 
-<ul>
+<div class="ex excode">
+  <!--%inc scripts/ex/class.js -->
+</div>
+
+<ul class="features">
   <li>Simple and intuitive class definitions</li>
   <li>Classical inheritance</li>
   <li>Abstract classes and methods</li>
@@ -13,7 +17,7 @@
   <li>Static and constant members</li>
 </ul>
 
-<p>
+<p class="info">
   ease.js is a framework, not a compiler. It may be used wherever
   JavaScript may be used, including with other compilers/parsers. ease.js
   also provides support for older, pre-ES5 environments by gracefully
diff --git a/scripts/ex/class.js b/scripts/ex/class.js
index 09c35fb..8330869 100644
--- a/scripts/ex/class.js
+++ b/scripts/ex/class.js
@@ -26,4 +26,3 @@ Dog( 'Fluffy' ).bark();
 // alternatively, we can use the 'new' keyword
 var inst = new Dog( 'Bob' );
 inst.bark();
-
diff --git a/scripts/ui.js b/scripts/ui.js
index f9d63db..c1c2196 100644
--- a/scripts/ui.js
+++ b/scripts/ui.js
@@ -25,89 +25,28 @@
 
     $( document ).ready( function()
     {
-        appendTry();
+        var $ex     = $( '.ex' ),
+            content = $ex.text().replace( /^ *\n/, '' ),
+            $txt;
 
-        if ( document.location.href.substr( -6 ) === '#tryit' )
-        {
-            console.log( 'ok' );
-            toggleTry();
-        }
-    } );
-
-
-    function appendTry()
-    {
-        $trybtn = $( '<div>' )
-            .attr( 'id', 'try' )
-            .text( 'Try It' )
-            .addClass( 'btn large glow' )
-            .mousedown( function( event )
-            {
-                // prevent dragging from highlighting the text (so it looks more
-                // like an image)
-                event.preventDefault();
-            } )
-            .click( function( event )
-            {
-                toggleTry();
-            } )
-            .appendTo( '#header-content' );
-    }
-
-
-    function toggleTry()
-    {
-        var $try = getTry();
-
-        $trybtn.text(
-            ( $try.is( ':visible' ) )
-                ? 'Try It'
-                : 'Hide It'
-        );
-
-        $try.slideToggle();
-    }
-
-
-    function getTry()
-    {
-        var $txt;
-
-        return $trybox || ( function createTryBox()
-        {
-            $txt = $( '<textarea>' );
-
-            $.get( 'scripts/ex/class.js', {}, function( data )
-            {
-                $txt.text( data );
-            }, 'html' );
-
-            return $trybox = $( '<div>' )
-                .attr( 'id', 'trybox' )
-                .hide()
-                .append( $( '<h2>' ).text( 'Try ease.js' ) )
-                .append( $( '<p>' ).html(
-                    "Enter or modify a test script below. The common " +
-                    "ease.js modules, such as <tt>Class</tt>, have " +
-                    "already been imported for you. When you are ready, " +
-                    "click <strong>Run</strong> to run the script."
-                ) )
-                .append( $txt )
+        $ex.text( '' )
+            .removeClass( 'excode' )
+            .append( $txt = $( '<textarea>' )
+                .addClass( 'excode' )
+                .text( content )
+            )
+            .append( $( '<div>' )
+                .addClass( 'btns' )
                 .append( $( '<div>' )
-                    .attr( 'id', 'trybtns' )
-                    .append( $( '<div>' )
-                        .attr( 'id', 'run' )
-                        .text( 'Run' )
-                        .addClass( 'btn med green' )
-                        .click( function()
-                        {
-                            runScript( $txt.val() );
-                        } )
-                    )
+                    .text( 'try it' )
+                    .addClass( 'btn go' )
+                    .click( function()
+                    {
+                        runScript( $txt.val() );
+                    } )
                 )
-                .prependTo( '#content' );
-        } )();
-    }
+            );
+    } );
 
 
     function runScript( script )
diff --git a/style.css b/style.css
index b83baef..47704d0 100644
--- a/style.css
+++ b/style.css
@@ -81,6 +81,8 @@ html, body {
   border:              2px solid #babdb6;
   border-top:          0px;
   border-bottom-width: 4px;
+  border-radius:       0px 0px 0.5em 0.5em;
+  -moz-border-radius:  0px 0px 0.5em 0.5em;
 
   margin:  0px auto;
   padding: 0.5em 1em 1em 1em;
@@ -151,15 +153,6 @@ p.copyright a, p.copyright a:link {
   color: #2e3436;
 }
 
-@-webkit-keyframes pulse {
-  0% {
-    -webkit-box-shadow: 0 0 0px #ffffff;
-  }
-  100% {
-    -webkit-box-shadow: 0 0 5px #ffffff;
-  }
-}
-
 .btn {
   display: inline-block;
 
@@ -168,6 +161,7 @@ p.copyright a, p.copyright a:link {
   font-weight:     bold;
   cursor:          pointer;
   text-align:      center;
+  text-shadow:     black 1px 1px 1px;
 
   padding: 0.25em 0.5em;
 
@@ -189,7 +183,7 @@ p.copyright a, p.copyright a:link {
   );
 }
 
-.btn.green {
+.btn.go {
   border: 1px solid #4e9a06;
 
   background-image: -webkit-gradient(
@@ -220,72 +214,6 @@ p.copyright a, p.copyright a:link {
   text-shadow: black 2px 2px 5px;
 }
 
-.glow {
-  -webkit-box-shadow: 0 0 5px #ffffff;
-  -moz-box-shadow:    0 0 5px #ffffff;
-  box-shadow:         0 0 5px #ffffff;
-
-  -webkit-transition:       -webkit-box-shadow 0.25s linear;
-  -moz-transition-property: -moz-box-shadow;
-  -moz-transition-duration: 0.25s;
-
-  -webkit-animation-name:            pulse;
-  -webkit-animation-duration:        1s;
-  -webkit-animation-direction:       alternate;
-  -webkit-animation-timing-function: ease-in-out;
-  -webkit-animation-iteration-count: 1;
-}
-
-.glow:hover {
-  -webkit-box-shadow: 0 0 10px #ffffff;
-  -moz-box-shadow:    0 0 10px #ffffff;
-  box-shadow:         0 0 10px #ffffff;
-}
-
-#try {
-  display:  block;
-  position: relative;
-
-  margin: 0px auto;
-  top:    1.5em;
-}
-
-#trybox {
-  position: relative;
-
-  border:             1px solid #eeeeec;
-  border-radius:      0.5em;
-  -moz-border-radius: 0.5em;
-
-  background-image: -webkit-gradient(
-      linear,
-      left bottom,
-      left top,
-      color-stop(0, rgb(186,189,182)),
-      color-stop(1, rgb(238,238,236))
-  );
-  background-image: -moz-linear-gradient(
-      center bottom,
-      rgb(186,189,182) 0%,
-      rgb(238,238,236) 100%
-  );
-
-  padding: 1em;
-}
-
-#trybox h2 {
-  margin: 0px;
-}
-
-#trybox textarea {
-  width:  100%;
-  height: 20em;
-}
-
-#trybox #trybtns {
-  text-align: right;
-}
-
 #try-console {
   width:  99%;
   height: 10em;
@@ -306,7 +234,63 @@ span.shell-start {
 }
 
 
-/** Download **/
+/** index **/
+.ex {
+  display: block;
+
+  position: relative;
+  top: -1em;
+
+  background-color: white;
+
+  border-width:       3px 1px;
+  border-style:       solid;
+  border-color:       #babdb6;
+  border-radius:      0.25em;
+  -moz-border-radius: 0.25em;
+
+  padding: 0.5em;
+  float:   right;
+
+  margin-bottom: 0.5em;
+}
+
+.excode {
+  width: 400px;
+  height: 10em;
+
+  font-family: monospace;
+  font-size:   0.7em;
+  white-space: pre;
+  overflow-y: scroll;
+}
+
+.ex textarea {
+  width: 400px;
+  height: 10em;
+
+  border: none;
+
+  margin-bottom: 0.5em;
+}
+
+.ex .btns {
+  border-top: 1px dotted #babdb6;
+
+  margin: 0px -0.25em;
+  padding: 0.25em;
+}
+
+.ex .btn {
+  float: right;
+}
+
+.info {
+  clear: both;
+}
+
+
+/** download **/
 span.release-current {
   font-size:   1.2em;
   font-weight: bold;
@@ -316,6 +300,8 @@ span.release-current .version {
   font-weight: normal;
 }
 
+
+/** blog **/
 h3.git-commit {
   margin-bottom: 0.1em;
   padding-bottom: 0.1em;
diff --git a/tools/page-parse b/tools/page-parse
new file mode 100755
index 0000000..e556d7a
--- /dev/null
+++ b/tools/page-parse
@@ -0,0 +1,28 @@
+#!/bin/bash
+#
+# Simple parser for static HTML generation
+#
+#  Copyright (C) 2010 Mike Gerwitz
+#
+#  This program is free software: you can redistribute it and/or modify
+#  it under the terms of the GNU Affero General Public License as
+#  published by the Free Software Foundation, either version 3 of the
+#  License, or (at your option) any later version.
+#
+#  This program is distributed in the hope that it will be useful,
+#  but WITHOUT ANY WARRANTY; without even the implied warranty of
+#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#  GNU Affero General Public License for more details.
+#
+#  You should have received a copy of the GNU Affero General Public License
+#  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+##
+
+# currently, this only replaces %inc commands with the file contents
+gawk '
+  match( $0, /^ *<!--%inc (.*?) *--> *$/, arr ) {
+    system( "cat " arr[1] )
+    next
+  }
+  { print }
+'