diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-04-27 14:21:33 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-04-27 14:21:33 -0500 |
| commit | 9c980a1017111734c534f1fd0513a14fb1b752ea (patch) | |
| tree | 32e3ae7c506905964b40a55e540455aecc638123 /examples/starter/src | |
| parent | 73b7827b40ae33664877156850ecf04302fa668a (diff) | |
| download | astro-9c980a1017111734c534f1fd0513a14fb1b752ea.tar.gz astro-9c980a1017111734c534f1fd0513a14fb1b752ea.tar.zst astro-9c980a1017111734c534f1fd0513a14fb1b752ea.zip | |
add starter template (#135)
Diffstat (limited to 'examples/starter/src')
| -rw-r--r-- | examples/starter/src/components/Tour.astro | 82 | ||||
| -rw-r--r-- | examples/starter/src/pages/index.astro | 38 |
2 files changed, 120 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..ca0cfafbf --- /dev/null +++ b/examples/starter/src/components/Tour.astro @@ -0,0 +1,82 @@ +<article> + <div class="banner"> + <p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p> + </div> + + <section> + <h2>🚀 Project Structure</h2> + <p>Inside of your Astro project, you'll see the following folders and files:</p> + + <pre><code class="tree">/ +├── public/ +│ ├── robots.txt +│ └── favicon.ico +├── src/ +│ ├── components/ +│ │ └── Tour.astro +│ └── pages/ +│ └── index.astro +└── package.json</code> + </pre> + + <p> + Astro looks for <code>.astro</code> or <code>.md.astro</code> files in the <code>src/pages/</code> directory. + Each page is exposed as a route based on its file name. + </p> + + <p> + There's nothing special about <code>src/components/</code>, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + </p> + + <p>Any static assets, like images, can be placed in the <code>public/</code> directory.</p> + </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> |