Skip to content

Commit

Permalink
Don't hide install options behind link
Browse files Browse the repository at this point in the history 
- 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 rustwasm#355
  • Loading branch information
@oyamauchi
oyamauchi committed Mar 16, 2023
1 parent b4e619c commit 50e9410
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 86 deletions.
90 changes: 28 additions & 62 deletions docs/_installer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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>
Expand All @@ -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">
<code>curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</code>
<p>
You appear to be running a *nix system (Unix, Linux, MacOS). If not,
<a class="default-platform-button" href="#">display all supported installers</a>.
</p>
</div>
<p>
You appear to be running a *nix system (Unix, Linux, MacOS).
Install by running:
</p>
<pre class="primary">curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</pre>
<p>
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
<a class='winlink' href="https://github.com/rustwasm/wasm-pack/releases/download/$VERSION/wasm-pack-init.exe">wasm-pack-init.exe</a>
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>
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>
<hr/>
<p>
You appear to be running Windows 64-bit. If not,
<a class="default-platform-button" href="#">
display all supported installers
</a>.
</p>
<pre class="primary">curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</pre>
<p>If you're not on Windows 64-bit, follow the alternate instructions below.</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
Expand All @@ -92,43 +84,17 @@ <h1>Install <code>wasm-pack</code></h1>
</div>
</div>

<div id="platform-instructions-default" class="instructions">
<div>
<p>
To install wasm-pack, if you are running a *nix system (Unix, Linux, MacOS),<br/>
run the following in your terminal, then follow the onscreen
instructions.
</p>
<code>curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh</code>
</div>
<hr/>
<div>
<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>
<hr />

<div id="generic-instructions">
<p>
To install from source on any platform:
</p>
<p><code>cargo install wasm-pack</code></p>
<p>
On supported platforms, you can also use <b>npm</b> or <b>yarn</b> to download a precompiled binary:
</p>
<p><code>npm install -g wasm-pack</code> or <code>yarn global add wasm-pack</code></p>
</div>
</div>
</section>
Expand Down
18 changes: 2 additions & 16 deletions docs/_installer/wasm-pack.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var platforms = ["default", "unknown", "win64", "unix"];
var platforms = ["unknown", "win64", "unix"];
var platform_override = null;

function detect_platform() {
Expand Down Expand Up @@ -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 ||
(platform == 'unknown' && platform_elem == 'default')) {
if (platform === platform_elem) {
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");
Expand All @@ -87,6 +74,5 @@ function fill_in_bug_report_values() {

(function () {
adjust_for_platform();
set_up_default_platform_buttons();
fill_in_bug_report_values();
}());
11 changes: 3 additions & 8 deletions docs/public/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,10 @@
width: 20%;
}

.curl {
padding: 50px;
}

.curl p {
margin-top: 50px;
}
pre.primary {
margin: 0 auto 2.5rem auto;
width: fit-content;

.curl code {
padding: 20px;
font-size: 2rem;
background-color: #000;
Expand Down

0 comments on commit 50e9410

Please sign in to comment.