Merge pull request #60 from sohosai/feature/add-sns-icons

FooterにSNSへのリンクを追加
sohosai · Dec 1, 2023 · 4f4d9a6 · 4f4d9a6
2 parents 1890521 + 27e5023
commit 4f4d9a6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 1 deletion.
diff --git a/src/assets/instagram-logo.png b/src/assets/instagram-logo.png
diff --git a/src/assets/x-logo.svg b/src/assets/x-logo.svg
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,7 +2,16 @@
 import { i18nAdapter, t } from "src/utils/i18n";
 i18nAdapter.init(Astro);
 
+import { Image } from "astro:assets";
+
 import Container from "src/components/Container.astro";
+
+import instagramLogo from "src/assets/instagram-logo.png";
+import xLogo from "src/assets/x-logo.svg";
+
+import { TWITTER_ID, INSTAGRAM_ID } from "src/consts";
+const xAccountURL = "https://twitter.com/" + TWITTER_ID.replace("@", "");
+const instagramAccountURL = "https://instagram.com/" + INSTAGRAM_ID.replace("@", "");
 ---
 
 <footer>
@@ -21,13 +30,29 @@ import Container from "src/components/Container.astro";
     </section>
 
     <section>
-      <h3>外部対応時間</h3>
+      <h3>{t("footer.外部対応時間")}</h3>
       <dl>
         <dt>{t("footer.平日")}</dt><dd>{t("info.平日対応時間")}</dd>
         <dt>{t("footer.休日")}</dt><dd>{t("info.休日対応時間")}</dd>
       </dl>
     </section>
 
+    <section>
+      <h3>{t("footer.SNS")}</h3>
+      <ul class="sns-logo-wrapper">
+        <li>
+          <a id="x" href={xAccountURL} target="_blank" rel="noopener noreferrer"
+            ><Image src={xLogo} alt="X" class="sns-logo" /></a
+          >
+        </li>
+        <li>
+          <a id="instagram" href={instagramAccountURL} target="_blank" rel="noopener noreferrer"
+            ><Image src={instagramLogo} alt="Instagram" class="sns-logo" /></a
+          >
+        </li>
+      </ul>
+    </section>
+
     <hr />
     <p class="copy"><small>&copy 2023 筑波大学学園祭実行委員会 All rights reserved.</small></p>
   </Container>
@@ -72,6 +97,36 @@ import Container from "src/components/Container.astro";
     }
   }
 
+  .sns-logo-wrapper {
+    display: flex;
+    gap: 0.75rem;
+    margin-block: 0.75rem;
+
+    & a {
+      display: block;
+
+      &:hover {
+        opacity: 0.625;
+        transition: opacity 0.25s ease;
+      }
+    }
+  }
+
+  #instagram {
+    & .sns-logo {
+      height: max(2rem, 30px);
+      width: max(2rem, 29px);
+    }
+  }
+
+  #x {
+    color: #000000;
+    & .sns-logo {
+      height: max(2rem, 30px);
+      width: max(2rem, 30px);
+    }
+  }
+
   hr {
     background: $light-gray;
     height: 1px;

diff --git a/src/consts.ts b/src/consts.ts
@@ -6,6 +6,7 @@ export const END_DATE: YYYYMMDD = "2023-11-05";
 export const DEFAULT_TIMEZONE = "Asia/Tokyo";
 
 export const TWITTER_ID = "@sohosai";
+export const INSTAGRAM_ID = "@sohosai";
 export const DEFAULT_OGP_IMAGE = "opengraph-image.png";
 
 const keys = [

diff --git a/src/content/locales/ja/translation.json b/src/content/locales/ja/translation.json
@@ -18,8 +18,10 @@
 
   "footer.Email": "E-mail",
   "footer.TEL/FAX": "TEL/FAX",
+  "footer.外部対応時間": "外部対応時間",
   "footer.平日": "平日",
   "footer.休日": "休日",
+  "footer.SNS": "SNSアカウント",
 
   "accessibility.トップページへ": "トップページへ",
   "accessibility.OGP代替テキスト": "筑波大学学園祭「雙峰祭」準備期間サイトのサムネイル画像",