diff options
Diffstat (limited to 'examples/snowpack/src/pages/index.astro')
| -rw-r--r-- | examples/snowpack/src/pages/index.astro | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/index.astro b/examples/snowpack/src/pages/index.astro new file mode 100644 index 000000000..aa5ee59b6 --- /dev/null +++ b/examples/snowpack/src/pages/index.astro @@ -0,0 +1,152 @@ +--- +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> +<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> |