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 BaseLayout from '../components/BaseLayout.astro';
|
||||
|
||||
let title = 'Astro';
|
||||
let description = 'A better way to build a (static) site.';
|
||||
let title = 'Snowpack';
|
||||
let description = 'Snowpack is a lightning-fast frontend build tool, designed for the modern web.';
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Site body... -->
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue