Merge pull request #82 from UnsignedArduino/staging

Hide JS only extensions and non-browser-based tools by default, 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/AwesomeArcadeList/extension.tsx

@@ -56,6 +56,14 @@ export function AwesomeArcadeExtension({
           }}
         >
           {ext.title}
+          {ext.javascriptOnly ? (
+            <>
+              {" "}
+              <span className="badge text-bg-warning me-1">
+                JavaScript only
+              </span>
+            </>
+          ) : undefined}
           {showCardLink ? (
             <Link
               className="ms-1"
@@ -78,7 +86,13 @@ export function AwesomeArcadeExtension({
         </h6>
         {showImportURL == undefined || showImportURL ? (
           <>
-            Import this extension with the URL:
+            Import this{" "}
+            {ext.javascriptOnly ? (
+              <>
+                <b>JavaScript only</b>{" "}
+              </>
+            ) : null}
+            extension with the URL:
             <blockquote className="border-start border-secondary border-2 mt-1 mb-2">
               {/* This transform is applied so the stretched-link only applies up to this div */}
               <div style={{ transform: "rotate(0)" }}>

src/components/AwesomeArcadeList/tool.tsx

@@ -35,6 +35,12 @@ export function AwesomeArcadeTool({
           }}
         >
           {tool.title}
+          {tool.notAWebsite ? (
+            <>
+              {" "}
+              <span className="badge text-bg-warning me-1">Not a website</span>
+            </>
+          ) : undefined}
           {showCardLink ? (
             <Link
               className="ms-1"
@@ -56,7 +62,13 @@ export function AwesomeArcadeTool({
           </a>
         </h6>
         <>
-          Access this tool at:
+          Access this{" "}
+          {tool.notAWebsite ? (
+            <>
+              <b>not-browser based</b>{" "}
+            </>
+          ) : null}
+          tool at:
           <blockquote className="border-start border-secondary border-2 ps-3 mt-1 mb-2">
             <Tippy content="Click to open in a new tab!">
               <a

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

@@ -8,10 +8,11 @@ import { smoothScrollToID } from "@/components/OldAwesomeArcadeExtensionList/lin
 import { AwesomeArcadeExtensionsList } from "@/components/AwesomeArcadeList";
 import { debounce } from "@/scripts/Utils/Timers";
 import { AnalyticEvents } from "@/components/Analytics";
-import Tippy from "@tippyjs/react";
 import { useSession } from "next-auth/react";
 import { Extension, parseExtensionXML } from "@/scripts/Utils/ParseListXML";
 import { useFeatureIsOn } from "@growthbook/growthbook-react";
+import Tippy from "@tippyjs/react";
+import { stringToBool } from "@/scripts/Utils/ParseListXML/helpers";
 
 const pageName = "Extensions";
 
@@ -26,18 +27,26 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
   const { data: session } = useSession();
 
   const [search, setSearch] = React.useState("");
+  const [showJSOnlyExts, setShowJSOnlyExts] = React.useState(false);
   const [filteredList, setFilteredList] = React.useState(list);
   const [resultCount, setResultCount] = React.useState<number | undefined>(
     undefined,
   );
 
   const searchParam = "q";
+  const showJSOnlyParam = "showJSOnly";
 
   React.useEffect(() => {
     const q = new URLSearchParams(window.location.search).get(searchParam);
     if (q !== null) {
       setSearch(q);
     }
+    const showJSOnly = new URLSearchParams(window.location.search).get(
+      showJSOnlyParam,
+    );
+    if (showJSOnly !== null) {
+      setShowJSOnlyExts(stringToBool(showJSOnly));
+    }
     if (window.location.hash.length > 0) {
       smoothScrollToID(window.location.hash.replace("#", ""));
     }
@@ -50,8 +59,13 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
     } else {
       url.searchParams.set(searchParam, search);
     }
+    if (showJSOnlyExts) {
+      url.searchParams.set(showJSOnlyParam, "true");
+    } else {
+      url.searchParams.delete(showJSOnlyParam);
+    }
     window.history.replaceState({}, "", url.toString());
-  }, [search]);
+  }, [search, showJSOnlyExts]);
 
   // React.useEffect(() => {
   //   document.addEventListener("keydown", (e) => {
@@ -69,7 +83,7 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
   // }, []);
 
   React.useEffect(() => {
-    if (search.length > 0) {
+    if (search.length > 0 || showJSOnlyExts) {
       const filtered = structuredClone(list);
       let extCount = 0;
       const group = filtered;
@@ -83,8 +97,10 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
           !(
             normalizeString(ext.repo).includes(normalizedSearch) ||
             normalizeString(ext.url).includes(normalizedSearch) ||
-            normalizeString(ext.description).includes(normalizedSearch)
-          )
+            normalizeString(ext.description).includes(normalizedSearch) ||
+            normalizeString(ext.author).includes(normalizedSearch)
+          ) ||
+          (!showJSOnlyExts && ext.javascriptOnly)
         ) {
           group.splice(i, 1);
         }
@@ -93,10 +109,14 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
       setFilteredList(filtered);
       setResultCount(extCount);
     } else {
-      setFilteredList(list);
+      setFilteredList(
+        list.filter((ext) => {
+          return !ext.javascriptOnly;
+        }),
+      );
       setResultCount(undefined);
     }
-  }, [search, list]);
+  }, [search, showJSOnlyExts, list]);
 
   return (
     <Layout
@@ -105,37 +125,15 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
       appProps={appProps}
       description="This is a list of MakeCode Arcade extensions that I find super useful (or just plain cool) in my projects."
       keywords="Game development, Awesome, Modules, Libraries, Extensions, Curated, Arcade, Useful, Curated list, MakeCode, Awesome extensions, Useful extensions, MakeCode Arcade, MakeCode Arcade Extensions, Arcade Extensions"
-      extraNavbarHTML={
-        <Tippy content="Search extensions by author, name, description, or URL!">
-          <input
-            type="text"
-            className="form-control"
-            placeholder="Search extensions by author, name, description, or URL!"
-            defaultValue={search}
-            id="searchBar"
-            onChange={(event) => {
-              const v = event.target.value;
-              setSearch(v);
-              debounce(
-                "extensionSearchChange",
-                () => {
-                  AnalyticEvents.sendSearch(v);
-                },
-                1000,
-              );
-            }}
-            aria-label="Search query"
-          />
-        </Tippy>
-      }
     >
       <h1>
         Welcome to Awesome Arcade Extensions
         {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
@@ -154,12 +152,60 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
           note that this page will be removed soon.)
         </p>
       )}
-
       <p>
         Want to suggest a new extension or modification? Check out our{" "}
         <Link href="/help/contributing/extensions">guide</Link> on how to submit
         an extension to Awesome Arcade!
       </p>
+      <div className="row g-3 align-items-center mb-2">
+        <div className="col-auto">
+          <label htmlFor="searchBar" className="col-form-label">
+            Search:
+          </label>
+        </div>
+        <div className="col-auto">
+          <Tippy content="Search extensions by author, name, description, or URL!">
+            <input
+              id="searchBar"
+              type="text"
+              className="form-control"
+              placeholder="Search extensions by author, name, description, or URL!"
+              defaultValue={search}
+              onChange={(event) => {
+                const v = event.target.value;
+                setSearch(v);
+                debounce(
+                  "extensionSearchChange",
+                  () => {
+                    AnalyticEvents.sendSearch(v);
+                  },
+                  1000,
+                );
+              }}
+              aria-label="Search query"
+            />
+          </Tippy>
+        </div>
+        <div className="col-auto">
+          <div className="form-check">
+            <input
+              className="form-check-input"
+              type="checkbox"
+              defaultChecked={showJSOnlyExts}
+              onChange={(e) => {
+                setShowJSOnlyExts(e.target.checked);
+              }}
+              id="showJSOnlyExtsCheckInput"
+            />
+            <label
+              className="form-check-label"
+              htmlFor="showJSOnlyExtsCheckInput"
+            >
+              Show JavaScript-only extensions
+            </label>
+          </div>
+        </div>
+      </div>
       <div>
         {resultCount != undefined ? (
           <p>

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",
     },