diff options
| author |  Michael Stramel <stramel@users.noreply.github.com>
| 2021-07-27 07:48:14 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-27 08:48:14 -0400 |
| commit | 4591c1f5aded7da108f91ff06bd923149e3924b2 (patch) | |
| tree | 6a758368f4dc8a56c2f7d572abb4715c9051e252 | |
| parent | 4b94fc9f2e3a78d16bf8e7202d9bf4a4448808ae (diff) | |
| download | astro-4591c1f5aded7da108f91ff06bd923149e3924b2.tar.gz astro-4591c1f5aded7da108f91ff06bd923149e3924b2.tar.zst astro-4591c1f5aded7da108f91ff06bd923149e3924b2.zip | |
Add an alt tag for the hero image in the blog example (#868)
* Add an alt tag for the hero image
* pass along
* Create heavy-pumas-cross.md
| -rw-r--r-- | .changeset/heavy-pumas-cross.md | 5 | ||||
| -rw-r--r-- | examples/blog/src/components/BlogPost.astro | 4 | ||||
| -rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 4 | ||||
| -rw-r--r-- | examples/blog/src/pages/posts/introducing-astro.md | 1 |
4 files changed, 10 insertions, 4 deletions
diff --git a/.changeset/heavy-pumas-cross.md b/.changeset/heavy-pumas-cross.md new file mode 100644 index 000000000..5e050e4a6 --- /dev/null +++ b/.changeset/heavy-pumas-cross.md @@ -0,0 +1,5 @@ +--- +"@example/blog": patch +--- + +Add an alt tag for the hero image in the blog example diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro index 22fd74645..65eed099d 100644 --- a/examples/blog/src/components/BlogPost.astro +++ b/examples/blog/src/components/BlogPost.astro @@ -8,14 +8,14 @@ export interface Props { heroImage: string; } -const { title, author, publishDate, heroImage } = Astro.props; +const { title, author, publishDate, heroImage, alt } = Astro.props; --- <div class="layout"> <article class="content"> <div> <header> - {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />} + {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={alt} />} <p class="publish-date">{publishDate}</p> <h1 class="title">{title}</h1> <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" /> diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index b27effe54..76cb749d4 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -5,7 +5,7 @@ import BlogHeader from '../components/BlogHeader.astro'; import BlogPost from '../components/BlogPost.astro'; const {content} = Astro.props; -const {title, description, publishDate, author, heroImage, permalink} = content; +const {title, description, publishDate, author, heroImage, permalink, alt} = content; --- <html lang={ content.lang || 'en' }> <head> @@ -15,7 +15,7 @@ const {title, description, publishDate, author, heroImage, permalink} = content; <body> <BlogHeader /> - <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}> + <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}> <slot /> </BlogPost> </body> diff --git a/examples/blog/src/pages/posts/introducing-astro.md b/examples/blog/src/pages/posts/introducing-astro.md index 16aa33e38..cf849514b 100644 --- a/examples/blog/src/pages/posts/introducing-astro.md +++ b/examples/blog/src/pages/posts/introducing-astro.md @@ -4,6 +4,7 @@ description: "We're excited to announce Astro as a new way to build static websi publishDate: 'Tuesday, June 8 2021' author: 'fred' heroImage: '/social.jpg' +alt: 'Astro' layout: '../../layouts/BlogPost.astro' --- |