Merge pull request scala#28 from 47deg/sl27-adding-jvm-js-box-and-scala-in-the-browser-section

New frontpage features

Author: Javier de Silóniz Sandino

_data/common.yml

@@ -2,10 +2,12 @@
 githubUrl: https://github.com/scala/scala
 twitterUrl: https://twitter.com/scala_lang
 scaladexUrl: https://scaladex.scala-lang.org
+scastieUrl: https://scastie.scala-lang.org
 
 texts:
+  scalaBackendsTitle: Scala runs on...
+  scalaBackendsMore: with more backends on the way.
   ensimeSupportedInIDE: ensime plugin available
-  scalaCompilationEnvironments: Scala compiles to JVM and Javascript
   onlineCoursesFree: Free (optional paid certificate)
   onlineCoursesPaid: Paid (with certificate)
   courseraLaunchPeriod: New sessions starting every 2 weeks!

_includes/footer.html

@@ -69,6 +69,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/scala.min.js" type="text/javascript"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/java.min.js" type="text/javascript"></script>
 
+    <!-- CodeMirror -->
+    <script src="{{ site.baseurl }}/resources/js/vendor/codemirror/codemirror.js" type="text/javascript"></script>
+    <script src="{{ site.baseurl }}/resources/js/vendor/codemirror/clike.js" type="text/javascript"></script>
+
     <!-- Custom javascript -->
     <script src="{{ site.baseurl }}/resources/js/functions.js" type="text/javascript"></script>
   </body>

_includes/headertop.html

@@ -18,7 +18,8 @@
     <link href="{{ site.baseurl }}/resources/css/unslider.css" rel="stylesheet" type="text/css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/solarized-dark.min.css" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/style.css" type="text/css" />
-    <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/scaladex.css" type="text/css" />
+    <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/vendor/codemirror.css" type="text/css" />
+    <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/vendor/monokai.css" type="text/css" />    
 
     <!-- Typekit (should stay at top of page, do not move to footer)-->
     <!--<script type="text/javascript" src="//use.typekit.net/abh3wgk.js"></script>

_includes/scastie.html

@@ -0,0 +1,23 @@
+<section class="run-scala">
+	<div class="wrap">
+		<div class="heading-line">
+			<h2><span>Run Scala in your browser</span></h2>
+			<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo neque eget placerat dapibus. Mauris ullamcorper dui eu pellentesque venenatis. Nam non elit vitae dolor posuere eleifend a facilisis diam</p>
+		</div>
+	</div>
+	<div class="call-to-action action-medium">
+		<a href="{{site.data.common.scastieUrl}}" class="button" target="_blank">Learn More</a>
+	</div>
+	<div class="wrap">
+		<div class="code-element">
+			<div class="bar-code"></div>
+			<div class="scastie-code-container">
+				<textarea id="scastie-textarea"></textarea>
+			</div>
+			<div class="btn-run">
+				<i class="fa fa-play"></i>
+				<span>Run Scala code interactively</span>
+			</div>
+		</div>
+	</div>
+</section>

_layouts/frontpage.html

@@ -76,7 +76,6 @@ <h1>{{page.headerTitle}}</h1>
               <div class="scala-version">
                 <span>Scala</span>
                 <span>{{page.currentScalaVersion}}</span>
-                <p>{{site.data.common.texts.scalaCompilationEnvironments}}</p>
               </div>
             </div>
           </div>
@@ -87,6 +86,24 @@ <h1>{{page.headerTitle}}</h1>
 
 
 <main id="site-main">
+<!-- Scala backends -->
+<section class="runs">
+  <div class="wrap">
+    <h2>{{site.data.common.texts.scalaBackendsTitle}}</h2>
+    <ul>
+      {% for backend in page.scalaBackends %}
+        <li class="masterTooltip" title="{{backend.description}}">
+        <span>
+        <img src="{{backend.icon}}" alt="{{backend.description}}">
+        </span>
+      </li>
+      {% unless forloop.last %}<li></li>{% endunless %}
+      {% endfor %}
+    </ul>
+    <p><span>- {{site.data.common.texts.scalaBackendsMore}} -</span></p>
+  </div>
+</section>
+
 <!-- IDEs for Scala -->
 <section class="ides">
   <div class="wrap">
@@ -155,6 +172,9 @@ <h3>{{scalaItem.shortTitle}}</h3>
   </div>
 </section>
 
+<!-- Run Scala in your browser -->
+{% include scastie.html %}
+
 <!-- Courses -->
 <section class="courses">
   <div class="wrap">
@@ -205,7 +225,7 @@ <h4>{{event.title}}</h4>
   <div class="wrap">
     <div class="heading-line">
       <h2><span>{{page.ecosystemTitle}}</span></h2>
-      <p>{{page.ecosystemDescription}}</p>
+      <p class="lead">{{page.ecosystemDescription}}</p>
     </div>
     <div class="browser">
       <div class="header-browser">

index.md

@@ -33,6 +33,13 @@ apiDocs:
 
 currentScalaVersion: "2.12.1"
 
+# Scala backends
+scalaBackends:
+  - icon: /resources/img/frontpage/java-logo.png
+    description: JVM
+  - icon: /resources/img/frontpage/js-logo.png
+    description: javascript on your browser
+
 # Scala IDEs
 scalaIDEs:
   - name: IntelliJ