diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2022-08-13 00:09:40 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-08-13 00:09:40 -0700 |
| commit | d54588c7a4adfa05969713111d36673f3a9b988e (patch) | |
| tree | 3f41bf5171a9121517ced0f0e49160b3d86e932e /examples/blog/src/layouts/BlogPost.astro | |
| parent | d4b06f9d8e5d62893743b191c6bd108fc33b7805 (diff) | |
| download | astro-d54588c7a4adfa05969713111d36673f3a9b988e.tar.gz astro-d54588c7a4adfa05969713111d36673f3a9b988e.tar.zst astro-d54588c7a4adfa05969713111d36673f3a9b988e.zip | |
Update: blog template (#4283)
* add new blog template
* update placeholder images
* use svg favicon
* Update examples/blog/src/pages/blog/using-mdx.mdx
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* fred pass
* more fred pass
Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'examples/blog/src/layouts/BlogPost.astro')
| -rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 121 |
1 files changed, 46 insertions, 75 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index b8b47bfc0..7587913f7 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -1,102 +1,73 @@ --- import BaseHead from "../components/BaseHead.astro"; import Header from "../components/Header.astro"; +import Footer from "../components/Footer.astro"; +import {Image} from '@astrojs/image/components'; export interface Props { content: { title: string; description: string; - publishDate: string; - heroImage?: { - src: string; - alt: string; - }; + publishDate?: string; + updatedDate?: string; + heroImage?: string; }; } const { - content: { title, description, publishDate, heroImage }, + content: { title, description, publishDate, updatedDate, heroImage }, } = Astro.props as Props; + + +// Match the `heroImage` frontmatter string to its correct +// Astro.glob() import of the file in the src/ directory. +const assets = await Astro.glob('../assets/**/*'); +const heroImageAsset = assets.find(asset => { + if (!heroImage) { + return false; + } + if (!asset.default?.src) { + return false; + } + const index = asset.default.src.indexOf('/assets/'); + return asset.default.src.slice(index) === heroImage; +}); --- <html> <head> <BaseHead title={title} description={description} /> + <style> + .title { + font-size: 2em; + margin: 0.25em 0 0; + } + hr { + border-top: 1px solid #DDD; + margin: 1rem 0; + } + </style> </head> <body> <Header /> - <article class="wrapper content"> - <header> - {heroImage && ( - <img - width="720" - height="420" - loading="lazy" - src={heroImage.src} - alt={heroImage.alt} + <main> + <article> + {heroImageAsset && ( + <Image + width={720} + height={360} + src={heroImageAsset.default} + alt="" /> )} <h1 class="title">{title}</h1> - <time>{publishDate}</time> - </header> - <main> - <slot></slot> - </main> - </article> + {publishDate && <time>{publishDate}</time>} + {updatedDate && <div>Last updated on <time>{updatedDate}</time></div>} + <hr/> + <slot /> + </article> + </main> + <Footer /> </body> </html> - -<style> - img { - width: 100vw; - object-fit: cover; - object-position: center; - margin-top: 2rem; - margin-bottom: 4rem; - max-width: 1280px; - } - - @media (max-width: 50em) { - img { - height: 260px; - margin-top: 0; - margin-bottom: 2rem; - } - } - - .content { - margin-bottom: 8rem; - } - - .content :global(h2) { - margin-top: 4rem; - } - - header { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; - gap: 1rem; - - padding-bottom: 2rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } - - .title, - time { - margin: 0; - } - - time { - color: var(--theme-text-lighter); - } - - .title { - font-size: 2.25rem; - font-weight: 700; - } -</style> |