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/global.css';
|
||||||
import '../styles/home.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 */
|
/* ASTRO:COMPONENT_IMPORTS */
|
||||||
|
|
||||||
// Component Script:
|
// Component Script:
|
||||||
|
|
@ -31,25 +29,51 @@ let title = 'My Astro Site';
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
max-width: min(100%, 68ch);
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<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>
|
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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!
|
You can also use imported framework components directly in your markup!
|
||||||
|
|
||||||
Note: by default, these components are NOT interactive on the client.
|
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/
|
See https://docs.astro.build/core-concepts/component-hydration/
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue