Installation instructions: rework for all platforms

_assets/css/_generic.scss

@@ -82,7 +82,11 @@ table.no-underline a {
 .small {
   font-size: 85%;
 }
-
+.hr-light {
+  border-style: solid;
+  border-color: $lighter-gray;
+  border-width: 1px 0 0 0;
+}
 .wrapper {
 
   .brand-logo {

_assets/css/_install.scss

@@ -0,0 +1,70 @@
+.container.install {
+  padding: 8rem 0 5rem;
+  .distro-title {
+    @extend .black-text;
+    text-align: center;
+    margin-bottom: 5rem;
+  }
+  h2 {
+    text-transform: none;
+  }
+  @media only screen and (max-width: 600px) {
+    padding: 5rem 0;
+    h1 {
+      font-size: 3.4rem;
+      &.distro-title {
+        margin-bottom: 2rem;
+      }
+    }
+  }
+  h1 a:hover {
+    @extend .black-text;
+  }
+}
+
+.distro-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-gap: 5rem 0;
+  > div {
+    text-align: center;
+    .distro-icon {
+      height: 40px;
+    }
+    img {
+      width: 30px;
+    }
+    a {
+      color: $black;
+    }
+  }
+}
+
+.done-install {
+  text-align: center;
+  padding: 4rem 0 3rem;
+
+  h1, h2 {
+    @extend .grey-text;
+    font-family: $codeFont;
+    margin-bottom: 3rem;
+  }
+
+  h1 {
+    font-size: 48px;
+  }
+  h2 {
+    margin-top: 3.5rem;
+    font-size: 36px;
+    font-weight: normal;
+    text-transform: none;
+  }
+  @media only screen and (max-width: 600px) {
+    h1 {
+      font-size: 2.3rem;
+    }
+    h2 {
+      font-size: 1.8rem;
+    }
+  }
+}

_assets/css/stylesheet.scss

@@ -11,7 +11,8 @@ $black:         #000000;
 $primary-text:  #777777;
 $separator:     #EBEBEB;
 $light-gray:    #D7D7D7;
-$chart:         #CCCCCC;
+$lighter-gray:  #CCCCCC;
+$chart:         $lighter-gray;
 
 // Fonts
 // -----------
@@ -31,6 +32,7 @@ $codeFont:      'Roboto Mono', monospace;
         "sprites",
         "blog",
         "media",
+        "install",
         "community",
         "pygment_overrides",
         "error",

_data/install.yaml

@@ -0,0 +1,76 @@
+-
+  url: /install/from_sources
+  caption: from sources
+  icon: install/sources@2x.png
+-
+  url: /install/from_targz
+  caption: from .tar.gz
+  icon: install/targz@2x.png
+-
+  url: /install/on_mac_os
+  caption: macOS
+  icon: install/macos@2x.png
+-
+  url: /install/on_ubuntu
+  caption: Ubuntu
+  icon: install/ubuntu@2x.png
+-
+  url: /install/on_kubuntu
+  caption: Kubuntu
+  icon: install/kubuntu@2x.png
+-
+  url: /install/on_debian
+  caption: Debian
+  icon: install/debian@2x.png
+-
+  url: /install/on_redhat
+  caption: RedHat
+  icon: install/redhat@2x.png
+-
+  url: /install/on_centos
+  caption: CentOS
+  icon: install/centos@2x.png
+-
+  url: /install/on_opensuse
+  caption: OpenSUSE
+  icon: install/opensuse@2x.png
+-
+  url: /install/on_arch_linux
+  caption: Arch Linux
+  icon: install/arch@2x.png
+-
+  url: /install/on_elementary_os
+  caption: Elementary OS
+  icon: install/elementary@2x.png
+-
+  url: /install/on_fedora
+  caption: Fedora
+  icon: install/fedora@2x.png
+-
+  url: /install/on_kde_neon
+  caption: KDE Neon
+  icon: install/kde@2x.png
+-
+  url: /install/on_manjaro
+  caption: Manjaro
+  icon: install/manjaro@2x.png
+-
+  url: /install/on_linux_mint
+  caption: Linux Mint
+  icon: install/linuxmint@2x.png
+-
+  url: /install/on_gentoo_linux
+  caption: Gentoo Linux
+  icon: install/gentoo@2x.png
+-
+  url: /install/on_alpine_linux
+  caption: Alpine Linux
+  icon: install/alpine@2x.png
+-
+  url: /install/on_freebsd
+  caption: FreeBSD
+  icon: install/freebsd@2x.png
+-
+  url: /install/on_wsl
+  caption: Windows Subsystem for Linux
+  icon: install/windows@2x.png

_includes/header.html

@@ -11,7 +11,7 @@
         </div>
         <div class='subtitle'>{{ page.description }}</div>
         <p class="main-actions">
-          <a href="https://crystal-lang.org/docs/installation/" target="_blank" class="btn btn-large btn-flat">Install</a>
+          <a href="/install/" class="btn btn-large btn-flat">Install</a>
           <a href="https://crystal-lang.org/docs/overview/" target="_blank" class="btn btn-large btn-flat">Learn</a>
           <a href="https://play.crystal-lang.org/#/cr" target="_blank" class="btn btn-large btn-flat">Try Online</a>
         </p>

_includes/install_from_linuxbrew.md

@@ -0,0 +1,14 @@
+## Linuxbrew
+
+If you have [Linuxbrew](https://linuxbrew.sh) installed you're ready to install Crystal:
+
+<div class="code_section">{% highlight bash %}
+brew update
+brew install crystal-lang
+{% endhighlight bash %}</div>
+
+If you're planning to contribute to the language itself you might find useful to install LLVM as well. So replace the last line with:
+
+<div class="code_section">{% highlight bash %}
+brew install crystal-lang --with-llvm
+{% endhighlight bash %}</div>

_includes/install_from_snapcraft.md

@@ -0,0 +1,17 @@
+## Snapcraft
+
+The Crystal snap requires to be run in classic confinement. If you have `snapd` installed you're ready to install Crystal:
+
+<div class="code_section">{% highlight bash %}
+sudo snap install crystal --classic
+{% endhighlight bash %}</div>
+
+You can also install the latest nightly build by using the `edge` channel.
+
+<div class="code_section">{% highlight bash %}
+sudo snap install crystal --classic --edge
+{% endhighlight bash %}</div>
+
+{% assign snapcraft_url = 'https://snapcraft.io/install/crystal/' | append: include.distro %}
+
+Find further information at [Crystal's snapcraft page]({{ snapcraft_url }})

_layouts/default.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang='en'>
   <head>
-    <title>{% if page.url != '/' %}{{ page.title }} - {% endif %}The Crystal Programming Language
+    <title>{% if page.url != '/' %}{% unless page.layout == "install" %}{{ page.title }}{% else %}Install {{page.subtitle}}{% endunless %} - {% endif %}The Crystal Programming Language
     </title>
     <meta charset='utf-8'>
     <!-- Import Google Icon Font -->
@@ -18,11 +18,14 @@
   <body>
     <div class="wrapper {{page.custom_body_classes | join: ' '}}">
       {% include nav.html %}
-      {% if page.is_post %}
-        {% include post_header.html %}
-      {% else %}
-        {% include header.html %}
-      {% endif %}
+      {% unless page.layout == "install" %}
+        {% if page.is_post %}
+          {% include post_header.html %}
+        {% else %}
+          {% include header.html %}
+        {% endif %}
+      {% endunless %}
+
       <main>
         {{ content }}
       </main>

_layouts/install.html

@@ -0,0 +1,22 @@
+---
+layout: default
+exclude: true
+---
+<div class="container install">
+  <h1 class="center"><a href="/install">Install</a></h1>
+  <h1 class="distro-title">{{ page.subtitle }}</h1>
+  <div class="row">
+    <div class="col offset-m1 m10 s12">
+      {{ content }}
+    </div>
+  </div>
+</div>
+<hr class="hr-light">
+<div class="done-install">
+  <h1>Done installing?</h1>
+  <a href="https://crystal-lang.org/docs/overview/" target="_blank" class="btn btn-large btn-flat">Learn</a>
+
+  <h2>Found any issues?</h2>
+  <a href="https://forum.crystal-lang.org/c/help-support" target="_blank" class="btn btn-large btn-flat">Forum
+    support</a>.
+</div>

install/from_sources.md

@@ -0,0 +1,25 @@
+---
+layout: install
+subtitle: From sources
+exclude: true
+---
+
+If you want to contribute then you might want to install Crystal from sources.
+
+1. [Install the latest Crystal release](/install). To compile Crystal, you need Crystal :).
+
+2. Make sure a supported LLVM version is present in the path. When possible, use the latest supported version: 8.0.
+
+3. Make sure to install [all the required libraries](https://github.com/crystal-lang/crystal/wiki/All-required-libraries). You might also want to read the [contributing guide](https://github.com/crystal-lang/crystal/blob/master/CONTRIBUTING.md).
+
+4. Clone the repository: `git clone https://github.com/crystal-lang/crystal`
+
+5. Run `make` to build your own version of the compiler.
+
+6. Run `make std_spec compiler_spec` to ensure all specs pass, and you've installed everything correctly.
+
+7. Use `bin/crystal` to run your crystal files.
+
+If you would like more information about `bin/crystal`, check out the [using the compiler](https://crystal-lang.org/docs/using_the_compiler/) documentation.
+
+Note: The actual binary is built in to `.build/crystal`, but the `bin/crystal` wrapper script is what you should use to run crystal.

install/from_targz.md

@@ -0,0 +1,23 @@
+---
+layout: install
+subtitle: From tar.gz
+exclude: true
+---
+
+You can download Crystal in a standalone `.tar.gz` file with everything you need to get started.
+
+The latest files can be found on the [Releases page at GitHub](https://github.com/crystal-lang/crystal/releases).
+
+Download the file for your platform and uncompress it. Inside it you will have a `bin/crystal` executable.
+
+To make it simpler to use, you can create a symbolic link available in the path:
+
+<div class="code_section">{% highlight bash %}
+ln -s [full path to bin/crystal] /usr/local/bin/crystal
+{% endhighlight bash %}</div>
+
+Then you can invoke the compiler by just typing:
+
+<div class="code_section">{% highlight bash %}
+crystal --version
+{% endhighlight bash %}</div>

install/index.html

@@ -0,0 +1,33 @@
+---
+title: Install
+description: You can install Crystal in different ways. Select your platform to find specific instructions.
+exclude: true
+---
+<div class="container">
+  <div class="row">
+    <div class="col offset-m1 m10 s12">
+      <div class="distro-list">
+        {% for item in site.data.install %}
+        <div>
+          <a href="{{ item.url }}">
+            <div class="distro-icon">
+              <img src="{{ item.icon | asset_path }}">
+            </div>
+            {{item.caption}}
+          </a>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<br />
+
+<hr class="hr-light">
+<div class="done-install">
+  <h1>Missing platform?</h1>
+
+  <a href="https://forum.crystal-lang.org/c/help-support" target="_blank" class="btn btn-large btn-flat">Forum
+    support</a>.
+</div>

install/on_alpine_linux.md

@@ -0,0 +1,17 @@
+---
+layout: install
+subtitle: On Alpine Linux
+exclude: true
+---
+
+Alpine Linux includes the Crystal compiler in the community repository, starting from version Alpine 3.7.
+
+Currently, the package is only available for `aarch64` and `x86_64` platforms.
+
+## Install
+
+<div class="code_section">
+{% highlight bash %}
+apk add crystal shards
+{% endhighlight bash %}
+</div>

install/on_arch_linux.md

@@ -0,0 +1,18 @@
+---
+layout: install
+subtitle: On Arch Linux
+exclude: true
+---
+
+Arch Linux includes the Crystal compiler in the Community repository. You should also install `shards`, Crystal's dependency manager (see [The Shards command](../the_shards_command/README.md)).
+[Snapcraft](#snapcraft) is also available.
+
+## Install
+
+<div class="code_section">
+{% highlight bash %}
+sudo pacman -S crystal shards
+{% endhighlight bash %}
+</div>
+
+{% include install_from_snapcraft.md distro="arch" %}