From 94f8196a4c737d4ea62ced7f235ddf84387f85e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcin=20Wo=C5=9B?= <41524451+CaptainObjective@users.noreply.github.com> Date: Mon, 16 Jan 2023 21:46:53 +0100 Subject: [PATCH] Remove astro image (#146) --- src/components/photo.astro | 24 +++++++++++++++++++ src/data/sections/favorites.ts | 2 +- src/sections/favorites/book-tile.astro | 13 ++-------- src/sections/favorites/media-tile.astro | 13 ++-------- src/sections/favorites/person-tile.astro | 13 ++-------- src/sections/favorites/video-tile.astro | 12 ++-------- src/sections/main/main-section.astro | 11 ++------- .../portfolio/project-timeline-item.astro | 20 ++++------------ src/sections/testimonials/testimonial.astro | 5 ++-- src/types/common.ts | 2 +- src/types/favorites-section.ts | 10 ++++---- src/types/main-section.ts | 4 ++-- src/types/portfolio-section.ts | 4 ++-- src/types/testimonials-section.ts | 4 ++-- 14 files changed, 53 insertions(+), 84 deletions(-) create mode 100644 src/components/photo.astro 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`; ---
- +