Boast extension and tool counts

next.config.js

@@ -1,6 +1,17 @@
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack: (config) => {
+    config.resolve = {
+      ...config.resolve,
+      fallback: {
+        fs: false,
+        path: false,
+      },
+    };
+
+    return config;
+  },
 };
 
 module.exports = nextConfig;

src/components/Footer/footer.tsx

@@ -4,10 +4,13 @@ import Link from "next/link";
 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";
 
 export const DEVELOPERS = ["UnsignedArduino"];
+export const CREATION_DATE = new Date("2023-04-15T02:00:20Z");
 
-function Footer(): JSX.Element {
+function Footer({ appProps }: { appProps: AppProps }): JSX.Element {
   type FooterThing = {
     title: string;
     link: string;
@@ -69,6 +72,9 @@ function Footer(): JSX.Element {
       </Link>
       © 2024 UnsignedArduino. All rights reserved.
       <br />
+      Keeping track of {appProps.extensionsListed} extensions and{" "}
+      {appProps.toolsListed} tools since {formatDateLong(CREATION_DATE)}.
+      <br />
       {appName} is developed and maintained by{" "}
       {DEVELOPERS.map((dev, index) => {
         return (
@@ -83,8 +89,8 @@ function Footer(): JSX.Element {
             {index < DEVELOPERS.length - 2
               ? ", "
               : index < DEVELOPERS.length - 1
-              ? " and "
-              : ""}
+                ? " and "
+                : ""}
           </span>
         );
       })}{" "}

src/components/Layout/layout.tsx

@@ -208,7 +208,11 @@ LayoutProps): JSX.Element {
           </main>
         </ErrorBoundary>
 
-        {showFooter == undefined || showFooter ? <Footer /> : <></>}
+        {showFooter == undefined || showFooter ? (
+          <Footer appProps={appProps} />
+        ) : (
+          <></>
+        )}
 
         <Notifications />
       </ThemeProxy>

src/components/WithAppProps/appProps.ts

@@ -1,11 +1,15 @@
+import { parseExtensionXML, parseToolXML } from "@/scripts/Utils/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";
+      ? (process.env.NODE_ENV as Environment)
+      : "production";
 }
 
 export function getBranch(): "main" | "staging" {
@@ -14,11 +18,29 @@ export function getBranch(): "main" | "staging" {
 
 export interface AppProps {
   environment: Environment;
+  extensionsListed: number;
+  toolsListed: number;
 }
 
 export async function getAppProps(): Promise<AppProps> {
   return {
     environment: getEnvironment(),
+    extensionsListed: (
+      await parseExtensionXML(
+        (
+          await fs.readFile(
+            path.resolve(process.cwd(), "src", "extensions.xml"),
+          )
+        ).toString(),
+      )
+    ).length,
+    toolsListed: (
+      await parseToolXML(
+        (
+          await fs.readFile(path.resolve(process.cwd(), "src", "tools.xml"))
+        ).toString(),
+      )
+    ).length,
   };
 }
 

src/pages/extensions.tsx

@@ -131,8 +131,9 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
         {session?.user?.name != null ? `, ${session.user.name}` : ""}!
       </h1>
       <p>
-        On this page, you can find my list of MakeCode Arcade extensions that I
-        find super useful (or just plain cool) in my projects.
+        On this page, you can find my list of{" "}
+        {Math.floor(appProps.extensionsListed / 10) * 10}+ MakeCode Arcade
+        extensions that I find super useful (or just plain cool) in my projects.
       </p>
       <p>
         Please note that this website is not developed, affiliated, or endorsed

src/pages/index.tsx

@@ -21,15 +21,13 @@ export function Home({ appProps }: HomeProps): JSX.Element {
   const quickLinks: QuickLink[] = [
     {
       name: "Extensions",
-      description:
-        "A list of awesome MakeCode Arcade extensions to further your games!",
+      description: `A list of ${Math.floor(appProps.extensionsListed / 10) * 10}+ awesome MakeCode Arcade extensions to further your games!`,
       link: "/extensions",
       linkText: "View awesome extensions",
     },
     {
       name: "Tools",
-      description:
-        "A list of awesome MakeCode Arcade tools to help you develop great games!",
+      description: `A list of ${Math.floor(appProps.toolsListed / 10) * 10}+ awesome MakeCode Arcade tools to help you develop great games!`,
       link: "/tools",
       linkText: "View awesome tools",
     },

src/pages/tools.tsx

@@ -116,8 +116,9 @@ export function Tools({ appProps, list }: ToolsProps): JSX.Element {
         {session?.user?.name != null ? `, ${session.user.name}` : ""}!
       </h1>
       <p>
-        This is a list of MakeCode Arcade tools that I find super useful (or
-        just plain cool) to use in my projects.
+        This is a list of {Math.floor(appProps.toolsListed / 10) * 10}+ MakeCode
+        Arcade tools that I find super useful (or just plain cool) to use in my
+        projects.
       </p>
       <p>
         Please note that this website is not developed, affiliated, or endorsed

src/scripts/Utils/DateAndTime/Format.ts

@@ -0,0 +1,53 @@
+import { getUserTimezoneOffsetInMs } from "@/scripts/Utils/DateAndTime/Helpers";
+
+export function formatDateLong(date: Date) {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale;
+  return date.toLocaleDateString(locale, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatTime(date: Date) {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale;
+  return date.toLocaleTimeString(locale, {
+    hour: "numeric",
+    minute: "numeric",
+  });
+}
+
+export function formatDateAndTime(date: Date) {
+  const locale = new Intl.NumberFormat().resolvedOptions().locale;
+  return date.toLocaleTimeString(locale, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  });
+}
+
+export function formatDuration(ms: number) {
+  // https://www.30secondsofcode.org/js/s/number-formatting/
+  if (ms < 0) ms = -ms;
+  const time = {
+    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,
+  };
+  return Object.entries(time)
+    .filter((val) => val[1] !== 0)
+    .map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)
+    .join(", ");
+}
+
+export function formatDateForInput(date: Date) {
+  const dateWithOffset = new Date(date.getTime() - getUserTimezoneOffsetInMs());
+  const firstHalf = dateWithOffset.toISOString().split(".")[0];
+  const pieces = firstHalf.split(":");
+  pieces.pop();
+  return pieces.join(":");
+}

src/scripts/Utils/DateAndTime/Helpers.ts

@@ -0,0 +1,32 @@
+/**
+ * Parse an ISO date string to a Date object or return the Date object if it is already a Date object.
+ *
+ * @param date The date to parse.
+ */
+export function dp(date: Date | string) {
+  if (typeof date === "string") {
+    date = new Date(date);
+  }
+  return date;
+}
+
+export function isBeforeNow(date: Date) {
+  return date.getTime() < Date.now();
+}
+
+export function isAfterNow(date: Date) {
+  return date.getTime() > Date.now();
+}
+
+export function nowBetween(start: Date, end: Date) {
+  const now = new Date();
+  return now >= start && now <= end;
+}
+
+export function getUserTimezoneOffsetInHrs() {
+  return new Date().getTimezoneOffset() / 60;
+}
+
+export function getUserTimezoneOffsetInMs() {
+  return new Date().getTimezoneOffset() * 60 * 1000;
+}