mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image in meta and other details

Browse Source
This commit is contained in:
prototypa
2022-08-25 00:46:15 -04:00
parent b9b8feac44
commit 0a7b84b816
13 changed files with 67 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/core/MetaTags.astro
View File

@ -18,7 +18,7 @@ const {
const image =
typeof _image === "string"
? new URL(_image, Astro.site)
: typeof _image["src"] !== "undefined"
: _image && typeof _image["src"] !== "undefined"
? new URL(getRelativeUrlByFilePath(_image.src), Astro.site)
: null;
---

3
src/components/core/Picture.astro
View File

@ -16,7 +16,7 @@ const {
let picture = null;
try {
picture = await getPicture({
picture = src && await getPicture({
src,
widths,
formats,
@ -24,7 +24,6 @@ try {
})
}
catch (e) {
console.log(e);
}
const { image = {}, sources = [] } = picture || {}

20
src/components/widgets/BlogPost.astro
View File

@ -24,14 +24,18 @@ const { post } = Astro.props;
{post.title}
</h1>
<Picture
src={post.image}
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 768, 900]}
sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
{
post.image && (
<Picture
src={post.image}
class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 900]}
sizes="(max-width: 900px) 400px, 900px"
alt={post.description}
aspectRatio="16:9"
/>
)
}
</header>
<div
class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"

12
src/components/widgets/HighlightedPosts.astro
View File

@ -25,8 +25,7 @@ const {} = Astro.props;
<Picture
src={import("~/assets/images/steps.jpg")}
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
widths={[400]}
alt="Post 2 Image"
aspectRatio="16:9"
/>
@ -49,8 +48,7 @@ const {} = Astro.props;
<Picture
src={import("~/assets/images/colors.jpg")}
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
widths={[400]}
alt="Post 1 Image"
aspectRatio="16:9"
/>
@ -72,8 +70,7 @@ const {} = Astro.props;
<Picture
src={import("~/assets/images/tools.jpg")}
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
widths={[400]}
alt="Post 3 Image"
aspectRatio="16:9"
/>
@ -95,8 +92,7 @@ const {} = Astro.props;
<Picture
src={import("~/assets/images/hero.jpg")}
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
widths={[400]}
alt="Post 2 Image"
aspectRatio="16:9"
/>