Install or Upgrade Scala
-
-
-
- or
-
diff --git a/_sass/base/helper.scss b/_sass/base/helper.scss
index 1b32d3116..46c174028 100755
--- a/_sass/base/helper.scss
+++ b/_sass/base/helper.scss
@@ -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);
diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss
new file mode 100644
index 000000000..da79a728b
--- /dev/null
+++ b/_sass/components/alt-details.scss
@@ -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"; //
+ font-family: "FontAwesome";
+ font-weight: 900;
+ font-size: 15px;
+ float: right;
+ margin-top: 2px;
+ }
+
+ &.alt-details-closed:after {
+ content: "\f138"; //
+ }
+ }
+
+ .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;
+ }
+}
diff --git a/_sass/components/code.scss b/_sass/components/code.scss
index e771eb6ad..5e945b819 100755
--- a/_sass/components/code.scss
+++ b/_sass/components/code.scss
@@ -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;
+ }
+ }
+}
diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss
index b5a9bb89c..625668927 100755
--- a/_sass/components/tab.scss
+++ b/_sass/components/tab.scss
@@ -7,10 +7,10 @@
@include display(flex);
@include align-items(center);
@include justify-content(flex-start);
- margin-bottom: 10px;
.item-tab {
a {
+ transition: none; // do not animate the transition to active
color: $base-font-color-light;
display: block;
padding: 0 20px 10px;
@@ -23,8 +23,13 @@
color: $base-font-color;
}
+ &:hover {
+ cursor: pointer;
+ }
+
&.active {
border-bottom: 2px solid $brand-primary;
+ padding: 0 20px 8px; // so text does not jump up when active
color: $brand-primary;
pointer-events: none;
}
@@ -34,10 +39,26 @@
@include bp(small) {
@include justify-content(space-between);
.item-tab {
- a {
- padding: 0 10px 10px;
- font-size: $font-size-medium;
- }
+ a {
+ transition: none; // do not animate the transition to active
+ padding: 0 10px 10px;
+ font-size: $font-size-medium;
+ }
}
}
}
+
+.tabsection {
+ border-bottom: $base-border-gray;
+ border-left: $base-border-gray;
+ border-right: $base-border-gray;
+ border-radius: $border-radius-medium;
+}
+
+.tabcontent {
+ display: none;
+
+ &.active {
+ display: block;
+ }
+}
diff --git a/_sass/layout/download.scss b/_sass/layout/download.scss
index 3809cbdf9..440e91e41 100755
--- a/_sass/layout/download.scss
+++ b/_sass/layout/download.scss
@@ -8,15 +8,12 @@
}
h1 {
- color: rgb(134,161,166);
- }
-
- .wrap {
- margin-bottom: 4em;
+ color: $gray-heading;
}
h2 {
margin-top: 2em;
+ margin-bottom: 1em;
}
&.select-language {
@@ -92,12 +89,12 @@
h2 {
margin-top: 0;
+ margin-bottom: 20px;
font-size: 1.75rem;
}
.install-steps {
@include clearfix;
- margin-top: 48px;
border-bottom: $base-border-gray;
padding-bottom: 60px;
diff --git a/_sass/layout/type-md.scss b/_sass/layout/type-md.scss
index 25ac69fd3..37f7786c8 100755
--- a/_sass/layout/type-md.scss
+++ b/_sass/layout/type-md.scss
@@ -139,27 +139,33 @@
text-decoration: line-through;
}
+ li,
+ p,
+ pre {
+ // common code for all code (inline and blocks)
+ code {
+ border: $base-border-gray;
+ }
+ }
+
li,
p {
code {
font-family: 'Consolas';
- @include border-radius($border-radius-small);
- font-size: $font-size-medium;
- background: $gray-lighter;
- color: #667b83;
- // border: 1px solid #ced7d7;
- padding: 0 6px;
- margin: 0 4px;
+ background-color: #fff;
+ color: #859900;
+ @include border-radius($border-radius-medium);
+ padding: 2px 6px;
}
}
pre {
- margin-bottom: 36px;
-
code {
- padding: 20px;
+ overflow-x: auto;
+ display: block;
font-size: $font-size-medium;
@include border-radius($border-radius-base);
+ padding: 10px 7px;
}
}
diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss
index dedfcd52f..f4abd0aa7 100755
--- a/_sass/utils/_variables.scss
+++ b/_sass/utils/_variables.scss
@@ -18,6 +18,7 @@ $gray-light: #E5EAEA;
$gray-lighter: #F0F3F3;
$apple-blue: #6dccf5;
$std-link: #23aad1;
+$gray-heading: rgb(134, 161, 166);
//-------------------------------------------------
$headings-font-color: $gray-dark;
@@ -79,6 +80,8 @@ $padding-small: 20px;
//------------------------------------------------
$border-radius-base: 3px;
$border-radius-small: 2px;
+$border-radius-medium: 10px;
+$border-radius-large: 15px;
// Breakpoints
//------------------------------------------------
diff --git a/resources/css/style.scss b/resources/css/style.scss
index d7ba6beef..2fa134f89 100755
--- a/resources/css/style.scss
+++ b/resources/css/style.scss
@@ -65,6 +65,7 @@
@import 'components/call-to-action';
@import 'components/slider';
@import 'components/heading-line';
+@import 'components/alt-details';
@import 'components/card';
@import 'components/calendar';
@import 'components/tooltip';
diff --git a/resources/js/functions.js b/resources/js/functions.js
index 8898a9aab..c36339b81 100644
--- a/resources/js/functions.js
+++ b/resources/js/functions.js
@@ -178,6 +178,21 @@ var toggleStickyToc = function() {
}
}
+$(document).ready(function() {
+ // for each .alt-details div, find the .alt-details-toggle button,
+ // and add a click handler to toggle the visibility of the .alt-details-detail
+
+ $('.alt-details').each(function() {
+ var toggle = $(this).find('.alt-details-toggle');
+ var details = $(this).find('.alt-details-detail');
+ toggle.click(function() {
+ details.css('display') === 'none' ? details.show() : details.hide();
+ toggle.toggleClass('alt-details-closed');
+ });
+ toggle.click();
+ });
+});
+
// Blog search
$(document).ready(function() {
if ($("#blog-search-bar").length) {
@@ -257,14 +272,6 @@ function getOS() {
return osname;
}
-$(document).ready(function() {
- if ($(".main-download").length) {
- var os = getOS();
- var stepOneContent = $("#stepOne-" + os).html();
- $("#download-step-one").html(stepOneContent);
- }
-});
-
$(document).ready(function() {
@@ -299,6 +306,65 @@ $(document).ready(function() {
$("#users-os").text(os);
});
+$(document).ready(function() {
+ // for each code snippet area, find the copy button,
+ // and add a click listener that will copy text from
+ // the code area to the clipboard
+ $(".code-snippet-area").each(function() {
+ var area = this;
+ $(area).children(".code-snippet-buttons").children("button.copy-button").click(function () {
+ var code = $(area).children(".code-snippet-display").children("code").text();
+ window.navigator.clipboard.writeText(code);
+ });
+ });
+});
+
+$(document).ready(function () {
+ if ($(".main-download").length) {
+ var os = getOS();
+ var stepOneContent = $("#stepOne-" + os).html();
+ $("#download-step-one").html(stepOneContent);
+ }
+});
+
+$(document).ready(function () {
+ $('.tabsection').each(function () {
+ var tabsection = this;
+ $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () {
+ var tabLink = this;
+ var targetTab = $(tabLink).attr('data-target');
+ $(tabLink).click(function () {
+ console.log("clicked on " + targetTab);
+ $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function() {
+ var otherTab = this;
+ var otherTarget = $(otherTab).attr('data-target');
+ otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active');
+ })
+ $(tabsection).children('.tabcontent').each(function() {
+ var tabContent = this;
+ var tabId = $(tabContent).attr('data-tab');
+ targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active');
+ });
+ });
+ });
+ });
+});
+
+$(document).ready(function () {
+ // click the get-started tab corresponding to the users OS.
+ if ($(".main-download").length) {
+ var os = getOS();
+ if (os === 'unix') {
+ os = 'linux';
+ }
+ $("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () {
+ var targetTab = $(this).attr("data-target");
+ if (targetTab === os) {
+ $(this).click();
+ }
+ });
+ }
+});
var image = { width: 1680, height: 1100 };
var target = { x: 1028, y: 290 };
- 
-
-
-
- Get Started with Scala
-
-
- Recommended method for all Scala users.
--
- {% for tutorial in page.newcomertutorials %}
-
- {{tutorial.title}} - {% endfor %} -
+
Install Scala with cs setup (recommended)
+
+
+
- To install Scala, it is recommended to use cs setup,
+ the Scala installer powered by Coursier. It installs everything necessary to use the latest Scala release from a
+ command line:
+
-
+
- 
-
+ + + Get Started with Scala +
- Best if you have an advanced use case.
+
+ {% include tabsection.html id='install-cs-setup-tabs' collection=site.install_tabs %}
+
+ {% capture checkSetupDetail %}
+
+
+ {% endcapture %}
+
+
-
-
- Pick a Specific Release
-
- Check your setup with the command scala -version, which should output:
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. +
-
- {% for tutorial in page.advancedtutorials %}
-
- {{tutorial.title}} - {% endfor %} -
+ {% include alt-details.html
+ id='testing-your-setup'
+ title='Testing your setup'
+ detail=checkSetupDetail
+ %}
+
+ 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:
++ + + Get Started with Scala +
Other ways to install Scala
+ +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.
- -What's new in Scala 3?
-- For a summary of important changes in Scala 3, see this page. -
+
+
+
+ Current releases
+
-
+ {% for release in site.data.scala-releases %}
+ {% if release.category == "current_version" %}
+
-
+
+ {{ release.title }}: {{ release.version }}
Released on {{ release.release_date }} + +
+ {% endif %}
+ {% endfor %}
+
+
+
Maintenance releases
++
-
+ {% for release in site.data.scala-releases %}
+ {% if release.category == "maintenance_version" %}
+
-
+
+ {{ release.title }}: {{ release.version }}
Released on {{ release.release_date }} + +
+ {% endif %}
+ {% endfor %}
+