mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

refactor: replaced the Image component with Picture component

Browse Source 
Picture is no longer experimental and offers semantic HTML renders
This commit is contained in:
kashan-ahmad
2023-11-17 18:49:45 +05:00
parent 8d2ce5d19d
commit b7e09cf4c3
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/hero.astro
View File

@@ -1,5 +1,5 @@
--- ---
import { Image } from "astro:assets"; import { Picture } from "astro:assets";
import heroImage from "assets/hero.png"; import heroImage from "assets/hero.png";
import Link from "@components/ui/link.astro"; import Link from "@components/ui/link.astro";
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
@@ -8,7 +8,7 @@ import { Icon } from "astro-icon";
<main <main
class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24"> class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24">
<div class="py-6 md:order-1 hidden md:block"> <div class="py-6 md:order-1 hidden md:block">
<Image <Picture
src={heroImage} src={heroImage}
alt="Astronaut in the air" alt="Astronaut in the air"
widths={[200, 400, 600]} widths={[200, 400, 600]}

4
src/pages/about.astro
View File

@@ -1,6 +1,6 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import { Image } from "astro:assets"; import { Picture } from "astro:assets";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro"; import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro"; import Sectionhead from "@components/sectionhead.astro";
@@ -33,7 +33,7 @@ const publishedTeamMembers = await getCollection("team", ({ data }) => {
publishedTeamMembers.map((teamMemberEntry) => ( publishedTeamMembers.map((teamMemberEntry) => (
<div class="group"> <div class="group">
<div class="w-full aspect-square"> <div class="w-full aspect-square">
<Image <Picture
src={teamMemberEntry.data.avatar.src} src={teamMemberEntry.data.avatar.src}
alt={teamMemberEntry.data.avatar.alt} alt={teamMemberEntry.data.avatar.alt}
sizes="(max-width: 800px) 100vw, 400px" sizes="(max-width: 800px) 100vw, 400px"

4
src/pages/blog.astro
View File

@@ -1,6 +1,6 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import { Image } from "astro:assets"; import { Picture } from "astro:assets";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
import Container from "@components/container.astro"; import Container from "@components/container.astro";
import Sectionhead from "@components/sectionhead.astro"; import Sectionhead from "@components/sectionhead.astro";
@@ -31,7 +31,7 @@ publishedBlogEntries.sort(function (a, b) {
<li> <li>
<a href={`/blog/${blogPostEntry.slug}`}> <a href={`/blog/${blogPostEntry.slug}`}>
<div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
<Image <Picture
src={blogPostEntry.data.image.src} src={blogPostEntry.data.image.src}
alt={blogPostEntry.data.image.alt} alt={blogPostEntry.data.image.alt}
sizes="(max-width: 800px) 100vw, 800px" sizes="(max-width: 800px) 100vw, 800px"