Skip to content

Commit 2e2c122

Browse files
bishaboshabishabosha
committed
add explicit instructions to install page
1 parent fc05a0f commit 2e2c122

File tree

17 files changed

+515
-49
lines changed

17 files changed

+515
-49
lines changed

‎_config.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ defaults:
3434

3535
# Custom collections
3636
collections:
37+
install_tabs:
38+
output: false
3739
scala_items:
3840
output: false
3941
online_courses:

‎_data/setup-scala.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
linux: curl -fL https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-linux.gz | gzip -d > cs && chmod +x cs && ./cs setup
2+
macOS-default: curl -fL https://github.com/coursier/launchers/raw/master/cs-x86_64-apple-darwin.gz | gzip -d > cs && chmod +x cs && (xattr -d com.apple.quarantine cs || true) && ./cs setup
3+
macOS-brew: brew install coursier/formulas/coursier && cs setup
4+
windows-link: https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-win32.zip

‎_includes/alt-details.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="alt-details">
2+
<button class="alt-details-toggle" onclick="toggleElement(event, '{{include.targetId}}')">{{include.title}}</button>
3+
<div id="{{include.targetId}}" class="{{include.extraClasses}} alt-details-detail">
4+
{{include.detail}}
5+
</div>
6+
</div>

‎_includes/code-snippet.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="snippet">
2+
{% unless include.nocopy %}
3+
<div class="buttons">
4+
<div><button class="copy-button" onclick="copySnippet(event)"><i class="fa fa-clone"></i></button></div>
5+
</div>
6+
{% endunless %}
7+
<pre class="snippet-code"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>
8+
</div>

‎_includes/footer.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<!-- tweet feed -->
2525
<script src="{{ site.baseurl }}/resources/js/tweetMachine-update.js" type="text/javascript" ></script>
26-
26+
2727
<!-- prettify js -->
2828
<script src="{{ site.baseurl }}/resources/js/vendor/prettify/prettify.js" type="text/javascript" ></script>
2929
<script src="{{ site.baseurl }}/resources/js/vendor/prettify/lang-scala.js" type="text/javascript" ></script>
@@ -32,9 +32,9 @@
3232
<script src="{{ site.baseurl }}/resources/js/vendor/unslider.js" type="text/javascript" ></script>
3333

3434
<!-- Highlight -->
35-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" type="text/javascript"></script>
36-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/scala.min.js" type="text/javascript"></script>
37-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/java.min.js" type="text/javascript"></script>
35+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js" type="text/javascript"></script>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/scala.min.js" type="text/javascript"></script>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/java.min.js" type="text/javascript"></script>
3838

3939
<!-- CodeMirror -->
4040
<script src="{{ site.baseurl }}/resources/js/vendor/codemirror/codemirror.js" type="text/javascript"></script>
@@ -44,7 +44,7 @@
4444
{% if page.includeTOC == true %}
4545
<script src="/resources/js/vendor/jquery.sticky.js" type="text/javascript" ></script>
4646
<script src="/resources/js/vendor/toc.js" type="text/javascript" ></script>
47-
{% endif %}
47+
{% endif %}
4848

4949
<!-- Blog search -->
5050
<script src="{{ site.baseurl }}/resources/js/vendor/jekyll.search.min.js" type="text/javascript"></script>

‎_includes/tabsection.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="tabsection {{include.extraClasses}}">
2+
<div class="tab">
3+
{% for tabRoot in include.collection %}
4+
<button id="{{include.category}}-tab-{{tabRoot.tabId}}"
5+
class="tablinks-{{include.category}} tablinks{%if tabRoot.isDefault %} default-tab{% endif %}{% if tabRoot.isDefault or tabRoot.fallbackNoJS %} active{% endif %}"
6+
onclick="openTab(event, '{{include.category}}', '{{tabRoot.tabId}}')">{{tabRoot.tabLabel}}</button>
7+
{% endfor %}
8+
</div>
9+
{% for tabRoot in include.collection %}
10+
<div id="{{include.category}}-{{tabRoot.tabId}}"
11+
{% if tabRoot.isDefault or tabRoot.fallbackNoJS %}
12+
style="display:block;"
13+
{% else %}
14+
style="display: none;"
15+
{% endif %}
16+
class="tabcontent-{{include.category}} tabcontent">{{tabRoot.content}}</div>
17+
{% endfor %}
18+
</div>

‎_install_tabs/1-macos.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
tabId: macos
3+
tabLabel: macOS
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
10+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %}
11+
{% assign homebrewAlt = "Alternatively, if you don't use Homebrew:" %}
12+
{% capture homebrewDetail %}
13+
<div class="wrap">
14+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %}
15+
</div>
16+
{% endcapture %}
17+
{% include alt-details.html
18+
title=homebrewAlt
19+
detail=homebrewDetail
20+
targetId='macos-get-started-alt'
21+
extraClasses='scala-text-large alt-details-detail'
22+
%}
23+
</div>
24+
</div>
25+
</div>
26+
</div>

‎_install_tabs/2-linux.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
tabId: linux
3+
tabLabel: Linux
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
10+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %}
11+
</div>
12+
</div>
13+
</div>
14+
</div>

‎_install_tabs/3-windows.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
tabId: windows
3+
tabLabel: Windows
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Download and execute <a href="{{site.data.setup-scala.windows-link}}">the Scala
10+
installer for Windows</a> based on Coursier, and follow the on-screen instructions.</p>
11+
</div>
12+
</div>
13+
</div>
14+
</div>

‎_install_tabs/4-other.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
tabId: other
3+
tabLabel: Other
4+
fallbackNoJS: true
5+
---
6+
<div class="scala-in-action-content">
7+
<div class="scala-in-action-code">
8+
<div class="wrap">
9+
<div class="scala-text scala-text-large">
10+
<noscript>
11+
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
12+
</noscript>
13+
<p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation" target="_blank">how to install and run <code>cs setup</code></a>.</p>
14+
</div>
15+
</div>
16+
</div>
17+
</div>

‎_layouts/download.html

Lines changed: 85 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,100 @@ <h1>{{page.title}}</h1>
1616

1717
{% comment %}Specific content from child layouts{% endcomment %}
1818

19+
{% comment %}Compute the current scala release, default to Scala 2 version{% endcomment %}
20+
{% assign currentScalaRelease = site.scalaversion %}
21+
{% for release in site.data.scala-releases %}
22+
{% if release.category == 'current_version' %}
23+
{% assign releaseMajor = release.version | truncate:1, '' %}
24+
{% if releaseMajor == '3' %}
25+
{% comment %}found latest Scala 3 release{% endcomment %}
26+
{% assign currentScalaRelease = release.version %}
27+
{% endif %}
28+
{% endif %}
29+
{% endfor %}
30+
31+
{% capture scalaDemo %}$ scala -version
32+
Scala code runner version {{currentScalaRelease}} -- Copyright 2002-2022, LAMP/EPFL{% endcapture %}
33+
1934
<section class="books">
2035
<div class="wrap">
2136
<div class="inner-box download">
2237
<div class="main-download">
23-
<h2>Install or Upgrade Scala</h2>
24-
<div class="install-steps">
25-
<div class="download-options">
26-
<div class="download-left">
27-
<span class="or">or</span>
28-
<div class="description">
29-
<img src="/resources/img/download/arrow-left.png" alt="">
30-
<p>Recommended method for all Scala users.</p>
31-
</div>
32-
<a href="https://docs.scala-lang.org/getting-started.html" class="btn-download scala3">
33-
<i class="fa fa-download"></i>
34-
<span>Get Started with Scala</span>
35-
</a>
36-
<ul>
37-
{% for tutorial in page.newcomertutorials %}
38-
<li><a href="{{tutorial.url}}"><i class="fa fa-file-text-o"></i>{{tutorial.title}}</a></li>
39-
{% endfor %}
40-
</ul>
41-
</div>
42-
<div class="download-right">
43-
<div class="description">
44-
<img src="/resources/img/download/arrow-right.png" alt="">
45-
<p>Best if you have an advanced use case.</p>
38+
<div class="recommended-install scala-in-action">
39+
<div class="scala-in-action-content">
40+
<div class="scala-in-action-code">
41+
<h2>Install Scala with <span style="font-weight: bold;">cs setup</span> (recommended)</h2>
42+
<div class="scala-text scala-text-large">
43+
<p>To install Scala, it is recommended to use <code>cs setup</code>,
44+
the Scala installer powered by Coursier. It installs everything necessary to use the latest Scala release from a
45+
command line:
46+
</p>
47+
{% include tabsection.html extraClasses='inline-tabs' category='get-started'
48+
collection=site.install_tabs %}
49+
{% capture checkSetupDetail %}
50+
<div class="wrap">
51+
<p>Check your setup with the command <code>scala -version</code>, which should output:</p>
52+
{% include code-snippet.html nocopy=true language='bash' codeSnippet=scalaDemo %}
53+
<p>If that does not work, you may need to log out and log back in (or reboot) in order for the changes to take effect.
54+
</p>
55+
</div>
56+
{% endcapture %}
57+
{% include alt-details.html
58+
title='Testing your setup'
59+
detail=checkSetupDetail
60+
targetId='macos-get-started-alt1'
61+
extraClasses='scala-text scala-text-large'
62+
%}
63+
<p>If you are just beginning your journey with Scala,
64+
we recommend that you read our getting started guide, which expands upon these details, teaching you how to build your first Scala project:</p>
65+
<br />
66+
<a href="https://docs.scala-lang.org/getting-started.html" class="btn-download scala3">
67+
<i class="fa fa-download"></i>
68+
<span>Get Started with Scala</span>
69+
</a>
4670
</div>
47-
<a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
48-
<i class="fa fa-list-ul"></i>
49-
<span>Pick a Specific Release</span>
50-
</a>
51-
<ul>
52-
{% for tutorial in page.advancedtutorials %}
53-
<li><a href="{{tutorial.url}}"><i class="fa fa-file-text-o"></i>{{tutorial.title}}</a></li>
54-
{% endfor %}
55-
</ul>
5671
</div>
5772
</div>
5873
</div>
74+
<h2>Other ways to install Scala</h2>
75+
<div class="wrap">
76+
<a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
77+
<i class="fa fa-list-ul"></i>
78+
<span>Pick a Specific Release</span>
79+
</a>
80+
</div>
81+
<p>Each Scala release has its own page listing alternative installation methods. Click the button above to
82+
see the full list of Scala releases, or pick from the most recent releases below.</p>
5983

60-
61-
<h3>What's new in Scala 3?</h3>
62-
<p>
63-
For a summary of important changes in Scala 3, see <a href="https://docs.scala-lang.org/scala3/new-in-scala3.html">this page</a>.
64-
</p>
84+
<div class="download-left">
85+
<h3>Current releases</h3><br />
86+
<ul>
87+
{% for release in site.data.scala-releases %}
88+
{% if release.category == "current_version" %}
89+
<li>
90+
<a href="/download/{{ release.version }}.html">
91+
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
92+
</a>
93+
</li>
94+
{% endif %}
95+
{% endfor %}
96+
</ul>
97+
</div>
98+
<div class="download-right">
99+
<h3>Maintenance releases</h3>
100+
<br />
101+
<ul>
102+
{% for release in site.data.scala-releases %}
103+
{% if release.category == "maintenance_version" %}
104+
<li>
105+
<a href="/download/{{ release.version }}.html">
106+
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
107+
</a>
108+
</li>
109+
{% endif %}
110+
{% endfor %}
111+
</ul>
112+
</div>
65113
</div>
66114
</div>
67115
</div>

‎_sass/layout/alt-details.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// ALT-DETAILS
2+
//------------------------------------------------
3+
//------------------------------------------------
4+
5+
.alt-details {
6+
margin: 10px 0px;
7+
8+
button.alt-details-toggle {
9+
width: 100%;
10+
border: none;
11+
background-color: #b635c4;
12+
padding: 5px 10px;
13+
border-radius: 15px;
14+
font-size: $font-size-medium;
15+
cursor: pointer;
16+
font-weight: 500;
17+
color: #fff;
18+
19+
&:hover {
20+
background-color: #941fa1;
21+
}
22+
23+
&:after {
24+
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
25+
font-family: "FontAwesome";
26+
font-weight: 900;
27+
font-size: 15px;
28+
color: #fff;
29+
float: right;
30+
margin-top: 2px;
31+
}
32+
33+
&.alt-details-closed:after {
34+
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
35+
}
36+
}
37+
38+
.alt-details-detail {
39+
background-color: rgb(248, 226, 255);
40+
border: 1px solid rgb(239, 207, 248);
41+
padding-top: 25px;
42+
padding-bottom: 10px;
43+
margin-top: -15px;
44+
margin-bottom: 10px;
45+
}
46+
}

‎_sass/layout/download.scss

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,9 @@
1111
color: rgb(134,161,166);
1212
}
1313

14-
.wrap {
15-
margin-bottom: 4em;
16-
}
17-
1814
h2 {
1915
margin-top: 2em;
16+
margin-bottom: 1em;
2017
}
2118

2219
&.select-language {
@@ -90,14 +87,20 @@
9087
@include shift(0);
9188
}
9289

90+
.recommended-install {
91+
.tabsection {
92+
background: $gray-lighter;
93+
}
94+
}
95+
9396
h2 {
9497
margin-top: 0;
98+
margin-bottom: 20px;
9599
font-size: 1.75rem;
96100
}
97101

98102
.install-steps {
99103
@include clearfix;
100-
margin-top: 48px;
101104
border-bottom: $base-border-gray;
102105
padding-bottom: 60px;
103106

0 commit comments

Comments
 (0)