diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-06-08 08:10:56 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-08 11:10:56 -0400 |
| commit | 6bca7c83a7e2d62015f45f873b0f69f11b4d902b (patch) | |
| tree | 5662630e51c6e6e743785d308785cff2e47568f0 /examples/starter/src | |
| parent | 9594447335b7fa15f82c0789f18a3fe02ec20d70 (diff) | |
| download | astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.gz astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.zst astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.zip | |
redesign create-astro (#301)
* redesign create astro
* add changeset
* Use npm start
* Update the astro version
* Adds the changeset
Co-authored-by: Fred Schott <fks@Freds-MBP.attlocal.net>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Diffstat (limited to 'examples/starter/src')
| -rw-r--r-- | examples/starter/src/components/Tour.astro | 85 | ||||
| -rw-r--r-- | examples/starter/src/pages/index.astro | 38 |
2 files changed, 123 insertions, 0 deletions
diff --git a/examples/starter/src/components/Tour.astro b/examples/starter/src/components/Tour.astro new file mode 100644 index 000000000..5c822fe75 --- /dev/null +++ b/examples/starter/src/components/Tour.astro @@ -0,0 +1,85 @@ +--- +import { Markdown } from 'astro/components'; +--- +<article> + <div class="banner"> + <p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p> + </div> + + <section> + <Markdown> + ## 🚀 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` 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. + </Markdown> + </section> + + <section> + <h2>👀 Want to learn more?</h2> + <p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://discord.gg/EsGdSGen">Discord server</a>.</p> + </section> + +</article> + +<style> + article { + padding-top: 2em; + line-height: 1.5; + } + section { + margin-top: 2em; + display: flex; + flex-direction: column; + gap: 1em; + max-width: 70ch; + } + + .banner { + text-align: center; + font-size: 1.2rem; + background: var(--color-light); + padding: 1em 1.5em; + padding-left: 0.75em; + border-radius: 4px; + } + + pre, + code { + font-family: var(--font-mono); + background: var(--color-light); + border-radius: 4px; + } + + pre { + padding: 1em 1.5em; + } + + .tree { + line-height: 1.2; + } + + code:not(.tree) { + padding: 0.125em; + margin: 0 -0.125em; + } +</style> diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro new file mode 100644 index 000000000..de052e9c4 --- /dev/null +++ b/examples/starter/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Tour from '../components/Tour.astro'; +--- + +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Astro</title> + + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> + + <link rel="stylesheet" href="/style/global.css"> + <link rel="stylesheet" href="/style/home.css"> + + <style> + header { + display: flex; + flex-direction: column; + gap: 1em; + max-width: min(100%, 68ch); + } + </style> +</head> +<body> + <main> + <header> + <div> + <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + </div> + </header> + + <Tour /> + </main> +</body> +</html> |