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

Remigrate Images to Pictures

Browse Source
This commit is contained in:
prototypa
2022-09-10 01:28:40 -04:00
parent 81cd258166
commit 2556eb3ee4
3 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,5 +1,5 @@
--- ---
import { Image } from "@astrojs/image/components"; import Picture from "~/components/core/Picture.astro";
import PostTags from "~/components/atoms/Tags.astro"; import PostTags from "~/components/atoms/Tags.astro";
import { getPermalink } from "~/utils/permalinks"; import { getPermalink } from "~/utils/permalinks";
@ -16,11 +16,13 @@ const image = await findImage(post.image);
<div <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" 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"
> >
<Image <Picture
src={image} src={image}
class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700" class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
width={400} widths={[400, 900]}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title} alt={post.title}
aspectRatio="16:9"
/> />
</div> </div>
</a> </a>

2
src/layouts/BlogLayout.astro
View File

@ -5,7 +5,7 @@ const { meta } = Astro.props;
--- ---
<Layout meta={meta}> <Layout meta={meta}>
<section class="px-8 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl"> <section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
<header> <header>
<h1 <h1
class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading" class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading"