Refactor landing page and add pages for each usecase.

README.md

@@ -124,7 +124,9 @@ that embeds JARs of the scala-cli modules, and downloads their dependencies
 from Maven Central upon first launch (using the coursier cache, just like
 a coursier bootstrap).
 
-### Website commands
+### Website 
+
+The Scala CLI website is built with [Docusaurus](https://v1.docusaurus.io/en/) and uses [Infima](https://infima.dev/docs/layout/spacing) for styling. 
 
 #### Generate the website once
 
@@ -140,3 +142,7 @@ npm run serve
 cd website
 yarn run start
 ```
+
+## Scala CLI logos
+
+Package with various logos for scala-cli can be found on [google drive](https://drive.google.com/drive/u/1/folders/1M6JeQXmO4DTBeRBKAFJ5HH2p_hbfQnqS)

website/docusaurus.config.js

@@ -5,7 +5,8 @@ let isCI = process.env.CI || false;
 module.exports = {
   title: 'Scala CLI',
   tagline: 'More featureful Scala Command-Line',
-  url: 'https://virtuslab.github.io',
+  url: 'https://scala-cli.virtuslab.org/',
+  baseUrl = '/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
@@ -19,6 +20,28 @@ module.exports = {
         src: 'img/logo.svg',
       },
       items: [
+        {
+         // type: 'doc',
+          label: "Use cases",
+          items: [
+            {
+              to: '/education',
+              label: 'Education',
+            },
+            {
+              to: '/scripting',
+              label: 'Scripting',
+            },
+            {
+              to: '/prototyping',
+              label: 'prototyping, experimenting, reproducing',
+            },
+            {
+              to: '/projects',
+              label: 'Single-module projects',
+            }
+          ]
+        },
         {
           type: 'doc',
           docId: 'installation',
@@ -83,9 +106,3 @@ module.exports = {
     ],
   ],
 };
-
-if (isCI) {
-  module.exports.baseUrl = '/scala-cli/';
-} else {
-  module.exports.baseUrl = '/';
-}

website/src/components/Section.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Section(props){ 
+  return <div className="row">
+  <div className="col col--7 col--offset-1 text--left">
+    <div className="text--center padding--lg"/>
+    {props.children}
+  </div>
+  <div className="col col--4">
+    {props.image ? <img src={props.image}/> : ""}
+  </div>
+</div>
+}

website/src/components/TitleSection.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function TitleSection(props){ 
+  return <div className="row">
+    <div className="install-section col col--6 col--offset-2 text--left">
+      {props.children}
+    </div>
+    <div className="install-section col col--4 text--center">
+      {props.right}
+    </div>
+  </div> 
+}

website/src/components/basicInstall.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import DownloadButton from './DownloadButton';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
+
+function defaultOS(){ return window ? (window.navigator.userAgent.indexOf("Win") != -1 ? "win" : "mac/linux") : "mac/linux" }
+
+export default function BasicInstall(props){
+  return  <BrowserOnly>{() =>
+      <div>
+        <Tabs 
+          groupId="operating-systems"
+          defaultValue={defaultOS()}
+        values={[
+          {label: 'Windows', value: 'win'},
+          {label: 'macOS/Linux', value: 'mac/linux'},
+        ]}>
+          <TabItem value="win">
+            <a className="no_monospace" href="https://github.com/Virtuslab/scala-cli/releases/download/nightly/scala-cli-x86_64-pc-win32.msi">
+              Download Scala CLI for Windows
+            </a>
+          </TabItem>
+          <TabItem value="mac/linux">
+            <p>Run the following one-line command in your terminal 
+              <br/>
+              <code> bash
+                curl -sSLf https://virtuslab.github.io/scala-cli-packages/scala-setup.sh | sh
+              </code>
+            </p>
+          </TabItem>
+        </Tabs>
+      </div>          
+  }</BrowserOnly>
+}

website/src/components/features.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import BasicInstall from "../components/basicInstall"
+
+const Feature = (props) =>
+  <div className="row padding--md feature-row">
+    <div className="col col--1"/>
+    <div className="col col--6" key="img">
+      {!props.image ? "" : <div className="green_border"><img src={props.image}/></div>}
+    </div>
+    <div className="col col--5" key="text">
+      <div className="padding--md"/>
+      <h3>{props.title}</h3>
+      <div className="padding--sm"/>
+      {props.children}
+    </div>
+    <div className="col col--1"/>
+  </div>
+
+const FeatureList = [
+    <Feature image="img/envs.gif" title="Scala versions, dependencies and JVMs" 
+      key="versions" education="true" projects="true" scripting="true" prototyping="true"> 
+      <p>
+        Scala CLI is built on top of coursier
+        <br/>
+        This allow us to manage Scala versions, dependencies and JVMs so you can test your code in different environments by changing single option.
+      </p>
+
+      <p>
+        Scala CLI ships with all its dependencies
+        <br/>
+        No need to fluff with installing JVM or setting up PATH. 
+      </p>
+    </Feature>,
+    <Feature image="img/envs.gif" title="Universal tool" key="universal" 
+      projects="true" scripting="true" prototyping="true">
+      <p>
+        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>
+      </p>
+    </Feature>,
+    <Feature 
+      image="https://user-images.githubusercontent.com/1408093/68486864-dd9f2b00-01f6-11ea-9291-d3a7ce6ef225.png" 
+      title="We do not call Scala CLI a build tool" key="buildtool" projects="true">
+        <p>
+          Scala CLI shares some similarities with build tools,
+          but doesn't aim at supporting multi-module projects,
+          nor to be extended via a task system known from sbt, mill or bazel.
+        </p>,
+        <p>
+          Scala ecosystem has multiple amazing build tools, there is no need to create another one.
+        </p>
+   </Feature>
+]
+
+export default function allFeatures() {  
+  return FeatureList 
+}

website/src/css/custom.css

@@ -63,4 +63,48 @@
   .flex-row-reverse, .flex-row {
     display: block; 
   }
+}
+
+.red_border {
+  border: rgb(209, 30, 34) 3px dotted;
+  margin: 10px;
+}
+.green_border {
+  border: green 3px dotted;
+  padding: 10px;
+  margin: 10px;
+}
+
+
+.content p:before {
+  content: ">_ ";
+  color: green;
+}
+
+.content h1:before {
+  content: ">_ ";
+  color: red;
+}
+
+.content h1 {
+  margin: 20px;
+}
+
+.content {
+  font-size: 15px;
+}
+.content h1,h2 {
+  font-family: monospace;
+}
+
+.no_monospace {
+  font-family: auto;
+}
+
+.feature-row:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.feature-row:nth-child(even) .col--1:first-child {
+  display: none;
 }

website/src/pages/education.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import TitleSection from '../components/TitleSection';
+import Section from '../components/Section';
+import allFeatures from '../components/features';
+
+const Index = (props) => {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout title="Education" description="Page describing why Scala CLI is good within educational purposes, mainly learning Scala.">
+      <div className="container padding--sm content">
+        <TitleSection><h1>Scala CLI for Education</h1></TitleSection>
+
+        <Section>
+          <p>TODO: describe why Scala CLI is a perfect for learning Scala! Plus some image?</p>
+        </Section>
+
+        {allFeatures().filter(f => f.props.education)}
+      </div>
+    </Layout>
+  );
+};
+
+export default Index;