diff options
Diffstat (limited to 'examples/starter/src')
| -rw-r--r-- | examples/starter/src/components/Logo.astro | 9 | ||||
| -rw-r--r-- | examples/starter/src/pages/index.astro | 117 |
2 files changed, 64 insertions, 62 deletions
diff --git a/examples/starter/src/components/Logo.astro b/examples/starter/src/components/Logo.astro index 02c68c7f0..ca45ef529 100644 --- a/examples/starter/src/components/Logo.astro +++ b/examples/starter/src/components/Logo.astro @@ -1,9 +1,10 @@ --- // Export a "Props" interface to . export interface Props { - height?: number, - width?: number, + height?: number; + width?: number; } -const {height = 80, width = 60 } = Astro.props; +const { height = 80, width = 60 } = Astro.props; --- -<img height={height} width={width} src="/logo.svg" alt="Astro logo"> + +<img height={height} width={width} src="/logo.svg" alt="Astro logo" /> diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro index ea853b668..4ec1c38a4 100644 --- a/examples/starter/src/pages/index.astro +++ b/examples/starter/src/pages/index.astro @@ -1,74 +1,75 @@ --- -import {Content as TourContent} from '../content/Tour.md'; -import Logo from '../components/Logo.astro'; -import '../styles/global.css'; -import '../styles/home.css'; +import { Content as TourContent } from "../content/Tour.md"; +import Logo from "../components/Logo.astro"; +import "../styles/global.css"; +import "../styles/home.css"; /* ASTRO:COMPONENT_IMPORTS */ // Component Script: // You can write any JavaScript/TypeScript that you'd like here. // It will run during the build, but never in the browser. // All variables are available to use in the HTML template below. -let title = 'My Astro Site'; +let title = "My Astro Site"; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width"> - <title>{title}</title> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <title>{title}</title> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - header { - display: flex; - flex-direction: column; - 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> - <Logo width={60} height={80} /> - <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> - </div> - </header> + <style> + header { + display: flex; + flex-direction: column; + 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> + <Logo width={60} height={80} /> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + </div> + </header> - <article> - <div class="banner"> - <p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this template and have fun!</p> - </div> - <TourContent /> - </article> + <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! @@ -79,7 +80,7 @@ let title = 'My Astro Site'; --> - <!-- ASTRO:COMPONENT_MARKUP --> - </main> -</body> + <!-- ASTRO:COMPONENT_MARKUP --> + </main> + </body> </html> |