Use Image component for manga list

Signed-off-by: Marcus Crane <[email protected]>
marcus-crane · Jan 12, 2024 · ed206e5 · ed206e5
1 parent 7403b6a
commit ed206e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/pages/games.astro b/src/pages/games.astro
@@ -22,7 +22,9 @@ const typedGames = games as GameList[];
       {
         typedGames.map((gameList) => (
           <div class="grid-list">
-            <h3>{gameList.list}</h3>
+            <header>
+              <h2>{gameList.list}</h2>
+            </header>
             <ul role="list">
               {gameList.games
                 .map((game) => (

diff --git a/src/pages/manga.astro b/src/pages/manga.astro
@@ -23,9 +23,12 @@ import { Image } from 'astro:assets';
           {manga.filter(m => m.chapters === null).map((m) => (
             <li>
               <div>
-                <img
-                  alt={`A cover photo of the book titled ${m.title}`}
+                <Image
+                  alt={`A cover image of ${m.title}, a manga series by ${m.author}`}
                   src={m.cover}
+                  width={m.cover_width}
+                  height={m.cover_height}
+                  style="border-radius: 3px; width: auto; max-width: 16rem;"
                 />
                 <a href={m.url} target="_blank" rel="noopener noreferer">
                   <span>{m.title}</span>
@@ -46,9 +49,12 @@ import { Image } from 'astro:assets';
           {manga.filter(m => m.chapters !== null).map((m) => (
             <li>
               <div>
-                <img
-                  alt={`A cover photo of the book titled ${m.title}`}
+                <Image
+                  alt={`A cover image of ${m.title}, a manga series by ${m.author}`}
                   src={m.cover}
+                  width={m.cover_width}
+                  height={m.cover_height}
+                  style="border-radius: 3px; width: auto; max-width: 16rem;"
                 />
                 <a href={m.url} target="_blank" rel="noopener noreferer">
                   <span>{m.title}</span>