add idle message to Discord Activity

2 files changed, 62 insertions, 58 deletions

diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro
index 2d59c1f..0b2bb88 100644
--- a/src/components/DiscordActivity.astro
+++ b/src/components/DiscordActivity.astro
@@ -1,83 +1,87 @@
 <script>
-  async function fetchData() {
-    const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
+    async function fetchData() {
+        const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
 
-    try {
-      const response = await fetch(API_URL);
-      const data = await response.json();
+        try {
+            const response = await fetch(API_URL);
+            const data = await response.json();
 
-      if (data && data.success) {
-        const activities = data.data.activities;
-        let activityHTML = "";
-        for (const activity of activities) {
-          const imageUrl =
-            activity.assets && activity.assets.large_image
-              ? activity.assets.large_image
-              : "";
+            if (data && data.success) {
+                const activities = data.data.activities;
+                let activityHTML = "";
+                if (activities.length === 0) {
+                    activityHTML = "<p>Not doing anything at the moment</p>";
+                } else {
+                    for (const activity of activities) {
+                        const imageUrl =
+                            activity.assets && activity.assets.large_image
+                                ? activity.assets.large_image
+                                : "";
 
-          activityHTML += `
-              <div class="activity-card">
-                <h3>${activity.name}</h3>
-                <p>${activity.details ? activity.details : ""}</p>
-                <p>${activity.state ? activity.state : ""}</p>
-              </div>
-            `;
-        }
+                        activityHTML += `
+                            <div class="activity-card">
+                                <h3>${activity.name}</h3>
+                                <p>${activity.details ? activity.details : ""}</p>
+                                <p>${activity.state ? activity.state : ""}</p>
+                            </div>
+                        `;
+                    }
+                }
 
-        document.querySelector("#activities").innerHTML = activityHTML;
-      } else {
-        console.error("Failed fetching user data:", data.message);
-      }
-    } catch (error) {
-      console.error("Network error:", error);
+                document.querySelector("#activities").innerHTML = activityHTML;
+            } else {
+                console.error("Failed fetching user data:", data.message);
+            }
+        } catch (error) {
+            console.error("Network error:", error);
+        }
     }
-  }
 
-  window.addEventListener("DOMContentLoaded", fetchData);
+    window.addEventListener("DOMContentLoaded", fetchData);
 </script>
 
 <section>
-  <div>
-    <div id="activities"></div>
-  </div>
+    <div>
+        <div id="activities"></div>
+    </div>
 </section>
 <style>
 section {
-    max-width: 800px;
-    margin: 40px auto;
-    padding: 24px;
-    border-radius: 12px;
-    background-color: #1a1a1a; 
-    font-family: 'Courier New', Courier, monospace;
-    color: #c0c0c0;
+        max-width: 800px;
+        margin: 40px auto;
+        padding: 24px;
+        border-radius: 12px;
+        background-color: #1a1a1a; 
+        font-family: 'Courier New', Courier, monospace;
+        color: #c0c0c0;
 }
 
 
 .activity-card {
-    background-color: #1a1a1a;
-    padding: 20px;
-    margin-bottom: 16px;
-    border: 1px solid #c0c0c0;
-    display: flex;
-    flex-direction: column;
+        background-color: #1a1a1a;
+        padding: 20px;
+        margin-bottom: 16px;
+        border: 1px solid #c0c0c0;
+        display: flex;
+        flex-direction: column;
 }
 
 .activity-card h3 {
-    margin-top: 0;
-    margin-bottom: 8px; 
+        margin-top: 0;
+        margin-bottom: 8px; 
 }
 
 .activity-card p {
-    margin: 0;
-    font-size: 0.5em;
-    line-height: 1.5;
-    padding: 4px 0;
+        margin: 0;
+        font-size: 0.5em;
+        line-height: 1.5;
+        padding: 4px 0;
 }
 
 .activity-card p + p {
-    margin-top: 6px;
-    border-top: 1px dashed #c0c0c0;
-    padding-top: 8px;
+        margin-top: 6px;
+        border-top: 1px dashed #c0c0c0;
+        padding-top: 8px;
 }
 
-</style>
+</style>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4c64d69..e480962 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -20,9 +20,9 @@ import DiscordActivity from "../components/DiscordActivity.astro";
     </div>
     <div class="grid-item">
       <p class="introduction">
-        <h2>推しししししし!!!!</h2>
-        <img src="https://files.pinapelz.com/FM5RJDxUYAMqkOF.jpeg" style="width: 350px; height: auto; align-items: center; margin-bottom: 15px;"/>
-        <img src="https://files.catbox.moe/zawgke.webp" style="width: 300px; height: auto; align-items: right;"/>
+        <h2>推し!!!!</h2>
+        <a href="https://www.youtube.com/@ErinaMakina"><img src="https://files.pinapelz.com/FM5RJDxUYAMqkOF.jpeg" style="width: 350px; height: auto; align-items: center; margin-bottom: 15px;"/></a>
+        <a href="https://www.youtube.com/@Rosemi_Lovelock"><img src="https://files.catbox.moe/zawgke.webp" style="width: 300px; height: auto; align-items: right;"/></a>
       </p>
   </div>
     <div class="grid-item">