Skip to content

Commit ea76c38

Browse files
bishaboshabishabosha
committed
add explicit instructions to install page
1 parent 33c70ce commit ea76c38

File tree

19 files changed

+388
-60
lines changed

19 files changed

+388
-60
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 {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
2+
<button class="alt-details-toggle">{{include.title}}</button>
3+
<div class="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="code-snippet-area">
2+
{% unless include.nocopy %}
3+
<div class="code-snippet-buttons">
4+
<button class="copy-button"><i class="fa fa-clone"></i></button>
5+
</div>
6+
{% endunless %}
7+
<pre class="code-snippet-display"><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: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
2+
<ul class="nav-tab">
3+
{% for tabRoot in include.collection %}
4+
<li class="item-tab">
5+
<a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
6+
data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
7+
</li>
8+
{% endfor %}
9+
</ul>
10+
{% for tabRoot in include.collection %}
11+
<div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
12+
{{tabRoot.content}}
13+
</div>
14+
{% endfor %}
15+
</div>

‎_install_tabs/1-macos.html

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

‎_install_tabs/2-linux.html

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

‎_install_tabs/3-windows.html

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

‎_install_tabs/4-other.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
tabId: other
3+
tabLabel: Other
4+
defaultTab: true
5+
---
6+
<div class="text-area-code wrap-inline">
7+
<div class="wrap">
8+
<noscript>
9+
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
10+
</noscript>
11+
<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>
12+
</div>
13+
</div>

‎_layouts/download.html

Lines changed: 86 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,52 +16,102 @@ <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>
38+
<div class="recommended-install">
39+
<h2>Install Scala with <span style="font-weight: bold;">cs setup</span> (recommended)</h2>
40+
<div>
41+
<p>To install Scala, it is recommended to use <code>cs setup</code>,
42+
the Scala installer powered by Coursier. It installs everything necessary to use the latest Scala release from a
43+
command line:
44+
</p>
45+
<div class="place-inline">
46+
{% include tabsection.html id='install-cs-setup-tabs' collection=site.install_tabs %}
4147
</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>
48+
{% capture checkSetupDetail %}
49+
<div class="text-area-code wrap-inline">
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
54+
effect.
55+
</p>
4656
</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>
5657
</div>
58+
{% endcapture %}
59+
<div class="place-inline">
60+
{% include alt-details.html
61+
id='testing-your-setup'
62+
title='Testing your setup'
63+
detail=checkSetupDetail
64+
%}
65+
</div>
66+
<p>If you are just beginning your journey with Scala,
67+
we recommend that you read our getting started guide, which expands upon these details, teaching you how to build
68+
your first Scala project:</p>
69+
<br />
70+
<a href="https://docs.scala-lang.org/getting-started.html" class="btn-download scala3">
71+
<i class="fa fa-download"></i>
72+
<span>Get Started with Scala</span>
73+
</a>
5774
</div>
5875
</div>
76+
<h2>Other ways to install Scala</h2>
77+
<div class="wrap">
78+
<a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
79+
<i class="fa fa-list-ul"></i>
80+
<span>Pick a Specific Release</span>
81+
</a>
82+
</div>
83+
<p>Each Scala release has its own page listing alternative installation methods. Click the button above to
84+
see the full list of Scala releases, or pick from the most recent releases below.</p>
5985

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>
86+
<div class="download-left">
87+
<h3>Current releases</h3><br />
88+
<ul>
89+
{% for release in site.data.scala-releases %}
90+
{% if release.category == "current_version" %}
91+
<li>
92+
<a href="/download/{{ release.version }}.html">
93+
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
94+
</a>
95+
</li>
96+
{% endif %}
97+
{% endfor %}
98+
</ul>
99+
</div>
100+
<div class="download-right">
101+
<h3>Maintenance releases</h3>
102+
<br />
103+
<ul>
104+
{% for release in site.data.scala-releases %}
105+
{% if release.category == "maintenance_version" %}
106+
<li>
107+
<a href="/download/{{ release.version }}.html">
108+
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
109+
</a>
110+
</li>
111+
{% endif %}
112+
{% endfor %}
113+
</ul>
114+
</div>
65115
</div>
66116
</div>
67117
</div>

‎_sass/base/helper.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,21 @@
77
@include padding(0 20px);
88
}
99

10+
.place-inline { // add vertical margin
11+
@include outer-container;
12+
@include margin(20px 0);
13+
}
14+
15+
.wrap-inline { // add vertical padding
16+
@include outer-container;
17+
@include padding(20px 0);
18+
}
19+
20+
.wrap-narrow {
21+
@include outer-container;
22+
@include padding(0 10px);
23+
}
24+
1025
.dot {
1126
font-size: 10px;
1227
color: rgba($base-font-color-light, 0.6);

‎_sass/components/alt-details.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// ALT-DETAILS
2+
//------------------------------------------------
3+
//------------------------------------------------
4+
5+
.alt-details {
6+
7+
.alt-details-toggle {
8+
width: 100%;
9+
border: none;
10+
background-color: $brand-tertiary;
11+
padding: 5px 10px;
12+
border-radius: 15px;
13+
font-size: $font-size-medium;
14+
cursor: pointer;
15+
font-weight: 500;
16+
color: $gray-dark;
17+
18+
&:hover {
19+
background-color: darken($brand-tertiary, 15%);
20+
}
21+
22+
&:after {
23+
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
24+
font-family: "FontAwesome";
25+
font-weight: 900;
26+
font-size: 15px;
27+
float: right;
28+
margin-top: 2px;
29+
}
30+
31+
&.alt-details-closed:after {
32+
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
33+
}
34+
}
35+
36+
.alt-details-detail {
37+
// The detail box appears to be underneath the toggle button
38+
// so we add a padding to the top and push it up.
39+
border: $base-border-gray;
40+
padding-top: 15px;
41+
margin-top: -15px;
42+
}
43+
}

‎_sass/components/code.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,53 @@
2323

2424
}
2525
}
26+
27+
.text-area-code {
28+
code {
29+
padding: 2px 6px;
30+
color: #859900;
31+
background-color: #fff;
32+
border-radius: 10px;
33+
border: $base-border-gray;
34+
}
35+
}
36+
37+
.code-snippet-area {
38+
position: relative; // so we can position the buttons
39+
40+
&:hover {
41+
// display the copy buttons on hover of the whole area
42+
.code-snippet-buttons {
43+
opacity: 0.95;
44+
45+
&:active {
46+
transition: none;
47+
opacity: 0.7;
48+
}
49+
}
50+
}
51+
52+
.code-snippet-buttons {
53+
opacity: 0; // default invisible until hover
54+
transition: $base-transition;
55+
position: absolute; // so we can position the buttons
56+
right: 4px;
57+
top: 3px;
58+
59+
button {
60+
border: none;
61+
background: #fff;
62+
font-size: $font-size-medium;
63+
color: $gray-darker;
64+
cursor: pointer;
65+
}
66+
}
67+
68+
.code-snippet-display {
69+
code {
70+
overflow-x: auto;
71+
display: block;
72+
border: $base-border-gray;
73+
}
74+
}
75+
}

0 commit comments

Comments
 (0)