Don't hide install options behind link

- First, show only the instructions specific to the detected platform.

- Then, always display the cargo, npm, and yarn install options below.

- Add a note to the unix instructions to say you can use the
  alternative options if you don't like piping `curl` into `sh`.

Fixes #355

docs/_installer/index.html

@@ -5,10 +5,6 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
   <link rel="stylesheet" href="../public/custom.css"/>
   <style>
-    .instructions {
-      padding: 100px;
-      border: 1px solid #eee;
-    }
     .winlink {
       display: block;
     }
@@ -29,7 +25,7 @@
           <a href="/wasm-pack">
             <img src="../public/img/rustwasm.png">
           </a>
-        </a>
+        </li>
         <li class="navbar-item">
           <a href="https://github.com/rustwasm/wasm-pack/issues/new/choose">File an Issue</a>
         </li>
@@ -47,37 +43,33 @@
     <h1>Install <code>wasm-pack</code></h1>
     <div class="container">
       <div id="platform-instructions-unix" style="display: none;">
-        <div class="curl">
+        <p>
-          <code>curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</code>
+          You appear to be running a *nix system (Unix, Linux, MacOS).
-          <p>
+          Install by running:
-            You appear to be running a *nix system (Unix, Linux, MacOS). If not,
+        </p>
-            <a class="default-platform-button" href="#">display all supported installers</a>.
+        <pre class="primary">curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</pre>
-          </p>
+        <p>
-        </div>
+          If you're not on *nix, or you don't like installing from <b>curl</b>,
+          follow the alternate instructions below.
+        </p>
       </div>
 
-      <div id="platform-instructions-win64" class="instructions" style="display: none;">
+      <div id="platform-instructions-win64" style="display: none;">
         <p>
-          You appear to be running Windows 64-bit, download and run
+          You appear to be running Windows 64-bit. Download and run
-          <a class='winlink' href="https://github.com/rustwasm/wasm-pack/releases/download/$VERSION/wasm-pack-init.exe">wasm-pack-init.exe</a>
+          <a class="winlink" href="https://github.com/rustwasm/wasm-pack/releases/download/$VERSION/wasm-pack-init.exe">wasm-pack-init.exe</a>
           then follow the onscreen instructions.
         </p>
         <hr/>
         <p>
-          If you're a Windows Subsystem for Linux user run the following in your
+          If you're a Windows Subsystem for Linux user, run the following in your
           terminal, then follow the onscreen instructions to install wasm-pack.
         </p>
-        <code>curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</code>
+        <pre class="primary">curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</pre>
-        <hr/>
+        <p>If you're not on Windows 64-bit, follow the alternate instructions below.</p>
-        <p>
-          You appear to be running Windows 64-bit. If not,
-          <a class="default-platform-button" href="#">
-            display all supported installers
-          </a>.
-        </p>
       </div>
 
-      <div id="platform-instructions-unknown" class="instructions" style="display: none;">
+      <div id="platform-instructions-unknown" style="display: none;">
         <p>I don't recognize your platform.</p>
         <p>
           We would appreciate it if you
@@ -92,43 +84,17 @@
         </div>
       </div>
 
-      <div id="platform-instructions-default" class="instructions">
+      <hr />
-        <div>
+
-          <p>
+      <div id="generic-instructions">
-            To install wasm-pack, if you are running a *nix system (Unix, Linux, MacOS),<br/>
+        <p>
-            run the following in your terminal, then follow the onscreen
+          To install from source on any platform:
-            instructions.
+        </p>
-          </p>
+        <p><code>cargo install wasm-pack</code></p>
-          <code>curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</code>
+        <p>
-        </div>
+          On supported platforms, you can also use <b>npm</b> or <b>yarn</b> to download a precompiled binary:
-        <hr/>
+        </p>
-        <div>
+        <p><code>npm install -g wasm-pack</code> or <code>yarn global add wasm-pack</code></p>
-          <p>
-            If you are running Windows 64-bit,<br/>download and run
-            <a class='winlink' href="https://github.com/rustwasm/wasm-pack/releases/download/$VERSION/wasm-pack-init.exe">wasm-pack-init.exe</a>
-            then follow the onscreen instructions.
-          </p>
-        </div>
-        <hr/>
-        <div>
-          <p>
-            For all other platforms, run the following in your terminal:
-          </p>
-          <code>cargo install wasm-pack</code>
-        </div>
-        <hr/>
-        <div>
-          <p>
-          Install using <b>npm</b> or <b>yarn</b>:
-          </p>
-          <code>
-            npm install -g wasm-pack
-          </code>
-          or
-          <code>
-            yarn global add wasm-pack
-          </code>
-        </div>
       </div>
     </div>
   </section>

docs/_installer/wasm-pack.js

@@ -1,4 +1,4 @@
-var platforms = ["default", "unknown", "win64", "unix"];
+var platforms = ["unknown", "win64", "unix"];
 var platform_override = null;
 
 function detect_platform() {
@@ -59,25 +59,12 @@ function adjust_for_platform() {
     platforms.forEach(function (platform_elem) {
         var platform_div = document.getElementById("platform-instructions-" + platform_elem);
         platform_div.style.display = "none";
-        if (platform == platform_elem ||
+        if (platform === platform_elem) {
-            (platform == 'unknown' && platform_elem == 'default')) {
             platform_div.style.display = "block";
         }
     });
 }
 
-function go_to_default_platform() {
-    platform_override = 0;
-    adjust_for_platform();
-}
-
-function set_up_default_platform_buttons() {
-    var defaults_buttons = document.getElementsByClassName('default-platform-button');
-    for (var i = 0; i < defaults_buttons.length; i++) {
-        defaults_buttons[i].onclick = go_to_default_platform;
-    }
-}
-
 function fill_in_bug_report_values() {
     var nav_plat = document.getElementById("nav-plat");
     var nav_app = document.getElementById("nav-app");
@@ -87,6 +74,5 @@ function fill_in_bug_report_values() {
 
 (function () {
     adjust_for_platform();
-    set_up_default_platform_buttons();
     fill_in_bug_report_values();
 }());

docs/public/custom.css

@@ -79,15 +79,10 @@
   width: 20%;
 }
 
-.curl {
+pre.primary {
-  padding: 50px;
+  margin: 0 auto 2.5rem auto;
-}
+  width: fit-content;
-
-.curl p {
-  margin-top: 50px;
-}
 
-.curl code {
   padding: 20px;
   font-size: 2rem;
   background-color: #000;