Add Scala version picker to Scala Book Hello World Page, remember preference (#2450)

bishabosha · web-flow · commit f898427d1162 · 2022-07-05T08:53:04.000+02:00
diff --git a/_overviews/contribute/add-guides.md b/_overviews/contribute/add-guides.md
@@ -61,6 +61,28 @@ on [docs.scala-lang.org][home].
 
     And a paragraph, with a [link](https://www.scala-lang.org).
 
+Tables of contents will be automatically generated in a sidebar for your document, and syntax highlighting
+is provided.
+
+### Criteria for Docs to be Accepted
+
+The goal of this documentation repository is to be highly curated, rather than the approach by other community-driven
+documentation platforms, like wikis. Therefore, to be included on [docs.scala-lang.org][home], a document must:
+
+- **"fit in"** to the repository (_i.e.,_ it should not be a complete duplicate of another article),
+- **be polished**, i.e. it must be thorough, complete, correct, and organized; written as an article to be understood
+  by many users.
+- **be maintained**, if the document might require revisions from time to time, be prepared to keep it up to date, or
+nominate someone to take ownership.
+
+If you have something you're thinking about contributing, or that you're thinking about writing in order to contribute
+-- we'd love to consider it! Please don't hesitate to use GitHub issues and pull requests and the
+`#scala-contributors` room [on Discord](https://discord.com/invite/scala) for any questions, concerns,
+clarifications, etc.
+
+## Code blocks
+
+It's common for various kinds of documents to require code examples.
 You can contribute code in a markdown document by either
 - in-line by putting backticks around it,
 - surrounding by triple backticks,
@@ -79,24 +101,93 @@ indented example:
     case class Foo(x: Int)
 ~~~
 
-Tables of contents will be automatically generated in a sidebar for your document, and syntax highlighting
-is provided.
+### Scala 2 vs Scala 3
 
-### Criteria for Docs to be Accepted
+Sometimes you would like to compare between Scala 2 and Scala 3 in a document, for example in
+our [Hello World][hello-world] chapter of the Scala Book. Here is an example of how you
+can generate the same tabs in markdown with the `tabs` directive and class `tabs-scala-version`:
 
-The goal of this documentation repository is to be highly curated, rather than the approach by other community-driven
-documentation platforms, like wikis. Therefore, to be included on [docs.scala-lang.org][home], a document must:
+<!-- {% raw  %} -->
+~~~liquid
+{% tabs hello-world-demo class=tabs-scala-version %}
 
-- **"fit in"** to the repository (_i.e.,_ it should not be a complete duplicate of another article),
-- **be polished**, i.e. it must be thorough, complete, correct, and organized; written as an article to be understood
-  by many users.
-- **be maintained**, if the document might require revisions from time to time, be prepared to keep it up to date, or
-nominate someone to take ownership.
+{% tab 'Scala 2' for=hello-world-demo %}
+```scala
+object hello extends App {
+  println("Hello, World!")
+}
+```
+{% endtab %}
 
-If you have something you're thinking about contributing, or that you're thinking about writing in order to contribute
--- we'd love to consider it! Please don't hesitate to use GitHub issues and pull requests and the
-`#scala-contributors` room [on Discord](https://discord.com/invite/scala) for any questions, concerns,
-clarifications, etc.
+{% tab 'Scala 3' for=hello-world-demo %}
+```scala
+@main def hello() = println("Hello, World!")
+```
+{% endtab %}
+
+{% endtabs %}
+~~~
+<!-- {% endraw  %} -->
+
+It is crucial that you use the `tabs-scala-version` class to benefit from some cool user interactions:
+- all other Scala version tabs on the same page will also switch to current tab, whenever one is changed.
+- the tab picked will be remembered accross the site, and when the user returns to the page after some time.
+
+### Typechecked Examples
+
+The site build process uses [mdoc](https://scalameta.org/mdoc/) to typecheck
+code snippets in markdown. This is a great way to ensure the code snippets that
+you're including typecheck and are valid. Here are a few quick tips to get
+started:
+
+First, add `mdoc` after `scala` when you are creating a
+code block. The `mdoc` modifier here will make sure that `mdoc` runs the code
+snippet and ensures that it's valid.
+
+<div class="language-plaintext highlighter-rouge">
+    <div class="highlight">
+        <pre class="highlight">
+            <code class="hljs scala">&#96;&#96;&#96;scala mdoc
+<span class="hljs-keyword">val</span> a = <span class="hljs-number">1</span>
+```</code></pre></div></div>
+
+If you have a snippet that you expect to fail, you can also account for this by
+using `mdoc:fail` for a compile error `mdoc:crash` for a runtime-error.
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:fail
+<span class="hljs-keyword">val</span> b: <span class="hljs-type">String</span> = <span class="hljs-number">3</span> <span class="hljs-comment">// won't compile</span>
+```</code></pre></div></div>
+
+Keep in mind that a single file is all compiled as a single unit, so you can't
+redefine a variable that was defined above in another code snippet. _However_
+there are a couple ways to get around this. Firstly, you can use the `mdoc:nest`
+modifier with will wrap the snippet in a `scala.Predef.locally{...}`. This will
+essentially "hide" the snippet from the others. Another way around this is to
+use the `mdoc:reset` modifier, which _resets_ and forgets about everything up
+above. Here is an example using the various modifiers.
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
+<span class="hljs-keyword">import</span> java.time.<span class="hljs-type">Instant</span>
+
+<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">now</span></span>() = <span class="hljs-type">Instant</span>.now()
+<span class="hljs-class"><span class="hljs-keyword">object</span> <span class="hljs-title">Foo</span> </span>{}
+```</code></pre></div></div>
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:nest
+<span class="hljs-keyword">case</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span>(<span class="hljs-params">a: <span class="hljs-type">Int</span></span>) <span class="hljs-comment">// conflicts with Foo above, but it's nested so it's fine</span></span>
+```</code></pre></div></div>
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
+<span class="hljs-keyword">val</span> a = <span class="hljs-string">s"The time is <span class="hljs-subst">${now()}</span>"</span> <span class="hljs-comment">// still have access to the now method from above</span>
+```</code></pre></div></div>
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:reset
+<span class="hljs-keyword">case</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span>(<span class="hljs-params">a: <span class="hljs-type">String</span></span>) <span class="hljs-comment">// forget the previous Foo's and start fresh</span></span>
+```</code></pre></div></div>
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
+<span class="hljs-keyword">val</span> myFoo = <span class="hljs-type">Foo</span>(<span class="hljs-string">"hi"</span>) <span class="hljs-comment">// now we only have access to the last Foo</span>
+```</code></pre></div></div>
 
 ## Document Templates
 
@@ -197,64 +288,9 @@ you should use the following format:
     |---------|---------|
     | content | more    |
 
-### Code blocks
-
-The site build process uses [mdoc](https://scalameta.org/mdoc/) to typecheck
-code snippets in markdown. This is a great way to ensure the code snippets that
-you're including typecheck and are valid. Here are a few quick tips to get
-started:
-
-First, add `mdoc` after `scala` when you are creating a
-code block. The `mdoc` modifier here will make sure that `mdoc` runs the code
-snippet and ensures that it's valid.
-
-<div class="language-plaintext highlighter-rouge">
-    <div class="highlight">
-        <pre class="highlight">
-            <code class="hljs scala">&#96;&#96;&#96;scala mdoc
-<span class="hljs-keyword">val</span> a = <span class="hljs-number">1</span>
-```</code></pre></div></div>
-
-If you have a snippet that you expect to fail, you can also account for this by
-using `mdoc:fail` for a compile error `mdoc:crash` for a runtime-error.
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:fail
-<span class="hljs-keyword">val</span> b: <span class="hljs-type">String</span> = <span class="hljs-number">3</span> <span class="hljs-comment">// won't compile</span>
-```</code></pre></div></div>
-
-Keep in mind that a single file is all compiled as a single unit, so you can't
-redefine a variable that was defined above in another code snippet. _However_
-there are a couple ways to get around this. Firstly, you can use the `mdoc:nest`
-modifier with will wrap the snippet in a `scala.Predef.locally{...}`. This will
-essentially "hide" the snippet from the others. Another way around this is to
-use the `mdoc:reset` modifier, which _resets_ and forgets about everything up
-above. Here is an example using the various modifiers.
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
-<span class="hljs-keyword">import</span> java.time.<span class="hljs-type">Instant</span>
-
-<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">now</span></span>() = <span class="hljs-type">Instant</span>.now()
-<span class="hljs-class"><span class="hljs-keyword">object</span> <span class="hljs-title">Foo</span> </span>{}
-```</code></pre></div></div>
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:nest
-<span class="hljs-keyword">case</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span>(<span class="hljs-params">a: <span class="hljs-type">Int</span></span>) <span class="hljs-comment">// conflicts with Foo above, but it's nested so it's fine</span></span>
-```</code></pre></div></div>
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
-<span class="hljs-keyword">val</span> a = <span class="hljs-string">s"The time is <span class="hljs-subst">${now()}</span>"</span> <span class="hljs-comment">// still have access to the now method from above</span>
-```</code></pre></div></div>
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc:reset
-<span class="hljs-keyword">case</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span>(<span class="hljs-params">a: <span class="hljs-type">String</span></span>) <span class="hljs-comment">// forget the previous Foo's and start fresh</span></span>
-```</code></pre></div></div>
-
-<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code class="hljs scala">&#96;&#96;&#96;scala mdoc
-<span class="hljs-keyword">val</span> myFoo = <span class="hljs-type">Foo</span>(<span class="hljs-string">"hi"</span>) <span class="hljs-comment">// now we only have access to the last Foo</span>
-```</code></pre></div></div>
-
 [collections-overview]: {% link _overviews/collections-2.13/introduction.md %}
 [why-contribute]: {% link contribute.md %}
 [home]: {% link index.md %}
 [overviews-index]: {% link _overviews/index.md %}
 [scala-3-reference]: {{ site.scala3ref }}
+[hello-world]: {% link _overviews/scala3-book/taste-hello-world.md %}
diff --git a/_overviews/scala3-book/taste-hello-world.md b/_overviews/scala3-book/taste-hello-world.md
@@ -7,18 +7,45 @@ previous-page: taste-intro
 next-page: taste-repl
 ---
 
+> **Hint**: in the following examples try picking your preferred Scala version.
+> <noscript><span style="font-weight: bold;">Info</span>: JavaScript is currently disabled, code tabs will still work, but preferences will not be remembered.</noscript>
+
 ## Your First Scala Program
 
-A Scala 3 “Hello, world!” example goes as follows.
+
+A Scala “Hello, World!” example goes as follows.
 First, put this code in a file named _hello.scala_:
 
+
+<!-- Display Hello World for each Scala Version -->
+{% tabs hello-world-demo class=tabs-scala-version %}
+
+{% tab 'Scala 2' for=hello-world-demo %}
+```scala
+object hello {
+  def main(args: Array[String]) = {
+    println("Hello, World!")
+  }
+}
+```
+> In this code, we defined a method named `main`, inside a Scala `object` named `hello`.
+> An `object` in Scala is similar to a `class`, but defines a singleton instance that you can pass around.
+> `main` takes an input parameter named `args` that must be typed as `Array[String]`, (ignore `args` for now).
+
+{% endtab %}
+
+{% tab 'Scala 3' for=hello-world-demo %}
 ```scala
-@main def hello() = println("Hello, world!")
+@main def hello() = println("Hello, World!")
 ```
+> In this code, `hello` is a method.
+> It’s defined with `def`, and declared to be a “main” method with the `@main` annotation.
+> It prints the `"Hello, World!"` string to standard output (STDOUT) using the `println` method.
+
+{% endtab %}
 
-In this code, `hello` is a method.
-It’s defined with `def`, and declared to be a “main” method with the `@main` annotation.
-It prints the `"Hello, world!"` string to standard output (STDOUT) using the `println` method.
+{% endtabs %}
+<!-- End tabs -->
 
 Next, compile the code with `scalac`:
 
@@ -28,6 +55,19 @@ $ scalac hello.scala
 
 If you’re coming to Scala from Java, `scalac` is just like `javac`, so that command creates several files:
 
+<!-- Display Hello World compiled outputs for each Scala Version -->
+{% tabs hello-world-outputs class=tabs-scala-version %}
+
+{% tab 'Scala 2' for=hello-world-outputs %}
+```bash
+$ ls -1
+hello$.class
+hello.class
+hello.scala
+```
+{% endtab %}
+
+{% tab 'Scala 3' for=hello-world-outputs %}
 ```bash
 $ ls -1
 hello$package$.class
@@ -37,14 +77,18 @@ hello.scala
 hello.class
 hello.tasty
 ```
+{% endtab %}
+
+{% endtabs %}
+<!-- End tabs -->
 
 Like Java, the _.class_ files are bytecode files, and they’re ready to run in the JVM.
 
 Now you can run the `hello` method with the `scala` command:
 
 ```bash
 $ scala hello
-Hello, world!
+Hello, World!
 ```
 
 Assuming that worked, congratulations, you just compiled and ran your first Scala application.
@@ -64,6 +108,27 @@ import scala.io.StdIn.readLine
 
 To demonstrate how this works, let’s create a little example. Put this source code in a file named _helloInteractive.scala_:
 
+<!-- Display interactive Hello World application for each Scala Version -->
+{% tabs hello-world-interactive class=tabs-scala-version %}
+
+{% tab 'Scala 2' for=hello-world-interactive %}
+```scala
+import scala.io.StdIn.readLine
+
+object helloInteractive {
+
+  def main(args: Array[String]) = {
+    println("Please enter your name:")
+    val name = readLine()
+
+    println("Hello, " + name + "!")
+  }
+
+}
+```
+{% endtab %}
+
+{% tab 'Scala 3' for=hello-world-interactive %}
 ```scala
 import scala.io.StdIn.readLine
 
@@ -73,6 +138,10 @@ import scala.io.StdIn.readLine
 
   println("Hello, " + name + "!")
 ```
+{% endtab %}
+
+{% endtabs %}
+<!-- End tabs -->
 
 In this code we save the result of `readLine` to a variable called `name`, we then
 use the `+` operator on strings to join `"Hello, "` with `name` and `"!"`, making one single string value. 
diff --git a/_plugins/jekyll-tabs-lib/template.erb b/_plugins/jekyll-tabs-lib/template.erb
@@ -4,15 +4,15 @@
       <input
         type="radio"
         name="<%= @name %>_tabs"
-        id="<%= tab.anchor %>_description"
+        id="<%= @name %>_<%= tab.anchor %>_description"
         data-target="<%= tab.anchor %>"
         hidden aria-hidden="true"
         <%= tab.defaultTab ? 'checked' : ''%>>
     <% end %>
     <ul hidden aria-hidden="true" class="nav-tab">
       <% environment["tabs-#{@name}"].each do | tab | %>
         <li class="item-tab">
-          <label class="item-tab-link" for="<%= tab.anchor %>_description"><%= tab.label %></label>
+          <label class="item-tab-link" for="<%= @name %>_<%= tab.anchor %>_description"><%= tab.label %></label>
         </li>
       <% end %>
     </ul>
diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss
@@ -93,10 +93,8 @@
 }
 
 .tabsection {
-    border-bottom: $base-border-gray;
-    border-left: $base-border-gray;
-    border-right: $base-border-gray;
-    border-radius: $border-radius-medium;
+    padding: 0.1px 0; // ensure inner content is correctly padded
+    border-left: 2px solid $base-border-color-gray;
 
     .nav-tab {
         padding-left: 0;
diff --git a/resources/js/functions.js b/resources/js/functions.js
