From 1f5d88fec182d7c138ce4a0a6c366301237fd152 Mon Sep 17 00:00:00 2001
From: Ciffelia <mc.prince.0203@gmail.com>
Date: Tue, 5 Dec 2023 19:27:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?`<Image>`=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=ABSVG=E3=81=8C?=
 =?UTF-8?q?=E4=B8=8E=E3=81=88=E3=82=89=E3=82=8C=E3=81=9F=E3=81=A8=E3=81=8D?=
 =?UTF-8?q?=E3=81=AFsrcset=E3=82=92=E7=94=9F=E6=88=90=E3=81=97=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Image.astro | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Image.astro b/src/components/common/Image.astro
index cbdd59f..7819f4f 100644
--- a/src/components/common/Image.astro
+++ b/src/components/common/Image.astro
@@ -10,7 +10,7 @@ type Props = Omit<HTMLAttributes<'img'>, 'src' | 'srcset'> & {
 
 const { widths = [3840, 1920, 960, 480, 240], ...attrs } = Astro.props
 
-const { src, attributes } = await getImage(attrs)
+const { src, options, attributes } = await getImage(attrs)
 
 const originalWidth = parseInt(attributes.width, 10)
 const srcset = (
@@ -25,4 +25,14 @@ const srcset = (
 ).join(',')
 ---
 
-<img src={src} srcset=`${src} ${originalWidth}w,${srcset}` {...attributes} />
+{
+  options.format === 'svg' ? (
+    <img src={src} {...attributes} />
+  ) : (
+    <img
+      src={src}
+      srcset={`${src} ${originalWidth}w,${srcset}`}
+      {...attributes}
+    />
+  )
+}

From 7a594cd6938841703c902e152c02f3fc9316f397 Mon Sep 17 00:00:00 2001
From: Ciffelia <mc.prince.0203@gmail.com>
Date: Tue, 5 Dec 2023 19:57:13 +0900
Subject: [PATCH 2/2] =?UTF-8?q?OUCC=E3=81=AE=E3=83=AD=E3=82=B4=E3=81=AF`<I?=
 =?UTF-8?q?con>`=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F`<Image>`=E3=81=A7?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/{icons => }/oucc.svg               |  2 +-
 src/components/index/about/AboutSection.astro | 15 ++++++++++++---
 src/components/layout/Footer.astro            |  5 +++--
 src/components/layout/nav/Header.astro        | 10 +++++-----
 src/components/layout/nav/Navigation.astro    |  5 +++--
 src/pages/blog/[slug]/_OgImageGenerator.ts    |  2 +-
 6 files changed, 25 insertions(+), 14 deletions(-)
 rename src/assets/{icons => }/oucc.svg (97%)

diff --git a/src/assets/icons/oucc.svg b/src/assets/oucc.svg
similarity index 97%
rename from src/assets/icons/oucc.svg
rename to src/assets/oucc.svg
index 77992a0..611d0bc 100644
--- a/src/assets/icons/oucc.svg
+++ b/src/assets/oucc.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 592 381.58667">
+<svg xmlns="http://www.w3.org/2000/svg" width="592" height="381.58667">
   <path
     d="M579.82131884 158.91467557H444.27332223c-12.38933303 0-22.55999944-10.13066642-22.55999944-22.51333277V45.92934506c0-12.40266636 10.17066641-22.5146661 22.55999944-22.5146661h135.5479966c-.15333332-12.28666637-10.22799974-22.28399945-22.5586661-22.28399945H421.94265613c-12.4079997 0-22.55999944 10.13199975-22.55999944 22.51333277v135.0226633c0 12.40133302 10.15199975 22.53199943 22.55999944 22.53199943h135.31999662c12.33066635 0 22.40533277-9.99733308 22.5586661-22.28399944M579.82131884 359.28253722H444.27332223c-12.38933303 0-22.55999944-10.11199974-22.55999944-22.5130661v-90.4534644c0-12.38266636 10.17066641-22.51333278 22.55999944-22.51333278h135.5479966c-.15333332-12.30666635-10.22799974-22.28533277-22.5586661-22.28533277H421.94265613c-12.4079997 0-22.55999944 10.13199975-22.55999944 22.4946661v135.04132996c0 12.40259969 10.15199975 22.53333277 22.55999944 22.53333277h135.31999662c12.33066635 0 22.40533277-9.99739975 22.5586661-22.30413278M157.4413294 45.90934506c0-12.38266636-10.15199975-22.51333277-22.55999944-22.51333277h-90.6594644c-12.40786636 0-22.5598661 10.13066641-22.5598661 22.51333277v90.45333107c0 12.40266636 10.15199974 22.53333277 22.5598661 22.53333277h90.6594644c12.4079997 0 22.55999944-10.13066641 22.55999944-22.53333277zm22.32933277 112.73866385c0 12.41999969-10.15199974 22.53199943-22.55999943 22.53199943H21.91093279c-12.44634636 0-22.5791621-10.11199974-22.5791621-22.53199943V23.6053456c0-12.36266635 10.13281574-22.49333276 22.5791621-22.49333276h135.29972995c12.40799969 0 22.55999943 10.1306664 22.55999943 22.49333277V158.6480089"
     fill="#231815"
diff --git a/src/components/index/about/AboutSection.astro b/src/components/index/about/AboutSection.astro
index 52ac664..4ee7d46 100644
--- a/src/components/index/about/AboutSection.astro
+++ b/src/components/index/about/AboutSection.astro
@@ -1,16 +1,19 @@
 ---
+import type { ImageMetadata } from 'astro'
 import Section from '@/components/common/Section.astro'
 import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import AboutCard from './AboutCard.astro'
 
 interface Item {
-  icon: string
+  icon: string | ImageMetadata
   description: string[]
 }
 
 const items: Item[] = [
   {
-    icon: 'oucc',
+    icon: ouccImage,
     description: [
       'OUCC（大阪大学コンピュータクラブ）は、コンピュータを使ったものづくりに関心を持つ学生が交流するサークルです。',
       'プログラミングやお絵描き、3Dモデリングなどの活動を行っています。',
@@ -43,7 +46,13 @@ const items: Item[] = [
       items.map(({ icon, description }) => (
         <li class="flex-1 max-w-[32rem] flex items-stretch">
           <AboutCard>
-            <Icon slot="icon" name={icon} alt="" class="w-20 h-20" />
+            <Fragment slot="icon">
+              {typeof icon === 'string' ? (
+                <Icon name={icon} alt="" class="w-20 h-20" />
+              ) : (
+                <Image src={icon} alt="" class="w-20 h-20 object-contain" />
+              )}
+            </Fragment>
             {description.map((x) => (
               <p>{x}</p>
             ))}
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 466d745..52daa83 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -1,11 +1,12 @@
 ---
-import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import FooterLink from './FooterLink.astro'
 ---
 
 <footer class="py-8 flex flex-wrap justify-center items-center gap-8">
   <div class="px-4 flex flex-wrap justify-center items-center gap-4">
-    <Icon name="oucc" alt="OUCC" class="w-12" />
+    <Image src={ouccImage} alt="OUCC" class="w-12" />
     <span class="text-sm">© 2023 大阪大学コンピュータクラブ</span>
   </div>
   <div class="px-4 flex flex-wrap justify-center items-center gap-4">
diff --git a/src/components/layout/nav/Header.astro b/src/components/layout/nav/Header.astro
index 5e69ff0..e05beaf 100644
--- a/src/components/layout/nav/Header.astro
+++ b/src/components/layout/nav/Header.astro
@@ -1,5 +1,7 @@
 ---
 import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import LinkButton from '@/components/common/button/LinkButton.astro'
 import Navigation from './Navigation.astro'
 
@@ -38,11 +40,9 @@ const {
       />
     </button>
     <a href={rootPath} class="flex items-center">
-      <Icon
-        name="oucc"
-        alt="OUCC"
-        class="block max-h-full min-h-full h-16 aspect-square"
-      />
+      <span class="h-full aspect-square">
+        <Image src={ouccImage} alt="OUCC" class="h-full object-contain" />
+      </span>
       {headerTitle && <h1 class="text-4xl font-bold mx-4">{headerTitle}</h1>}
     </a>
   </div>
diff --git a/src/components/layout/nav/Navigation.astro b/src/components/layout/nav/Navigation.astro
index 5b0afbc..e65a7b3 100644
--- a/src/components/layout/nav/Navigation.astro
+++ b/src/components/layout/nav/Navigation.astro
@@ -1,12 +1,13 @@
 ---
-import Icon from '@/components/common/Icon.astro'
+import Image from '@/components/common/Image.astro'
+import ouccImage from '@/assets/oucc.svg'
 import NavigationListItem from './NavigationListItem.astro'
 import DrWani from './DrWani.astro'
 ---
 
 <nav class="w-full h-full bg-white flex flex-col">
   <div class="py-2 flex justify-center">
-    <Icon name="oucc" alt="OUCC" class="w-20 aspect-square" />
+    <Image src={ouccImage} alt="OUCC" class="w-20 h-20 object-contain" />
   </div>
   <ul class="flex flex-col text-center">
     <NavigationListItem to="/">トップページ</NavigationListItem>
diff --git a/src/pages/blog/[slug]/_OgImageGenerator.ts b/src/pages/blog/[slug]/_OgImageGenerator.ts
index dd7cfbe..9448384 100644
--- a/src/pages/blog/[slug]/_OgImageGenerator.ts
+++ b/src/pages/blog/[slug]/_OgImageGenerator.ts
@@ -1,5 +1,5 @@
 import satori from 'satori'
-import oucc from '@/assets/icons/oucc.svg?raw'
+import oucc from '@/assets/oucc.svg?raw'
 import fs from 'node:fs/promises'
 import sharp from 'sharp'