From 0ac46fb75644b042c04bb9469f8951847331d1b0 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Fri, 29 Apr 2022 17:00:51 +0200 Subject: [PATCH 1/3] add tabs on get-started page (english) --- _config.yml | 3 + _data/setup-scala.yml | 4 + _includes/code-snippet.html | 6 ++ _includes/getting-started.md | 52 +++++----- _includes/tabsection.html | 20 ++++ _install_tabs/1-macos.md | 23 +++++ _install_tabs/2-linux.md | 14 +++ _install_tabs/3-windows.md | 14 +++ _install_tabs/4-other.md | 17 ++++ _sass/layout/alt-details.scss | 46 +++++++++ _sass/layout/scala-in-action.scss | 158 ++++++++++++++++++++++++++++++ _sass/layout/tabsection.scss | 60 ++++++++++++ resources/css/style.scss | 3 + resources/js/functions.js | 78 ++++++++++++--- 14 files changed, 456 insertions(+), 42 deletions(-) create mode 100644 _data/setup-scala.yml create mode 100644 _includes/code-snippet.html create mode 100644 _includes/tabsection.html create mode 100644 _install_tabs/1-macos.md create mode 100644 _install_tabs/2-linux.md create mode 100644 _install_tabs/3-windows.md create mode 100644 _install_tabs/4-other.md create mode 100644 _sass/layout/alt-details.scss create mode 100755 _sass/layout/scala-in-action.scss create mode 100755 _sass/layout/tabsection.scss 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/_includes/code-snippet.html b/_includes/code-snippet.html new file mode 100644 index 0000000000..0286da8b4d --- /dev/null +++ b/_includes/code-snippet.html @@ -0,0 +1,6 @@ +
+
+
+
+ 
{{include.codeSnippet}}
+
diff --git a/_includes/getting-started.md b/_includes/getting-started.md index 83c1de45fe..2df5661769 100644 --- a/_includes/getting-started.md +++ b/_includes/getting-started.md @@ -21,9 +21,29 @@ It ensures that a JVM and standard Scala tools are installed on your system. Install it on your system with the following instructions.
-
-

Follow the instructions to install the cs launcher then run:

-

$ ./cs setup

+
+
+
+
+ {% include tabsection.html extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} +
+ +
+
+

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

+
+ 
$ scala -version
+Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL
+
+

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

+
+
+
+
+
+
@@ -165,29 +185,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..a5473b04e5 --- /dev/null +++ b/_includes/tabsection.html @@ -0,0 +1,20 @@ +
+
+ {% for tabRoot in include.collection %} + + {% endfor %} +
+ {% for tabRoot in include.collection %} +
{{tabRoot.content}}
+ {% endfor %} +
diff --git a/_install_tabs/1-macos.md b/_install_tabs/1-macos.md new file mode 100644 index 0000000000..f91ab023fa --- /dev/null +++ b/_install_tabs/1-macos.md @@ -0,0 +1,23 @@ +--- +tabId: osx +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 %} +
+ +
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} +
+
+
+
+
+
+
diff --git a/_install_tabs/2-linux.md b/_install_tabs/2-linux.md new file mode 100644 index 0000000000..6924edf275 --- /dev/null +++ b/_install_tabs/2-linux.md @@ -0,0 +1,14 @@ +--- +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.md b/_install_tabs/3-windows.md new file mode 100644 index 0000000000..c3e31fb837 --- /dev/null +++ b/_install_tabs/3-windows.md @@ -0,0 +1,14 @@ +--- +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.md b/_install_tabs/4-other.md new file mode 100644 index 0000000000..d60085c17f --- /dev/null +++ b/_install_tabs/4-other.md @@ -0,0 +1,17 @@ +--- +tabId: other +tabLabel: Other +fallbackNoJS: true +--- +
+
+
+
+ +

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

+
+
+
+
diff --git a/_sass/layout/alt-details.scss b/_sass/layout/alt-details.scss new file mode 100644 index 0000000000..aae4addefb --- /dev/null +++ b/_sass/layout/alt-details.scss @@ -0,0 +1,46 @@ +// ALT-DETAILS +//------------------------------------------------ +//------------------------------------------------ + +.alt-details { + margin: 10px 0px; + + button.alt-details-toggle { + width: 100%; + border: none; + background-color: #b635c4; + padding: 5px 10px; + border-radius: 15px; + font-size: $font-size-medium; + cursor: pointer; + font-weight: 500; + color: #fff; + + &:hover { + background-color: #941fa1; + } + + &:after { + content: "\f13a"; // + font-family: "Font Awesome 5 Free"; + font-weight: 900; + font-size: 15px; + color: #fff; + float: right; + margin-top: 2px; + } + + &.alt-details-closed:after { + content: "\f138"; // + } + } + + .alt-details-detail { + background-color: rgb(248, 226, 255); + border: 1px solid rgb(239, 207, 248); + padding-top: 25px; + padding-bottom: 10px; + margin-top: -15px; + margin-bottom: 10px; + } +} diff --git a/_sass/layout/scala-in-action.scss b/_sass/layout/scala-in-action.scss new file mode 100755 index 0000000000..404c9bbd7f --- /dev/null +++ b/_sass/layout/scala-in-action.scss @@ -0,0 +1,158 @@ +// SCALA-IN-ACTION +//------------------------------------------------ +//------------------------------------------------ + +.scala-in-action { + + .tabcontent { + .scala-text { + .alt-details { + button.alt-details-toggle { + border: 1px solid #a0dff0; + background-color: #d1e5eb; + color: $gray; + + &:hover { + background-color: #c9e3eb; + } + + &:after { + color: $gray; + } + } + + .alt-details-detail { + background-color: $gray-light; + border: 1px solid darken($gray-light, 3%); + } + } + } + } + + .scala-in-action-content { + transition: $base-transition; + + + .scala-in-action-code { + // display: none; + // background: $gray-dark; + padding: 20px 0; + + .wrap { + margin-bottom: 0px; + } + + .snippet { + position: relative; + margin: 10px 0px; + cursor: default; + width: 100%; + + &:hover { + .buttons { + opacity: 0.95; + + &:active { + opacity: 0.3; + } + } + } + + .buttons { + position: absolute; + right: 4px; + top: 5px; + transition: all .2s ease; + display: flex; + opacity: 0; + flex-direction: row-reverse; + justify-content: flex-start; + + button { + outline: none; + background: #fff; + border: none; + font-size: $font-size-medium; + color: rgba($gray, .6); + cursor: pointer; + + i { + font-weight: $font-bold; + } + } + } + + pre.snippet-code { + margin: 0px; + display: block; + overflow-x: auto; + + code { + overflow-x: auto; + display: block; + } + } + } + + .scala-code { + + @include span-columns(7); + + @include bp(large) { + @include span-columns(12); + } + } + + .scala-text { + + details { + summary { + + &:hover { + background-color: lighten($gray-lighter, 5%); + } + } + + summary>* { + display: inline; + } + } + + code { + padding: 3px 6px; + color: #859900; + background-color: #fff; + border-radius: 10px; + border: 1px solid $gray-light; + } + + .snippet { + pre.snippet-code { + code { + border: 1px solid darken($gray-light, 10%); + } + } + } + + @include span-columns(5); + + @include bp(large) { + @include span-columns(12); + } + + h3 { + font-size: 1.525rem; + margin-bottom: 20px; + } + + p { + color: $base-font-color; + } + + &.scala-text-large { + @include span-columns(12); + } + } + } + } +} diff --git a/_sass/layout/tabsection.scss b/_sass/layout/tabsection.scss new file mode 100755 index 0000000000..71c2777183 --- /dev/null +++ b/_sass/layout/tabsection.scss @@ -0,0 +1,60 @@ +// TABSECTION +//------------------------------------------------ +//------------------------------------------------ + +.recommended-install { + margin-top: -2em; + .tabsection { + background: $gray-lighter; + } +} + +.tabsection { + + &.inline-tabs { + margin: 20px 0px; + } + + /* Style the tab */ + .tab { + overflow: hidden; + margin-bottom: -12px; + } + + /* Style the buttons that are used to open the tab content */ + .tab button { + font-family: $heading-font-family; + font-size: $font-size-medium; + font-weight: $font-bold; + color: lighten($gray, 25%); + background-color: inherit; + float: left; + border: none; + border-radius: 30px; + outline: none; + cursor: pointer; + padding: 14px 16px; + } + + /* Change background color of buttons on hover */ + .tab button:hover { + color: #fff; + background-color: $gray; + border-bottom: $base-border-white; + } + + /* Create an active/current tablink class */ + .tab button.active { + background-color: $gray; + border-bottom: $base-border-white; + color: #fff; + } + + /* Style the tab content */ + .tabcontent { + display: none; + padding: 0px 2px; + border-top: none; + transition: all .5s linear; + } +} diff --git a/resources/css/style.scss b/resources/css/style.scss index fb5c150296..02ed07ce47 100755 --- a/resources/css/style.scss +++ b/resources/css/style.scss @@ -28,6 +28,9 @@ @import 'layout/twitter-feed'; @import 'layout/cheatsheet'; @import 'layout/ides'; +@import 'layout/alt-details'; +@import 'layout/tabsection'; +@import 'layout/scala-in-action'; @import 'layout/nutshell'; @import 'layout/overviews'; @import 'layout/sips'; diff --git a/resources/js/functions.js b/resources/js/functions.js index e52eddd5cf..cd5ac73eac 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -404,6 +404,58 @@ $(document).ready(function() { } }); +const toggleElement = (evt, elemId) => { + const btn = evt.target; + const elem = document.getElementById(elemId); + if (elem.style.display === "none") { + elem.style.display = "block"; + } else { + elem.style.display = "none"; + } + $(btn).toggleClass("alt-details-closed"); +} + +$(document).ready(() => { + $('.alt-details-toggle').click(); +}); + +function copySnippet(evt) { + const snippet = evt.target.closest('.snippet').querySelector('.snippet-code'); + const code = snippet.querySelector('code').innerText; + window.navigator.clipboard.writeText(code) +} + +function openTab(evt, category, tabName) { + // Get all elements with class="tabcontent" and hide them + $('.tabcontent-' + category + '.tabcontent').css('display', 'none'); + + const queried = evt.target; + + // Get all elements with class="tablinks" and remove the class "active" + $('.tablinks-' + category + '.tablinks').removeClass('active'); + + // Show the current tab, and add an "active" class to the button that opened the tab + document.getElementById(category + '-' + tabName).style.display = "block"; + queried.className += " active"; +} + +$(document).ready(() => { + const defaultTabs = document.getElementsByClassName('default-tab'); + for (i = 0; i < defaultTabs.length; i++) { + defaultTabs[i].click(); + } +}); + +$(document).ready(function () { + if ($(".main-download").length) { + let os = getOS(); + if (os === 'unix') { + os = 'linux'; + } + $("#get-started-tab-" + os).click(); + } +}); + var image = { width: 1680, height: 1100 @@ -467,18 +519,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 +542,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', From 71cf7e946fc3377ab35ae90e46cf3a9a9d8bc531 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Fri, 29 Apr 2022 18:03:35 +0200 Subject: [PATCH 2/3] add tabs to other translated pages --- _fr/getting-started/index.md | 41 +++--------- _includes/_ja/getting-started.md | 39 +++--------- _includes/alt-details.html | 6 ++ _includes/code-snippet.html | 2 + _includes/getting-started.md | 45 +++++++------- _includes/tabsection.html | 4 ++ _install_tabs/1-macos.md | 20 +++--- _install_tabs/2-linux.md | 1 + _install_tabs/3-windows.md | 1 + _install_tabs/4-other.md | 1 + _install_tabs/fr-1-macos.md | 26 ++++++++ _install_tabs/fr-2-linux.md | 14 +++++ _install_tabs/fr-3-windows.md | 14 +++++ _install_tabs/fr-4-other.md | 19 ++++++ _install_tabs/ja-1-macos.md | 26 ++++++++ _install_tabs/ja-2-linux.md | 14 +++++ _install_tabs/ja-3-windows.md | 14 +++++ _install_tabs/ja-4-other.md | 18 ++++++ _layouts/downloadpage.html | 100 ------------------------------ _sass/layout/scala-in-action.scss | 3 +- resources/js/functions.js | 30 +++------ 21 files changed, 225 insertions(+), 213 deletions(-) create mode 100644 _includes/alt-details.html create mode 100644 _install_tabs/fr-1-macos.md create mode 100644 _install_tabs/fr-2-linux.md create mode 100644 _install_tabs/fr-3-windows.md create mode 100644 _install_tabs/fr-4-other.md create mode 100644 _install_tabs/ja-1-macos.md create mode 100644 _install_tabs/ja-2-linux.md create mode 100644 _install_tabs/ja-3-windows.md create mode 100644 _install_tabs/ja-4-other.md delete mode 100644 _layouts/downloadpage.html diff --git a/_fr/getting-started/index.md b/_fr/getting-started/index.md index f9b05d7df9..397c18e59c 100644 --- a/_fr/getting-started/index.md +++ b/_fr/getting-started/index.md @@ -24,13 +24,19 @@ 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' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} + +
+
+
@@ -165,30 +171,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..f747ff92f7 100644 --- a/_includes/_ja/getting-started.md +++ b/_includes/_ja/getting-started.md @@ -18,13 +18,18 @@ 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' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} + +
+
+
- `cs setup` は JVM の管理だけでなく、便利なコマンドラインツールもインストールします: - JDK (インストール済みでなければ) @@ -141,29 +146,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..52e8d9cf67 --- /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 index 0286da8b4d..6267a08ad3 100644 --- a/_includes/code-snippet.html +++ b/_includes/code-snippet.html @@ -1,6 +1,8 @@
+ {% unless include.nocopy %}
+ {% endunless %} 
{{include.codeSnippet}}
diff --git a/_includes/getting-started.md b/_includes/getting-started.md index 2df5661769..45c42b166f 100644 --- a/_includes/getting-started.md +++ b/_includes/getting-started.md @@ -20,31 +20,32 @@ 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 %} +
-
-
-
-
- {% include tabsection.html extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} -
- -
-
-

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

-
- 
$ scala -version
-Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL
-
-

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

-
-
-
-
-
+
+
+
+
+ {% include tabsection.html language='en' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} + {% capture checkSetupDetail %} +
+

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

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

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 + title='Testing your setup' + detail=checkSetupDetail + targetId='macos-get-started-alt1' + extraClasses='scala-text scala-text-large' + %}
+
+
diff --git a/_includes/tabsection.html b/_includes/tabsection.html index a5473b04e5..a03f01130f 100644 --- a/_includes/tabsection.html +++ b/_includes/tabsection.html @@ -1,14 +1,17 @@
{% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %} + {% endif %} {% endfor %}
{% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %}
{{tabRoot.content}}
+ {% endif %} {% endfor %}
diff --git a/_install_tabs/1-macos.md b/_install_tabs/1-macos.md index f91ab023fa..e8dc277265 100644 --- a/_install_tabs/1-macos.md +++ b/_install_tabs/1-macos.md @@ -1,6 +1,7 @@ --- tabId: osx tabLabel: macOS +language: en ---
@@ -8,15 +9,18 @@ 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 %} -
- -
-
- {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %} -
-
+ {% 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 + targetId='macos-get-started-alt' + extraClasses='scala-text-large alt-details-detail' + %}
diff --git a/_install_tabs/2-linux.md b/_install_tabs/2-linux.md index 6924edf275..a5a8eb7169 100644 --- a/_install_tabs/2-linux.md +++ b/_install_tabs/2-linux.md @@ -1,6 +1,7 @@ --- tabId: linux tabLabel: Linux +language: en ---
diff --git a/_install_tabs/3-windows.md b/_install_tabs/3-windows.md index c3e31fb837..9d9ae82c68 100644 --- a/_install_tabs/3-windows.md +++ b/_install_tabs/3-windows.md @@ -1,6 +1,7 @@ --- tabId: windows tabLabel: Windows +language: en ---
diff --git a/_install_tabs/4-other.md b/_install_tabs/4-other.md index d60085c17f..00ceb97edb 100644 --- a/_install_tabs/4-other.md +++ b/_install_tabs/4-other.md @@ -2,6 +2,7 @@ tabId: other tabLabel: Other fallbackNoJS: true +language: en ---
diff --git a/_install_tabs/fr-1-macos.md b/_install_tabs/fr-1-macos.md new file mode 100644 index 0000000000..836b8f53e1 --- /dev/null +++ b/_install_tabs/fr-1-macos.md @@ -0,0 +1,26 @@ +--- +tabId: osx +tabLabel: macOS +language: fr +--- +
+
+
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} + {% assign homebrewAlt = "Alternativement, si vous n'utilisez pas 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 + targetId='macos-get-started-alt' + extraClasses='scala-text-large alt-details-detail' + %} +
+
+
+
diff --git a/_install_tabs/fr-2-linux.md b/_install_tabs/fr-2-linux.md new file mode 100644 index 0000000000..18a0925149 --- /dev/null +++ b/_install_tabs/fr-2-linux.md @@ -0,0 +1,14 @@ +--- +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.md b/_install_tabs/fr-3-windows.md new file mode 100644 index 0000000000..2c22382b2e --- /dev/null +++ b/_install_tabs/fr-3-windows.md @@ -0,0 +1,14 @@ +--- +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.md b/_install_tabs/fr-4-other.md new file mode 100644 index 0000000000..89bee815a8 --- /dev/null +++ b/_install_tabs/fr-4-other.md @@ -0,0 +1,19 @@ +--- +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.md b/_install_tabs/ja-1-macos.md new file mode 100644 index 0000000000..792efacfc2 --- /dev/null +++ b/_install_tabs/ja-1-macos.md @@ -0,0 +1,26 @@ +--- +tabId: osx +tabLabel: macOS +language: ja +--- +
+
+
+
+ {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} + {% assign homebrewAlt = "または、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 + targetId='macos-get-started-alt' + extraClasses='scala-text-large alt-details-detail' + %} +
+
+
+
diff --git a/_install_tabs/ja-2-linux.md b/_install_tabs/ja-2-linux.md new file mode 100644 index 0000000000..a59f88d1e1 --- /dev/null +++ b/_install_tabs/ja-2-linux.md @@ -0,0 +1,14 @@ +--- +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.md b/_install_tabs/ja-3-windows.md new file mode 100644 index 0000000000..76ff527bea --- /dev/null +++ b/_install_tabs/ja-3-windows.md @@ -0,0 +1,14 @@ +--- +tabId: windows +tabLabel: Windows +language: ja +--- +
+
+
+
+

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

+
+
+
+
diff --git a/_install_tabs/ja-4-other.md b/_install_tabs/ja-4-other.md new file mode 100644 index 0000000000..0e400d4fcb --- /dev/null +++ b/_install_tabs/ja-4-other.md @@ -0,0 +1,18 @@ +--- +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/layout/scala-in-action.scss b/_sass/layout/scala-in-action.scss index 404c9bbd7f..297dda244e 100755 --- a/_sass/layout/scala-in-action.scss +++ b/_sass/layout/scala-in-action.scss @@ -13,7 +13,7 @@ color: $gray; &:hover { - background-color: #c9e3eb; + background-color: #b8deea; } &:after { @@ -129,6 +129,7 @@ .snippet { pre.snippet-code { code { + padding: 7px 6px; border: 1px solid darken($gray-light, 10%); } } diff --git a/resources/js/functions.js b/resources/js/functions.js index cd5ac73eac..cc61873b19 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -392,21 +392,9 @@ function getOS() { return osname; } -$(document).ready(function() { - 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); - } -}); - -const toggleElement = (evt, elemId) => { - const btn = evt.target; - const elem = document.getElementById(elemId); +function toggleElement(evt, elemId) { + var btn = evt.target; + var elem = document.getElementById(elemId); if (elem.style.display === "none") { elem.style.display = "block"; } else { @@ -415,13 +403,13 @@ const toggleElement = (evt, elemId) => { $(btn).toggleClass("alt-details-closed"); } -$(document).ready(() => { +$(document).ready(function() { $('.alt-details-toggle').click(); }); function copySnippet(evt) { - const snippet = evt.target.closest('.snippet').querySelector('.snippet-code'); - const code = snippet.querySelector('code').innerText; + var snippet = evt.target.closest('.snippet').querySelector('.snippet-code'); + var code = snippet.querySelector('code').innerText; window.navigator.clipboard.writeText(code) } @@ -429,7 +417,7 @@ function openTab(evt, category, tabName) { // Get all elements with class="tabcontent" and hide them $('.tabcontent-' + category + '.tabcontent').css('display', 'none'); - const queried = evt.target; + var queried = evt.target; // Get all elements with class="tablinks" and remove the class "active" $('.tablinks-' + category + '.tablinks').removeClass('active'); @@ -439,8 +427,8 @@ function openTab(evt, category, tabName) { queried.className += " active"; } -$(document).ready(() => { - const defaultTabs = document.getElementsByClassName('default-tab'); +$(document).ready(function() { + var defaultTabs = document.getElementsByClassName('default-tab'); for (i = 0; i < defaultTabs.length; i++) { defaultTabs[i].click(); } From 5bdcacd5ba6aca09e3d35592abef068269291575 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Tue, 10 May 2022 15:27:27 +0200 Subject: [PATCH 3/3] update to new style --- _fr/getting-started/index.md | 12 +-- _includes/_ja/getting-started.md | 12 +-- _includes/alt-details.html | 6 +- _includes/code-snippet.html | 8 +- _includes/getting-started.md | 35 +++---- _includes/tabsection.html | 25 ++--- _install_tabs/1-macos.html | 20 ++++ _install_tabs/1-macos.md | 27 ----- _install_tabs/2-linux.html | 11 +++ _install_tabs/2-linux.md | 15 --- _install_tabs/3-windows.html | 11 +++ _install_tabs/3-windows.md | 15 --- _install_tabs/4-other.html | 15 +++ _install_tabs/4-other.md | 18 ---- _install_tabs/fr-1-macos.html | 19 ++++ _install_tabs/fr-1-macos.md | 26 ----- _install_tabs/fr-2-linux.html | 10 ++ _install_tabs/fr-2-linux.md | 14 --- _install_tabs/fr-3-windows.html | 10 ++ _install_tabs/fr-3-windows.md | 14 --- _install_tabs/fr-4-other.html | 15 +++ _install_tabs/fr-4-other.md | 19 ---- _install_tabs/ja-1-macos.html | 19 ++++ _install_tabs/ja-1-macos.md | 26 ----- _install_tabs/ja-2-linux.html | 10 ++ _install_tabs/ja-2-linux.md | 14 --- _install_tabs/ja-3-windows.html | 10 ++ _install_tabs/ja-3-windows.md | 14 --- _install_tabs/ja-4-other.html | 14 +++ _install_tabs/ja-4-other.md | 18 ---- _sass/base/helper.scss | 17 ++++ _sass/components/alt-details.scss | 44 +++++++++ _sass/components/code.scss | 42 ++++++++ _sass/components/tab.scss | 43 +++++++- _sass/layout/alt-details.scss | 46 --------- _sass/layout/scala-in-action.scss | 159 ------------------------------ _sass/layout/tabsection.scss | 60 ----------- _sass/layout/type-md.scss | 35 +++++-- _sass/utils/_variables.scss | 2 + resources/css/style.scss | 4 +- resources/js/functions.js | 93 +++++++++-------- 41 files changed, 429 insertions(+), 598 deletions(-) create mode 100644 _install_tabs/1-macos.html delete mode 100644 _install_tabs/1-macos.md create mode 100644 _install_tabs/2-linux.html delete mode 100644 _install_tabs/2-linux.md create mode 100644 _install_tabs/3-windows.html delete mode 100644 _install_tabs/3-windows.md create mode 100644 _install_tabs/4-other.html delete mode 100644 _install_tabs/4-other.md create mode 100644 _install_tabs/fr-1-macos.html delete mode 100644 _install_tabs/fr-1-macos.md create mode 100644 _install_tabs/fr-2-linux.html delete mode 100644 _install_tabs/fr-2-linux.md create mode 100644 _install_tabs/fr-3-windows.html delete mode 100644 _install_tabs/fr-3-windows.md create mode 100644 _install_tabs/fr-4-other.html delete mode 100644 _install_tabs/fr-4-other.md create mode 100644 _install_tabs/ja-1-macos.html delete mode 100644 _install_tabs/ja-1-macos.md create mode 100644 _install_tabs/ja-2-linux.html delete mode 100644 _install_tabs/ja-2-linux.md create mode 100644 _install_tabs/ja-3-windows.html delete mode 100644 _install_tabs/ja-3-windows.md create mode 100644 _install_tabs/ja-4-other.html delete mode 100644 _install_tabs/ja-4-other.md create mode 100644 _sass/components/alt-details.scss delete mode 100644 _sass/layout/alt-details.scss delete mode 100755 _sass/layout/scala-in-action.scss delete mode 100755 _sass/layout/tabsection.scss diff --git a/_fr/getting-started/index.md b/_fr/getting-started/index.md index 397c18e59c..0228e5ea0b 100644 --- a/_fr/getting-started/index.md +++ b/_fr/getting-started/index.md @@ -28,15 +28,11 @@ Il s'assure que la JVM est les outils standards de Scala sont installés sur vot Installez-le sur votre système avec les instructions suivantes.
-
-
-
-
- {% include tabsection.html language='fr' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} - -
-
+
+
+ {% include tabsection.html language='fr' id='install-cs-setup-tabs' collection=site.install_tabs %}
+
diff --git a/_includes/_ja/getting-started.md b/_includes/_ja/getting-started.md index f747ff92f7..4faa2e2a35 100644 --- a/_includes/_ja/getting-started.md +++ b/_includes/_ja/getting-started.md @@ -18,15 +18,11 @@ Scala のインストーラーは[Coursier](https://get-coursier.io/docs/cli-ove 以下の手順でお使いのシステムにインストールしてください。
-
-
-
-
- {% include tabsection.html language='ja' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} - -
-
+
+
+ {% include tabsection.html language='ja' id='install-cs-setup-tabs' collection=site.install_tabs %}
+
diff --git a/_includes/alt-details.html b/_includes/alt-details.html index 52e8d9cf67..457544612e 100644 --- a/_includes/alt-details.html +++ b/_includes/alt-details.html @@ -1,6 +1,6 @@ -
- -
+
+ +
{{include.detail}}
diff --git a/_includes/code-snippet.html b/_includes/code-snippet.html index 6267a08ad3..3af87d0f97 100644 --- a/_includes/code-snippet.html +++ b/_includes/code-snippet.html @@ -1,8 +1,8 @@ -
+
{% unless include.nocopy %} -
-
+
+
{% endunless %} - 
{{include.codeSnippet}}
+ 
{{include.codeSnippet}}
diff --git a/_includes/getting-started.md b/_includes/getting-started.md index 45c42b166f..0a00d4d358 100644 --- a/_includes/getting-started.md +++ b/_includes/getting-started.md @@ -24,27 +24,24 @@ Install it on your system with the following instructions. Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL{% endcapture %}
-
-
-
-
- {% include tabsection.html language='en' extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %} - {% capture checkSetupDetail %} -
-

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

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

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 - title='Testing your setup' - detail=checkSetupDetail - targetId='macos-get-started-alt1' - extraClasses='scala-text scala-text-large' - %} -
+
+
+ {% 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 %} +
diff --git a/_includes/tabsection.html b/_includes/tabsection.html index a03f01130f..ad62625e63 100644 --- a/_includes/tabsection.html +++ b/_includes/tabsection.html @@ -1,24 +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}}
+
+ {{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/1-macos.md b/_install_tabs/1-macos.md deleted file mode 100644 index e8dc277265..0000000000 --- a/_install_tabs/1-macos.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -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 %} - {% 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 - targetId='macos-get-started-alt' - extraClasses='scala-text-large alt-details-detail' - %} -
-
-
-
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/2-linux.md b/_install_tabs/2-linux.md deleted file mode 100644 index a5a8eb7169..0000000000 --- a/_install_tabs/2-linux.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -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/3-windows.md b/_install_tabs/3-windows.md deleted file mode 100644 index 9d9ae82c68..0000000000 --- a/_install_tabs/3-windows.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -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/4-other.md b/_install_tabs/4-other.md deleted file mode 100644 index 00ceb97edb..0000000000 --- a/_install_tabs/4-other.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -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-1-macos.md b/_install_tabs/fr-1-macos.md deleted file mode 100644 index 836b8f53e1..0000000000 --- a/_install_tabs/fr-1-macos.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -tabId: osx -tabLabel: macOS -language: fr ---- -
-
-
-
- {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} - {% assign homebrewAlt = "Alternativement, si vous n'utilisez pas 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 - targetId='macos-get-started-alt' - extraClasses='scala-text-large alt-details-detail' - %} -
-
-
-
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-2-linux.md b/_install_tabs/fr-2-linux.md deleted file mode 100644 index 18a0925149..0000000000 --- a/_install_tabs/fr-2-linux.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -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-3-windows.md b/_install_tabs/fr-3-windows.md deleted file mode 100644 index 2c22382b2e..0000000000 --- a/_install_tabs/fr-3-windows.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -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/fr-4-other.md b/_install_tabs/fr-4-other.md deleted file mode 100644 index 89bee815a8..0000000000 --- a/_install_tabs/fr-4-other.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -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-1-macos.md b/_install_tabs/ja-1-macos.md deleted file mode 100644 index 792efacfc2..0000000000 --- a/_install_tabs/ja-1-macos.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -tabId: osx -tabLabel: macOS -language: ja ---- -
-
-
-
- {% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %} - {% assign homebrewAlt = "または、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 - targetId='macos-get-started-alt' - extraClasses='scala-text-large alt-details-detail' - %} -
-
-
-
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-2-linux.md b/_install_tabs/ja-2-linux.md deleted file mode 100644 index a59f88d1e1..0000000000 --- a/_install_tabs/ja-2-linux.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -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-3-windows.md b/_install_tabs/ja-3-windows.md deleted file mode 100644 index 76ff527bea..0000000000 --- a/_install_tabs/ja-3-windows.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -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/_install_tabs/ja-4-other.md b/_install_tabs/ja-4-other.md deleted file mode 100644 index 0e400d4fcb..0000000000 --- a/_install_tabs/ja-4-other.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -tabId: other -tabLabel: Other -fallbackNoJS: true -language: ja ---- -
-
-
-
- -

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

-
-
-
-
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/alt-details.scss b/_sass/layout/alt-details.scss deleted file mode 100644 index aae4addefb..0000000000 --- a/_sass/layout/alt-details.scss +++ /dev/null @@ -1,46 +0,0 @@ -// ALT-DETAILS -//------------------------------------------------ -//------------------------------------------------ - -.alt-details { - margin: 10px 0px; - - button.alt-details-toggle { - width: 100%; - border: none; - background-color: #b635c4; - padding: 5px 10px; - border-radius: 15px; - font-size: $font-size-medium; - cursor: pointer; - font-weight: 500; - color: #fff; - - &:hover { - background-color: #941fa1; - } - - &:after { - content: "\f13a"; // - font-family: "Font Awesome 5 Free"; - font-weight: 900; - font-size: 15px; - color: #fff; - float: right; - margin-top: 2px; - } - - &.alt-details-closed:after { - content: "\f138"; // - } - } - - .alt-details-detail { - background-color: rgb(248, 226, 255); - border: 1px solid rgb(239, 207, 248); - padding-top: 25px; - padding-bottom: 10px; - margin-top: -15px; - margin-bottom: 10px; - } -} diff --git a/_sass/layout/scala-in-action.scss b/_sass/layout/scala-in-action.scss deleted file mode 100755 index 297dda244e..0000000000 --- a/_sass/layout/scala-in-action.scss +++ /dev/null @@ -1,159 +0,0 @@ -// SCALA-IN-ACTION -//------------------------------------------------ -//------------------------------------------------ - -.scala-in-action { - - .tabcontent { - .scala-text { - .alt-details { - button.alt-details-toggle { - border: 1px solid #a0dff0; - background-color: #d1e5eb; - color: $gray; - - &:hover { - background-color: #b8deea; - } - - &:after { - color: $gray; - } - } - - .alt-details-detail { - background-color: $gray-light; - border: 1px solid darken($gray-light, 3%); - } - } - } - } - - .scala-in-action-content { - transition: $base-transition; - - - .scala-in-action-code { - // display: none; - // background: $gray-dark; - padding: 20px 0; - - .wrap { - margin-bottom: 0px; - } - - .snippet { - position: relative; - margin: 10px 0px; - cursor: default; - width: 100%; - - &:hover { - .buttons { - opacity: 0.95; - - &:active { - opacity: 0.3; - } - } - } - - .buttons { - position: absolute; - right: 4px; - top: 5px; - transition: all .2s ease; - display: flex; - opacity: 0; - flex-direction: row-reverse; - justify-content: flex-start; - - button { - outline: none; - background: #fff; - border: none; - font-size: $font-size-medium; - color: rgba($gray, .6); - cursor: pointer; - - i { - font-weight: $font-bold; - } - } - } - - pre.snippet-code { - margin: 0px; - display: block; - overflow-x: auto; - - code { - overflow-x: auto; - display: block; - } - } - } - - .scala-code { - - @include span-columns(7); - - @include bp(large) { - @include span-columns(12); - } - } - - .scala-text { - - details { - summary { - - &:hover { - background-color: lighten($gray-lighter, 5%); - } - } - - summary>* { - display: inline; - } - } - - code { - padding: 3px 6px; - color: #859900; - background-color: #fff; - border-radius: 10px; - border: 1px solid $gray-light; - } - - .snippet { - pre.snippet-code { - code { - padding: 7px 6px; - border: 1px solid darken($gray-light, 10%); - } - } - } - - @include span-columns(5); - - @include bp(large) { - @include span-columns(12); - } - - h3 { - font-size: 1.525rem; - margin-bottom: 20px; - } - - p { - color: $base-font-color; - } - - &.scala-text-large { - @include span-columns(12); - } - } - } - } -} diff --git a/_sass/layout/tabsection.scss b/_sass/layout/tabsection.scss deleted file mode 100755 index 71c2777183..0000000000 --- a/_sass/layout/tabsection.scss +++ /dev/null @@ -1,60 +0,0 @@ -// TABSECTION -//------------------------------------------------ -//------------------------------------------------ - -.recommended-install { - margin-top: -2em; - .tabsection { - background: $gray-lighter; - } -} - -.tabsection { - - &.inline-tabs { - margin: 20px 0px; - } - - /* Style the tab */ - .tab { - overflow: hidden; - margin-bottom: -12px; - } - - /* Style the buttons that are used to open the tab content */ - .tab button { - font-family: $heading-font-family; - font-size: $font-size-medium; - font-weight: $font-bold; - color: lighten($gray, 25%); - background-color: inherit; - float: left; - border: none; - border-radius: 30px; - outline: none; - cursor: pointer; - padding: 14px 16px; - } - - /* Change background color of buttons on hover */ - .tab button:hover { - color: #fff; - background-color: $gray; - border-bottom: $base-border-white; - } - - /* Create an active/current tablink class */ - .tab button.active { - background-color: $gray; - border-bottom: $base-border-white; - color: #fff; - } - - /* Style the tab content */ - .tabcontent { - display: none; - padding: 0px 2px; - border-top: none; - transition: all .5s linear; - } -} 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 02ed07ce47..c7f0016ba9 100755 --- a/resources/css/style.scss +++ b/resources/css/style.scss @@ -28,9 +28,6 @@ @import 'layout/twitter-feed'; @import 'layout/cheatsheet'; @import 'layout/ides'; -@import 'layout/alt-details'; -@import 'layout/tabsection'; -@import 'layout/scala-in-action'; @import 'layout/nutshell'; @import 'layout/overviews'; @import 'layout/sips'; @@ -66,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 cc61873b19..4d55b546dd 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -392,55 +392,70 @@ function getOS() { return osname; } -function toggleElement(evt, elemId) { - var btn = evt.target; - var elem = document.getElementById(elemId); - if (elem.style.display === "none") { - elem.style.display = "block"; - } else { - elem.style.display = "none"; - } - $(btn).toggleClass("alt-details-closed"); -} - -$(document).ready(function() { - $('.alt-details-toggle').click(); +$(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(); + }); }); -function copySnippet(evt) { - var snippet = evt.target.closest('.snippet').querySelector('.snippet-code'); - var code = snippet.querySelector('code').innerText; - window.navigator.clipboard.writeText(code) -} - -function openTab(evt, category, tabName) { - // Get all elements with class="tabcontent" and hide them - $('.tabcontent-' + category + '.tabcontent').css('display', 'none'); - - var queried = evt.target; - - // Get all elements with class="tablinks" and remove the class "active" - $('.tablinks-' + category + '.tablinks').removeClass('active'); - - // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(category + '-' + tabName).style.display = "block"; - queried.className += " active"; -} +$(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() { - var defaultTabs = document.getElementsByClassName('default-tab'); - for (i = 0; i < defaultTabs.length; i++) { - defaultTabs[i].click(); - } +$(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) { - let os = getOS(); + var os = getOS(); if (os === 'unix') { os = 'linux'; } - $("#get-started-tab-" + os).click(); + $("#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(); + } + }); } });