diff options
Diffstat (limited to 'examples/blog/src/pages/index.astro')
| -rw-r--r-- | examples/blog/src/pages/index.astro | 97 |
1 files changed, 49 insertions, 48 deletions
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index cd839d382..9a2178ed0 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -5,7 +5,7 @@ import BlogHeader from '../components/BlogHeader.astro'; import BlogPostPreview from '../components/BlogPostPreview.astro'; interface MarkdownFrontmatter { - publishDate: number; + publishDate: number; } // Component Script: @@ -24,59 +24,60 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date( // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <BaseHead title={title} description={description} permalink={permalink} /> - <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> + <head> + <BaseHead {title} {description} {permalink} /> + <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> - <style> - header { - width: 100%; - height: 100%; - background-color: var(--theme-bg-offset); - display: flex; - align-items: center; - justify-content: center; - } + <style> + header { + width: 100%; + height: 100%; + background-color: var(--theme-bg-offset); + display: flex; + align-items: center; + justify-content: center; + } - .content { - margin-top: 4rem; - margin-bottom: 8rem; - } + .content { + margin-top: 4rem; + margin-bottom: 8rem; + } - .content :global(main > * + *) { - margin-top: 1rem; - } + .content :global(main > * + *) { + margin-top: 1rem; + } - .intro { - padding-bottom: 4rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } + .intro { + padding-bottom: 4rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } - .intro > * { - margin: 0; - } + .intro > * { + margin: 0; + } - .latest { - font-size: 2.5rem; - font-weight: 700; - } - </style> - </head> + .latest { + font-size: 2.5rem; + font-weight: 700; + } + </style> + </head> - <body> - <BlogHeader /> - <div class="wrapper"> - <main class="content"> - <section class="intro"> - <h1 class="latest">{title}</h1> - <p>{description}</p> - </section> - <section aria-label="Blog post list"> - {allPosts.map(p => <BlogPostPreview post={p} />)} - </section> - </main> - </div> - </body> + <body> + <BlogHeader /> + <div class="wrapper"> + <main class="content"> + <section class="intro"> + <h1 class="latest">{title}</h1> + <p>{description}</p> + </section> + <section aria-label="Blog post list"> + {allPosts.map((p) => <BlogPostPreview post={p} />)} + </section> + </main> + </div> + </body> </html> |