update starter template (#3109)
This commit is contained in:
Fred K. Schott
GitHub
parent
0f071a9723
commit
93c2cc0553
5 changed files with 68 additions and 91 deletions
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
9
examples/starter/src/components/Logo.astro
Normal file
9
examples/starter/src/components/Logo.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
// Export a "Props" interface to .
|
||||
export interface Props {
|
||||
height?: number,
|
||||
width?: number,
|
||||
}
|
||||
const {height = 80, width = 60 } = Astro.props;
|
||||
---
|
||||
<img height={height} width={width} src="/logo.svg" alt="Astro logo">
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
---
|
||||
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/
|
||||
│ └── 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/withastro/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">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>
|
||||
28
examples/starter/src/content/Tour.md
Normal file
28
examples/starter/src/content/Tour.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
├── public/
|
||||
│ ├── logo.svg
|
||||
│ └── favicon.ico
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Logo.astro
|
||||
│ ├── content/
|
||||
│ │ └── Tour.md
|
||||
│ └── 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.
|
||||
|
||||
|
||||
## 👀 Want to learn more?
|
||||
Check out the [Astro Documentation](https://github.com/withastro/astro) site or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
---
|
||||
// Style Imports
|
||||
import {Content as TourContent} from '../content/Tour.md';
|
||||
import Logo from '../components/Logo.astro';
|
||||
import '../styles/global.css';
|
||||
import '../styles/home.css';
|
||||
// Component Imports
|
||||
import Tour from '../components/Tour.astro';
|
||||
// You can import components from any supported Framework here!
|
||||
/* ASTRO:COMPONENT_IMPORTS */
|
||||
|
||||
// Component Script:
|
||||
|
|
@ -31,25 +29,51 @@ let title = 'My Astro Site';
|
|||
gap: 1em;
|
||||
max-width: min(100%, 68ch);
|
||||
}
|
||||
article {
|
||||
padding-top: 2em;
|
||||
line-height: 1.5;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
|
||||
<Logo width={60} height={80} />
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Tour />
|
||||
<article>
|
||||
<div class="banner">
|
||||
<p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p>
|
||||
</div>
|
||||
<TourContent />
|
||||
</article>
|
||||
|
||||
<!--
|
||||
|
||||
You can also use imported framework components directly in your markup!
|
||||
|
||||
Note: by default, these components are NOT interactive on the client.
|
||||
The `:visible` directive tells Astro to make it interactive.
|
||||
The `client:visible` directive tells Astro to make it interactive.
|
||||
|
||||
See https://docs.astro.build/core-concepts/component-hydration/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue