Twitter -> X に移行 (#193)

Author: aster-void

contents/members/README.md

@@ -16,5 +16,5 @@
 | `faceImage`      | ✅   | 顔写真。縦横比は 1:1。顔を中央に配置し、顔の横幅がおよそ写真の横幅の 1/2 になるようにトリミングしてください。                         |
 | `upperBodyImage` | ✅   | バストショット。縦横比は 4:3。顔の横幅が画像の横幅のおよそ 1/3、顔の中央が画像上部からおよそ 1/3 になるようにトリミングしてください。 |
 | `github`         |      | GitHub の**アカウント名**                                                                                                             |
-| `twitter`        |      | Twitter (X) の **ID**。                                                                                                               |
+| `twitter`        |      | X (旧 Twitter) の **ID**。 -- TODO: キーをx_twitterに変える (理由: X だけだとなんのことかわかりにくいため)                                                                                  |
 | `website`        |      | 個人のウェブサイトの URL。                                                                                                            |

src/components/GlobalFooter.tsx

@@ -74,7 +74,7 @@ export default function GlobalFooter({ className }: { className?: string }) {
                 to: "https://first-programming.utcode.net/",
               },
               { title: "GitHub", to: "https://github.com/ut-code" },
-              { title: "Twitter", to: "https://twitter.com/utokyo_code" },
+              { title: "𝕏", to: "https://twitter.com/utokyo_code" },
             ]}
           />
         </div>

src/pages/contact.tsx

@@ -34,7 +34,7 @@ export default function ContactPage() {
           <p>ut.code(); へのお問い合わせは、各種 SNS をご利用ください。</p>
           <p className="not-prose flex gap-4">
             <ActionButton to="https://twitter.com/utokyo_code">
-              X (Twitter)
+              𝕏 (旧 Twitter)
             </ActionButton>
             <ActionButton to="https://line.me/ti/p/%40nlr3843e">
               LINE
@@ -53,7 +53,8 @@ export default function ContactPage() {
           <h2>ご寄付・ご協賛のお願い</h2>
           <p>
             {/* eslint-disable prettier/prettier */}
-            ut.code(); では、活動を支援していただける方を募集しております。詳細につきましては、次のページをご覧ください。
+            ut.code();
+            では、活動を支援していただける方を募集しております。詳細につきましては、次のページをご覧ください。
             {/* eslint-enable prettier/prettier */}
           </p>
           <p className="not-prose">

src/pages/index.tsx

@@ -186,19 +186,31 @@ export default function IndexPage({ data }: PageProps<Queries.IndexPageQuery>) {
               { title: "団体名", content: "ut.code();" },
               { title: "構成人数", content: "20 名程度 (アクティブ)" },
               { title: "部室", content: "駒場キャンパス学生会館 313B 教室" },
-              { title: "X (旧 Twitter)", content: "@utokyo_code" },
+              {
+                title: "𝕏",
+                content: "@utokyo_code",
+                link: "https://x.com/utokyo_code",
+              },
               {
                 title: "活動場所",
                 content: "オンライン, 部室, KOMAD, その他施設",
               },
               { title: "所属", content: "東京大学工学部丁友会 (2022 年度)" },
-            ].map(({ title, content }) => (
-              <li
-                key={title}
-                className="flex gap-4 border-b border-gray-400 px-6 py-3"
-              >
+            ].map(({ title, content, link }) => (
+              <li className="flex gap-4 border-b border-gray-400 px-6 py-3">
                 <div className="w-24">{title}</div>
-                <div className="flex-1">{content}</div>
+                {link ? (
+                  <a
+                    href={link}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="flex-1 text-blue-500 underline"
+                  >
+                    {content}
+                  </a>
+                ) : (
+                  <div className="flex-1">{content}</div>
+                )}
               </li>
             ))}
           </ul>

src/templates/member.tsx

@@ -4,7 +4,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import nullthrows from "nullthrows";
 import Color from "color";
 import clsx from "clsx";
-import { FiTwitter, FiGithub, FiGlobe } from "react-icons/fi";
+import { FiGithub, FiGlobe } from "react-icons/fi";
 import GlobalHeader from "../components/GlobalHeader";
 import GlobalFooter from "../components/GlobalFooter";
 import CommonHead from "../components/CommonHead";
@@ -66,9 +66,9 @@ export default function MemberPage({
                     target="_blank"
                     className={socialButtonClassName}
                     rel="noreferrer"
-                    aria-label="Twitterを見る"
+                    aria-label="𝕏 (旧 Twitter) を見る"
                   >
-                    <FiTwitter />
+                    𝕏
                   </a>
                 )}
                 {data.mdx?.frontmatter?.website && (