summaryrefslogtreecommitdiff
path: root/examples/blog/src/layouts/BlogPost.astro
diff options
context:
space:
mode:
authorGravatar Fred K. Schott <fkschott@gmail.com> 2022-08-15 00:26:33 -0400
committerGravatar GitHub <noreply@github.com> 2022-08-15 00:26:33 -0400
commit0e2f4d74b77cc05b161afe69a8713935fe41591f (patch)
tree7ec5e614c1db4b7c577cd995e74d0d550e3b622e /examples/blog/src/layouts/BlogPost.astro
parent16edf0c7730d273771f75f959c9f8015a4f69238 (diff)
downloadastro-0e2f4d74b77cc05b161afe69a8713935fe41591f.tar.gz
astro-0e2f4d74b77cc05b161afe69a8713935fe41591f.tar.zst
astro-0e2f4d74b77cc05b161afe69a8713935fe41591f.zip
image fix (#4322)
Diffstat (limited to 'examples/blog/src/layouts/BlogPost.astro')
-rw-r--r--examples/blog/src/layouts/BlogPost.astro28
1 files changed, 6 insertions, 22 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index 7587913f7..177fe2519 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -2,36 +2,20 @@
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;
+ pubDate?: string;
updatedDate?: string;
heroImage?: string;
};
}
const {
- content: { title, description, publishDate, updatedDate, heroImage },
+ content: { title, description, pubDate, 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>
@@ -53,16 +37,16 @@ const heroImageAsset = assets.find(asset => {
<Header />
<main>
<article>
- {heroImageAsset && (
- <Image
+ {heroImage && (
+ <img
width={720}
height={360}
- src={heroImageAsset.default}
+ src={heroImage}
alt=""
/>
)}
<h1 class="title">{title}</h1>
- {publishDate && <time>{publishDate}</time>}
+ {pubDate && <time>{pubDate}</time>}
{updatedDate && <div>Last updated on <time>{updatedDate}</time></div>}
<hr/>
<slot />