Added a page load time.

src/components/BottomBar.js

@@ -1,9 +1,17 @@
+import PageLoadTime from "./PageLoadTime";
+
 const BottomBar = () => {
     return (
         <div className="fixed bottom-0 left-0 h-8 w-screen flex flex-row backdrop-brightness-50 text-secondary justify-center items-center">
+            <div className="fixed right-5">
+                <p className="text-sm">Powered by React.</p>
+            </div>
             <div className="fixed flex justify-center">
                 <p className="text-sm">&copy; LibreBun 2023-2025</p>
             </div>
+            <div className="fixed left-5">
+                <p className="text-sm">Page: <PageLoadTime className="font-bold"/></p>
+            </div>
         </div>
     );
 };

src/components/Home.js

@@ -31,7 +31,7 @@ function Home() {
               <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/forgejologo.svg'} alt='Memos' />
               <p className='self-center mx-2 PubP'>Forgejo</p>
             </a>
-            <a href='https://lemmy.librebun.com/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex opacity-20 LogoBoxesPub'>
+            <a href='https://lemmy.librebun.com/' target='_blank' rel='noopener noreferrer' className='backdrop-brightness-75 shadow-md rounded-md p-1 flex LogoBoxesPub'>
               <img className='Logos' draggable='false' src={process.env.PUBLIC_URL + '/lemmylogo.svg'} alt='Lemmy' />
               <p className='self-center mx-2 PubP'>Lemmy</p>
             </a>

src/components/PageLoadTime.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const PageLoadTime = ({ className }) => {
+  const [loadTime, setLoadTime] = useState(null);
+
+  useEffect(() => {
+    const onLoad = () => {
+      const timing = performance.timing;
+      const pageLoadTime = timing.loadEventEnd - timing.navigationStart;
+
+      if (pageLoadTime > 0) {
+        setLoadTime(pageLoadTime);
+      } else {
+        setLoadTime(performance.now());
+      }
+    };
+
+    if (document.readyState === "complete") {
+      onLoad();
+    } else {
+      window.addEventListener("load", onLoad);
+      return () => window.removeEventListener("load", onLoad);
+    }
+  }, []);
+
+  return (
+    <span className={className}>
+      {loadTime !== null ? `${loadTime.toFixed(0)} ms` : ""}
+    </span>
+  );
+};
+
+export default PageLoadTime;

src/components/Stream.js

@@ -7,7 +7,7 @@ const StreamPage = () => {
             <div className="flex flex-row items-center justify-center w-screen h-5/6 mt-8 text-xl text-secondary">    
                 <iframe
                     className="mt-5 overflow-hidden justify-left flex"
-                    src="https://cast.li-yo.ts.net/embed/video"
+                    src="https://cast.librebun.com/embed/video"
                     title="Owncast"
                     height="100%" width="60%"
                     referrerpolicy="origin"
@@ -15,11 +15,11 @@ const StreamPage = () => {
                 </iframe>
                 <iframe
                     className="ml-5 mt-5 overflow-scroll"
-                    src="https://cast.li-yo.ts.net/embed/chat/readwrite/"
+                    src="https://cast.librebun.com/embed/chat/readwrite/"
                     height="100%" width="30%">
                 </iframe>
             </div>
-            <a href="https://cast.li-yo.ts.net/" className="my-5">Join me on my actual Owncast site!</a>
+            <a href="https://cast.librebun.com/" className="my-5">Join me on my actual Owncast site!</a>
         </div>
     );
 }