diff --git a/_config.yml b/_config.yml index accb4b5df1..21f5c59539 100644 --- a/_config.yml +++ b/_config.yml @@ -21,6 +21,9 @@ scala-3-version: 3.1.2 collections: contribute_resources: + output: false + install_tabs: + output: false style: output: true overviews: diff --git a/_data/setup-scala.yml b/_data/setup-scala.yml new file mode 100644 index 0000000000..d1bb19a78d --- /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/_fr/getting-started/index.md b/_fr/getting-started/index.md index f9b05d7df9..0228e5ea0b 100644 --- a/_fr/getting-started/index.md +++ b/_fr/getting-started/index.md @@ -24,13 +24,15 @@ Nous recommandons l'utilisation de l'outil d'installation "Coursier" qui va auto ### Utilisation de l'installateur Scala (recommandé) L'installateur Scala est un outil nommé [Coursier](https://get-coursier.io/docs/cli-overview), la commande principale de l'outil est `cs`. -Il s'assure que la JVM est les outils standards de Scala sont installés sur votre système. +Il s'assure que la JVM est les outils standards de Scala sont installés sur votre système. Installez-le sur votre système avec les instructions suivantes.
-
-

Suivez les instructions pour installer la commande cs puis exécutez :

-

$ ./cs setup

+
+
+ {% include tabsection.html language='fr' id='install-cs-setup-tabs' collection=site.install_tabs %} +
+
@@ -165,30 +167,3 @@ Une fois que vous avez terminé le tutoriel ce dessus, vous pouvez consulter : Il y a plusieurs listes de diffusion et canaux de discussions instantanés si vous souhaitez rencontrer rapidement d'autres utilisateurs de Scala. Allez faire un tour sur notre page [community](https://scala-lang.org/community/) pour consulter la liste des ces ressources et obtenir de l'aide. Traduction par Antoine Pointeau. - - - - - - - - - diff --git a/_includes/_ja/getting-started.md b/_includes/_ja/getting-started.md index 1df3b33933..4faa2e2a35 100644 --- a/_includes/_ja/getting-started.md +++ b/_includes/_ja/getting-started.md @@ -18,13 +18,14 @@ Scala のインストーラーは[Coursier](https://get-coursier.io/docs/cli-ove 以下の手順でお使いのシステムにインストールしてください。
-
-

Follow the instructions to install the cs launcher then run:

-

$ ./cs setup

+
+
+ {% include tabsection.html language='ja' id='install-cs-setup-tabs' collection=site.install_tabs %} +
+
- `cs setup` は JVM の管理だけでなく、便利なコマンドラインツールもインストールします: - JDK (インストール済みでなければ) @@ -141,29 +142,3 @@ IDE の使用に慣れている場合は、IDE から_Main.scala_のコードを ### (日本語のみ追記) Scala について日本語で質問したい場合、Twitterでつぶやくと気づいた人が教えてくれます。 - - - - - - - - - diff --git a/_includes/alt-details.html b/_includes/alt-details.html new file mode 100644 index 0000000000..457544612e --- /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 0000000000..3af87d0f97 --- /dev/null +++ b/_includes/code-snippet.html @@ -0,0 +1,8 @@ +
+ {% unless include.nocopy %} +
+ +
+ {% endunless %} + 
{{include.codeSnippet}}
+
diff --git a/_includes/getting-started.md b/_includes/getting-started.md index 83c1de45fe..0a00d4d358 100644 --- a/_includes/getting-started.md +++ b/_includes/getting-started.md @@ -20,11 +20,29 @@ The Scala installer is a tool named [Coursier](https://get-coursier.io/docs/cli- It ensures that a JVM and standard Scala tools are installed on your system. Install it on your system with the following instructions. +{% capture scalaDemo %}$ scala -version +Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL{% endcapture %} +
-
-

Follow the instructions to install the cs launcher then run:

-

$ ./cs setup

+
+
+ {% include tabsection.html language='en' 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. +

+
+ {% endcapture %} +
+ {% include alt-details.html id='testing-your-setup' title='Testing your setup' detail=checkSetupDetail %} +
+
@@ -165,29 +183,3 @@ Once you've finished the above tutorials, consider checking out: ## Getting Help There are a multitude of mailing lists and real-time chat rooms in case you want to quickly connect with other Scala users. Check out our [community](https://scala-lang.org/community/) page for a list of these resources, and for where to reach out for help. - - - - - - - - - diff --git a/_includes/tabsection.html b/_includes/tabsection.html new file mode 100644 index 0000000000..ad62625e63 --- /dev/null +++ b/_includes/tabsection.html @@ -0,0 +1,19 @@ +
+
    + {% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %} +
  • + {{tabRoot.tabLabel}} +
    • + {% endif %} + {% endfor %} +
+ {% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %} +
+ {{tabRoot.content}} +
+ {% endif %} + {% endfor %} +
diff --git a/_install_tabs/1-macos.html b/_install_tabs/1-macos.html new file mode 100644 index 0000000000..2f34dcbe3b --- /dev/null +++ b/_install_tabs/1-macos.html @@ -0,0 +1,20 @@ +--- +tabId: osx +tabLabel: macOS +language: en +--- +
+
+

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 %} + {% capture homebrewDetail %} +
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} +
+ {% endcapture %} + {% include alt-details.html + title="Alternatively, if you don't use Homebrew:" + detail=homebrewDetail + %} +
+
diff --git a/_install_tabs/2-linux.html b/_install_tabs/2-linux.html new file mode 100644 index 0000000000..5f29b25c2b --- /dev/null +++ b/_install_tabs/2-linux.html @@ -0,0 +1,11 @@ +--- +tabId: linux +tabLabel: Linux +language: en +--- +
+
+

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 0000000000..01da9c604b --- /dev/null +++ b/_install_tabs/3-windows.html @@ -0,0 +1,11 @@ +--- +tabId: windows +tabLabel: Windows +language: en +--- +
+
+

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 0000000000..638409d939 --- /dev/null +++ b/_install_tabs/4-other.html @@ -0,0 +1,15 @@ +--- +tabId: other +tabLabel: Other +fallbackNoJS: true +language: en +--- +
+
+ +

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

+
+
diff --git a/_install_tabs/fr-1-macos.html b/_install_tabs/fr-1-macos.html new file mode 100644 index 0000000000..2aa67ed447 --- /dev/null +++ b/_install_tabs/fr-1-macos.html @@ -0,0 +1,19 @@ +--- +tabId: osx +tabLabel: macOS +language: fr +--- +
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} + {% capture homebrewDetail %} +
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} +
+ {% endcapture %} + {% include alt-details.html + title="Alternativement, si vous n'utilisez pas Homebrew:" + detail=homebrewDetail + %} +
+
diff --git a/_install_tabs/fr-2-linux.html b/_install_tabs/fr-2-linux.html new file mode 100644 index 0000000000..df2e1ccdba --- /dev/null +++ b/_install_tabs/fr-2-linux.html @@ -0,0 +1,10 @@ +--- +tabId: linux +tabLabel: Linux +language: fr +--- +
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %} +
+
diff --git a/_install_tabs/fr-3-windows.html b/_install_tabs/fr-3-windows.html new file mode 100644 index 0000000000..7da64e60a0 --- /dev/null +++ b/_install_tabs/fr-3-windows.html @@ -0,0 +1,10 @@ +--- +tabId: windows +tabLabel: Windows +language: fr +--- +
+
+

Téléchargez et exécutez l'intallateur Scala pour Windows basé sur Coursier

+
+
diff --git a/_install_tabs/fr-4-other.html b/_install_tabs/fr-4-other.html new file mode 100644 index 0000000000..770366796e --- /dev/null +++ b/_install_tabs/fr-4-other.html @@ -0,0 +1,15 @@ +--- +tabId: other +tabLabel: Other +fallbackNoJS: true +language: fr +--- +
+
+ +

Suivez les instructions pour installer la commande + cspuis exécutez ./cs setup.

+
+
diff --git a/_install_tabs/ja-1-macos.html b/_install_tabs/ja-1-macos.html new file mode 100644 index 0000000000..acb2ae7798 --- /dev/null +++ b/_install_tabs/ja-1-macos.html @@ -0,0 +1,19 @@ +--- +tabId: osx +tabLabel: macOS +language: ja +--- +
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} + {% capture homebrewDetail %} +
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} +
+ {% endcapture %} + {% include alt-details.html + title="または、Homebrewを使用しない場合は" + detail=homebrewDetail + %} +
+
diff --git a/_install_tabs/ja-2-linux.html b/_install_tabs/ja-2-linux.html new file mode 100644 index 0000000000..42b98e6a67 --- /dev/null +++ b/_install_tabs/ja-2-linux.html @@ -0,0 +1,10 @@ +--- +tabId: linux +tabLabel: Linux +language: ja +--- +
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %} +
+
diff --git a/_install_tabs/ja-3-windows.html b/_install_tabs/ja-3-windows.html new file mode 100644 index 0000000000..f70ffba026 --- /dev/null +++ b/_install_tabs/ja-3-windows.html @@ -0,0 +1,10 @@ +--- +tabId: windows +tabLabel: Windows +language: ja +--- +
+
+

the Scala installer for Windowsを、ダウンロードして実行してください。

+
+
diff --git a/_install_tabs/ja-4-other.html b/_install_tabs/ja-4-other.html new file mode 100644 index 0000000000..5a4b39e484 --- /dev/null +++ b/_install_tabs/ja-4-other.html @@ -0,0 +1,14 @@ +--- +tabId: other +tabLabel: Other +fallbackNoJS: true +language: ja +--- +
+
+ +

手順に従って cs ランチャーをインストールし、その次に以下を実行します。./cs setup

+
+
diff --git a/_layouts/downloadpage.html b/_layouts/downloadpage.html deleted file mode 100644 index 0849a3d013..0000000000 --- a/_layouts/downloadpage.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -layout: inner-page-parent ---- - -
-
-
-
-
- {{page.release_version}} -
- -
-
-

Compared to other programming languages, installing Scala is a bit unusual. It's possible to "install" Scala in numerous ways.

-
-
- -
1
-
-

First, make sure you have the Java 8 JDK installed.

-

java -version(Make sure you have version 1.8.)

-
-
-
-
2
-
-

Then, install Scala using:

-
-
-
-
- or -
- -

Best if you prefer a full-featured IDE (recommended for beginners)

-
- - - Download intellij - -
    - {% include tutorial-list.html column=1 %} -
-
-
-
- -

Best if you are familiar with the command line

-
- - - Download Sbt - -
    - {% include tutorial-list.html column=0 %} -
-
-
-

Scala is unusual because it is usually installed for each of your Scala projects rather than being installed system-wide. Both of the above options manage a specific Scala version per Scala project you create.

- -

Release Notes

-

For important changes, please consult the release notes.

- -

Software Requirements

- - {{ page.requirements }} - - {{ content }} - - {% if page.show_resources == "true" %} - - {% include download-resource-list.html %} - - {% endif %} - -

License

-

The Scala distribution is released under the 3-clause BSD license.

-
- -
-
-
- - {% for step in site.data.downloads.stepOne %} - - {% endfor %} - - {% for intellijUrl in site.data.downloads.intellijUrls %} - - {% endfor %} - - {% for sbtUrl in site.data.downloads.sbtUrls %} - - {% endfor %} -
\ No newline at end of file diff --git a/_sass/base/helper.scss b/_sass/base/helper.scss index 1b32d31165..7f13553247 100755 --- a/_sass/base/helper.scss +++ b/_sass/base/helper.scss @@ -7,6 +7,23 @@ @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 0000000000..bacb1f2b3d --- /dev/null +++ b/_sass/components/alt-details.scss @@ -0,0 +1,44 @@ +// ALT-DETAILS +//------------------------------------------------ +//------------------------------------------------ + +.alt-details { + @include span-columns(12); + + .alt-details-toggle { + @include span-columns(12); + 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: "Font Awesome 5 Free"; + 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 e771eb6ad1..15e8c641e3 100755 --- a/_sass/components/code.scss +++ b/_sass/components/code.scss @@ -23,3 +23,45 @@ } } + +.code-snippet-area { + width: 100%; + margin-top: 1em; + margin-bottom: 1em; + 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; + } + } + + .code-snippet-display { + margin-top: 0px; + margin-bottom: 0px; + width: 100%; + } +} diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss index b5a9bb89c3..cbd5010d79 100755 --- a/_sass/components/tab.scss +++ b/_sass/components/tab.scss @@ -7,10 +7,11 @@ @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,21 +24,55 @@ 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; } } } + @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; + + .nav-tab { + padding-left: 0; + margin-bottom: 0; + + .item-tab { + padding: 0; + margin-bottom: 0; + list-style: none; } } } + +.tabcontent { + display: none; + + &.active { + display: block; + } +} diff --git a/_sass/layout/type-md.scss b/_sass/layout/type-md.scss index 0696bee09f..f4b70816bc 100755 --- a/_sass/layout/type-md.scss +++ b/_sass/layout/type-md.scss @@ -87,6 +87,11 @@ margin-bottom: 18px; } + p + .code-snippet-area { + // remove the margin-top for code snippet following a paragraph + margin-top: 0px; + } + h4, h5 { margin-bottom: 0.5rem; } @@ -142,6 +147,19 @@ text-decoration: line-through; } + li, + p, + tr, + td, + dt, + dd, + pre { + // common code for all code (inline and blocks) + code { + border: $base-border-gray; + } + } + li, p, tr, @@ -150,23 +168,20 @@ dd { 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: 1px 3px; - margin: 0 2px; + 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 33277a1b03..f99d09cd96 100755 --- a/_sass/utils/_variables.scss +++ b/_sass/utils/_variables.scss @@ -74,6 +74,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 fb5c150296..c7f0016ba9 100755 --- a/resources/css/style.scss +++ b/resources/css/style.scss @@ -63,6 +63,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 e52eddd5cf..4d55b546dd 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -392,15 +392,70 @@ function getOS() { return osname; } -$(document).ready(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(); + }); +}); + +$(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 () { + $('.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(); - var intelliJlink = $("#intellij-" + os).text(); - var sbtLink = $("#sbt-" + os).text(); - var stepOneContent = $("#stepOne-" + os).html() - $("#download-intellij-link").attr("href", intelliJlink); - $("#download-sbt-link").attr("href", sbtLink); - $("#download-step-one").html(stepOneContent); + 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(); + } + }); } }); @@ -467,18 +522,18 @@ $('#filter-glossary-terms').focus(); //Footer scroll to top button -$(document).ready(function(){ - $(window).scroll(function(){ - if ($(this).scrollTop() > 100) { - $('#scroll-to-top-btn').fadeIn(); - } else { - $('#scroll-to-top-btn').fadeOut(); - } - }); - $('#scroll-to-top-btn').click(function(){ - $("html, body").animate({ scrollTop: 0 }, 600); - return false; - }); +$(document).ready(function(){ + $(window).scroll(function(){ + if ($(this).scrollTop() > 100) { + $('#scroll-to-top-btn').fadeIn(); + } else { + $('#scroll-to-top-btn').fadeOut(); + } + }); + $('#scroll-to-top-btn').click(function(){ + $("html, body").animate({ scrollTop: 0 }, 600); + return false; + }); }); //Contributors widget @@ -490,7 +545,7 @@ $(document).ready(function () { * - some files aren't prefixed with underscore, see rootFiles * - some files are placed in _overviews but rendered to its folder, see overviewsFolders */ - + let rootFiles = ['getting-started', 'learn', 'glossary']; let overviewsFolders = ['FAQ', 'cheatsheets', 'collections', 'compiler-options', 'core', 'jdk-compatibility', 'macros', 'parallel-collections',