update starter template (#3109)

5 files changed, 68 insertions, 91 deletions

diff --git a/examples/starter/public/assets/logo.svg b/examples/starter/public/logo.svg
index d751556b2..d751556b2 100644
--- a/examples/starter/public/assets/logo.svg
+++ b/examples/starter/public/logo.svg
diff --git a/examples/starter/src/components/Logo.astro b/examples/starter/src/components/Logo.astro
new file mode 100644
index 000000000..02c68c7f0
--- /dev/null
+++ b/examples/starter/src/components/Logo.astro
@@ -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">
diff --git a/examples/starter/src/components/Tour.astro b/examples/starter/src/components/Tour.astro
deleted file mode 100644
index 9a9ebe17f..000000000
--- a/examples/starter/src/components/Tour.astro
+++ /dev/null
@@ -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>
diff --git a/examples/starter/src/content/Tour.md b/examples/starter/src/content/Tour.md
new file mode 100644
index 000000000..421b13e11
--- /dev/null
+++ b/examples/starter/src/content/Tour.md
@@ -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).
diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro
index 1de0ce37d..ea853b668 100644
--- a/examples/starter/src/pages/index.astro
+++ b/examples/starter/src/pages/index.astro
@@ -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/