Added my Discord status to the navbar.

tayrp · Sep 20, 2024 · 5a19c39 · 5a19c39
1 parent 7871b44
commit 5a19c39
Show file tree

Hide file tree

Showing 21 changed files with 74 additions and 8 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -27,7 +27,11 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<a class="navbar-brand" href="/">Tee</a>
+				<a class="navbar-brand" href="/">
+					Tee
+					<img id="dcstat" alt="Status" width="75" style="margin-left: 55px; margin-top: -17px">
+					<script src="/assets/js/lanyard.js"></script>
+				</a>
 				<link rel="home" href="/" />
 			</div>
 			<div class="collapse navbar-collapse" id="top-navbar-1">

diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -6,6 +6,7 @@ <h3 id="date-time">time</h3>
             <script src="/assets/js/timezone.js"></script>
             <p>Hello and Welcome, My name is Tee.</p>
             <p>I prefer to go by Tee, Rhea, or Kara.</p>
+            <p>My preferred pronouns are She/They</p>
             <p style="font-size: 20px;">
                 <a href="https://nohello.net/en/">NoHello</a> |
                 <a href="https://dontasktoask.com/">DontAskToAsk</a> |

diff --git a/public/about/index.html b/public/about/index.html
@@ -27,7 +27,11 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<a class="navbar-brand" href="/">Tee</a>
+				<a class="navbar-brand" href="/">
+					Tee
+					<img id="dcstat" alt="Status" width="75" style="margin-left: 55px; margin-top: -17px">
+					<script src="/assets/js/lanyard.js"></script>
+				</a>
 				<link rel="home" href="/" />
 			</div>
 			<div class="collapse navbar-collapse" id="top-navbar-1">

diff --git a/public/assets/imgs/away.png b/public/assets/imgs/away.png
diff --git a/public/assets/imgs/dnd.png b/public/assets/imgs/dnd.png
diff --git a/public/assets/imgs/offline.png b/public/assets/imgs/offline.png
diff --git a/public/assets/imgs/online.png b/public/assets/imgs/online.png
diff --git a/public/assets/js/lanyard.js b/public/assets/js/lanyard.js
@@ -0,0 +1,19 @@
+const dcstat = document.getElementById("dcstat");
+const apiEndpoint = `https://api.lanyard.rest/v1/users/1050531216589332581`;
+fetch(apiEndpoint)
+    .then(response => response.json())
+    .then(data => {
+        const dcStatus = data.data.discord_status;
+        if (dcStatus === "offline") {
+            dcstat.src = "/assets/imgs/offline.png";
+        } else if (dcStatus === "online") {
+            dcstat.src = "/assets/imgs/online.png";
+        } else if (dcStatus === "idle") {
+            dcstat.src = "/assets/imgs/away.png";
+        } else if (dcStatus === "dnd") {
+            dcstat.src = "/assets/imgs/dnd.png";
+        }
+    })
+    .catch(error => {
+        console.error('Error fetching Discord status:', error);
+    });
diff --git a/public/assets/js/timezone.js b/public/assets/js/timezone.js
@@ -6,8 +6,11 @@ function displayDateTime() {
     };
 
     const currentTime = new Date().toLocaleString('en-US', options);
-    document.getElementById('date-time').innerHTML = `It is ${currentTime} for Tee`;
+
+    const now = new Date();
+    const timeZoneOffset = now.getTimezoneOffset() / -60; 
+    const gmtOffset = timeZoneOffset >= 0 ? `GMT+${timeZoneOffset}` : `GMT${timeZoneOffset}`;
+    document.getElementById('date-time').innerHTML = `It is ${currentTime} (${gmtOffset}) for Tee`;
 }
-
 setInterval(displayDateTime, 1000);
 window.onload = displayDateTime;
diff --git a/public/discord/index.html b/public/discord/index.html
@@ -38,6 +38,7 @@
 					<li><a class="btn btn-link-3" href="/discord">Discord</a></li>
 					<li><a class="btn btn-link-3" href="/pages">Pages</a></li>
 					<li><a class="btn btn-link-3" href="https://tayrp.substack.com/">Blog</a></li>
+					<script src="/assets/js/lanyard.js"></script>
 				</ul>
 			</div>
 		</div>

diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,11 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<a class="navbar-brand" href="/">Tee</a>
+				<a class="navbar-brand" href="/">
+					Tee
+					<img id="dcstat" alt="Status" width="75" style="margin-left: 55px; margin-top: -17px">
+					<script src="/assets/js/lanyard.js"></script>
+				</a>
 				<link rel="home" href="/" />
 			</div>
 			<div class="collapse navbar-collapse" id="top-navbar-1">
@@ -51,6 +55,7 @@ <h3 id="date-time">time</h3>
             <script src="/assets/js/timezone.js"></script>
             <p>Hello and Welcome, My name is Tee.</p>
             <p>I prefer to go by Tee, Rhea, or Kara.</p>
+            <p>My preferred pronouns are She/They</p>
             <p style="font-size: 20px;">
                 <a href="https://nohello.net/en/">NoHello</a> |
                 <a href="https://dontasktoask.com/">DontAskToAsk</a> |

diff --git a/public/pages/index.html b/public/pages/index.html
@@ -38,6 +38,7 @@
 					<li><a class="btn btn-link-3" href="/discord">Discord</a></li>
 					<li><a class="btn btn-link-3" href="/pages">Pages</a></li>
 					<li><a class="btn btn-link-3" href="https://tayrp.substack.com/">Blog</a></li>
+					<script src="/assets/js/lanyard.js"></script>
 				</ul>
 			</div>
 		</div>

diff --git a/public/projects/index.html b/public/projects/index.html
@@ -27,7 +27,11 @@
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</button>
-				<a class="navbar-brand" href="/">Tee</a>
+				<a class="navbar-brand" href="/">
+					Tee
+					<img id="dcstat" alt="Status" width="75" style="margin-left: 55px; margin-top: -17px">
+					<script src="/assets/js/lanyard.js"></script>
+				</a>
 				<link rel="home" href="/" />
 			</div>
 			<div class="collapse navbar-collapse" id="top-navbar-1">

diff --git a/public/readme/index.html b/public/readme/index.html
@@ -38,6 +38,7 @@
 					<li><a class="btn btn-link-3" href="/discord">Discord</a></li>
 					<li><a class="btn btn-link-3" href="/pages">Pages</a></li>
 					<li><a class="btn btn-link-3" href="https://tayrp.substack.com/">Blog</a></li>
+					<script src="/assets/js/lanyard.js"></script>
 				</ul>
 			</div>
 		</div>

diff --git a/public/salad/index.html b/public/salad/index.html
@@ -38,6 +38,7 @@
 					<li><a class="btn btn-link-3" href="/discord">Discord</a></li>
 					<li><a class="btn btn-link-3" href="/pages">Pages</a></li>
 					<li><a class="btn btn-link-3" href="https://tayrp.substack.com/">Blog</a></li>
+					<script src="/assets/js/lanyard.js"></script>
 				</ul>
 			</div>
 		</div>

diff --git a/static/assets/imgs/away.png b/static/assets/imgs/away.png
diff --git a/static/assets/imgs/dnd.png b/static/assets/imgs/dnd.png
diff --git a/static/assets/imgs/offline.png b/static/assets/imgs/offline.png
diff --git a/static/assets/imgs/online.png b/static/assets/imgs/online.png
diff --git a/static/assets/js/lanyard.js b/static/assets/js/lanyard.js
@@ -0,0 +1,19 @@
+const dcstat = document.getElementById("dcstat");
+const apiEndpoint = `https://api.lanyard.rest/v1/users/1050531216589332581`;
+fetch(apiEndpoint)
+    .then(response => response.json())
+    .then(data => {
+        const dcStatus = data.data.discord_status;
+        if (dcStatus === "offline") {
+            dcstat.src = "/assets/imgs/offline.png";
+        } else if (dcStatus === "online") {
+            dcstat.src = "/assets/imgs/online.png";
+        } else if (dcStatus === "idle") {
+            dcstat.src = "/assets/imgs/away.png";
+        } else if (dcStatus === "dnd") {
+            dcstat.src = "/assets/imgs/dnd.png";
+        }
+    })
+    .catch(error => {
+        console.error('Error fetching Discord status:', error);
+    });
diff --git a/static/assets/js/timezone.js b/static/assets/js/timezone.js
@@ -6,8 +6,11 @@ function displayDateTime() {
     };
 
     const currentTime = new Date().toLocaleString('en-US', options);
-    document.getElementById('date-time').innerHTML = `It is ${currentTime} for Tee`;
+
+    const now = new Date();
+    const timeZoneOffset = now.getTimezoneOffset() / -60; 
+    const gmtOffset = timeZoneOffset >= 0 ? `GMT+${timeZoneOffset}` : `GMT${timeZoneOffset}`;
+    document.getElementById('date-time').innerHTML = `It is ${currentTime} (${gmtOffset}) for Tee`;
 }
-
 setInterval(displayDateTime, 1000);
 window.onload = displayDateTime;