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: remove mirrored types of Picture and Image and use native types instead

Browse Source
This commit is contained in:
Stefan Imhoff
2023-05-18 14:31:50 +02:00
parent a43026a48a
commit 4ce5f077d3
2 changed files with 16 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Image.astro
View File

@@ -1,30 +1,22 @@
--- ---
import cx from 'classnames'; import cx from 'classnames';
import { Image } from '@astrojs/image/components'; import { Image } from '@astrojs/image/components';
import type { ImageComponentLocalImageProps } from '@astrojs/image/components';
interface Props { interface Props extends ImageComponentLocalImageProps {
aspectRatio?: number | `${number}:${number}`;
alt?: string;
class?: string; class?: string;
height?: number;
noMargin?: boolean; noMargin?: boolean;
src: string; slot?: string;
width: number;
} }
const { aspectRatio, alt, class: className, height, noMargin, src, width, ...props } = Astro.props; const { class: className, noMargin, ...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);
--- ---
<div class={classes}> <div class={classes}>
<Image <Image
aspectRatio={aspectRatio || '1:1'}
alt={alt || ''}
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" 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"
height={height || 0}
src={src}
width={width}
{...props} {...props}
/> />
</div> </div>

31
src/components/Picture.astro
View File

@@ -1,31 +1,24 @@
--- ---
import cx from 'classnames'; import cx from 'classnames';
import { Picture } from '@astrojs/image/components';
interface Props { import { Picture } from '@astrojs/image/components';
alt?: string; import type { PictureComponentLocalImageProps } from '@astrojs/image/components';
aspectRatio?: number | `${number}:${number}`;
interface Props extends PictureComponentLocalImageProps {
class?: string; class?: string;
formats?: string[];
noMargin?: boolean; noMargin?: boolean;
sizes?: string; slot?: string;
src: string;
widths: number[];
} }
const { alt, aspectRatio, class: className, noMargin, sizes, src, widths, ...props } = Astro.props; const { class: className, noMargin, ...props } = Astro.props;
const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className); const classes = cx(
'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
{ 'mbe-0': noMargin },
className
);
--- ---
<div class={classes}> <div class={classes}>
<Picture <Picture {...props} />
alt={alt || ''}
aspectRatio={aspectRatio}
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"
sizes={sizes}
src={src}
widths={widths}
{...props}
/>
</div> </div>