From b04afc8126834b3777b8303a05041abfb6caf78a Mon Sep 17 00:00:00 2001
From: Krzysztof Romanowski <kromanowski@virtuslab.com>
Date: Fri, 15 Oct 2021 07:57:54 -0700
Subject: [PATCH] Add scala-js and scala-native installation (#216)

---
 website/docs/_advanced_install.mdx            | 46 +++++++++++++++++--
 website/src/components/SectionAbout.js        | 12 ++---
 website/src/components/features.js            |  3 +-
 .../src/scss/components/section-about.scss    |  6 ++-
 4 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/website/docs/_advanced_install.mdx b/website/docs/_advanced_install.mdx
index 8b3b4a43a6..89b7966c96 100644
--- a/website/docs/_advanced_install.mdx
+++ b/website/docs/_advanced_install.mdx
@@ -5,7 +5,7 @@ import DownloadButton from "../src/components/DownloadButton"
 import {currentOs} from "../src/components/osUtils";
 
 <SectionAbout title="Advanced Installation">
-    <div class="margin--lg"/>
+    <div className="margin--lg"/>
     <Tabs
         groupId="operating-systems-specific"
         defaultValue={currentOs()}
@@ -232,7 +232,7 @@ brew install Virtuslab/scala-cli/scala-cli
 
 
 <SectionAbout title="Standalone launcher">
-    <div class="margin--lg"/>
+    <div className="margin--lg"/>
     <Tabs
         defaultValue={currentOs() == 'win' ? 'windows' : 'macOS/Linux'}
         groupId="specific-standalone-launcher"
@@ -268,7 +268,7 @@ Script to automatically download and cache standalone `scala-cli` launcher.
 
 
 <SectionAbout title="Shell completions">
-    <div class="margin--lg"/>
+    <div className="margin--lg"/>
     <Tabs
         defaultValue={currentOs() == 'mac' ? 'zsh' : 'bash'}
         groupId="shell-specific"
@@ -283,11 +283,31 @@ Script to automatically download and cache standalone `scala-cli` launcher.
 
 
 Try the completions with
+
+<Tabs groupId="shell-specific" 
+      defaultValue="bash"
+      values={[
+        {label: 'Bash', value: 'bash'},
+        {label: 'zsh', value: 'zsh'},
+        ]}>
+<TabItem value="bash">
+
+```
+eval "$(scala-cli install completions --env --shell bash)"
+scala-cli --<TAB>
+```
+
+</TabItem>
+<TabItem value="zsh">
+
 ```
-eval "$(scala-cli install completions --env)"
+eval "$(scala-cli install completions --env --shell zsh)"
 scala-cli --<TAB>
 ```
 
+</TabItem>
+</Tabs>
+
 Install them on your system with
 ```bash
 scala-cli install completions
@@ -315,4 +335,22 @@ scala-cli install completions --shell zsh
 
 </TabItem>
 </Tabs>
+</div></div>
+
+<div id="scala-js"/>
+<SectionAbout title="Scala JS"/>
+<div className="row"><div className="col col--9 col--offset-1 padding--lg advanced_install_methods">
+
+To run Scala JS applications [Node.js](https://nodejs.org/) needs to be installed. Scala CLI at this moment does not manage Node.js however it may change in the future.
+
+</div></div>
+
+<div id="scala-native"/>
+<SectionAbout title="Scala Native"/>
+<div className="row"><div className="col col--9 col--offset-1 padding--lg advanced_install_methods">
+
+[Clang](https://llvm.org/docs/GettingStarted.html#requirements) is required to compile and run Scala Native applications. Using some functionalities known from JDK (like using `java.util.zip` package) require additional packages to be installed. 
+
+Scala Native page contains detailed [installation guide](https://scala-native.readthedocs.io/en/latest/user/setup.html#installing-clang-and-runtime-dependencies).
+
 </div></div>
\ No newline at end of file
diff --git a/website/src/components/SectionAbout.js b/website/src/components/SectionAbout.js
index 8252dcba34..336761a6b1 100644
--- a/website/src/components/SectionAbout.js
+++ b/website/src/components/SectionAbout.js
@@ -1,12 +1,12 @@
 import React from 'react';
 
-export default function SectionAbout(props){ 
-  return <div className="section-about__wrapper row">
-        <div className="col col--1 big-title pre-title">
-            &gt;_
-        </div>
+export default function SectionAbout(props){
+  const id = props.title.toLowerCase().split(" ").join("-")
+  const link = <a href={"#" + id} >&gt;_</a> 
+  return <div className="section-about__wrapper row" id={id}>
+        <div className="col col--1 big-title pre-title">{link}</div>
         <div className="col col--3 big-title">
-            <span className="pre-title-mobile">&gt;_</span> {props.title}
+            <span className="pre-title-mobile">{link}</span> {props.title}
         </div>
         <div className="col col--8 description">
             {props.children}
diff --git a/website/src/components/features.js b/website/src/components/features.js
index 90e1546f5b..f306ebae92 100644
--- a/website/src/components/features.js
+++ b/website/src/components/features.js
@@ -15,6 +15,7 @@ const featuresList = [
         Scala CLI ships with all its dependencies
         <br/>
         No need to fluff with installing JVM or setting up PATH. 
+        <i>some additional setup may be required for <a href="/install#scala-js">JS</a> and <a href="/install#scala-native">Native</a></i>
       </p>
     </ImageBox>,
     <ImageBox image="universal_tool.svg" title="Universal tool" key="universal" 
@@ -23,7 +24,7 @@ const featuresList = [
         If you want to use older <b>version of Scala</b> or
         run your code in <b>JS</b> or <b>Native</b> environments we've got you covered.
         <br/>
-        <i>some additional <a href="TODO?">setup</a> may be required for JS and Native</i>
+        <i>some additional setup may be required for <a href="/install#scala-js">JS</a> and <a href="/install#scala-native">Native</a></i>
       </p>
       <p>Switching between platforms or Scala versions is as easy as changing a parameter.</p>
     </ImageBox>,
diff --git a/website/src/scss/components/section-about.scss b/website/src/scss/components/section-about.scss
index 9cfe31e460..eedd6510ac 100644
--- a/website/src/scss/components/section-about.scss
+++ b/website/src/scss/components/section-about.scss
@@ -26,18 +26,20 @@
             margin-bottom: 15px;
         }
 
-        .pre-title-mobile{
+        .pre-title-mobile a{
             color: #DE3D3B;
+            text-decoration: none;
 
             @media ( min-width: 376px){
                 display: none;
             }
         }
 
-        &.pre-title{
+        &.pre-title a{
             text-align: right;
             padding-left: 20px;
             color: #DE3D3B;
+            text-decoration: none;
 
             @media ( max-width: 375px){
                 display: none;