Environment page updated

src/components/Adsense/adsense.tsx

@@ -1,6 +1,6 @@
 import { GoogleAdSense } from "nextjs-google-adsense";
 import React from "react";
-import { getEnvironment } from "../WithAppProps";
+import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export function Adsense(): JSX.Element {
   React.useEffect(() => {

src/components/Analytics/analytics.tsx

@@ -1,7 +1,7 @@
 import type { NextWebVitalsMetric } from "next/app";
 import { event, GoogleAnalytics } from "nextjs-google-analytics";
 import React from "react";
-import { getEnvironment } from "@/components/WithAppProps";
+import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export function getAdStorageConsent(): string {
   return window.localStorage.getItem("adStorageConsent") || "denied";

src/components/FeatureFlags/featureFlags.ts

@@ -1,6 +1,6 @@
 import { GrowthBook } from "@growthbook/growthbook-react";
-import { getEnvironment } from "@/components/WithAppProps";
 import { AnalyticEvents } from "@/components/Analytics";
+import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export const growthbook = new GrowthBook({
   apiHost: process.env.NEXT_PUBLIC_GROWTHBOOK_API_HOST,

src/components/TextCountFromDate/index.tsx

@@ -0,0 +1,67 @@
+import { formatDuration } from "@/scripts/Utils/DateAndTime/Format";
+import React from "react";
+
+export function TextCountdown({
+  date,
+  updatePeriod,
+  onEnd,
+}: {
+  date: Date;
+  updatePeriod?: number;
+  onEnd?: () => void;
+}): React.ReactNode {
+  const [timeLeft, setTimeLeft] = React.useState<number>(
+    date.getTime() - Date.now(),
+  );
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeLeft(date.getTime() - Date.now());
+      if (timeLeft <= 0) {
+        clearInterval(interval);
+        if (onEnd) {
+          onEnd();
+        }
+      }
+    }, updatePeriod ?? 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [date, onEnd, timeLeft, updatePeriod]);
+
+  return <>{timeLeft > 0 ? formatDuration(timeLeft) : null}</>;
+}
+
+export function TextCountup({
+  date,
+  updatePeriod,
+  serverRender = true,
+}: {
+  date: Date;
+  updatePeriod?: number;
+  serverRender?: boolean;
+}): React.ReactNode {
+  const [show, setShow] = React.useState(serverRender);
+  const [timeSince, setTimeSince] = React.useState<number>(
+    Date.now() - date.getTime(),
+  );
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeSince(Date.now() - date.getTime());
+    }, updatePeriod ?? 100);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [date, updatePeriod]);
+
+  React.useEffect(() => {
+    setShow(true);
+  }, []);
+
+  return (
+    <>{show ? (timeSince > 0 ? formatDuration(timeSince) : null) : null}</>
+  );
+}

src/components/WithAppProps/appProps.ts

@@ -1,44 +1,30 @@
-import { parseExtensionXML, parseToolXML } from "../../scripts/ParseListXML";
+import { parseExtensionXML, parseToolXML } from "@/scripts/ParseListXML";
 import { promises as fs } from "fs";
 import path from "path";
-
-type Environment = "development" | "preview" | "production";
-
-export function getEnvironment(): Environment {
-  return process.env.VERCEL_ENV != undefined
-    ? (process.env.VERCEL_ENV as Environment)
-    : process.env.NODE_ENV != undefined
-      ? (process.env.NODE_ENV as Environment)
-      : "production";
-}
-
-export function getBaseURL(): string {
-  switch (getEnvironment()) {
-    case "production": {
-      return "https://awesome-arcade.vercel.app";
-    }
-    case "preview": {
-      return "https://awesome-arcade-beta.vercel.app";
-    }
-    case "development": {
-      return "http://localhost:3000";
-    }
-  }
-}
-
-export function getBranch(): "main" | "staging" {
-  return getEnvironment() === "production" ? "main" : "staging";
-}
+import { Environment, getEnvironment } from "@/scripts/Utils/Environment";
+import { execSync } from "node:child_process";
 
 export interface AppProps {
   environment: Environment;
+  buildHash: string;
+  buildBranch: string;
+  buildTime: string;
   extensionsListed: number;
   toolsListed: number;
 }
 
 export async function getAppProps(): Promise<AppProps> {
   return {
     environment: getEnvironment(),
+    buildHash:
+      process.env.VERCEL_GIT_COMMIT_SHA != undefined
+        ? process.env.VERCEL_GIT_COMMIT_SHA
+        : execSync("git rev-parse HEAD").toString().trim(),
+    buildBranch:
+      process.env.VERCEL_GIT_COMMIT_REF != undefined
+        ? process.env.VERCEL_GIT_COMMIT_REF
+        : execSync("git rev-parse --abbrev-ref HEAD").toString().trim(),
+    buildTime: new Date().toISOString(),
     extensionsListed: (
       await parseExtensionXML(
         (

src/components/WithAppProps/index.ts

@@ -1,2 +1,2 @@
-export { default, getEnvironment, getBranch } from "./appProps";
+export { default } from "./appProps";
 export type { AppProps } from "./appProps";

src/pages/_environment/environment.tsx → src/pages/_environment.tsx

@@ -1,28 +1,41 @@
 import React from "react";
-import Layout from "../../components/Layout";
-import getAppProps, { AppProps } from "../../components/WithAppProps";
+import Layout from "../components/Layout";
+import getAppProps, { AppProps } from "../components/WithAppProps";
+import { formatDateAndTimeAndSecond } from "@/scripts/Utils/DateAndTime/Format";
+import { TextCountup } from "@/components/TextCountFromDate";
 
-const pageName = "Environment build variables";
+const pageName = "Environment";
 
 interface AboutProps {
-  vercelVars: string[][];
+  envVars: string[][];
   appProps: AppProps;
 }
 
-export function About({ vercelVars, appProps }: AboutProps): JSX.Element {
+export function About({ envVars, appProps }: AboutProps): JSX.Element {
   return (
     <Layout title={pageName} currentPage={pageName} appProps={appProps}>
-      <h1>Environment build variables</h1>
-      <pre>
-        {vercelVars.map((value: string[]) => {
+      <h1>Environment</h1>
+      <p>
+        Build hash: <code>{appProps.buildHash}</code>
+        <br />
+        Build branch: <code>{appProps.buildBranch}</code>
+        <br />
+        Build time: <code>{appProps.buildTime}</code> (
+        {formatDateAndTimeAndSecond(new Date(appProps.buildTime))} -{" "}
+        <TextCountup date={new Date(appProps.buildTime)} serverRender={false} />{" "}
+        ago)
+      </p>
+      <h2>Build variables</h2>
+      <code>
+        {envVars.map((value: string[]) => {
           return (
             <React.Fragment key={value[0]}>
               {value[0]}: {value[1]}
               <br />
             </React.Fragment>
           );
         })}
-      </pre>
+      </code>
     </Layout>
   );
 }
@@ -45,7 +58,7 @@ export async function getStaticProps(): Promise<{ props: AboutProps }> {
 
   return {
     props: {
-      vercelVars: vercelEnvs.map((envVar: string) => {
+      envVars: vercelEnvs.map((envVar: string) => {
         return [
           envVar,
           process.env[envVar] != undefined ? process.env[envVar] : "undefined",

src/scripts/Database/database.ts

@@ -1,9 +1,9 @@
 import { Pool, QueryConfig, QueryResult } from "pg";
-import { getEnvironment } from "@/components/WithAppProps";
+import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export default function queryDb(
   queryTextOrConfig: string | QueryConfig<any[]>,
-  values?: any[] | undefined
+  values?: any[] | undefined,
 ): Promise<QueryResult<any>> {
   const pool = new Pool({
     host: process.env.POSTGRES_HOST,

src/scripts/RSS/index.ts

@@ -1,6 +1,6 @@
 import { Feed } from "feed";
-import { getBaseURL, getEnvironment } from "@/components/WithAppProps/appProps";
 import { BlogPostPreview } from "@/components/Blog/Post/Preview";
+import { getBaseURL, getEnvironment } from "@/scripts/Utils/Environment";
 
 export default async function generateRSSFeed(
   posts: BlogPostPreview[],

src/scripts/SiteWebmanifest/manifest.ts

@@ -1,4 +1,4 @@
-import { getEnvironment } from "../../components/WithAppProps";
+import { getEnvironment } from "@/scripts/Utils/Environment";
 
 export default async function generateSiteWebmanifest(): Promise<string> {
   const json = JSON.parse(`{

src/scripts/Utils/DateAndTime/Format.ts

@@ -28,16 +28,30 @@ export function formatDateAndTime(date: Date) {
   });
 }
 
-export function formatDuration(ms: number) {
+export function formatDateAndTimeAndSecond(date: Date) {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale;
+  return date.toLocaleTimeString(locale, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
+}
+
+export function formatDuration(ms: number, showMilliseconds = false) {
   // https://www.30secondsofcode.org/js/s/number-formatting/
   if (ms < 0) ms = -ms;
-  const time = {
+  let time: { [unit: string]: number } = {
     day: Math.floor(ms / 86_400_000),
     hour: Math.floor(ms / 3_600_000) % 24,
     minute: Math.floor(ms / 60_000) % 60,
     second: Math.floor(ms / 1_000) % 60,
-    millisecond: Math.floor(ms) % 1_000,
   };
+  if (showMilliseconds) {
+    time.millisecond = Math.floor(ms) % 1_000;
+  }
   return Object.entries(time)
     .filter((val) => val[1] !== 0)
     .map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)

src/scripts/Utils/Environment/index.tsx

@@ -0,0 +1,23 @@
+export type Environment = "development" | "preview" | "production";
+
+export function getEnvironment(): Environment {
+  return process.env.VERCEL_ENV != undefined
+    ? (process.env.VERCEL_ENV as Environment)
+    : process.env.NODE_ENV != undefined
+      ? (process.env.NODE_ENV as Environment)
+      : "production";
+}
+
+export function getBaseURL(): string {
+  switch (getEnvironment()) {
+    case "production": {
+      return "https://awesome-arcade.vercel.app";
+    }
+    case "preview": {
+      return "https://awesome-arcade-beta.vercel.app";
+    }
+    case "development": {
+      return "http://localhost:3000";
+    }
+  }
+}