Skip to content

add explicit instructions to install page #1373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 11, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ defaults:

# Custom collections
collections:
install_tabs:
output: false
scala_items:
output: false
online_courses:
Expand Down
4 changes: 4 additions & 0 deletions _data/setup-scala.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
linux: curl -fL https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-linux.gz | gzip -d > cs && chmod +x cs && ./cs setup
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
macOS-brew: brew install coursier/formulas/coursier && cs setup
windows-link: https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-win32.zip
6 changes: 6 additions & 0 deletions _includes/alt-details.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div {% if include.id %} id="{{include.id}}" {% endif %} class="alt-details">
<button class="alt-details-toggle">{{include.title}}</button>
<div class="alt-details-detail">
{{include.detail}}
</div>
</div>
8 changes: 8 additions & 0 deletions _includes/code-snippet.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<div class="code-snippet-area">
{% unless include.nocopy %}
<div class="code-snippet-buttons">
<button class="copy-button"><i class="fa fa-clone"></i></button>
</div>
{% endunless %}
<pre class="code-snippet-display"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>
</div>
10 changes: 5 additions & 5 deletions _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

<!-- tweet feed -->
<script src="{{ site.baseurl }}/resources/js/tweetMachine-update.js" type="text/javascript" ></script>

<!-- prettify js -->
<script src="{{ site.baseurl }}/resources/js/vendor/prettify/prettify.js" type="text/javascript" ></script>
<script src="{{ site.baseurl }}/resources/js/vendor/prettify/lang-scala.js" type="text/javascript" ></script>
Expand All @@ -32,9 +32,9 @@
<script src="{{ site.baseurl }}/resources/js/vendor/unslider.js" type="text/javascript" ></script>

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

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

<!-- Blog search -->
<script src="{{ site.baseurl }}/resources/js/vendor/jekyll.search.min.js" type="text/javascript"></script>
Expand Down
15 changes: 15 additions & 0 deletions _includes/tabsection.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div {% if include.id %} id="{{include.id}}" {% endif %} class="tabsection">
<ul class="nav-tab">
{% for tabRoot in include.collection %}
<li class="item-tab">
<a class="item-tab-link {% if tabRoot.defaultTab %} active{% endif %}"
data-target="{{tabRoot.tabId}}">{{tabRoot.tabLabel}}</a>
</li>
{% endfor %}
</ul>
{% for tabRoot in include.collection %}
<div class="tabcontent {% if tabRoot.defaultTab %}active{% endif %}" data-tab="{{tabRoot.tabId}}">
{{tabRoot.content}}
</div>
{% endfor %}
</div>
20 changes: 20 additions & 0 deletions _install_tabs/1-macos.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
tabId: macos
tabLabel: macOS
---
<div class="text-step wrap-inline">
<div class="wrap">
<p>Run the following command in your terminal, following the on-screen instructions:</p>
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %}
{% assign homebrewAlt = "Alternatively, if you don't use Homebrew:" %}
{% capture homebrewDetail %}
<div class="wrap-narrow">
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %}
</div>
{% endcapture %}
{% include alt-details.html
title=homebrewAlt
detail=homebrewDetail
%}
</div>
</div>
10 changes: 10 additions & 0 deletions _install_tabs/2-linux.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
tabId: linux
tabLabel: Linux
---
<div class="text-step wrap-inline">
<div class="wrap">
<p>Run the following command in your terminal, following the on-screen instructions:</p>
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %}
</div>
</div>
10 changes: 10 additions & 0 deletions _install_tabs/3-windows.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
tabId: windows
tabLabel: Windows
---
<div class="text-step wrap-inline">
<div class="wrap">
<p>Download and execute <a href="{{site.data.setup-scala.windows-link}}">the Scala
installer for Windows</a> based on Coursier, and follow the on-screen instructions.</p>
</div>
</div>
13 changes: 13 additions & 0 deletions _install_tabs/4-other.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
tabId: other
tabLabel: Other
defaultTab: true
---
<div class="text-step wrap-inline">
<div class="wrap">
<noscript>
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
</noscript>
<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>
</div>
</div>
124 changes: 88 additions & 36 deletions _layouts/download.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,52 +16,104 @@ <h1>{{page.title}}</h1>

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

{% comment %}Compute the current scala release, default to Scala 2 version{% endcomment %}
{% assign currentScalaRelease = site.scalaversion %}
{% for release in site.data.scala-releases %}
{% if release.category == 'current_version' %}
{% assign releaseMajor = release.version | truncate:1, '' %}
{% if releaseMajor == '3' %}
{% comment %}found latest Scala 3 release{% endcomment %}
{% assign currentScalaRelease = release.version %}
{% endif %}
{% endif %}
{% endfor %}

{% capture scalaDemo %}$ scala -version
Scala code runner version {{currentScalaRelease}} -- Copyright 2002-2022, LAMP/EPFL{% endcapture %}

<section class="books">
<div class="wrap">
<div class="inner-box download">
<div class="main-download">
<h2>Install or Upgrade Scala</h2>
<div class="install-steps">
<div class="download-options">
<div class="download-left">
<span class="or">or</span>
<div class="description">
<img src="/resources/img/download/arrow-left.png" alt="">
<p>Recommended method for all Scala users.</p>
</div>
<a href="https://docs.scala-lang.org/getting-started.html" class="btn-download scala3">
<i class="fa fa-download"></i>
<span>Get Started with Scala</span>
</a>
<ul>
{% for tutorial in page.newcomertutorials %}
<li><a href="{{tutorial.url}}"><i class="fa fa-file-text-o"></i>{{tutorial.title}}</a></li>
{% endfor %}
</ul>
<div class="recommended-install">
<h2>Install Scala with <span style="font-weight: bold;">cs setup</span> (recommended)</h2>
<div>
<div class="text-step">
<p>To install Scala, it is recommended to use <code>cs setup</code>,
the Scala installer powered by Coursier. It installs everything necessary to use the latest Scala release from a
command line:
</p>
</div>
<div class="download-right">
<div class="description">
<img src="/resources/img/download/arrow-right.png" alt="">
<p>Best if you have an advanced use case.</p>
<div class="place-inline">
{% include tabsection.html id='install-cs-setup-tabs' collection=site.install_tabs %}
</div>
{% capture checkSetupDetail %}
<div class="text-step wrap-inline">
<div class="wrap">
<p>Check your setup with the command <code>scala -version</code>, which should output:</p>
{% include code-snippet.html nocopy=true language='bash' codeSnippet=scalaDemo %}
<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.
</p>
</div>
<a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
<i class="fa fa-list-ul"></i>
<span>Pick a Specific Release</span>
</a>
<ul>
{% for tutorial in page.advancedtutorials %}
<li><a href="{{tutorial.url}}"><i class="fa fa-file-text-o"></i>{{tutorial.title}}</a></li>
{% endfor %}
</ul>
</div>
{% endcapture %}
<div class="place-inline">
{% include alt-details.html
id='testing-your-setup'
title='Testing your setup'
detail=checkSetupDetail
%}
</div>
<p>If you are just beginning your journey with Scala,
we recommend that you read our getting started guide, which expands upon these details, teaching you how to build
your first Scala project:</p>
<br />
<a href="https://docs.scala-lang.org/getting-started.html" class="btn-download scala3">
<i class="fa fa-download"></i>
<span>Get Started with Scala</span>
</a>
</div>
</div>
<h2>Other ways to install Scala</h2>
<div class="wrap">
<a href="{{ site.baseurl }}/download/all.html" class="btn-download dl-find-all">
<i class="fa fa-list-ul"></i>
<span>Pick a Specific Release</span>
</a>
</div>
<p>Each Scala release has its own page listing alternative installation methods. Click the button above to
see the full list of Scala releases, or pick from the most recent releases below.</p>


<h3>What's new in Scala 3?</h3>
<p>
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>.
</p>
<div class="download-left">
<h3>Current releases</h3><br />
<ul>
{% for release in site.data.scala-releases %}
{% if release.category == "current_version" %}
<li>
<a href="/download/{{ release.version }}.html">
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="download-right">
<h3>Maintenance releases</h3>
<br />
<ul>
{% for release in site.data.scala-releases %}
{% if release.category == "maintenance_version" %}
<li>
<a href="/download/{{ release.version }}.html">
{{ release.title }}: <b>{{ release.version }}</b><br />Released on {{ release.release_date }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
Expand Down
15 changes: 15 additions & 0 deletions _sass/base/helper.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,21 @@
@include padding(0 20px);
}

.place-inline { // add vertical margin
@include outer-container;
@include margin(20px 0);
}

.wrap-inline { // add vertical padding
@include outer-container;
@include padding(20px 0);
}

.wrap-narrow {
@include outer-container;
@include padding(0 10px);
}

.dot {
font-size: 10px;
color: rgba($base-font-color-light, 0.6);
Expand Down
43 changes: 43 additions & 0 deletions _sass/components/alt-details.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// ALT-DETAILS
//------------------------------------------------
//------------------------------------------------

.alt-details {

.alt-details-toggle {
width: 100%;
border: none;
background-color: $brand-tertiary;
padding: 5px 10px;
border-radius: $border-radius-large;
font-size: $font-size-medium;
cursor: pointer;
font-weight: 500;
color: $gray-dark;

&:hover {
background-color: darken($brand-tertiary, 15%);
}

&:after {
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
font-family: "FontAwesome";
font-weight: 900;
font-size: 15px;
float: right;
margin-top: 2px;
}

&.alt-details-closed:after {
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
}
}

.alt-details-detail {
// The detail box appears to be underneath the toggle button
// so we add a padding to the top and push it up.
border: $base-border-gray;
padding-top: 15px;
margin-top: -15px;
}
}
32 changes: 32 additions & 0 deletions _sass/components/code.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,35 @@

}
}

.code-snippet-area {
position: relative; // so we can position the buttons

&:hover {
// display the copy buttons on hover of the whole area
.code-snippet-buttons {
opacity: 0.95;

&:active {
transition: none;
opacity: 0.7;
}
}
}

.code-snippet-buttons {
opacity: 0; // default invisible until hover
transition: $base-transition;
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;
}
}
}
Loading