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

Migrate from @astrojs/image to Astro Assets and Unpic

Browse Source
This commit is contained in:
prototypa
2023-08-13 17:34:30 -04:00
parent 9a350af269
commit 77817aa77e
33 changed files with 508 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/blog/GridItem.astro
View File

@ -1,19 +1,19 @@
---
import { Picture } from '@astrojs/image/components';
import type { ImageMetadata } from 'astro';
import { APP_BLOG_CONFIG } from '~/utils/config';
import type { Post } from '~/types';
import Image from '~/components/common/Image.astro';
import { findImage } from '~/utils/images';
import { getPermalink } from '~/utils/permalinks';
export interface Props {
post: Post;
}
const { post } = Astro.props;
const image = (await findImage(post.image)) as ImageMetadata | undefined;
const image = (await findImage(post.image));
---
<article class="mb-6 transition">
@ -21,15 +21,15 @@ const image = (await findImage(post.image)) as ImageMetadata | undefined;
{
image && (
<a href={getPermalink(post.permalink, 'post')}>
<Picture
<Image
src={image}
class="md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
widths={[400, 900]}
width={400}
height={224}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"
layout="cover"
loading="lazy"
decoding="async"
/>

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

@ -1,7 +1,7 @@
---
import { Picture } from '@astrojs/image/components';
import type { ImageMetadata } from 'astro';
import { Icon } from 'astro-icon/components';
import Image from '~/components/common/Image.astro';
import PostTags from '~/components/blog/Tags.astro';
import { APP_BLOG_CONFIG } from '~/utils/config';
@ -27,10 +27,11 @@ const link = APP_BLOG_CONFIG?.post?.isEnabled ? getPermalink(post.permalink, 'po
<a class="relative block group" href={link ?? 'javascript:void(0)'}>
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
{image && (
<Picture
<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"
widths={[400, 900]}
width={900}
sizes="(max-width: 900px) 400px, 900px"
alt={post.title}
aspectRatio="16:9"

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

@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import { Picture } from '@astrojs/image/components';
import Image from '~/components/common/Image.astro';
import PostTags from '~/components/blog/Tags.astro';
import SocialShare from '~/components/common/SocialShare.astro';
@ -53,19 +53,17 @@ const Content = post?.Content || null;
{
post.image ? (
<Picture
<Image
src={post.image}
class="max-w-full lg:max-w-6xl mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
widths={[400, 900]}
sizes="(max-width: 900px) 400px, 900px"
alt={post?.excerpt || ''}
loading="eager"
aspectRatio={16 / 9}
width={900}
height={506}
loading="eager"
decoding="async"
background={undefined}
/>
) : (
<div class="max-w-3xl mx-auto px-4 sm:px-6">

52
src/components/common/Image.astro Normal file
View File

@ -0,0 +1,52 @@
---
import { findImage } from '~/utils/images';
import {
getImagesOptimized,
astroAsseetsOptimizer,
unpicOptimizer,
type ImageProps,
type AttributesProps
} from '~/utils/images-optimization';
type Props = ImageProps;
type ImageType = {
src: string;
attributes: AttributesProps;
}
const props = Astro.props;
if (props.alt === undefined || props.alt === null) {
throw new Error();
}
if (typeof props.width === 'string') {
props.width = parseInt(props.width);
}
if (typeof props.height === 'string') {
props.height = parseInt(props.height);
}
if (!props.loading) {
props.loading = 'lazy';
}
if (!props.decoding) {
props.decoding = 'async';
}
const _image = await findImage(props.src);
let image: ImageType | undefined = undefined;
if (_image !== null && typeof _image === 'object') {
image = await getImagesOptimized(_image, props, astroAsseetsOptimizer);
} else if (typeof _image === 'string' && (_image.startsWith('http://') || _image.startsWith('https://'))) {
image = await getImagesOptimized(_image, props, unpicOptimizer);
} else if (_image) {
image = await getImagesOptimized(_image, props);
}
---
{!image ? <Fragment /> : <img src={image.src} {...image.attributes} />}

6
src/components/widgets/Content.astro
View File

@ -1,9 +1,9 @@
---
import { Icon } from 'astro-icon/components';
import { Picture } from '@astrojs/image/components';
import type { Content } from '~/types';
import Headline from '../ui/Headline.astro';
import WidgetWrapper from '../ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro';
const {
title = await Astro.slots.render('title'),
@ -70,13 +70,13 @@ const {
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
width={500}
height={500}
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
aspectRatio="500:500"
layout="responsive"
{...(image as any)}
/>
)}

8
src/components/widgets/Features3.astro
View File

@ -1,8 +1,8 @@
---
import { Picture } from '@astrojs/image/components';
import Headline from '~/components/ui/Headline.astro';
import ItemGrid from '~/components/ui/ItemGrid.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro';
import type { Features } from '~/types';
const {
@ -39,12 +39,12 @@ const {
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
width={0}
width="auto"
height={320}
widths={[400, 768]}
aspectRatio="16:7"
layout="fullWidth"
{...(image as any)}
/>
)}

5
src/components/widgets/Hero.astro
View File

@ -1,6 +1,6 @@
---
import { Icon } from 'astro-icon/components';
import { Picture } from '@astrojs/image/components';
import Image from '~/components/common/Image.astro';
const {
title = await Astro.slots.render('title'),
@ -77,11 +77,10 @@ const {
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="mx-auto rounded-md w-full"
widths={[400, 768, 1024, 2040]}
sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
aspectRatio={1024 / 576}
loading="eager"
width={1024}
height={576}

5
src/components/widgets/Hero2.astro
View File

@ -1,6 +1,6 @@
---
import { Icon } from 'astro-icon/components';
import { Picture } from '@astrojs/image/components';
import Image from '~/components/common/Image.astro';
import { CallToAction } from '~/types';
export interface Props {
@ -88,11 +88,10 @@ const {
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="mx-auto rounded-md w-full"
widths={[400, 768, 1024, 2040]}
sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
aspectRatio={600 / 600}
loading="eager"
width={600}
height={600}

6
src/components/widgets/Steps.astro
View File

@ -1,8 +1,8 @@
---
import { Picture } from '@astrojs/image/components';
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import Timeline from "~/components/ui/Timeline.astro";
import Headline from "~/components/ui/Headline.astro";
import Image from '~/components/common/Image.astro';
import type { Steps } from "~/types";
const {
@ -37,13 +37,13 @@ const {
(typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
aspectRatio="432:768"
width={432}
height={768}
layout="cover"
src={image?.src}
alt={image?.alt || ""}
/>

9
src/components/widgets/Testimonials.astro
View File

@ -1,9 +1,10 @@
---
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import CTA from '~/components/ui/CTA.astro';
import Image from '~/components/common/Image.astro';
import type { Testimonials } from '~/types';
import CTA from '../ui/CTA.astro';
import { Picture } from '@astrojs/image/components';
const {
title = '',
@ -43,12 +44,12 @@ const {
{typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Picture
<Image
class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
width={40}
height={40}
widths={[400, 768]}
aspectRatio="1:1"
layout="fixed"
{...(image as any)}
/>
)}