-
\ No newline at end of file
+
diff --git a/www/_eleventy/layouts/main.njk b/www/_includes/layouts/main.njk
similarity index 100%
rename from www/_eleventy/layouts/main.njk
rename to www/_includes/layouts/main.njk
diff --git a/www/_includes/layouts/original-base.njk b/www/_includes/layouts/original-base.njk
new file mode 100644
index 0000000000..79abc6c089
--- /dev/null
+++ b/www/_includes/layouts/original-base.njk
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+ Snowpack App
+
+
+
+
+
+
+
+
+ {{ content | safe }}
+
+
diff --git a/www/_eleventy/layouts/post.njk b/www/_includes/layouts/post.njk
similarity index 100%
rename from www/_eleventy/layouts/post.njk
rename to www/_includes/layouts/post.njk
diff --git a/www/_template/assets/favicon.png b/www/_template/assets/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f5789e0725e4cc4663bddaac47f1330dd9fa18c
GIT binary patch
literal 555
zcmV+`0@VG9P)Qr9zCnSUIc@JVQ0MmHuBnR?Av6KK9
z|G*)D9TBk|AYOpWbTHYnS^{@O#MSW14-lDK06WGEGRS1@4zSNxGCjjAnHB(v$Tg^)
z25=sz)6r(50k{&{HHiQs4Zr|g76as>0SG`YX$|LffXe`}>!_U$;A&{?KIp6tV1UZq
z2VxyS0L}x2C;@kYm%wE$V66k7UDE<=3*^+P=Q??M!4Z%HiASJYc;t5hK>Pt|#rzeo
zwE)*V0x>`XY>&JSV9g^S&tTchSAPU}^%=k}08#*$9|4XtE9PIotVB+Widp8p1t32H
z#I7H9G@lISlgXAS9W0Ko`aW=1t(R${7+_5cNa1}4t+Apostg002ovPDHLkV1lBv;B5c^
literal 0
HcmV?d00001
diff --git a/www/_template/assets/index.css b/www/_template/assets/index.css
new file mode 100644
index 0000000000..49cf0821b9
--- /dev/null
+++ b/www/_template/assets/index.css
@@ -0,0 +1,26 @@
+body {
+ background: #222;
+ color: #eee;
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+}
+a {
+ color: #aaa;
+}
+.banner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.banner img,
+.banner svg {
+ display: block;
+ padding: 1.5rem;
+}
+
+#canvas {
+ display: block;
+ margin: 0rem auto;
+ width: 720px;
+ height: 420px;
+}
diff --git a/www/_template/assets/logo.svg b/www/_template/assets/logo.svg
new file mode 100644
index 0000000000..493a6d28e7
--- /dev/null
+++ b/www/_template/assets/logo.svg
@@ -0,0 +1 @@
+
diff --git a/www/_template/assets/robots.txt b/www/_template/assets/robots.txt
new file mode 100644
index 0000000000..e9e57dc4d4
--- /dev/null
+++ b/www/_template/assets/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/www/assets/snowpack-logo-black.png b/www/_template/assets/snowpack-logo-black.png
similarity index 100%
rename from www/assets/snowpack-logo-black.png
rename to www/_template/assets/snowpack-logo-black.png
diff --git a/www/assets/snowpack-logo-dark.png b/www/_template/assets/snowpack-logo-dark.png
similarity index 100%
rename from www/assets/snowpack-logo-dark.png
rename to www/_template/assets/snowpack-logo-dark.png
diff --git a/www/assets/snowpack-logo-white.png b/www/_template/assets/snowpack-logo-white.png
similarity index 100%
rename from www/assets/snowpack-logo-white.png
rename to www/_template/assets/snowpack-logo-white.png
diff --git a/www/assets/snowpack-wordmark-black.png b/www/_template/assets/snowpack-wordmark-black.png
similarity index 100%
rename from www/assets/snowpack-wordmark-black.png
rename to www/_template/assets/snowpack-wordmark-black.png
diff --git a/www/assets/snowpack-wordmark-white.png b/www/_template/assets/snowpack-wordmark-white.png
similarity index 100%
rename from www/assets/snowpack-wordmark-white.png
rename to www/_template/assets/snowpack-wordmark-white.png
diff --git a/www/favicon/android-chrome-192x192.png b/www/_template/favicon/android-chrome-192x192.png
similarity index 100%
rename from www/favicon/android-chrome-192x192.png
rename to www/_template/favicon/android-chrome-192x192.png
diff --git a/www/favicon/android-chrome-512x512.png b/www/_template/favicon/android-chrome-512x512.png
similarity index 100%
rename from www/favicon/android-chrome-512x512.png
rename to www/_template/favicon/android-chrome-512x512.png
diff --git a/www/favicon/apple-touch-icon.png b/www/_template/favicon/apple-touch-icon.png
similarity index 100%
rename from www/favicon/apple-touch-icon.png
rename to www/_template/favicon/apple-touch-icon.png
diff --git a/www/favicon/favicon-16x16.png b/www/_template/favicon/favicon-16x16.png
similarity index 100%
rename from www/favicon/favicon-16x16.png
rename to www/_template/favicon/favicon-16x16.png
diff --git a/www/favicon/favicon-32x32.png b/www/_template/favicon/favicon-32x32.png
similarity index 100%
rename from www/favicon/favicon-32x32.png
rename to www/_template/favicon/favicon-32x32.png
diff --git a/www/favicon/favicon.ico b/www/_template/favicon/favicon.ico
similarity index 100%
rename from www/favicon/favicon.ico
rename to www/_template/favicon/favicon.ico
diff --git a/www/favicon/site.webmanifest b/www/_template/favicon/site.webmanifest
similarity index 100%
rename from www/favicon/site.webmanifest
rename to www/_template/favicon/site.webmanifest
diff --git a/www/guides/plugins.md b/www/_template/guides/plugins.md
similarity index 98%
rename from www/guides/plugins.md
rename to www/_template/guides/plugins.md
index 35298279b8..6885e25e9e 100644
--- a/www/guides/plugins.md
+++ b/www/_template/guides/plugins.md
@@ -60,7 +60,9 @@ module.exports = function (snowpackConfig, pluginOptions) {
```json
// snowpack.config.json
{
- "plugins": [["./my-snowpack-plugin.js", {"optionA": "foo", "optionB": "bar"}]]
+ "plugins": [
+ ["./my-snowpack-plugin.js", { "optionA": "foo", "optionB": "bar" }]
+ ]
}
```
@@ -106,7 +108,7 @@ For our first example, we’ll look at transforming a file.
module.exports = function (snowpackConfig, pluginOptions) {
return {
name: 'my-commenter-plugin',
- async transform({id, contents, isDev, fileExt}) {
+ async transform({ id, contents, isDev, fileExt }) {
if (fileExt === '.js') {
return `/* I’m a comment! */ ${contents}`;
}
@@ -136,7 +138,7 @@ module.exports = function (snowpackConfig, pluginOptions) {
input: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
output: ['.js'],
},
- async load({filePath}) {
+ async load({ filePath }) {
const result = await babel.transformFileAsync(filePath);
return result.code;
},
@@ -202,12 +204,15 @@ module.exports = function (snowpackConfig, pluginOptions) {
input: ['.svelte'],
output: ['.js', '.css'],
},
- async load({filePath, isSSR}) {
+ async load({ filePath, isSSR }) {
const svelteOptions = {
/* ... */
};
const codeToCompile = fs.readFileSync(filePath, 'utf-8');
- const result = svelte.compile(codeToCompile, {...svelteOptions, ssr: isSSR});
+ const result = svelte.compile(codeToCompile, {
+ ...svelteOptions,
+ ssr: isSSR,
+ });
// ...
},
};
diff --git a/www/_template/guides/react.md b/www/_template/guides/react.md
new file mode 100644
index 0000000000..4c4e5255ce
--- /dev/null
+++ b/www/_template/guides/react.md
@@ -0,0 +1,343 @@
+---
+layout: layouts/guide.njk
+permalink: '/guides/react/'
+title: The Snowpack Guide to Getting Started with React
+description: 'Get started with this in-depth tutorial on how to build React applications and websites with Snowpack and developer tools like React Fast Refresh'
+date: 2020-10-01
+---
+
+
+
+Snowpack is a great fit for [React](https://reactjs.org/) projects of any size. It's easy to get started and can scale to projects containing thousands of components and pages without any impact on development speed. Unlike traditional React application tooling, Snowpack saves you from getting bogged down with complex bundler setups and configuration files.
+
+In this guide, you'll go from an empty directory to a fully configured Snowpack project with support for React and several other useful developer tools. In the process, you'll learn:
+
+- How to set up your Snowpack development environment
+- Adding your first React component
+- Working with CSS, images and other web assets
+- Enabling [Fast Refresh](https://reactnative.dev/docs/fast-refresh) mode for React
+- Connecting your favorite tools
+
+Prerequisites: Snowpack is a command line tool installed from npm. This guide assumes a basic understanding of Node.js, npm, and how to run commands in the terminal. Knowledge of React is not required, Snowpack is a great way to learn React!
+
+> 💡 Tip: if you want to jump to the end to see a full featured React setup, the [Create Snowpack App React template](https://github.com/snowpackjs/snowpack/tree/master/create-snowpack-app/app-template-react) comes with everything you'll learn in this guide plus other useful tools.
+
+## Getting started
+
+The easiest way to start a new Snowpack project is with [Create Snowpack App](), a tool to set up Snowpack in a new directory `@snowpack/project-template-minimal` is a Create Snowpack App template for a simple, bare-bones Snowpack project setup that the rest of this guide builds on.
+
+To get started, open your terminal and head to a directory where you want to put your new project. Now run the following command in your terminal to create a new directory called `react-snowpack` with the minimal template automatically installed.
+
+```bash
+npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal
+```
+
+You can now head to the new directory and start Snowpack with the following two commands:
+
+```bash
+cd react-snowpack
+npm run start
+```
+
+You should see your new website up and running!
+
+> 💡 Tip: the `README.md` in your new project contains useful information about what each file does.
+
+
+
+Now that you have a basic project up and running, to install React, run the following command in your project directory:
+
+```bash
+npm install react react-dom --save
+```
+
+> 💡 Tip: add the "--use-yarn" or "--use-pnpm" flag to use something other than npm
+
+## Create your first React component
+
+React relies on a special templating language called JSX. If you're familiar with React then you already know JSX: it's React's templating language that allows you to write something like `` or `` directly in your JavaScript code.
+
+Snowpack has built in support for JSX in files using the `.jsx` extension. That means that there's no plugins or configuration needed to write your first React component. Rename `index.js` file to `index.jsx` so that Snowpack knows to handle JSX in the file:
+
+```bash
+mv index.js index.jsx
+```
+
+> 💡 Tip: you do not need to update your `index.html` script tag reference to point to `index.jsx`. Browsers don't speak JSX (or TypeScript, for that matter), so any compile-to-JS file formats compile to `.js` in the final browser build. This is good to keep in mind when you're referencing built files in HTML `
+