Skip to content

Commit b9ffe80

Browse files
sjrdsjrd
authored
Merge pull request #1462 from scalacenter/add-code-carousel
Add carousel of code snippets to front page
2 parents 0dcebe2 + 26f0013 commit b9ffe80

27 files changed

+664
-93
lines changed

‎_config.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ defaults:
3636
collections:
3737
install_tabs:
3838
output: false
39+
scala_carousel_items:
40+
output: false
3941
scala_items:
4042
output: false
4143
online_courses:

‎_includes/code-carousel.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{% assign firstOption = true %}
2+
{% assign darkClassOpt = '' %}
3+
{% assign compactClassOpt = '' %}
4+
{% if page.darkmodeCode %}
5+
{% assign darkClassOpt = 'dark' %}
6+
{% endif %}
7+
{% if include.compact %}
8+
{% assign compactClassOpt = 'compact' %}
9+
{% endif %}
10+
<div id="{{include.id}}" class="code-carousel">
11+
{% assign totalSize = 0 %}
12+
{% for example in include.collection %}
13+
<input
14+
type="radio"
15+
name="{{include.id}}_tabs"
16+
id="{{example.optionId}}_description"
17+
data-target="{{example.optionId}}"
18+
class="code-carousel_control"
19+
hidden
20+
aria-hidden="true"
21+
{% if firstOption %}checked{% endif %}
22+
>
23+
{% assign firstOption = false %}
24+
{% assign totalSize = totalSize | plus: 1 %}
25+
{% endfor %}
26+
<div class="content-area">
27+
{% for example in include.collection %}
28+
<section id="{{example.optionId}}_content">
29+
<div class="code-element {{darkClassOpt}} {{compactClassOpt}}">
30+
<div class="bar-code"><span>{{example.codeTitle}}</span></div>
31+
<div class=" {{darkClassOpt}} code-snippet-buttons {{compactClassOpt}}">
32+
<button class="code-snippet-button">
33+
<a href="{{ example.scastieLink }}" target="_blank">
34+
Run in playground <i class="fa-solid fa-play"></i>
35+
</a>
36+
</button>
37+
</div>
38+
<div class="code-snippet-area">
39+
<div class="progress-label code-background {{darkClassOpt}}">
40+
{{forloop.index}}<span class="progress-out-of"> /{{totalSize}}</span>
41+
</div>
42+
{% if forloop.first %}
43+
{% assign previousIdx = include.collection.length | minus: 1 %}
44+
{% else %}
45+
{% assign previousIdx = forloop.index0 | minus: 1 %}
46+
{% endif %}
47+
{% if forloop.last %}
48+
{% assign nextIdx = 0 %}
49+
{% else %}
50+
{% assign nextIdx = forloop.index %}
51+
{% endif %}
52+
<div class="arrow-switcher arrow-switcher_left {{darkClassOpt}}">
53+
<label for="{{include.collection[previousIdx].optionId}}_description">
54+
<i class="fa-solid fa-chevron-left"></i>
55+
</label>
56+
</div>
57+
<div class="arrow-switcher arrow-switcher_right {{darkClassOpt}}">
58+
<label for="{{include.collection[nextIdx].optionId}}_description">
59+
<i class="fa-solid fa-chevron-right"></i>
60+
</label>
61+
</div>
62+
<div class="code-background {{darkClassOpt}}">
63+
<!-- the code snippet should be a raw markdown code block -->
64+
{{example.content}}
65+
</div>
66+
</div>
67+
</div>
68+
<p>{{example.description}}</p>
69+
</section>
70+
{% endfor %}
71+
</div>
72+
</div>

‎_includes/code-snippet.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="code-snippet-area">
22
{% unless include.nocopy %}
33
<div class="code-snippet-buttons">
4-
<button class="copy-button"><i class="fa fa-clone"></i></button>
4+
<button class="code-snippet-button copy-button"><i class="far fa-clone"></i></button>
55
</div>
66
{% endunless %}
77
<pre class="code-snippet-display"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>

‎_includes/headertop.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<meta name="twitter:creator" content="@scala_lang"/>
2020
{% if page.url %}
2121
<meta property="og:url" content="{{ site.url }}{{ page.url }}"/>
22-
{% endif %}
22+
{% endif %}
2323
<meta property="og:image" content="{{ site.url }}/resources/img/scala-spiral-3d-2-toned-down.png"/>
2424

2525
<meta name="viewport" content="width=device-width, initial-scale=1"/>
@@ -34,12 +34,18 @@
3434
<meta name="msapplication-TileColor" content="#15a9ce">
3535
<meta name="theme-color" content="#ffffff">
3636

37-
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
37+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
38+
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
39+
crossorigin="anonymous" referrerpolicy="no-referrer">
3840

3941
<!-- Custom stylesheet -->
4042
<link href="{{ site.baseurl }}/resources/css/unslider-dots.css" rel="stylesheet" type="text/css">
4143
<link href="{{ site.baseurl }}/resources/css/unslider.css" rel="stylesheet" type="text/css">
44+
{% if page.darkmodeCode %}
45+
<link rel="stylesheet" href="{{ site.baseurl }}/resources/css/highlightjs-dark.css" type="text/css" />
46+
{% else %}
4247
<link rel="stylesheet" href="{{ site.baseurl }}/resources/css/highlightjs.css" type="text/css" />
48+
{% endif %}
4349
<link rel="stylesheet" href="{{ site.baseurl }}/resources/css/style.css" type="text/css" />
4450
<link rel="stylesheet" href="{{ site.baseurl }}/resources/css/vendor/codemirror.css" type="text/css" />
4551
<link rel="stylesheet" href="{{ site.baseurl }}/resources/css/vendor/monokai.css" type="text/css" />

‎_layouts/frontpage.html

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,28 @@
3232
{% endfor %}
3333
</ul>
3434
</nav>
35+
</div>
36+
<div class="wrap">
3537
<!-- Inner Text -->
36-
<div class="inner-text">
37-
<h1>{{page.headerTitle}}</h1>
38-
<p>{{page.headerSubtitle}}</p>
39-
{% for release in site.data.scala-releases %}
40-
{% if release.category == "current_version" %}
41-
<a href="/download/{{ release.version }}.html" class="button">
42-
Scala {{ release.version }}
43-
</a>
44-
{% endif %}
45-
{% endfor %}
46-
<a href="/download/all.html" class="button">
47-
All Releases
48-
</a>
49-
</div>
50-
<div id="position-marker" class="marker">
51-
<div class="info-marker">
52-
<span class="arrow">
53-
<img src="/resources/img/frontpage/arrow.png" alt="pushpin">
54-
</span>
55-
{{site.data.common.texts.frontpageMarker}}
38+
<div class="col-lg-6">
39+
<div class="inner-text">
40+
<h1>{{page.headerTitle}}</h1>
41+
<p>{{page.headerSubtitle}}</p>
42+
{% for release in site.data.scala-releases %}
43+
{% if release.category == "current_version" %}
44+
<a href="/download/{{ release.version }}.html" class="button">
45+
Scala {{ release.version }}
46+
</a>
47+
{% endif %}
48+
{% endfor %}
49+
<a href="/download/all.html" class="button">
50+
All Releases
51+
</a>
5652
</div>
5753
</div>
54+
<div class="col-lg-6">
55+
{% include code-carousel.html id='scala-main-carousel' collection=site.scala_carousel_items compact=true %}
56+
</div>
5857
</div>
5958
</div>
6059
<!-- Scala Main Resources -->

‎_sass/components/alt-details.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
&:after {
3131
// show a right arrow at the end of the toggle element
3232
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
33-
font-family: "FontAwesome";
33+
font-family: "Font Awesome 6 Free";
3434
font-weight: 900;
3535
font-size: 15px;
3636
float: right;

0 commit comments

Comments
 (0)