From bd9adc43fe4cccb9a0fcda8a015bbe021ac608cd Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Sat, 17 Feb 2024 18:22:39 +0900
Subject: [PATCH] Add icon to external link

---
 src/components/Keys.tsx     |  7 +++++--
 src/components/Profile.tsx  |  2 +-
 src/components/Services.tsx | 20 ++++++++++++--------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/Keys.tsx b/src/components/Keys.tsx
index 64c0e90..f036737 100644
--- a/src/components/Keys.tsx
+++ b/src/components/Keys.tsx
@@ -1,3 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+
 export default function Keys() {
     return (
         <>
@@ -5,7 +8,7 @@ export default function Keys() {
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">GNU Privacy Guard</h2>
             <ul className="max-w-md space-y-1 list-disc list-inside text-gray-300 ml-5">
                 <li>
-                    <a className="underline" href="https://github.com/yude.gpg">GitHub</a> から入手できます。
+                    <a className="underline" href="https://github.com/yude.gpg">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} /> から入手できます。
                 </li>
                 <li>
                     鍵指紋: <code>3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968</code>
@@ -15,7 +18,7 @@ export default function Keys() {
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">The Secure Shell (RFC 4716)</h2>
             <ul className="max-w-md space-y-1 list-disc list-inside text-gray-300 ml-5">
             <li>
-                    <a className="underline" href="https://github.com/yude.keys">GitHub</a> から入手できます。
+                    <a className="underline" href="https://github.com/yude.keys">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} /> から入手できます。
                 </li>
             </ul>
             
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 0ea313e..e0a1aeb 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -43,7 +43,7 @@ export default function Profile() {
             
             <p className="text-right">
                 <a href="https://scrapbox.io/yude/%E9%81%8E%E5%8E%BB%E3%81%AE%E6%B4%BB%E5%8B%95%E7%AD%89">
-                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} />&nbsp;過去の活動
+                    過去の活動&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                 </a>
             </p>
 
diff --git a/src/components/Services.tsx b/src/components/Services.tsx
index 6dd192d..ef344fc 100644
--- a/src/components/Services.tsx
+++ b/src/components/Services.tsx
@@ -1,3 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+
 export default function Services() {
     return (
         <>
@@ -8,27 +11,27 @@ export default function Services() {
             <ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside text-gray-400">
                 <li>
                     <a className="hover:underline" href="https://soine.site">
-                        soine.site
+                        soine.site <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="https://mstdn.soine.site">
-                        Mastodon インスタンス: 添い寝して！
+                        Mastodon インスタンス: 添い寝して！ <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="https://discord.gg/X6srY7X">
-                        Discord サーバー
+                        Discord サーバー <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="https://github.com/yudejp">
-                        GitHub Organization
+                        GitHub Organization <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="https://status.yude.jp/">
-                        サービス状況
+                        サービス状況 <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
@@ -41,20 +44,21 @@ export default function Services() {
             <h2 className="text-xl font-semibold text-gray-200 mt-2 mb-1 ml-1">
                 接続性
             </h2>
+            <p className="text-gray-200 ml-3 -mb-1">閲覧にはそれぞれのプロトコルに対応したソフトウェアが必要です。</p>
             <ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside text-gray-400">
                 <li>
                     <a className="hover:underline" href="http://yudejpwxp2cziclocqjfd55ucw2dh6ncswopluh7exwusjlfkvkwhwqd.onion/">
-                        The Onion Router
+                        The Onion Router <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="http://yude.i2p/?i2paddresshelper=idabfrazqbh7upvo2f5hx3ajpqglrwny66qbvcoatfqoq64ifiaq.b32.i2p">
-                        I2P
+                        I2P <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
                 <li>
                     <a className="hover:underline" href="gemini://yude.jp">
-                        Gemini
+                        Gemini <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                     </a>
                 </li>
             </ul>