Merge pull request #87 from UnsignedArduino/staging

Environment page update

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/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/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.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+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";
+
+interface AboutProps {
+  envVars: string[][];
+  appProps: AppProps;
+}
+
+export function About({ envVars, appProps }: AboutProps): JSX.Element {
+  return (
+    <Layout title={pageName} currentPage={pageName} appProps={appProps}>
+      <h1>Environment</h1>
+      <p>
+        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:{" "}
+        <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))} -{" "}
+        <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>
+          );
+        })}
+      </code>
+    </Layout>
+  );
+}
+
+export async function getStaticProps(): Promise<{ props: AboutProps }> {
+  const vercelEnvs = [
+    "NODE_ENV",
+    "VERCEL_ENV",
+    "VERCEL_URL",
+    "VERCEL_GIT_PROVIDER",
+    "VERCEL_GIT_REPO_SLUG",
+    "VERCEL_GIT_REPO_OWNER",
+    "VERCEL_GIT_REPO_ID",
+    "VERCEL_GIT_COMMIT_REF",
+    "VERCEL_GIT_COMMIT_SHA",
+    "VERCEL_GIT_COMMIT_MESSAGE",
+    "VERCEL_GIT_COMMIT_AUTHOR_LOGIN",
+    "VERCEL_GIT_COMMIT_AUTHOR_NAME",
+  ];
+
+  return {
+    props: {
+      envVars: vercelEnvs.map((envVar: string) => {
+        return [
+          envVar,
+          process.env[envVar] != undefined ? process.env[envVar] : "undefined",
+        ];
+      }) as string[][],
+      appProps: await getAppProps(),
+    },
+  };
+}
+
+export default About;

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(`{