kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: convert Image to AstroImageTools

Browse Source
This commit is contained in:
Stefan Imhoff
2023-05-18 16:51:34 +02:00
parent 53fffc4f74
commit 61637c37d0
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Image.astro
View File

@@ -1,22 +1,28 @@
---
import cx from 'classnames';
import { Image } from '@astrojs/image/components';
import type { ImageComponentLocalImageProps } from '@astrojs/image/components';
interface Props extends ImageComponentLocalImageProps {
import { Img } from 'astro-imagetools/components';
import type { ImgConfigOptions } from 'astro-imagetools';
interface Props extends ImgConfigOptions {
class?: string;
noMargin?: boolean;
slot?: string;
src: string;
}
const { class: className, noMargin, ...props } = Astro.props;
const { class: className, noMargin, src, ...props } = Astro.props;
const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
const imageClasses =
'rounded-1 border-1 block h-auto w-full border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10';
---
<div class={classes}>
<Image
class="block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10"
{...props}
/>
{
src.includes('.svg') ? (
<img class={imageClasses} src={src} {...(props as any)} />
) : (
<Img class={imageClasses} src={src} {...props} />
)
}
</div>