diff --git a/src/components/photo.astro b/src/components/photo.astro new file mode 100644 index 0000000..f6b46c0 --- /dev/null +++ b/src/components/photo.astro @@ -0,0 +1,24 @@ +--- +import { Image } from '@astrojs/image/components'; + +import type { Photo } from '@/types/common'; + +export interface Props { + src: Photo; + alt: string; + class?: string; +} + +const { src, alt } = Astro.props; +const className = Astro.props.class ?? ''; + +const isRemoteImage = typeof src === 'string'; +--- + +{ + isRemoteImage ? ( + {alt} + ) : ( + {alt} + ) +} diff --git a/src/data/sections/favorites.ts b/src/data/sections/favorites.ts index 4acd074..bcb6a6c 100644 --- a/src/data/sections/favorites.ts +++ b/src/data/sections/favorites.ts @@ -15,7 +15,7 @@ const favoritesData: FavoritesSection = { url: 'https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer', }, { - cover: import('@/assets/favorites/books/book-2.jpeg'), + cover: 'https://m.media-amazon.com/images/I/61aFldsgAmL._SY344_BO1,204,203,200_QL70_ML2_.jpg', title: 'Domain-Driven Design: Tackling Complexity in the Heart of Software', author: 'Eric Evans', url: 'https://www.goodreads.com/book/show/179133.Domain_Driven_Design', diff --git a/src/sections/favorites/book-tile.astro b/src/sections/favorites/book-tile.astro index 88c995a..5e78a6c 100644 --- a/src/sections/favorites/book-tile.astro +++ b/src/sections/favorites/book-tile.astro @@ -1,6 +1,5 @@ --- -import { Image } from '@astrojs/image/components'; - +import Photo from '@/components/photo.astro'; import Typography from '@/components/typography.astro'; import type { Book } from '@/types/favorites-section'; @@ -14,15 +13,7 @@ const { --- - {title} +
{title} diff --git a/src/sections/favorites/media-tile.astro b/src/sections/favorites/media-tile.astro index 725e80c..6c3fff4 100644 --- a/src/sections/favorites/media-tile.astro +++ b/src/sections/favorites/media-tile.astro @@ -1,6 +1,5 @@ --- -import { Image } from '@astrojs/image/components'; - +import Photo from '@/components/photo.astro'; import Typography from '@/components/typography.astro'; import type { Media } from '@/types/favorites-section'; @@ -14,15 +13,7 @@ const { --- - {title} +
{title} diff --git a/src/sections/favorites/person-tile.astro b/src/sections/favorites/person-tile.astro index 6789970..b9433e6 100644 --- a/src/sections/favorites/person-tile.astro +++ b/src/sections/favorites/person-tile.astro @@ -1,6 +1,5 @@ --- -import { Image } from '@astrojs/image/components'; - +import Photo from '@/components/photo.astro'; import Typography from '@/components/typography.astro'; import type { Person } from '@/types/favorites-section'; @@ -14,15 +13,7 @@ const { --- - {name} + {name} diff --git a/src/sections/favorites/video-tile.astro b/src/sections/favorites/video-tile.astro index 4f70df9..e3a3354 100644 --- a/src/sections/favorites/video-tile.astro +++ b/src/sections/favorites/video-tile.astro @@ -1,6 +1,5 @@ --- -import { Image } from '@astrojs/image/components'; - +import Photo from '@/components/photo.astro'; import Typography from '@/components/typography.astro'; import type { Video } from '@/types/favorites-section'; @@ -17,14 +16,7 @@ const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`; --- - {title} + {title} diff --git a/src/sections/main/main-section.astro b/src/sections/main/main-section.astro index 91d14bf..60e9e84 100644 --- a/src/sections/main/main-section.astro +++ b/src/sections/main/main-section.astro @@ -1,8 +1,7 @@ --- -import { Image } from '@astrojs/image/components'; - import Button from '@/components/button.astro'; import IconButton from '@/components/icon-button.astro'; +import Photo from '@/components/photo.astro'; import SectionCard from '@/components/section-card.astro'; import TagsList from '@/components/tags-list.astro'; import Typography from '@/components/typography.astro'; @@ -28,13 +27,7 @@ const section: SectionKey = 'main';
- {fullName} +
diff --git a/src/sections/portfolio/project-timeline-item.astro b/src/sections/portfolio/project-timeline-item.astro index a2fa05a..cc3221d 100644 --- a/src/sections/portfolio/project-timeline-item.astro +++ b/src/sections/portfolio/project-timeline-item.astro @@ -1,8 +1,7 @@ --- -import { Image } from '@astrojs/image/components'; - import IconButton from '@/components/icon-button.astro'; import LabelledValue from '@/components/labelled-value.astro'; +import Photo from '@/components/photo.astro'; import TagsList from '@/components/tags-list.astro'; import Timestamp from '@/components/timestamp.astro'; import Typography from '@/components/typography.astro'; @@ -16,24 +15,13 @@ export interface Props { const { project, i18n } = Astro.props; const { description, details, endDate, name, socials, startDate, tags, image } = project; -// Alt has to destructured separately, because otherwise eslint complains about -// the missing alt attribute on the Image component. -const { alt, ...sharedImageProps } = { - src: image, - aspectRatio: 1, - alt: `Thumbnail for ${name} project`, - format: 'webp', -} as const; +const alt = `Thumbnail for ${name} project`; ---
- +