From f3627c7d5aa427c38472daafaead9feb84416fc9 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Thu, 12 Jan 2023 15:43:48 +0100 Subject: [PATCH 1/9] upgrade fontawesome --- _includes/headertop.html | 6 ++++-- _sass/components/alt-details.scss | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/_includes/headertop.html b/_includes/headertop.html index f0aefd140..63402ad49 100644 --- a/_includes/headertop.html +++ b/_includes/headertop.html @@ -19,7 +19,7 @@ {% if page.url %} - {% endif %} + {% endif %} @@ -34,7 +34,9 @@ - + diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss index e90c91efe..7c54ae315 100644 --- a/_sass/components/alt-details.scss +++ b/_sass/components/alt-details.scss @@ -30,7 +30,7 @@ &:after { // show a right arrow at the end of the toggle element content: "\f138"; // - font-family: "FontAwesome"; + font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; float: right; From 248427fe1b578c364bfe31153de3f466ea3e8a45 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Thu, 12 Jan 2023 16:52:38 +0100 Subject: [PATCH 2/9] add code carousel and darkmode code theme --- _config.yml | 2 + _includes/code-carousel.html | 68 ++++++ _includes/code-snippet.html | 2 +- _includes/headertop.html | 4 + _layouts/frontpage.html | 39 ++-- _sass/components/code.scss | 217 +++++++++++++++++++- _sass/layout/header.scss | 24 +-- _sass/layout/inner-text.scss | 23 ++- _sass/layout/scala-main-resources.scss | 18 +- _sass/layout/type-md.scss | 1 - _sass/utils/_variables.scss | 3 +- _scala_carousel_items/1-collections-ops.md | 20 ++ _scala_carousel_items/2-json-codec.md | 20 ++ _scala_carousel_items/3-js-dom.md | 20 ++ _scala_carousel_items/4-data-definitions.md | 20 ++ index.md | 2 + resources/css/highlightjs-dark.css | 148 +++++++++++++ 17 files changed, 568 insertions(+), 63 deletions(-) create mode 100644 _includes/code-carousel.html create mode 100644 _scala_carousel_items/1-collections-ops.md create mode 100644 _scala_carousel_items/2-json-codec.md create mode 100644 _scala_carousel_items/3-js-dom.md create mode 100644 _scala_carousel_items/4-data-definitions.md create mode 100644 resources/css/highlightjs-dark.css diff --git a/_config.yml b/_config.yml index 1f5270429..4b540de47 100644 --- a/_config.yml +++ b/_config.yml @@ -36,6 +36,8 @@ defaults: collections: install_tabs: output: false + scala_carousel_items: + output: false scala_items: output: false online_courses: diff --git a/_includes/code-carousel.html b/_includes/code-carousel.html new file mode 100644 index 000000000..90f66b49f --- /dev/null +++ b/_includes/code-carousel.html @@ -0,0 +1,68 @@ +{% assign firstOption = true %} +{% assign darkClassOpt = '' %} +{% if page.darkmodeCode %} + {% assign darkClassOpt = 'dark' %} +{% endif %} + diff --git a/_includes/code-snippet.html b/_includes/code-snippet.html index bcdc9e81a..c8111a1bd 100644 --- a/_includes/code-snippet.html +++ b/_includes/code-snippet.html @@ -1,7 +1,7 @@
{% unless include.nocopy %}
- +
{% endunless %} 
{{include.codeSnippet}}
diff --git a/_includes/headertop.html b/_includes/headertop.html index 63402ad49..318e96f36 100644 --- a/_includes/headertop.html +++ b/_includes/headertop.html @@ -41,7 +41,11 @@ + {% if page.darkmodeCode %} + + {% else %} + {% endif %} diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index 137515dca..3f5bebaf1 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -32,29 +32,28 @@ {% endfor %} +
+
-
-

{{page.headerTitle}}

-

{{page.headerSubtitle}}

- {% for release in site.data.scala-releases %} - {% if release.category == "current_version" %} - - Scala {{ release.version }} - - {% endif %} - {% endfor %} - - All Releases - -
-
-
- - pushpin - - {{site.data.common.texts.frontpageMarker}} +
+
+

{{page.headerTitle}}

+

{{page.headerSubtitle}}

+ {% for release in site.data.scala-releases %} + {% if release.category == "current_version" %} + + Scala {{ release.version }} + + {% endif %} + {% endfor %} + + All Releases +
+
+ {% include code-carousel.html id='scala-main-carousel' collection=site.scala_carousel_items %} +
diff --git a/_sass/components/code.scss b/_sass/components/code.scss index 5e945b819..cc3fa81c8 100755 --- a/_sass/components/code.scss +++ b/_sass/components/code.scss @@ -1,6 +1,150 @@ // CODE //------------------------------------------------ //------------------------------------------------ + +.code-background { + background: #fdfdf7; +} + +.code-background.dark { + background: #22272e; +} + +.code-carousel { + + .code-carousel_control { + display: none; + } + + .progress-label { + position: absolute; + bottom: 5px; + right: 5px; + color: #222; + + z-index: 40; + + padding-left: 3px; + + .progress-out-of { + color: #666; + font-size: $font-size-xsmall; + } + + font-size: $font-size-small; + } + + .progress-label.dark { + color: #fff; + + .progress-out-of { + color: #aaa; + } + } + + .content-area { + width: 100%; + + section { + position: absolute; + top: -999em; + left: -999em; + + pre { + opacity: 0; + } + + transition: 400ms; + } + + p { + text-align: center; + font-size: $font-size-small; + color: $base-font-color-inverse; + } + } + + + .code-element { + margin: 0 0 5px 0; + font-size: $font-size-medium; + + pre { + margin: 0; + padding: 0 25px 10px 25px; // looks better with no JS + height: 270px; // consistent height for all code blocks + + code { + padding: 0; + } + } + + } + + .arrow-switcher { + position: absolute; // so we can position the buttons + color: #444; + font-size: $font-size-carousel-arrow; + height: 100%; + + z-index: 50; + + label { + @include display(flex); + @include flex-direction(column); + @include justify-content(center); + height: 100%; + cursor: pointer; + + &:hover { + background: rgba(#666, 0.3); + } + } + } + + .arrow-switcher.dark { + color: #fff; + + label { + &:hover { + background: rgba(#fff, 0.3); + } + } + } + + .arrow-switcher_right { + right: 0px; + + label { + padding: 5px 5px 5px 25px; + } + } + + .arrow-switcher_left { + left: 0px; + + label { + padding: 5px 25px 5px 5px; + } + } + + input:checked:nth-child(1)~.content-area>section:nth-child(1), + input:checked:nth-child(2)~.content-area>section:nth-child(2), + input:checked:nth-child(3)~.content-area>section:nth-child(3), + input:checked:nth-child(4)~.content-area>section:nth-child(4), + input:checked:nth-child(5)~.content-area>section:nth-child(5), + input:checked:nth-child(6)~.content-area>section:nth-child(6), + input:checked:nth-child(7)~.content-area>section:nth-child(7), + input:checked:nth-child(8)~.content-area>section:nth-child(8), + input:checked:nth-child(9)~.content-area>section:nth-child(9) { + position: static; + pre { + opacity: 1; + } + } + +} + .code-element { margin-bottom: 20px; @@ -9,14 +153,20 @@ } code { - padding: 20px; + // style that would be injected by hljs when JS is enabled + display: block; + font-family: 'Consolas'; + border: none; + display: block; + overflow-x: auto; + padding: 0.5em; } .bar-code { background: #B4BBBD; text-align: center; padding: 2px 0; - font-size: $font-size-small; + font-size: $font-size-medium; font-weight: $font-bold; min-height: 26px; @include border-radius($border-radius-base $border-radius-base 0 0); @@ -24,6 +174,61 @@ } } +.code-element.dark { + code { + color: #adbac7; + } + + .bar-code { + background: #404a4e; + color: #ccc; + } +} + +.code-snippet-buttons { + @include display(flex); + @include flex-direction(row); + @include flex-wrap(wrap); + @include justify-content(flex-end); +} + +.code-snippet-button { + // style shared by _includes/code-snippet.html and _includes/code-carousel.html + border: $base-border-gray; + background: #fff; + border-radius: 3px; + font-size: $font-size-small; + color: $gray-darker; + cursor: pointer; + margin: 4px; + padding: 5px; + + a { + color: $gray-darker; + + &:hover { + color: $gray-darker; + text-decoration: none; + } + } +} + +.code-background.dark { + .code-snippet-button { + background: #22272e; + color: #fff; + + a { + color: #fff; + + &:hover { + color: #fff; + text-decoration: none; + } + } + } +} + .code-snippet-area { position: relative; // so we can position the buttons @@ -45,13 +250,5 @@ position: absolute; // so we can position the buttons right: 3px; top: 5px; - - button { - border: none; - background: #fff; - font-size: $font-size-medium; - color: $gray-darker; - cursor: pointer; - } } } diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss index 2862cae72..f377034df 100755 --- a/_sass/layout/header.scss +++ b/_sass/layout/header.scss @@ -44,20 +44,20 @@ &.header-home { background: none; .header-background { - background: rgba($gray-darker, 0.45); + background: linear-gradient($brand-secondary, 40%, $gray-darker); position: relative; - padding-bottom: 150px; + padding-bottom: 120px; - &:before { - content: ""; - position: absolute; - background: url("../img/frontpage/background-header-home.jpg") no-repeat center center; - @include image-size(); - left: 0; - width: 100%; - height: 100%; - z-index: -1; - } + // &:before { + // content: ""; + // position: absolute; + // background: url("../img/frontpage/background-header-home.jpg") no-repeat center center; + // @include image-size(); + // left: 0; + // width: 100%; + // height: 100%; + // z-index: -1; + // } } } } diff --git a/_sass/layout/inner-text.scss b/_sass/layout/inner-text.scss index 398cce412..9c06e0414 100755 --- a/_sass/layout/inner-text.scss +++ b/_sass/layout/inner-text.scss @@ -1,15 +1,23 @@ // INNER TEXT //------------------------------------------------ //------------------------------------------------ -.inner-text { - position: relative; +.col-lg-6 { + @include span-columns(6); + + @include bp(large) { + @include span-columns(12); + padding-bottom: 8px; + } +} + +.inner-text { h1 { font-family: $base-font-family; - font-size: 2.813rem; + font-size: min(2.85vw, 2.21rem); font-weight: $font-black; color: #fff; - margin: $padding-medium 0 ($padding-medium / 2) 0; + margin: $padding-small 20px $padding-small 0; } p { @@ -18,17 +26,14 @@ margin-bottom: $padding-medium; } - @include span-columns(8); @include bp(large) { - @include span-columns(12); - .button { margin-bottom: 3px; } h1 { - font-size: 2.213rem; - margin: 0 0 ($padding-medium / 2) 0; + font-size: 2.5rem; + margin: ($padding-medium / 2) 0; } } } diff --git a/_sass/layout/scala-main-resources.scss b/_sass/layout/scala-main-resources.scss index 4009a228e..090d1faa6 100755 --- a/_sass/layout/scala-main-resources.scss +++ b/_sass/layout/scala-main-resources.scss @@ -3,7 +3,7 @@ //------------------------------------------------ .scala-main-resources { - height: 100px; + height: 105px; background: $gray-darker; position: relative; @@ -110,11 +110,11 @@ } .scala-brand-circle { - width: 280px; - height: 280px; + width: 190px; + height: 190px; left: 50%; - top: -142px; - margin-left: -140px; + top: -97px; + margin-left: -96px; position: absolute; z-index: 60; @include display(flex); @@ -123,15 +123,15 @@ .circle-solid { background: $gray-darker; - width: 205px; - height: 205px; + width: 185px; + height: 185px; border-radius: 100%; text-align: center; > img { - width: 152px; + width: 120px; height: auto; - margin-top: -36px; + margin-top: -15px; } .scala-version { diff --git a/_sass/layout/type-md.scss b/_sass/layout/type-md.scss index 37f7786c8..6095a112b 100755 --- a/_sass/layout/type-md.scss +++ b/_sass/layout/type-md.scss @@ -164,7 +164,6 @@ overflow-x: auto; display: block; font-size: $font-size-medium; - @include border-radius($border-radius-base); padding: 10px 7px; } } diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss index f4abd0aa7..e1997294d 100755 --- a/_sass/utils/_variables.scss +++ b/_sass/utils/_variables.scss @@ -40,7 +40,8 @@ $heading-font-family: 'Roboto Slab', serif; $em-base: 16px !global; $base-font-size: $em-base; //------------------------------------------------ -$font-size-logo-btn: 1.4rem; // 17px +$font-size-carousel-arrow: 1.8rem; +$font-size-logo-btn: 1.4rem; $font-size-large: 1.063rem; // 17px $font-size-medium: 0.9375rem; // 15px $font-size-small: 0.875rem; // 14px diff --git a/_scala_carousel_items/1-collections-ops.md b/_scala_carousel_items/1-collections-ops.md new file mode 100644 index 000000000..3c399012f --- /dev/null +++ b/_scala_carousel_items/1-collections-ops.md @@ -0,0 +1,20 @@ +--- +optionId: collections-ops +scastieLink: 'https://scastie.scala-lang.org/IRGiFXDhQPeOXYsW41FnCw' +codeTitle: 'Functional programming with immutable collections' +description: "High-level operations avoid the need for complex and error-prone loops." +--- + +```scala +val fruits = + List("apple", "banana", "avocado", "papaya") + +val countsToFruits = // count how many 'a' in each fruit + fruits.groupBy(f => f.count(_ == 'a')) + +for (count, fruits) <- countsToFruits do + println(s"with 'a' × $count = $fruits") +// prints: with 'a' × 1 = List(apple) +// prints: with 'a' × 2 = List(avocado) +// prints: with 'a' × 3 = List(banana, papaya) +``` diff --git a/_scala_carousel_items/2-json-codec.md b/_scala_carousel_items/2-json-codec.md new file mode 100644 index 000000000..38a096426 --- /dev/null +++ b/_scala_carousel_items/2-json-codec.md @@ -0,0 +1,20 @@ +--- +optionId: json-codec +scastieLink: 'https://scastie.scala-lang.org/WNnVCqZeR1ufyXxyqsiqag' +codeTitle: "Encode and decode custom data types to JSON" +description: "The pluggable derivation system quickly gives custom types new capabilities." +--- + +```scala +case class Pet( + name: String, + kind: String +) derives Codec // enable coding Pet to and from text + +val coco = Pet(name = "Coco", kind = "Cat") + +val message = writeJson(coco) +// ^^^^^^^ contains the text: {"name":"Coco","kind":"Cat"} + +readJson[Pet](message) // convert message back to a Pet! +``` diff --git a/_scala_carousel_items/3-js-dom.md b/_scala_carousel_items/3-js-dom.md new file mode 100644 index 000000000..9c8535af3 --- /dev/null +++ b/_scala_carousel_items/3-js-dom.md @@ -0,0 +1,20 @@ +--- +optionId: js-dom-api +scastieLink: 'https://scastie.scala-lang.org/YpcEab3ySieF4BkW5jE4Gw' +codeTitle: 'Target the Web with Scala.js on the frontend' +description: "Share code full-stack, interact with the DOM or use any JS library." +--- + +```scala +val counter = Var(0) + +// create a counter button that increments on-click +def counterButton() = button( + tpe := "button", + "count is ", + child.text <-- counter, + onClick --> { event => counter.update(c => c + 1) }, +) +val app = dom.document.getElementById("app") +render(app, counterButton()) +``` diff --git a/_scala_carousel_items/4-data-definitions.md b/_scala_carousel_items/4-data-definitions.md new file mode 100644 index 000000000..a078cf9fe --- /dev/null +++ b/_scala_carousel_items/4-data-definitions.md @@ -0,0 +1,20 @@ +--- +optionId: data-definitions +scastieLink: 'https://scastie.scala-lang.org/2plItYkVS4enZCFwBIPnZA' +codeTitle: 'Define data types and pattern match on them with ease' +description: "Model domains precisely, and make choices based on the shape of data." +--- + +```scala +enum Payment: + case Card(name: String, digits: Long, expires: Date) + case PayPal(email: String) + +def process(kind: Payment) = kind match + case Card(name, digits, expires) => + s"Processing credit card $name, $digits, $expires" + case PayPal(email) => + s"Processing PayPal account $email" + +process(Card(name, digits, expires)) +``` diff --git a/index.md b/index.md index 7622e47b2..956a33f1e 100644 --- a/index.md +++ b/index.md @@ -1,6 +1,8 @@ --- layout: frontpage +darkmodeCode: true + # Header texts headerTitle: "The Scala Programming Language" headerSubtitle: "Scala combines object-oriented and functional programming in one concise, high-level language. Scala's static types help avoid bugs in complex applications, and its JVM and JavaScript runtimes let you build high-performance systems with easy access to huge ecosystems of libraries." diff --git a/resources/css/highlightjs-dark.css b/resources/css/highlightjs-dark.css new file mode 100644 index 000000000..9db5b23d7 --- /dev/null +++ b/resources/css/highlightjs-dark.css @@ -0,0 +1,148 @@ +/*! + Theme: GitHub Dark Dimmed + Description: Dark dimmed theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Colors taken from GitHub's CSS + + BSD 3-Clause License + + Copyright (c) 2006, Ivan Sagalaev. + All rights reserved. + + Redistribution and use in source and binary forms, + with or without modification, + are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" + AND ANY EXPRESS OR IMPLIED WARRANTIES, + INCLUDING, + BUT NOT LIMITED TO, + THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, + INDIRECT, + INCIDENTAL, + SPECIAL, + EXEMPLARY, + OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, + WHETHER IN CONTRACT, + STRICT LIABILITY, + OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, + EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +*/ + +.hljs { + color: #adbac7; + background: #22272e; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-variable.language_ { + /* prettylights-syntax-keyword */ + color: #f47067; +} + +.hljs-title, +.hljs-type, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + /* prettylights-syntax-entity */ + color: #dcbdfb; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + /* prettylights-syntax-constant */ + color: #6cb6ff; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + /* prettylights-syntax-string */ + color: #96d0ff; +} + +.hljs-built_in, +.hljs-symbol { + /* prettylights-syntax-variable */ + color: #f69d50; +} + +.hljs-comment, +.hljs-code, +.hljs-formula { + /* prettylights-syntax-comment */ + color: #768390; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #8ddb8c; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #adbac7; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #316dca; + font-weight: bold; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #eac55f; +} + +.hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #adbac7; + font-style: italic; +} + +.hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #adbac7; + font-weight: bold; +} + +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #b4f1b4; + background-color: #1b4721; +} + +.hljs-deletion { + /* prettylights-syntax-markup-deleted */ + color: #ffd8d3; + background-color: #78191b; +} + +.hljs-char.escape_, +.hljs-link, +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ +} From 761345f50bc2b3cc8529941118981df73e2818c3 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Tue, 31 Jan 2023 14:02:54 +0100 Subject: [PATCH 3/9] add dark theme to nutshell snippets these are only visible with javascript enabled, which will inject hljs dark theme. --- _scala_items/1-seamless-java-interop.md | 8 ++++---- _scala_items/2-type-inference.md | 6 +++--- _scala_items/3-concurrency-distribution.md | 4 ++-- _scala_items/4-traits.md | 6 +++--- _scala_items/5-pattern-matching.md | 2 +- _scala_items/6-higher-order-functions.md | 6 +++--- _scala_items/7-education.md | 8 ++++---- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/_scala_items/1-seamless-java-interop.md b/_scala_items/1-seamless-java-interop.md index cf14c8c5e..b428e5060 100644 --- a/_scala_items/1-seamless-java-interop.md +++ b/_scala_items/1-seamless-java-interop.md @@ -1,11 +1,11 @@ --- shortTitle: "Seamless Java Interop" shortDescription: "Scala runs on the JVM, so Java and Scala stacks can be freely mixed for totally seamless integration." -scastieUrl: +scastieUrl: ---
-
+
Author.scala
class Author(val firstName: String,
     val lastName: String) extends Comparable[Author] {
@@ -21,7 +21,7 @@ object Author {
   def loadAuthorsFromFile(file: java.io.File): List[Author] = ???
 }
-
+
App.java
import static scala.collection.JavaConversions.asJavaCollection;
 
@@ -61,4 +61,4 @@ It also uses JavaConversions to convert between Scala collections
 and Java collections.
-
\ No newline at end of file +
diff --git a/_scala_items/2-type-inference.md b/_scala_items/2-type-inference.md index 7e2edee38..25f759f53 100644 --- a/_scala_items/2-type-inference.md +++ b/_scala_items/2-type-inference.md @@ -1,11 +1,11 @@ --- shortTitle: "Type Inference" shortDescription: "So the type system doesn’t feel so static. Don’t work for the type system. Let the type system work for you!" -scastieUrl: +scastieUrl: ---
-
+
Type inference
scala> class Person(val name: String, val age: Int) {
      |   override def toString = s"$name ($age)"
@@ -46,4 +46,4 @@ class and two functions. You can observe that the compiler infers the result
 types of the functions automatically, as well as all the intermediate values.
-
\ No newline at end of file +
diff --git a/_scala_items/3-concurrency-distribution.md b/_scala_items/3-concurrency-distribution.md index 7a3989c2e..d03a8a269 100644 --- a/_scala_items/3-concurrency-distribution.md +++ b/_scala_items/3-concurrency-distribution.md @@ -1,11 +1,11 @@ --- shortTitle: "Concurrency & Distribution" shortDescription: "Use data-parallel operations on collections, use actors for concurrency and distribution, or futures for asynchronous programming." -scastieUrl: +scastieUrl: ---
-
+
Concurrent/Distributed
val x = Future { someExpensiveComputation() }
 val y = Future { someOtherExpensiveComputation() }
diff --git a/_scala_items/4-traits.md b/_scala_items/4-traits.md
index ed4d16061..fb49e2724 100644
--- a/_scala_items/4-traits.md
+++ b/_scala_items/4-traits.md
@@ -1,7 +1,7 @@
 ---
 shortTitle: "Traits"
 shortDescription: "Combine the flexibility of Java-style interfaces with the power of classes. Think principled multiple-inheritance."
-scastieUrl: 
+scastieUrl:
 ---
 {% comment %}
 Borrowed from
@@ -9,7 +9,7 @@ https://gleichmann.wordpress.com/2009/10/21/scala-in-practice-composing-traits-l
 {% endcomment %}
 

                                 

-                                    

+                                    

                                         
Traits

                                         
abstract class Spacecraft {
   def engage(): Unit
@@ -46,4 +46,4 @@ engage the ship (provided a means to speed up) and a PulseEngine th
 specifies how to speed up.
 

                                 

-                            

\ No newline at end of file
+                            

diff --git a/_scala_items/5-pattern-matching.md b/_scala_items/5-pattern-matching.md
index 8e8b2f517..3b0cb7ccd 100644
--- a/_scala_items/5-pattern-matching.md
+++ b/_scala_items/5-pattern-matching.md
@@ -20,7 +20,7 @@ deconstructs the arguments of a Node.
                                 

 
                                 

-                                    

+                                    

                                         
Pattern matching

                                         
// Define a set of case classes for representing binary trees.
 sealed abstract class Tree
diff --git a/_scala_items/6-higher-order-functions.md b/_scala_items/6-higher-order-functions.md
index 67997617c..77f6f5459 100644
--- a/_scala_items/6-higher-order-functions.md
+++ b/_scala_items/6-higher-order-functions.md
@@ -1,7 +1,7 @@
 ---
 shortTitle: "Higher-order functions"
 shortDescription: "Functions are first-class objects. Compose them with guaranteed type safety. Use them anywhere, pass them to anything."
-scastieUrl: 
+scastieUrl:
 ---
 

               

@@ -10,7 +10,7 @@ scastieUrl:
   with a concise syntax.

               

               

-                

+                

                   
Scala

                   
val people: Array[Person]
 
@@ -20,7 +20,7 @@ val (minors, adults) = people partition (_.age < 18)

                 

               

               

-                

+                

                   
Java

                   
List<Person> people;
 
diff --git a/_scala_items/7-education.md b/_scala_items/7-education.md
index 58d4218e6..310e84dcc 100644
--- a/_scala_items/7-education.md
+++ b/_scala_items/7-education.md
@@ -28,12 +28,12 @@ shortDescription: "Scala is ideal for teaching programming to beginners as well
 
   

 
-    

+    

       
HelloWorld.scala

       
@main def run() = println("Hello, World!")

     

 
-    

+    

       
Modules.scala

       
// A module that can access the data stored in a database
 class DatabaseAccess(connection: Connection):
@@ -51,7 +51,7 @@ class HttpServer(databaseAccess: DatabaseAccess):
 
   

 
-    

+    

       
Modeling.scala

       
/** A Player can either be a Bot, or a Human.
   * In case it is a Human, it has a name.
@@ -61,7 +61,7 @@ enum Player:
   case Human(name: String)

     

 
-    

+    

       
Algorithms.scala

       
// Average number of contacts a person has according to age
 def contactsByAge(people: Seq[Person]): Map[Int, Double] =

From 221c8bed3efcc851a8147f5f7ba8ad537bc4575d Mon Sep 17 00:00:00 2001
From: Jamie Thompson 
Date: Tue, 31 Jan 2023 15:20:41 +0100
Subject: [PATCH 4/9] add timer to switch slides automatically

---
 resources/js/functions.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/resources/js/functions.js b/resources/js/functions.js
index 36bcfd735..5ad0b4ed4 100644
--- a/resources/js/functions.js
+++ b/resources/js/functions.js
@@ -323,6 +323,40 @@ $(document).ready(function () {
   }
 });
 
+$(document).ready(function () {
+  // set up automatic switching of code carousel
+  $(".code-carousel").each(function () {
+    var carousel = this;
+    var inputs = [];
+    $(carousel).children("input.code-carousel_control").each(function () {
+      inputs.push(this);
+    });
+
+    // if there is more than one section, set up automatic switching
+    if (inputs.length > 1) {
+
+      var cancelled = false;
+
+      var index = inputs.findIndex(input => input.checked);
+
+      // switch every 8 seconds while the page is visible and not cancelled
+      const intervalHandle = setInterval(() => {
+        if (!document.hidden && !cancelled) {
+          const nextIndex = (index + 1) % inputs.length;
+          inputs[nextIndex].checked = true;
+          index = nextIndex;
+        }
+      }, 8000);
+
+      carousel.addEventListener("click", function cancelTicker() {
+        carousel.removeEventListener("click", cancelTicker);
+        cancelled = true;
+        clearInterval(intervalHandle);
+      });
+    }
+  });
+});
+
 var image = { width: 1680, height: 1100 };
 var target = { x: 1028, y: 290 };
 

From 964506b0c586696f99fd8ff4bb782a07481cb668 Mon Sep 17 00:00:00 2001
From: Jamie Thompson 
Date: Tue, 31 Jan 2023 17:41:37 +0100
Subject: [PATCH 5/9] address review: remove commented css

---
 _sass/layout/header.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss
index f377034df..7c47b7f81 100755
--- a/_sass/layout/header.scss
+++ b/_sass/layout/header.scss
@@ -47,17 +47,6 @@
             background: linear-gradient($brand-secondary, 40%, $gray-darker);
             position: relative;
             padding-bottom: 120px;
-
-            // &:before {
-            //     content: "";
-            //     position: absolute;
-            //     background: url("../img/frontpage/background-header-home.jpg") no-repeat center center;
-            //     @include image-size();
-            //     left: 0;
-            //     width: 100%;
-            //     height: 100%;
-            //     z-index: -1;
-            // }
         }
     }
 }

From 3b8040871531cc3231832f97ae00be929ef4587d Mon Sep 17 00:00:00 2001
From: Jamie Thompson 
Date: Wed, 1 Feb 2023 11:38:44 +0100
Subject: [PATCH 6/9] address review: adjust wording

---
 _scala_carousel_items/1-collections-ops.md | 4 ++--
 _scala_carousel_items/2-json-codec.md      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/_scala_carousel_items/1-collections-ops.md b/_scala_carousel_items/1-collections-ops.md
index 3c399012f..9ae042320 100644
--- a/_scala_carousel_items/1-collections-ops.md
+++ b/_scala_carousel_items/1-collections-ops.md
@@ -1,6 +1,6 @@
 ---
 optionId: collections-ops
-scastieLink: 'https://scastie.scala-lang.org/IRGiFXDhQPeOXYsW41FnCw'
+scastieLink: 'https://scastie.scala-lang.org/UUmbjLZMRim4kogxDWncmw'
 codeTitle: 'Functional programming with immutable collections'
 description: "High-level operations avoid the need for complex and error-prone loops."
 ---
@@ -10,7 +10,7 @@ val fruits =
   List("apple", "banana", "avocado", "papaya")
 
 val countsToFruits = // count how many 'a' in each fruit
-  fruits.groupBy(f => f.count(_ == 'a'))
+  fruits.groupBy(fruit => fruit.count(_ == 'a'))
 
 for (count, fruits) <- countsToFruits do
   println(s"with 'a' × $count = $fruits")
diff --git a/_scala_carousel_items/2-json-codec.md b/_scala_carousel_items/2-json-codec.md
index 38a096426..e300fb375 100644
--- a/_scala_carousel_items/2-json-codec.md
+++ b/_scala_carousel_items/2-json-codec.md
@@ -2,7 +2,7 @@
 optionId: json-codec
 scastieLink: 'https://scastie.scala-lang.org/WNnVCqZeR1ufyXxyqsiqag'
 codeTitle: "Encode and decode custom data types to JSON"
-description: "The pluggable derivation system quickly gives custom types new capabilities."
+description: "The pluggable derivation system gives custom types new capabilities."
 ---
 
 ```scala

From d17c14d01582d7afd41386d54cfbcbe59c64ff84 Mon Sep 17 00:00:00 2001
From: Jamie Thompson 
Date: Wed, 1 Feb 2023 12:16:20 +0100
Subject: [PATCH 7/9] address review: scale with text size

---
 _sass/components/code.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/_sass/components/code.scss b/_sass/components/code.scss
index cc3fa81c8..761243e04 100755
--- a/_sass/components/code.scss
+++ b/_sass/components/code.scss
@@ -72,7 +72,6 @@
         pre {
             margin: 0;
             padding: 0 25px 10px 25px; // looks better with no JS
-            height: 270px; // consistent height for all code blocks
 
             code {
                 padding: 0;

From b06c96fc938accb5ac7ca63b918cad1bc23af124 Mon Sep 17 00:00:00 2001
From: Jamie Thompson 
Date: Wed, 1 Feb 2023 15:23:35 +0100
Subject: [PATCH 8/9] address comment: compact mode for snippet buttons

---
 _includes/code-carousel.html |  8 ++++++--
 _layouts/frontpage.html      |  2 +-
 _sass/components/code.scss   | 35 ++++++++++++++++++++++++++++++-----
 _sass/utils/_variables.scss  |  4 ++++
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/_includes/code-carousel.html b/_includes/code-carousel.html
index 90f66b49f..dd25e6883 100644
--- a/_includes/code-carousel.html
+++ b/_includes/code-carousel.html
@@ -1,8 +1,12 @@
 {% assign firstOption = true %}
 {% assign darkClassOpt = '' %}
+{% assign compactClassOpt = '' %}
 {% if page.darkmodeCode %}
   {% assign darkClassOpt = 'dark' %}
 {% endif %}
+{% if include.compact %}
+  {% assign compactClassOpt = 'compact' %}
+{% endif %}