Skip to content

Commit 0ac46fb

Browse files
bishaboshabishabosha
committed
add tabs on get-started page (english)
1 parent 0e17374 commit 0ac46fb

File tree

14 files changed

+456
-42
lines changed

14 files changed

+456
-42
lines changed

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ scala-3-version: 3.1.2
2121

2222
collections:
2323
contribute_resources:
24+
output: false
25+
install_tabs:
26+
output: false
2427
style:
2528
output: true
2629
overviews:

‎_data/setup-scala.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
linux: curl -fL https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-linux.gz | gzip -d > cs && chmod +x cs && ./cs setup
2+
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
3+
macOS-brew: brew install coursier/formulas/coursier && cs setup
4+
windows-link: https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-win32.zip

‎_includes/code-snippet.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="snippet">
2+
<div class="buttons">
3+
<div><button class="copy-button" onclick="copySnippet(event)"><i class="fa fa-clone"></i></button></div>
4+
</div>
5+
<pre class="snippet-code"><code class="{{include.language}}">{{include.codeSnippet}}</code></pre>
6+
</div>

‎_includes/getting-started.md

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,29 @@ It ensures that a JVM and standard Scala tools are installed on your system.
2121
Install it on your system with the following instructions.
2222

2323
<div class="main-download">
24-
<div id="download-step-one">
25-
<p>Follow <a href="https://get-coursier.io/docs/cli-installation.html#native-launcher" target="_blank">the instructions to install the <code>cs</code> launcher</a> then run:</p>
26-
<p><code>$ ./cs setup</code></p>
24+
<div class="recommended-install scala-in-action">
25+
<div class="scala-in-action-content">
26+
<div class="scala-in-action-code">
27+
<div class="scala-text scala-text-large">
28+
{% include tabsection.html extraClasses='inline-tabs' category='get-started' collection=site.install_tabs %}
29+
<div class="alt-details">
30+
<button class="alt-details-toggle" onclick="toggleElement(event, 'macos-get-started-alt1')">Testing your
31+
setup</button>
32+
<div id="macos-get-started-alt1" class="scala-text scala-text-large alt-details-detail">
33+
<div class="wrap">
34+
<p>Check your setup with the command <code>scala -version</code>, which should output:</p>
35+
<div class="snippet">
36+
<pre class="snippet-code"><code>$ scala -version
37+
Scala code runner version {{site.scala-3-version}} -- Copyright 2002-2022, LAMP/EPFL</code></pre>
38+
</div>
39+
<p>If that does not work, you may need to log out and log back in (or reboot) in order for the changes to take effect.
40+
</p>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
2747
</div>
2848
</div>
2949

@@ -165,29 +185,3 @@ Once you've finished the above tutorials, consider checking out:
165185
166186
## Getting Help
167187
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.
168-
169-
<!-- Hidden elements whose content are used to provide OS-specific download instructions.
170-
-- This is handled in `resources/js/functions.js`.
171-
-->
172-
<div style="display:none" id="stepOne-linux">
173-
<code class="hljs">$ curl -fL https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-linux.gz | gzip -d > cs && chmod +x cs && ./cs setup</code><br>
174-
</div>
175-
176-
<div style="display:none" id="stepOne-unix">
177-
<p>Follow <a href="https://get-coursier.io/docs/cli-installation" target="_blank">the instructions to install the <code>cs</code> launcher</a> then run:</p>
178-
<p><code>$ ./cs setup</code></p>
179-
</div>
180-
181-
<div style="display:none" id="stepOne-osx">
182-
<div class="highlight">
183-
<code class="hljs">$ brew install coursier/formulas/coursier && cs setup </code> <br>
184-
</div>
185-
<p>Alternatively, if you don't use Homebrew</p>
186-
<div class="highlight">
187-
<code class="hljs">$ 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</code> <br>
188-
</div>
189-
</div>
190-
191-
<div style="display:none" id="stepOne-windows">
192-
<p>Download and execute <a href="https://github.com/coursier/launchers/raw/master/cs-x86_64-pc-win32.zip">the Scala installer for Windows</a> based on coursier</p>
193-
</div>

‎_includes/tabsection.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="tabsection {{include.extraClasses}}">
2+
<div class="tab">
3+
{% for tabRoot in include.collection %}
4+
<button
5+
id="{{include.category}}-tab-{{tabRoot.tabId}}"
6+
class="tablinks-{{include.category}} tablinks{%if tabRoot.isDefault %} default-tab{% endif %}{% if tabRoot.isDefault or tabRoot.fallbackNoJS %} active{% endif %}"
7+
onclick="openTab(event, '{{include.category}}', '{{tabRoot.tabId}}')"
8+
>{{tabRoot.tabLabel}}</button>
9+
{% endfor %}
10+
</div>
11+
{% for tabRoot in include.collection %}
12+
<div id="{{include.category}}-{{tabRoot.tabId}}"
13+
{% if tabRoot.isDefault or tabRoot.fallbackNoJS %}
14+
style="display:block;"
15+
{% else %}
16+
style="display: none;"
17+
{% endif %}
18+
class="tabcontent-{{include.category}} tabcontent">{{tabRoot.content}}</div>
19+
{% endfor %}
20+
</div>

‎_install_tabs/1-macos.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
tabId: osx
3+
tabLabel: macOS
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
10+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-brew %}
11+
<div class="alt-details">
12+
<button class="alt-details-toggle"
13+
onclick="toggleElement(event, 'macos-get-started-alt')">Alternatively, if you don't use Homebrew:</button>
14+
<div id="macos-get-started-alt" class="scala-text scala-text-large alt-details-detail">
15+
<div class="wrap">
16+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.macOS-default %}
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>

‎_install_tabs/2-linux.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
tabId: linux
3+
tabLabel: Linux
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Run the following command in your terminal, following the on-screen instructions:</p>
10+
{% include code-snippet.html language='bash' codeSnippet=site.data.setup-scala.linux %}
11+
</div>
12+
</div>
13+
</div>
14+
</div>

‎_install_tabs/3-windows.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
tabId: windows
3+
tabLabel: Windows
4+
---
5+
<div class="scala-in-action-content">
6+
<div class="scala-in-action-code">
7+
<div class="wrap">
8+
<div class="scala-text scala-text-large">
9+
<p>Download and execute <a href="{{site.data.setup-scala.windows-link}}">the Scala
10+
installer for Windows</a> based on Coursier, and follow the on-screen instructions.</p>
11+
</div>
12+
</div>
13+
</div>
14+
</div>

‎_install_tabs/4-other.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
tabId: other
3+
tabLabel: Other
4+
fallbackNoJS: true
5+
---
6+
<div class="scala-in-action-content">
7+
<div class="scala-in-action-code">
8+
<div class="wrap">
9+
<div class="scala-text scala-text-large">
10+
<noscript>
11+
<p><span style="font-style:italic;">JavaScript is disabled, showing the default options.</span></p>
12+
</noscript>
13+
<p>Follow the documentation from Coursier on <a href="https://get-coursier.io/docs/cli-installation" target="_blank">how to install and run <code class="bash">cs setup</code></a>.</p>
14+
</div>
15+
</div>
16+
</div>
17+
</div>

‎_sass/layout/alt-details.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// ALT-DETAILS
2+
//------------------------------------------------
3+
//------------------------------------------------
4+
5+
.alt-details {
6+
margin: 10px 0px;
7+
8+
button.alt-details-toggle {
9+
width: 100%;
10+
border: none;
11+
background-color: #b635c4;
12+
padding: 5px 10px;
13+
border-radius: 15px;
14+
font-size: $font-size-medium;
15+
cursor: pointer;
16+
font-weight: 500;
17+
color: #fff;
18+
19+
&:hover {
20+
background-color: #941fa1;
21+
}
22+
23+
&:after {
24+
content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
25+
font-family: "Font Awesome 5 Free";
26+
font-weight: 900;
27+
font-size: 15px;
28+
color: #fff;
29+
float: right;
30+
margin-top: 2px;
31+
}
32+
33+
&.alt-details-closed:after {
34+
content: "\f138"; // <i class="fa-solid fa-circle-chevron-right"></i>
35+
}
36+
}
37+
38+
.alt-details-detail {
39+
background-color: rgb(248, 226, 255);
40+
border: 1px solid rgb(239, 207, 248);
41+
padding-top: 25px;
42+
padding-bottom: 10px;
43+
margin-top: -15px;
44+
margin-bottom: 10px;
45+
}
46+
}

0 commit comments

Comments
 (0)