[fix]image aspext ratio for Lighthouse

ManatoYamashita · Sep 23, 2024 · 0755b5e · 0755b5e
1 parent 7c45311
commit 0755b5e
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 36 deletions.
diff --git a/public/robot.txt → public/robots.txt b/public/robot.txt → public/robots.txt
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -11,7 +11,7 @@ interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, SITE_URL);
 
-const { title, description, image = '/tcuA-ogp.jpg' } = Astro.props;
+const { title, description, image = '/tcuA.webp' } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -22,7 +22,7 @@ const { title, description, image = '/tcuA-ogp.jpg' } = Astro.props;
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@100..900&family=Reddit+Mono:wght@200..900&family=Sawarabi+Mincho&display=swap" rel="stylesheet"> 
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap&family=Noto+Sans+JP:wght@100..900&display=swap&family=Reddit+Mono:wght@200..900&display=swap&family=Sawarabi+Mincho&display=swap" rel="stylesheet" media="print" /> 
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -14,14 +14,14 @@ const today = new Date();
         <small>2024年12月まで募集しています。</small>
       </p>
 	  <div class="flex gap-3 mt-3">
-		<a href="mailto:g2172117@tcu.ac.jp" target="_blank">
-			<Icon name="material-symbols:mail" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200"/>
+		<a href="mailto:g2172117@tcu.ac.jp" target="_blank" aria-label="メールを送る" />
+			<Icon name="material-symbols:mail" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200" aria-hidden="true"/>
 		</a>
-		<a href="https://www.github.com/ManatoYamashita" target="_blank">
-			<Icon name="radix-icons:github-logo" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200"/>
+		<a href="https://www.github.com/ManatoYamashita" target="_blank" aria-label="githubでコードを見る">
+			<Icon name="radix-icons:github-logo" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200" aria-hidden="true"/>
 		</a>
-		<a href="https://www.instagram.com/manapuraza_com/" target="_blank">
-			<Icon name="radix-icons:instagram-logo" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200"/>
+		<a href="https://www.instagram.com/manapuraza_com/" target="_blank"aria-label="Instagramをチェックする">
+			<Icon name="radix-icons:instagram-logo" class="w-5 h-5 text-gray-600 hover:text-gray-500 dark:text-neutral-200" aria-hidden="true"/>
 		</a>
 
 	  </div>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -29,7 +29,7 @@ import ThemeIcon from "./ThemeIcon.astro";
 			<li class="menu-item flex items-center"><a href="/about">About</a></li>
 			<li class="menu-item flex items-center"><a href="/blog">Blog</a></li>
 			<li class="menu-item flex items-center"><a href="/tags">Tags</a></li>
-			<ThemeIcon class="menu-item w-10 hidden lg:flex" />
+			<li><ThemeIcon class="menu-item w-10 hidden lg:flex" /></li>
 		</ul>
     </MenuItems>
   </Astronav>

diff --git a/src/components/RecentPublications.astro b/src/components/RecentPublications.astro
@@ -26,8 +26,8 @@ let recentPosts = sortedPosts.slice(0, numberOfPostsToDisplay);
           <a class="font-bold text-lg" href={`/blog/${post.slug}`}>
             {post.data.title}
           </a>
-          <div class="flex gap-2">
-              {post.data.tags?.map((i) => {
+          <div class="flex gap-2 flex flex-col sm:flex-row">
+              {post.data.tags?.map((i: string) => {
                 return <TagLink tag={i} />;
               })}
           </div>

diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
@@ -97,13 +97,12 @@ const props = Astro.props
   }
 </style>
 
-<button class={"switch-theme-button pushable " + props.class }>
+<button type="button" class={"switch-theme-button pushable " + props.class } aria-label="テーマを切り替える">
   <span class="shadow"></span>
   <span class="edge"></span>
   <span class="front">
-    <Icon name="radix-icons:sun" class="w-4 h-4 flex dark:hidden" />
-    <Icon name="radix-icons:moon" class="w-4 h-4 dark:flex hidden" />
-
+    <Icon name="radix-icons:sun" class="w-4 h-4 flex dark:hidden" aria-hidden="true" />
+    <Icon name="radix-icons:moon" class="w-4 h-4 dark:flex hidden" aria-hidden="true" />
   </span>
 </button>
 

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -48,29 +48,30 @@ posts.forEach((post) => {
             {
               postByMonth[parseInt(month)].map((post: Post) => (
               <div class="flex gap-2 justify-between border-b pb-4">
-            <div class="flex flex-col gap-4">
-              <FormattedDate date={post.data.pubDate} />
-              <a class="font-bold text-lg" href={`/blog/${post.slug}`}>
-                {post.data.title}
-              </a>
-              <div class="flex gap-2">
-                {post.data.tags?.map((i: string) => {
-                  return <TagLink tag={i} />;
-                })}
+                <div class="flex flex-col gap-4">
+                  <FormattedDate date={post.data.pubDate} />
+                  <a class="font-bold text-lg" href={`/blog/${post.slug}`}>
+                    {post.data.title}
+                  </a>
+                  <div class="flex gap-2 flex flex-col sm:flex-row">
+                    {post.data.tags?.map((i: string) => {
+                      return <TagLink tag={i} />;
+                    })}
+                  </div>
+                </div>
+                <a href={`/blog/${post.slug}`}>
+                  <div class="w-40 h-24 border border-gray-200">
+                    <img
+                      src={post.data.heroImage}
+                      alt={post.data.title}
+                      class="w-full h-full object-cover"
+                    />
+                  </div>
+                </a>
               </div>
+                ))
+              }
             </div>
-            <a href={`/blog/${post.slug}`}>
-              <img
-                src={post.data.heroImage}
-                alt="都市大アニメーション ブログ"
-                class="w-40 h-24 bg-contain border border-gray-200"
-              />
-            </a>
-          </div>
-              ))
-            }
-            </div>
-
           </div>
         ))
       }