Footer shows build hash, branch, and time

src/components/Footer/footer.tsx

@@ -5,7 +5,10 @@ import Image from "next/image";
 import { appName } from "@/components/Layout/layout";
 import icon from "../../../public/android-chrome-512x512.png";
 import { AppProps } from "@/components/WithAppProps";
-import { formatDateLong } from "@/scripts/Utils/DateAndTime/Format";
+import {
+  formatDateAndTime,
+  formatDateLong,
+} from "@/scripts/Utils/DateAndTime/Format";
 
 export const DEVELOPERS = ["UnsignedArduino"];
 export const CREATION_DATE = new Date("2023-04-15T02:00:20Z");
@@ -113,6 +116,25 @@ function Footer({ appProps }: { appProps: AppProps }): JSX.Element {
       owner of MakeCode Arcade. <br />
       Microsoft and MakeCode Arcade are trademarks of the Microsoft group of
       companies.
+      <br />
+      <br />
+      Build{" "}
+      <a
+        href={`https://github.com/UnsignedArduino/Awesome-Arcade/commit/${appProps.buildHash}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <code>{appProps.buildHash}</code>
+      </a>{" "}
+      (branch{" "}
+      <a
+        href={`https://github.com/UnsignedArduino/Awesome-Arcade/tree/${appProps.buildBranch}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <code>{appProps.buildBranch}</code>
+      </a>
+      ) on {formatDateAndTime(new Date(appProps.buildTime))}.
     </>
   );
 

src/components/TextCountFromDate/Static.tsx

@@ -0,0 +1,19 @@
+import { formatDuration } from "@/scripts/Utils/DateAndTime/Format";
+import React from "react";
+
+export function StaticLowPrecisionTextCountup({
+  date,
+}: {
+  date: Date;
+}): React.ReactNode {
+  const [show, setShow] = React.useState(false);
+  const timeSince = Date.now() - date.getTime();
+
+  React.useEffect(() => {
+    setShow(true);
+  }, []);
+
+  return (
+    <>{show ? (timeSince > 0 ? formatDuration(timeSince) : null) : null}</>
+  );
+}

src/pages/_environment.tsx

@@ -16,9 +16,23 @@ export function About({ envVars, appProps }: AboutProps): JSX.Element {
     <Layout title={pageName} currentPage={pageName} appProps={appProps}>
       <h1>Environment</h1>
       <p>
-        Build hash: <code>{appProps.buildHash}</code>
+        Build hash:{" "}
+        <a
+          href={`https://github.com/UnsignedArduino/Awesome-Arcade/commit/${appProps.buildHash}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <code>{appProps.buildHash}</code>
+        </a>
         <br />
-        Build branch: <code>{appProps.buildBranch}</code>
+        Build branch:{" "}
+        <a
+          href={`https://github.com/UnsignedArduino/Awesome-Arcade/tree/${appProps.buildBranch}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <code>{appProps.buildBranch}</code>
+        </a>
         <br />
         Build time: <code>{appProps.buildTime}</code> (
         {formatDateAndTimeAndSecond(new Date(appProps.buildTime))} -{" "}