Default image yn icon

src/components/ArticleCard.astro

@@ -2,16 +2,15 @@
 import Card from "./Card.astro";
 import type { Post } from "../esa-utils/models";
 import { getFirstImg } from "../esa-utils/thumbnail";
-import backgroundImage from "../assets/background.svg";
 
 export interface Props {
   post: Post;
 }
 const { post } = Astro.props;
 const firstImg = await getFirstImg(post);
-const img = firstImg ?? backgroundImage;
+const img = firstImg;
 const href = `/posts/${post.number}`;
 const title = post.name;
 ---
 
-<Card href={href} title={title} imgSrc={img.src} />
+<Card href={href} title={title} imgSrc={img?.src} />

src/components/Card.astro

@@ -1,15 +1,28 @@
 ---
+import { Image } from "astro:assets";
+import Icon from "../../public/YN-icon.png";
 export interface Props {
   href: string | URL;
   title: string;
-  imgSrc: string;
+  imgSrc: string | undefined;
 }
 const { href, title, imgSrc } = Astro.props;
+const useFallbackImage = imgSrc === undefined || imgSrc === "";
 ---
 
 <a class="card" href={href}>
   <h3 class="card-text">{title}</h3>
-  <img class="thumbnail" src={imgSrc} alt="" />
+  {
+    useFallbackImage ? (
+      <div class="fallback-bg">
+        <div class="fallback-thumbnail">
+          <Image class="fallback-icon" src={Icon} alt="" />
+        </div>
+      </div>
+    ) : (
+      <img class="thumbnail" src={imgSrc} alt="" />
+    )
+  }
 </a>
 
 <style>
@@ -37,10 +50,32 @@ const { href, title, imgSrc } = Astro.props;
     object-fit: cover;
     border-radius: 0 8px 8px 0;
   }
+  .fallback-bg {
+    border-radius: 0 8px 8px 0;
+    background-color: var(--fallback-bg);
+  }
+  .fallback-thumbnail {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 12rem;
+    height: 8rem;
+    border-radius: 0 8px 8px 0;
+    background-color: white;
+    opacity: 60%;
+  }
+  .fallback-icon {
+    width: auto;
+    height: 60%;
+  }
   @media screen and (max-width: 768px) {
     .thumbnail {
       width: 9rem;
       height: 7rem;
     }
+    .fallback-thumbnail {
+      width: 9rem;
+      height: 7rem;
+    }
   }
 </style>

src/layouts/Layout.astro

@@ -106,6 +106,7 @@ const jsonldStringfy = JSON.stringify({
     --border-color-accent: light-dark(#777, #aaa);
     --theme-color: light-dark(#0e9c26, #2db446);
     --theme-color-accent: light-dark(#0b7a1f, #52cc68);
+    --fallback-bg: light-dark(#c3c3c3, #484848);
     *,
     *::before,
     *::after {

src/pages/index.astro

@@ -4,14 +4,13 @@ import Layout from "../layouts/Layout.astro";
 import ArticleCard from "../components/ArticleCard.astro";
 import { getFirstImg } from "../esa-utils/thumbnail";
 import { fetchPost } from "../esa-utils/fetch";
-import backgroundImage from "../assets/background.svg";
 import Card from "../components/Card.astro";
 
 const response = await fetchPosts();
 const posts = response.posts;
 const faqPost = await fetchPost(import.meta.env.ESA_FAQ_NUMBER);
 const faqFirstImg = await getFirstImg(faqPost);
-const faqImg = faqFirstImg ?? backgroundImage;
+const faqImg = faqFirstImg;
 const blogPosts = posts.filter((post) => post.number !== faqPost.number);
 ---
 
@@ -20,7 +19,7 @@ const blogPosts = posts.filter((post) => post.number !== faqPost.number);
     <h2 class="heading">記事一覧</h2>
     {blogPosts.map((post) => <ArticleCard post={post} />)}
     <h2 class="heading">これってどうなの？</h2>
-    <Card href="/faq" title="よくある質問" imgSrc={faqImg.src} />
+    <Card href="/faq" title="よくある質問" imgSrc={faqImg?.src} />
   </div>
 </Layout>