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

Optimize images consumption

Browse Source
This commit is contained in:
prototypa
2022-09-10 01:08:51 -04:00
parent 1927108725
commit cb6aef7fae
3 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/blog/HighlightedPosts.astro
View File

@ -1,5 +1,5 @@
---
import Picture from "~/components/core/Picture.astro";
import { Image } from "@astrojs/image/components";
import { findPostsByIds } from "~/utils/posts";
import { findImage } from "~/utils/images";
@ -36,12 +36,11 @@ const items = await Promise.all(
{
items.map((post) => (
<article class="mb-6 transition">
<Picture
<Image
src={post.image}
class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400]}
alt="Post 2 Image"
aspectRatio="16:9"
width={400}
alt={post.title}
/>
<h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
<a

12
src/components/blog/ListItem.astro
View File

@ -1,5 +1,5 @@
---
import Picture from "~/components/core/Picture.astro";
import { Image } from "@astrojs/image/components";
import PostTags from "~/components/atoms/Tags.astro";
import { getPermalink } from "~/utils/permalinks";
@ -16,13 +16,11 @@ const image = await findImage(post.image);
<div
class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
>
<Picture
<Image
src={image}
class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
widths={[400, 768]}
sizes="(max-width: 767px) 400px, 768px"
alt={post.description}
aspectRatio={1}
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
width={400}
alt={post.title}
/>
</div>
</a>

2
src/components/blog/SinglePost.astro
View File

@ -32,7 +32,7 @@ const { post } = Astro.props;
}
</header>
<div
class="container mx-auto px-8 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:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
class="container mx-auto px-6 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:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
>
<Fragment set:html={post.body} />
</div>