Skip to content

Commit 8b2bf49

Browse files
ashleygwilliamsashleygwilliams
committed
feat(website): add build it with wasm-pack section and footer
1 parent bf6c3a9 commit 8b2bf49

File tree

5 files changed

+100
-2
lines changed

5 files changed

+100
-2
lines changed

‎docs/index.html

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<head>
33
<meta charset="utf-8">
44
<title>wasm-pack</title>
5+
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
56
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
67
<link rel="stylesheet" href="./public/custom.css" />
78
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
@@ -42,15 +43,67 @@ <h1><code>wasm-pack</code></h1>
4243
<h2>📦✨ your favorite rust -> wasm workflow tool!</h2>
4344
</div>
4445
<div class="five columns" id="installer">
45-
<a class="button button-primary" href="/wasm-pack/installer">✨ Install wasm-pack 0.5.1 ✨</a>
46+
<a class="button button-primary" href="/wasm-pack/installer">✨ Install✨</a>
4647
<p>9 Oct 2018 |
4748
<a href="https://github.com/rustwasm/wasm-pack/releases/tag/v0.5.1">
48-
Release Notes
49+
0.5.1 Release Notes
4950
</a>
5051
</p>
5152
</div>
5253
</div>
5354
</header>
55+
<hr/>
56+
<section id="build">
57+
<div class="container">
58+
<h2>Build it with wasm-pack!</h2>
59+
<div class="row">
60+
<div class="four columns">
61+
<header>
62+
<img src="./public/img/webpack.jpeg" alt="webpack" />
63+
<h4>Hybrid Applications with Webpack</h4>
64+
</header>
65+
<p>
66+
Develop a WebAssembly module alongside any JavaScript project
67+
that leverages Webpack. Edit your Rust and watch your WebAssembly
68+
compile and reload as you work- a great way to start exploring
69+
WebAssembly in a JavaScript application you already work on!
70+
</p>
71+
<a href="#" class="button">Learn More</a>
72+
</div>
73+
<div class="four columns">
74+
<header>
75+
<img src="./public/img/npm-packages.png" alt="npm packages" />
76+
<h4>npm Packages for the Broswer and Node.js</h4>
77+
</header>
78+
<p>
79+
Leverage the power and breadth of the Rust ecosystem by compiling
80+
and publishing packages from these source languages as WebAssembly
81+
to the npm Registry- or write your own! Surgically replace hotpaths
82+
in your JavaScript or Node.js application with WebAssembly modules-
83+
using the same tools you use for your JavaScript dependencies!
84+
</p>
85+
<a href="#" class="button">Learn More</a>
86+
</div>
87+
<div class="four columns">
88+
<header>
89+
<img src="./public/img/wasmbinaries.png" alt="webpack" />
90+
<h4>Standalone WASM binaries</h4>
91+
</header>
92+
<p>
93+
No registry? <br/> No bundler?<br/> No problem!<br/>
94+
</p>
95+
<p>
96+
wasm-pack plays well with others but is also happy to generate
97+
standalone binaries for consumption in the browser.
98+
</p>
99+
<a href="#" class="button">Learn More</a>
100+
</div>
101+
</div>
102+
</div>
103+
</section>
104+
<footer>
105+
<p>Maintained by <a href="">Ashley Williams</a> and the <a href="">Rust-WebAssembly Working Group</a>. Found a typo? <a href="">File an issue!<a/></p>
106+
</footer>
54107
</div>
55108
</div>
56109
<script type="text/javascript" src="installer/wasm-pack.js"></script>

‎docs/public/custom.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,48 @@
9696
a {
9797
color: #6556EC;
9898
}
99+
100+
img {
101+
width: 100%;
102+
}
103+
104+
.button {
105+
display: block;
106+
}
107+
108+
div header {
109+
min-height: 270px;
110+
font-weight: 400;
111+
}
112+
113+
footer {
114+
background-color: #6556EC;
115+
color: white;
116+
margin: 50px 0 0 0;
117+
padding: 20px 0 5px;
118+
text-align: center;
119+
}
120+
121+
footer a {
122+
color: white;
123+
}
124+
125+
@media only screen and (min-width: 800px) {
126+
#build .columns {
127+
position: relative;
128+
min-height: 550px;
129+
}
130+
131+
#build a.button {
132+
width: 100%;
133+
position: absolute;
134+
bottom: 0;
135+
}
136+
}
137+
138+
@media only screen and (max-width: 800px) {
139+
#build .columns {
140+
padding: 40px 0;
141+
border-top: solid rgb(187, 187, 187) 1px;
142+
}
143+
}

‎docs/public/img/npm-packages.png

144 KB
Loading

‎docs/public/img/wasmbinaries.png

275 KB
Loading

‎docs/public/img/webpack.jpeg

23.6 KB
Loading

0 commit comments

Comments
 (0)