Merge pull request #59 from OUCC/ciffelia/fix-icon-alt

著者とタグのアイコンの代替テキストがファイル名になっていたり存在していなかったりするのを修正

src/components/blog/icon/AuthorIcon.astro

@@ -21,7 +21,7 @@ const image =
   image.type === 'svg' ? (
     <Icon
       name={image.name}
-      alt={`${image.name} のアイコン`}
+      alt={`${author.name} のアイコン`}
       class="aspect-square rounded-full"
       height={size}
       width={size}
@@ -30,6 +30,7 @@ const image =
   ) : image.type === 'external-url' ? (
     <img
       src={image.url}
+      alt={`${author.name} のアイコン`}
       height={size}
       width={size}
       class="aspect-square rounded-full"

src/components/blog/icon/TagIcon.astro

@@ -2,27 +2,34 @@
 import Icon from '@/components/common/Icon.astro'
 import { unreachable } from '@/utils/unreachable'
 import type { CollectionEntry } from 'astro:content'
+
 interface Props {
-  tagImage: CollectionEntry<'tags'>['data']['image']
+  tag: CollectionEntry<'tags'>['data']
   size: number
 }
 
-const { tagImage, size } = Astro.props
+const { tag, size } = Astro.props
 ---
 
 {
-  tagImage.type === 'svg' ? (
+  tag.image.type === 'svg' ? (
     <Icon
-      name={tagImage.name}
-      alt={`${tagImage.name} のアイコン`}
+      name={tag.image.name}
+      alt={`${tag.name} のアイコン`}
       class="aspect-square"
       width={size}
       height={size}
       isBlog
     />
-  ) : tagImage.type === 'external-url' ? (
-    <img src={tagImage.url} height={size} width={size} class="aspect-square" />
+  ) : tag.image.type === 'external-url' ? (
+    <img
+      src={tag.image.url}
+      alt={`${tag.name} のアイコン`}
+      height={size}
+      width={size}
+      class="aspect-square"
+    />
   ) : (
-    unreachable(tagImage)
+    unreachable(tag.image)
   )
 }

src/components/blog/tag/TagListItemCard.astro

@@ -13,7 +13,7 @@ const { id, articleCount, ...tag } = Astro.props
   class="block sm:basis-[calc((100%-0.75rem)/2)] bg-white rounded-xl border space-y-1 group"
 >
   <a class="w-full h-full p-4 flex items-center" href={`/blog/tags/${id}`}>
-    <TagIcon tagImage={tag.image} size={40} />
+    <TagIcon tag={tag} size={40} />
     <div class="px-2">
       <h2 class="text-xl font-bold line-clamp-1 group-hover:underline">
         {tag.name}

src/components/blog/tag/TagSmallList.astro

@@ -16,7 +16,7 @@ const { tags } = Astro.props
           href={`/blog/tags/${tag.id}`}
           class="flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-sm text-justify p-1 rounded-full"
         >
-          <TagIcon tagImage={tag.data.image} size={18} />
+          <TagIcon tag={tag.data} size={18} />
           <p>{tag.data.name}</p>
         </a>
       </li>

src/pages/blog/tags/[slug]/index.astro

@@ -33,7 +33,7 @@ const isShowAbout = tag.description || tag.site || tag.document || tag.github
   summarySize="summary"
 >
   <BlogTitle title={tag.name} background="white">
-    <Fragment slot="icon"><TagIcon tagImage={tag.image} size={80} /></Fragment>
+    <Fragment slot="icon"><TagIcon tag={tag} size={80} /></Fragment>
   </BlogTitle>
   <main class="flex flex-col h-full">
     {isShowAbout && <TagAboutSection tag={tag} />}