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 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; class?: string;
noMargin?: boolean; 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 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}> <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" src.includes('.svg') ? (
{...props} <img class={imageClasses} src={src} {...(props as any)} />
/> ) : (
<Img class={imageClasses} src={src} {...props} />
)
}
</div> </div>