1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
import Button from '../components/Button.astro';
import Menu from '../components/Menu.astro';
import Hero from '../components/Hero.astro';
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
let title = 'Snowpack';
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
---
<!doctype html>
<html lang="en">
<head>
<style lang="scss">
@use '../../public/styles/var' as *;
.layout {
display: grid;
grid-template-areas: "main";
@media (min-width: $breakpoint-m) {
grid-template-areas: "nav main";
grid-template-columns: 16rem auto;
}
&-nav {
grid-area: nav;
}
&-main {
grid-area: main;
}
}
.top {
text-align: left;
}
.img-banner {
background: #f0db4f;
display: block;
text-align: center;
img {
max-width: 32rem;
}
}
.bullets {
display: grid;
grid-row-gap: 1em;
grid-column-gap: 2em;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin: 2.5em 0 !important;
padding: 0.1em !important;
list-style: none;
.bullet-heading {
margin: 0 0 0.25em 0;
font-size: 1.25em;
}
}
.bullet {
padding: 0.25em;
border-radius: 4px;
h3 {
display: flex;
align-items: center;
&::before {
content: "✅";
font-size: 0.75em;
display: block;
margin-right: 0.5rem;
}
}
}
.buttons {
margin: 2em 0;
text-align: center;
> * {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
</style>
<BaseHead title={title} description={description} permalink="TODO" />
</head>
<body>
<BaseLayout>
<Hero bar="{title}" />
<div foo="{title}" class="wrapper" style="margin: 0 auto">
<section class="layout pt6 pb6">
<aside id="nav-primary" class="layout-nav">
<Menu></Menu>
</aside>
<article class="layout-main">
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
rel="noopener noreferrer">
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
</a>
<div class="markdown-body feature-list">
<div class={'t' + 'o' + 'p'}>
<h2 id="what-is-snowpack%3F">What is Snowpack?</h2>
<p>
<strong>Snowpack is a lightning-fast frontend build tool, designed
for the modern web.</strong>
It is an alternative to heavier, more complex bundlers like
webpack or Parcel in your development workflow. Snowpack
leverages JavaScript's native module system (<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">known
as
ESM</a>) to avoid unnecessary work and stay fast no matter how big
your project grows.
</p>
<p>
Once you try it, it's impossible to go back to anything else.
</p>
</div>
<ul class="bullets">
<li class="bullet">
<h3 class="bullet-heading">Instant startup</h3>
Snowpack's unbundled web development server
<strong>starts up in 50ms or less</strong>
and stays fast in large projects.
</li>
<li class="bullet">
<h3 class="bullet-heading">Build once, cache forever</h3>
Snowpack never builds the same file twice. Powered by
JavaScript’s native module system (ESM) in the browser.
</li>
<li class="bullet">
<h3 class="bullet-heading">HMR feat. Fast Refresh</h3>
No refresh required. See changes reflected instantly in the
browser with
<a href="/concepts/hot-module-replacement">HMR + Fast Refresh</a>
for React, Preact & Svelte.
</li>
<li class="bullet">
<h3 class="bullet-heading">Out-of-the-box support</h3>
Enjoy Snowpack's built-in support for JSX, TypeScript, React,
Preact, CSS Modules
<a href="/reference/supported-files">and more.</a>
</li>
<li class="bullet">
<h3 class="bullet-heading">Optimize for production</h3>
Build for production with built-in optimizations and plugin
support for your favorite bundlers.
</li>
<li class="bullet">
<h3 class="bullet-heading">Plugins? Plugins!</h3>
Babel? Sass? MDX? Browse the entire
<a href="/plugins">Snowpack Plugin Catalog</a>
to connect your favorite build tool (or
<a href="/reference/plugins">create your own!</a>)
</li>
</ul>
<div class="buttons">
<a href="/tutorials/quick-start"><Button style="primary">Get started</Button></a>
<a href="/concepts/how-snowpack-works"><Button>Learn more</Button></a>
</div>
</div>
</article>
</section>
</div>
</BaseLayout>
<!-- Place this tag in your head or just before your close body tag. -->
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
|
