Add carousel of code snippets to front page

_config.yml

@@ -36,6 +36,8 @@ defaults:
 collections:
   install_tabs:
     output: false
+  scala_carousel_items:
+    output: false
   scala_items:
     output: false
   online_courses:

_includes/code-carousel.html

@@ -0,0 +1,68 @@
+{% assign firstOption = true %}
+{% assign darkClassOpt = '' %}
+{% if page.darkmodeCode %}
+  {% assign darkClassOpt = 'dark' %}
+{% endif %}
+<div id="{{include.id}}" class="code-carousel">
+  {% assign totalSize = 0 %}
+  {% for example in include.collection %}
+  <input
+    type="radio"
+    name="{{include.id}}_tabs"
+    id="{{example.optionId}}_description"
+    data-target="{{example.optionId}}"
+    class="code-carousel_control"
+    hidden
+    aria-hidden="true"
+    {% if firstOption %}checked{% endif %}
+  >
+  {% assign firstOption = false %}
+  {% assign totalSize = totalSize | plus: 1 %}
+  {% endfor %}
+  <div class="content-area">
+    {% for example in include.collection %}
+    <section id="{{example.optionId}}_content">
+      <div class="code-element {{darkClassOpt}}">
+        <div class="bar-code"><span>{{example.codeTitle}}</span></div>
+        <div class="code-background {{darkClassOpt}} code-snippet-buttons">
+          <button class="code-snippet-button">
+            <a href="{{ example.scastieLink }}" target="_blank">
+              Run in playground <i class="fa-solid fa-play"></i>
+            </a>
+          </button>
+        </div>
+        <div class="code-snippet-area">
+          <div class="progress-label code-background {{darkClassOpt}}">
+            {{forloop.index}}<span class="progress-out-of"> /{{totalSize}}</span>
+          </div>
+          {% if forloop.first %}
+            {% assign previousIdx = include.collection.length | minus: 1 %}
+          {% else %}
+            {% assign previousIdx = forloop.index0 | minus: 1 %}
+          {% endif %}
+          {% if forloop.last %}
+            {% assign nextIdx = 0 %}
+          {% else %}
+            {% assign nextIdx = forloop.index %}
+          {% endif %}
+          <div class="arrow-switcher arrow-switcher_left {{darkClassOpt}}">
+            <label for="{{include.collection[previousIdx].optionId}}_description">
+              <i class="fa-solid fa-chevron-left"></i>
+            </label>
+          </div>
+          <div class="arrow-switcher arrow-switcher_right {{darkClassOpt}}">
+            <label for="{{include.collection[nextIdx].optionId}}_description">
+              <i class="fa-solid fa-chevron-right"></i>
+            </label>
+          </div>
+          <div class="code-background {{darkClassOpt}}">
+            <!-- the code snippet should be a raw markdown code block -->
+            {{example.content}}
+          </div>
+        </div>
+      </div>
+      <p>{{example.description}}</p>
+    </section>
+    {% endfor %}
+  </div>
+</div>

_includes/code-snippet.html

@@ -1,7 +1,7 @@
 <div class="code-snippet-area">
   {% unless include.nocopy %}
   <div class="code-snippet-buttons">
-    <button class="copy-button"><i class="fa fa-clone"></i></button>
+    <button class="code-snippet-button copy-button"><i class="far fa-clone"></i></button>
   </div>
   {% endunless %}
   <pre class="code-snippet-display"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>

_includes/headertop.html

@@ -19,7 +19,7 @@
     <meta name="twitter:creator" content="@scala_lang"/>
     {% if page.url %}
     <meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
-    {% endif %}    
+    {% endif %}
     <meta property="og:image" content="{{ site.url }}/resources/img/scala-spiral-3d-2-toned-down.png"/>
 
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
@@ -34,12 +34,18 @@
     <meta name="msapplication-TileColor" content="#15a9ce">
     <meta name="theme-color" content="#ffffff">
 
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+      crossorigin="anonymous" referrerpolicy="no-referrer">
 
     <!-- Custom stylesheet -->
     <link href="{{ site.baseurl }}/resources/css/unslider-dots.css" rel="stylesheet" type="text/css">
     <link href="{{ site.baseurl }}/resources/css/unslider.css" rel="stylesheet" type="text/css">
+    {% if page.darkmodeCode %}
+    <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/highlightjs-dark.css" type="text/css" />
+    {% else %}
     <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/highlightjs.css" type="text/css" />
+    {% endif %}
     <link rel="stylesheet" href="{{ site.baseurl }}/resources/css/style.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" />

_layouts/frontpage.html

@@ -32,29 +32,28 @@
             {% endfor %}
           </ul>
         </nav>
+      </div>
+      <div class="wrap">
         <!-- Inner Text -->
-        <div class="inner-text">
-          <h1>{{page.headerTitle}}</h1>
-          <p>{{page.headerSubtitle}}</p>
-          {% for release in site.data.scala-releases %}
-          {% if release.category == "current_version" %}
-          <a href="/download/{{ release.version }}.html" class="button">
-           Scala {{ release.version }}
-          </a>
-          {% endif %}
-          {% endfor %}
-          <a href="/download/all.html" class="button">
-            All Releases
-          </a>
-        </div>
-        <div id="position-marker" class="marker">
-          <div class="info-marker">
-              <span class="arrow">
-              <img src="/resources/img/frontpage/arrow.png" alt="pushpin">
-              </span>
-            {{site.data.common.texts.frontpageMarker}}
+        <div class="col-lg-6">
+          <div class="inner-text">
+            <h1>{{page.headerTitle}}</h1>
+            <p>{{page.headerSubtitle}}</p>
+            {% for release in site.data.scala-releases %}
+            {% if release.category == "current_version" %}
+            <a href="/download/{{ release.version }}.html" class="button">
+              Scala {{ release.version }}
+            </a>
+            {% endif %}
+            {% endfor %}
+            <a href="/download/all.html" class="button">
+              All Releases
+            </a>
           </div>
         </div>
+        <div class="col-lg-6">
+          {% include code-carousel.html id='scala-main-carousel' collection=site.scala_carousel_items %}
+        </div>
       </div>
     </div>
     <!-- Scala Main Resources -->

_sass/components/alt-details.scss

@@ -30,7 +30,7 @@
         &:after {
             // show a right arrow at the end of the toggle element
             content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
-            font-family: "FontAwesome";
+            font-family: "Font Awesome 6 Free";
             font-weight: 900;
             font-size: 15px;
             float: right;