Fixed website banner HTML & Javascript

Various website CSS improvements
Added docs & learn icons
Added learn articles

1 files changed, 62 insertions, 94 deletions

diff --git a/tools/website.tmpl b/tools/website.tmpl
index e1fdf6701..6dce93d14 100644
--- a/tools/website.tmpl
+++ b/tools/website.tmpl
@@ -7,7 +7,6 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <title>$c.projectTitle</title>
     <link rel="stylesheet" type="text/css" href="assets/style.css" />
-
     <link rel="shortcut icon" href="assets/images/favicon.ico">
   #if len(rss) > 0:
     <link href="$rss" title="Recent changes" type="application/atom+xml" rel="alternate">
@@ -17,23 +16,23 @@
     <header id="head">
       <div class="page-layout tall">
         <div id="head-logo"></div>
-        <a id="head-logo-link" href="http://nim-lang.org/index.html"></a>
+        <a id="head-logo-link" href="index.html"></a>
         <nav id="head-links">
       #for i in 0.. c.tabs.len-1:
-      #  var name = c.tabs[i].key
-      #  var t = c.tabs[i].val
-        #if currentTab == t:
-          <a class="active" 
-        #elif t == "community" or t == "news":
-        #  continue
-        #else:
-          <a
-        #end if
-        #if t.contains('.'):
-          href="${t}" title = "$c.projectName - $name">$name</a>
-        #else:
-          href="${t}.html" title = "$c.projectName - $name">$name</a>
-        #end if
+      # let t = c.tabs[i].val
+      # if t != "community" and t != "news":
+      #   let name = c.tabs[i].key
+      #   if currentTab == t:
+            <a class="active" 
+      #   else:
+            <a
+      #   end if
+      #   if t.contains('.'):
+            href="${t}" title = "$c.projectName - $name">$name</a>
+      #   else:
+            href="${t}.html" title = "$c.projectName - $name">$name</a>
+      #   end if
+      # end if
       #end for
         </nav>
       </div>
@@ -50,10 +49,25 @@
 #  if currentTab == "index":
         <div id="slideshow">
           <!-- slides -->
-          <div id="slide0" class="">
+          <div id="slide0" class="active">
+            <h2><a name="why-should-i-be-excited">Why should I be excited?</a></h2>
+            <span class="desc">Nim is the only language that leverages automated proof technology to perform a <i>disjoint check</i> for your parallel code. Working on disjoint data means no locking is required and yet data races are impossible:</span><br><br>
+<pre>
+<span class="kwd">parallel</span>:
+<span class="tab">  </span><span class="kwd">var</span> i = <span class="val">0</span>
+<span class="tab">  </span><span class="kwd">while</span> i <= a.high:
+<span class="tab">  <span class="tab">  </span></span></span><span class="kwd">spawn</span> f(a[i])
+<span class="tab">  <span class="tab">  </span></span></span><span class="kwd">spawn</span> f(a[i+<span class="val">1</span>])
+<span class="tab">  <span class="tab">  </span></span></span><span class="cmt"># ERROR: cannot prove a[i] is disjoint from a[i+1]</span>
+<span class="tab">  <span class="tab">  </span></span></span><span class="cmt"># BUT: replace 'i += 1' with 'i += 2' and the code compiles!</span>
+<span class="tab end">  <span class="tab end">  </span></span>i += <span class="val">1</span>
+</pre>
+          </div>
+          <div id="slide1">
             <div>
               <h2>Nim looks like this..</h2>
-<pre><span class="cmt"># compute average line length</span>
+<pre>
+<span class="cmt"># compute average line length</span>
 <span class="kwd">var</span>
 <span class="tab">  </span>sum = <span class="val">0</span>
 <span class="tab end">  </span>count = <span class="val">0</span>
@@ -68,7 +82,8 @@ echo(<span class="val">"Average line length: "</span>,
             </div>
             <div>
                <h2>..and this...</h2>
-<pre><span class="cmt"># create and greet someone</span>
+<pre>
+<span class="cmt"># create and greet someone</span>
 <span class="kwd">type</span> <span class="def">Person</span> = <span class="typ">object</span>
 <span class="tab">  </span>name: <span class="typ">string</span>
 <span class="tab end">  </span>age: <span class="typ">int</span>
@@ -81,58 +96,43 @@ echo(<span class="val">"Average line length: "</span>,
 p.greet() <span class="cmt"># or greet(p)</span>
 </pre>
              </div>
-          </div>  <!-- slide0 -->
-          <div id="slide1" class="active">
-             <h2><a name="why-should-i-be-excited">Why should I be excited?</a></h2>
-             <span class="desc">
-               Nim is the only language that leverages automated proof technology
-               to perform a <i>disjoint check</i> for your parallel
-               code. Working on disjoint data means no locking is
-               required and yet data races are impossible:</span>
-             <pre>
-<span class="kwd">parallel</span>:
-<span class="tab">  </span><span class="kwd">var</span> i = <span class="val">0</span>
-<span class="tab">  </span><span class="kwd">while</span> i <= a.high:
-<span class="tab">    </span>spawn f(a[i])
-<span class="tab">    </span>spawn f(a[i+<span class="val">1</span>])
-<span class="tab">    </span><span class="cmt"># ERROR: cannot prove a[i] is disjoint from a[i+1]</span>
-<span class="tab">    </span><span class="cmt"># BUT: replace 'i += 1' with 'i += 2' and the code compiles!</span>
-<span class="tab end">    </span>i += <span class="val">1</span>
-            </pre>
           </div>
           <div id="slide2" class="">
             <div>
-            <h2>interfacing with C..</h2>
-            <pre>
-<span class="kwd">proc</span> <span class="def">unsafeScanf</span>(f: <span class="typ">File</span>; s: <span class="typ">cstring</span>)
-<span class="tab">  </span>{.importc: <span class="val">"fscanf"</span>, 
-<span class="tab end">    </span>header: <span class="val">"&lt;stdio.h&gt;"</span>, varargs.}
+              <h2>C FFI is easy in Nim..</h2>
+<pre>
+<span class="cmt"># declare a C procedure..</span>
+<span class="kwd">proc</span> <span class="def">unsafeScanf</span>(f: <span class="typ">File</span>, s: <span class="typ">cstring</span>)
+<span class="tab">  </span>{.varargs,
+<span class="tab">    </span>importc: <span class="val">"fscanf"</span>, 
+<span class="tab end">    </span>header: <span class="val">"&lt;stdio.h&gt;"</span>.}
 
+<span class="cmt"># ..and use it...</span>
 <span class="kwd">var</span> x: cint
-unsafeScanf(stdin, <span class="val">"%d"</span>, <span class="kwd">addr</span> x)
-            </pre></div>
-
+stdin.unsafeScanf(<span class="val">"%d"</span>, <span class="kwd">addr</span> x)
+</pre>
+              <p><span class="desc"><b>Compile and run with:</b><br>&nbsp;&nbsp;&nbsp;&nbsp;&#36; nim c -r example.nim</span></p>
+            </div>
             <div>
-              <h2>..and DSLs made easy</h2>
+              <h2>..and DSLs are too...</h2>
 <pre>
+<span class="cmt"># a simple web server</span>
 <span class="kwd">import</span> jester, asyncdispatch, htmlgen
 
-routes:
-<span class="tab">  </span>get <span class="val">"/"</span>:
-<span class="tab end">    </span>resp h1(<span class="val">"Hello world"</span>)
+<span class="cmt"># using jester commands</span>
+<span class="kwd">routes</span>:
+<span class="tab">  </span><span class="kwd">get</span> <span class="val">"/"</span>:
+<span class="tab end">  <span class="tab end">  </span></span><span class="kwd">resp</span> h1(<span class="val">"Hello world"</span>)
 
 runForever()
-</pre><p><span class="desc">
-Compile and run with:<br />
-nim c -r example.nim<br />
-View at: localhost:5000
-</span></p>
+</pre>
+              <p><span class="desc"><b>View in browser at:</b><br>&nbsp;&nbsp;&nbsp;&nbsp;localhost:5000</span></p>
             </div>
           </div>
         </div>
         <div id="slideshow-nav">
-          <div id="slideControl0" onclick="slideshow_click(0)"></div>
-          <div id="slideControl1" onclick="slideshow_click(1)" class="active"></div>
+          <div id="slideControl0" onclick="slideshow_click(0)" class="active"></div>
+          <div id="slideControl1" onclick="slideshow_click(1)"></div>
           <div id="slideControl2" onclick="slideshow_click(2)"></div>
         </div>
 #  end
@@ -190,9 +190,12 @@ View at: localhost:5000
 				</div>
 			</div>
 		</footer>
-
-  <script>
+  
+#  if currentTab == "index":
+  <script src="assets/index.js"></script>
+# end if
 #  if c.gaId != nil:
+  <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -200,42 +203,7 @@ View at: localhost:5000
 
     ga('create', '${c.gaId}', 'nim-lang.org');
     ga('send', 'pageview');
-#  end if
-
-var timer;
-var prevIndex = 0;
-
-function setSlideShow(index, short) {
-  if (index > 2) index = 0;
-  for (var i = 0; i < 10; ++i) {
-    var x = document.getElementById("slide"+i);
-    if (!x) break;
-    x.className = "";
-    document.getElementById("slideControl"+i).className = "";
-  }
-  document.getElementById("slide"+index).className = "active";
-  document.getElementById("slideControl"+index).className = "active";
-  prevIndex = index;
-  startTimer(short ? 8000 : 32000);
-}
-
-function nextSlide() { setSlideShow(prevIndex + 1, true); }
-function startTimer(t) { timer = setTimeout(nextSlide, t); }
-
-function slideshow_enter() { clearTimeout(timer); }
-function slideshow_exit () { startTimer(16000); }
-
-function slideshow_click(index) {
-  clearTimeout(timer);
-  setSlideShow(index, false);
-}
-
-window.onload = function() {
-  var slideshow = document.getElementById("slideshow");
-  slideshow.onmouseenter = slideshow_enter;
-  slideshow.onmouseleave = slideshow_exit;
-  startTimer(8000);
-};
   </script>
+#  end if
 </body>
 </html>