revert bad snowpack example changes
This commit is contained in:
Fred K. Schott
parent
d2d0ddad82
commit
f11fd265f8
1 changed files with 146 additions and 8 deletions
|
|
@ -1,15 +1,153 @@
|
||||||
---
|
---
|
||||||
|
import Menu from '../components/Menu.astro';
|
||||||
|
import Hero from '../components/Hero.astro';
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseHead from '../components/BaseHead.astro';
|
||||||
|
import BaseLayout from '../components/BaseLayout.astro';
|
||||||
|
|
||||||
let title = 'Astro';
|
let title = 'Snowpack';
|
||||||
let description = 'A better way to build a (static) site.';
|
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<BaseHead title={title} description={description} />
|
<style lang="scss">
|
||||||
|
@use '../../public/css/var' as *;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
display: list-item;
|
||||||
|
padding: 0.25em;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: green !important;
|
||||||
|
content: '✅';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin: 2em 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<BaseHead title={title} description={description} permalink="TODO" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Site body... -->
|
<BaseLayout>
|
||||||
|
<Hero bar="{title}" />
|
||||||
|
<div foo="{title}" class="container" style="margin: 0 auto">
|
||||||
|
<section class="snow-view__docs is-full is-home">
|
||||||
|
<aside id="nav-primary" class="snow-view-nav">
|
||||||
|
<Menu></Menu>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<article class="snow-view-main">
|
||||||
|
<div class="content">
|
||||||
|
<article class="grid-body">
|
||||||
|
<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="content 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" class="button button-primary feature-button">Get started</a>
|
||||||
|
<a href="/concepts/how-snowpack-works" class="button feature-button">Learn more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue