From 7ac98d583e0a145ea1dbda32baae297a043e22a8 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Thu, 28 Apr 2022 17:45:52 +0200 Subject: [PATCH 1/2] add explicit instructions to install page --- _config.yml | 2 + _data/setup-scala.yml | 4 + _includes/alt-details.html | 6 ++ _includes/code-snippet.html | 8 ++ _includes/footer.html | 10 +-- _includes/tabsection.html | 15 ++++ _install_tabs/1-macos.html | 20 +++++ _install_tabs/2-linux.html | 10 +++ _install_tabs/3-windows.html | 10 +++ _install_tabs/4-other.html | 13 ++++ _layouts/download.html | 124 +++++++++++++++++++++--------- _sass/base/helper.scss | 15 ++++ _sass/components/alt-details.scss | 43 +++++++++++ _sass/components/code.scss | 50 ++++++++++++ _sass/components/tab.scss | 31 ++++++-- _sass/layout/download.scss | 9 +-- _sass/utils/_variables.scss | 1 + resources/css/style.scss | 1 + resources/js/functions.js | 82 ++++++++++++++++++-- 19 files changed, 394 insertions(+), 60 deletions(-) create mode 100644 _data/setup-scala.yml create mode 100644 _includes/alt-details.html create mode 100644 _includes/code-snippet.html create mode 100644 _includes/tabsection.html create mode 100644 _install_tabs/1-macos.html create mode 100644 _install_tabs/2-linux.html create mode 100644 _install_tabs/3-windows.html create mode 100644 _install_tabs/4-other.html create mode 100644 _sass/components/alt-details.scss diff --git a/_config.yml b/_config.yml index 8d7e45ef3..81423c076 100644 --- a/_config.yml +++ b/_config.yml @@ -34,6 +34,8 @@ defaults: # Custom collections collections: + install_tabs: + output: false scala_items: output: false online_courses: diff --git a/_data/setup-scala.yml b/_data/setup-scala.yml new file mode 100644 index 000000000..d1bb19a78 --- /dev/null +++ b/_data/setup-scala.yml @@ -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 diff --git a/_includes/alt-details.html b/_includes/alt-details.html new file mode 100644 index 000000000..457544612 --- /dev/null +++ b/_includes/alt-details.html @@ -0,0 +1,6 @@ +
+ +
+ {{include.detail}} +
+
diff --git a/_includes/code-snippet.html b/_includes/code-snippet.html new file mode 100644 index 000000000..bcdc9e81a --- /dev/null +++ b/_includes/code-snippet.html @@ -0,0 +1,8 @@ +
+ {% unless include.nocopy %} +
+ +
+ {% endunless %} + 
{{include.codeSnippet}}
+
diff --git a/_includes/footer.html b/_includes/footer.html index 71fc604ec..2afec6230 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -23,7 +23,7 @@ - + @@ -32,9 +32,9 @@ - - - + + + @@ -44,7 +44,7 @@ {% if page.includeTOC == true %} - {% endif %} + {% endif %} diff --git a/_includes/tabsection.html b/_includes/tabsection.html new file mode 100644 index 000000000..0ec1cb591 --- /dev/null +++ b/_includes/tabsection.html @@ -0,0 +1,15 @@ +
+ + {% for tabRoot in include.collection %} +
+ {{tabRoot.content}} +
+ {% endfor %} +
diff --git a/_install_tabs/1-macos.html b/_install_tabs/1-macos.html new file mode 100644 index 000000000..42b7063a1 --- /dev/null +++ b/_install_tabs/1-macos.html @@ -0,0 +1,20 @@ +--- +tabId: macos +tabLabel: macOS +--- +
+
+

Run the following command in your terminal, following the on-screen instructions:

+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} + {% assign homebrewAlt = "Alternatively, if you don't use Homebrew:" %} + {% capture homebrewDetail %} +
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} +
+ {% endcapture %} + {% include alt-details.html + title=homebrewAlt + detail=homebrewDetail + %} +
+
diff --git a/_install_tabs/2-linux.html b/_install_tabs/2-linux.html new file mode 100644 index 000000000..f1d703599 --- /dev/null +++ b/_install_tabs/2-linux.html @@ -0,0 +1,10 @@ +--- +tabId: linux +tabLabel: Linux +--- +
+
+

Run the following command in your terminal, following the on-screen instructions:

+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %} +
+
diff --git a/_install_tabs/3-windows.html b/_install_tabs/3-windows.html new file mode 100644 index 000000000..397f66b77 --- /dev/null +++ b/_install_tabs/3-windows.html @@ -0,0 +1,10 @@ +--- +tabId: windows +tabLabel: Windows +--- +
+
+

Download and execute the Scala + installer for Windows based on Coursier, and follow the on-screen instructions.

+
+
diff --git a/_install_tabs/4-other.html b/_install_tabs/4-other.html new file mode 100644 index 000000000..cdfdd35dc --- /dev/null +++ b/_install_tabs/4-other.html @@ -0,0 +1,13 @@ +--- +tabId: other +tabLabel: Other +defaultTab: true +--- +
+
+ +

Follow the documentation from Coursier on how to install and run cs setup.

+
+
diff --git a/_layouts/download.html b/_layouts/download.html index 60e46018f..4aca943db 100644 --- a/_layouts/download.html +++ b/_layouts/download.html @@ -16,52 +16,104 @@

{{page.title}}

{% 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 %} +
-

Install or Upgrade Scala

-
-
-
- or -
- -

Recommended method for all Scala users.

-
- - - Get Started with Scala - - +
+

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: +

-
-
- -

Best if you have an advanced use case.

+
+ {% include tabsection.html id='install-cs-setup-tabs' collection=site.install_tabs %} +
+ {% capture checkSetupDetail %} +
+
+

Check your setup with the command scala -version, which should output:

+ {% include code-snippet.html nocopy=true language='bash' codeSnippet=scalaDemo %} +

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. +

- - - Pick a Specific Release - -
+ {% endcapture %} +
+ {% 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

+
+ + + Pick a Specific Release + +
+

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


+ +
+
+

Maintenance releases

+
+ +
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..0a8d390d1 --- /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: 15px; + 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..fee857c35 100755 --- a/_sass/components/code.scss +++ b/_sass/components/code.scss @@ -23,3 +23,53 @@ } } + +.text-area-code { + code { + padding: 2px 6px; + color: #859900; + background-color: #fff; + border-radius: 10px; + border: $base-border-gray; + } +} + +.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: 4px; + top: 3px; + + button { + border: none; + background: #fff; + font-size: $font-size-medium; + color: $gray-darker; + cursor: pointer; + } + } + + .code-snippet-display { + code { + overflow-x: auto; + display: block; + border: $base-border-gray; + } + } +} diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss index b5a9bb89c..4918b325c 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: 10px; +} + +.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/utils/_variables.scss b/_sass/utils/_variables.scss index dedfcd52f..25c37d889 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; 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 }; From 4361f50ddd74eccfc83bf7955cd20b528b025d4b Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Mon, 9 May 2022 14:29:02 +0200 Subject: [PATCH 2/2] unify code-highlighting --- _install_tabs/1-macos.html | 2 +- _install_tabs/2-linux.html | 2 +- _install_tabs/3-windows.html | 2 +- _install_tabs/4-other.html | 2 +- _layouts/download.html | 4 ++-- _sass/components/alt-details.scss | 2 +- _sass/components/code.scss | 22 ++-------------------- _sass/components/tab.scss | 2 +- _sass/layout/type-md.scss | 26 ++++++++++++++++---------- _sass/utils/_variables.scss | 2 ++ 10 files changed, 28 insertions(+), 38 deletions(-) diff --git a/_install_tabs/1-macos.html b/_install_tabs/1-macos.html index 42b7063a1..8a18e5514 100644 --- a/_install_tabs/1-macos.html +++ b/_install_tabs/1-macos.html @@ -2,7 +2,7 @@ tabId: macos tabLabel: macOS --- -
+

Run the following command in your terminal, following the on-screen instructions:

{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} diff --git a/_install_tabs/2-linux.html b/_install_tabs/2-linux.html index f1d703599..b7d89ff35 100644 --- a/_install_tabs/2-linux.html +++ b/_install_tabs/2-linux.html @@ -2,7 +2,7 @@ tabId: linux tabLabel: Linux --- -
+

Run the following command in your terminal, following the on-screen instructions:

{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %} diff --git a/_install_tabs/3-windows.html b/_install_tabs/3-windows.html index 397f66b77..ca23307aa 100644 --- a/_install_tabs/3-windows.html +++ b/_install_tabs/3-windows.html @@ -2,7 +2,7 @@ tabId: windows tabLabel: Windows --- -
+

Download and execute the Scala installer for Windows based on Coursier, and follow the on-screen instructions.

diff --git a/_install_tabs/4-other.html b/_install_tabs/4-other.html index cdfdd35dc..548f22ba7 100644 --- a/_install_tabs/4-other.html +++ b/_install_tabs/4-other.html @@ -3,7 +3,7 @@ tabLabel: Other defaultTab: true --- -
+