diff --git a/examples/starter/README.md b/examples/starter/README.md new file mode 100644 index 0000000000..59940918f3 --- /dev/null +++ b/examples/starter/README.md @@ -0,0 +1,32 @@ +# Welcome to [Astro](https://astro.build) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ ├── robots.txt +│ └── favicon.ico +├── src/ +│ ├── components/ +│ │ └── Tour.astro +│ └── pages/ +│ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md.astro` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + + +Any static assets, like images, can be placed in the `public/` directory. + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://discord.gg/EsGdSGen). diff --git a/examples/starter/package.json b/examples/starter/package.json new file mode 100644 index 0000000000..9e24531f02 --- /dev/null +++ b/examples/starter/package.json @@ -0,0 +1,12 @@ +{ + "name": "TODO", + "private": true, + "version": "0.0.1", + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "shhhhh" + } +} diff --git a/examples/starter/public/assets/logo.svg b/examples/starter/public/assets/logo.svg new file mode 100644 index 0000000000..d751556b23 --- /dev/null +++ b/examples/starter/public/assets/logo.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/examples/starter/public/favicon.svg b/examples/starter/public/favicon.svg new file mode 100644 index 0000000000..542f90aecb --- /dev/null +++ b/examples/starter/public/favicon.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/examples/starter/public/robots.txt b/examples/starter/public/robots.txt new file mode 100644 index 0000000000..1f53798bb4 --- /dev/null +++ b/examples/starter/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/examples/starter/public/style/global.css b/examples/starter/public/style/global.css new file mode 100644 index 0000000000..b54158f924 --- /dev/null +++ b/examples/starter/public/style/global.css @@ -0,0 +1,28 @@ +* { + box-sizing: border-box; + margin: 0; +} + +:root { + font-family: system-ui; + font-size: 1rem; + --user-font-scale: 1rem - 16px; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); +} + +body { + padding: 4rem 2rem; + width: 100vw; + min-height: 100vh; + display: grid; + justify-content: center; + background: #F9FAFB; + color: #111827; +} + +@media (prefers-color-scheme: dark) { + body { + background: #111827; + color: #fff; + } +} diff --git a/examples/starter/public/style/home.css b/examples/starter/public/style/home.css new file mode 100644 index 0000000000..c4271a8454 --- /dev/null +++ b/examples/starter/public/style/home.css @@ -0,0 +1,38 @@ +:root { + --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; + --color-light: #F3F4F6; +} + +@media (prefers-color-scheme: dark) { + :root { + --color-light: #1F2937; + } +} + +a { + color: inherit; +} + +header > div { + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); +} + +header > div { + display: flex; + flex-direction: column; + align-items: center; +} + +header h1 { + font-size: 1em; + font-weight: 500; +} +header img { + width: 2em; + height: 2.667em; +} + +h2 { + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); +} diff --git a/examples/starter/src/components/Tour.astro b/examples/starter/src/components/Tour.astro new file mode 100644 index 0000000000..ca0cfafbfb --- /dev/null +++ b/examples/starter/src/components/Tour.astro @@ -0,0 +1,82 @@ +
+ + +
+

🚀 Project Structure

+

Inside of your Astro project, you'll see the following folders and files:

+ + 
/
+├── public/
+│   ├── robots.txt
+│   └── favicon.ico
+├── src/
+│   ├── components/
+│   │   └── Tour.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+
+ +

+ Astro looks for .astro or .md.astro files in the src/pages/ directory. + Each page is exposed as a route based on its file name. +

+ +

+ There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. +

+ +

Any static assets, like images, can be placed in the public/ directory.

+
+ +
+

👀 Want to learn more?

+

Feel free to check our documentation or jump into our Discord server.

+
+ +
+ + diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro new file mode 100644 index 0000000000..de052e9c44 --- /dev/null +++ b/examples/starter/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Tour from '../components/Tour.astro'; +--- + + + + + + + Astro + + + + + + + + + +
+
+
+ Astro logo +

Welcome to Astro

+
+
+ + +
+ +