Built in tools page

src/components/QuickLinks/QuickLinkCards.tsx

@@ -23,6 +23,11 @@ export default function QuickLinkCards({
                     objectFit="cover"
                   /> */}
                 <h5 className="card-title m-3 mb-0">{quick.name}</h5>
+                {quick.subtitle !== null ? (
+                  <h6 className="card-subtitle mx-3 mt-1 text-body-secondary">
+                    {quick.subtitle}
+                  </h6>
+                ) : null}
                 <div className="card-body">
                   <div className="card-text">
                     <p>{quick.description}</p>

src/components/QuickLinks/types.tsx

@@ -1,6 +1,9 @@
+import React from "react";
+
 export type QuickLink = {
-  name: string;
-  description: string;
+  name: string | React.ReactNode;
+  subtitle?: string | React.ReactNode | null;
+  description: string | React.ReactNode;
   link: string;
-  linkText: string;
+  linkText: string | React.ReactNode;
 };

src/pages/tools/built-in/index.tsx

@@ -0,0 +1,56 @@
+import getAppProps, { AppProps } from "@/components/WithAppProps";
+import { QuickLink } from "@/components/QuickLinks/types";
+import React from "react";
+import Layout from "@/components/Layout";
+import QuickLinkCards from "@/components/QuickLinks/QuickLinkCards";
+
+const pageName = "Built in tools";
+
+type BuiltInToolsProps = { appProps: AppProps };
+
+export function BuiltInTools({ appProps }: BuiltInToolsProps): JSX.Element {
+  const quickLinks: QuickLink[] = [
+    {
+      name: "MIDI to ArcadeMidi",
+      // subtitle: "By UnsignedArduino",
+      description:
+        "Converts your MIDI files to images compatible with the ArcadeMIDI extension!",
+      link: "/tools/built-in/midi-to-arcademidi",
+      linkText: "Convert your MIDI files",
+    },
+  ];
+
+  return (
+    <Layout
+      title={pageName}
+      currentPage={pageName}
+      appProps={appProps}
+      description="A list of Awesome Arcade's built in tools!"
+      keywords="Game development, Awesome, Modules, Libraries, Extensions, Tools, Curated, Arcade, Useful, Curated list, MakeCode, Awesome extensions, Useful extensions, MakeCode Arcade, MakeCode Arcade Extensions, Arcade Extensions, Awesome tools, Useful tools, MakeCode Arcade, MakeCode Arcade tools, Arcade tools, Built in tools, Built in, Awesome Arcade's Built in, Awesome Arcade's Built in tools"
+      breadCrumbs={[{ Tools: "/tools" }, { "Built in": "/tools/built-in" }]}
+    >
+      <h1>Welcome to Awesome Arcade{"'"}s built in tools!</h1>
+      <p>
+        This is a list of all of Awesome Arcade{"'"}s built in tools, which can
+        be used directly on the Awesome Arcade website!{" "}
+        <s>
+          It was definitely not because UnsignedArduino was too lazy to create a
+          new website for his new tools.
+        </s>
+      </p>
+      <QuickLinkCards quickLinks={quickLinks} />
+    </Layout>
+  );
+}
+
+export async function getStaticProps(): Promise<{
+  props: BuiltInToolsProps;
+}> {
+  return {
+    props: {
+      appProps: await getAppProps(),
+    },
+  };
+}
+
+export default BuiltInTools;

src/pages/tools.tsx → src/pages/tools/index.tsx

@@ -1,6 +1,6 @@
 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 Link from "next/link";
 import { promises as fs } from "fs";
 import path from "path";
@@ -11,7 +11,7 @@ import { AnalyticEvents } from "@/components/Analytics";
 import Tippy from "@tippyjs/react";
 import { useSession } from "next-auth/react";
 import { parseToolXML, Tool } from "@/scripts/Utils/ParseListXML";
-import { useFeatureIsOn } from "@growthbook/growthbook-react";
+import { useFeatureIsOn, useFeatureValue } from "@growthbook/growthbook-react";
 import { stringToBool } from "@/scripts/Utils/ParseListXML/helpers";
 
 const pageName = "Tools";
@@ -23,6 +23,11 @@ type ToolsProps = {
 
 export function Tools({ appProps, list }: ToolsProps): JSX.Element {
   const removeOldHome = useFeatureIsOn("remove-old-home");
+  const showEmbeddedTools = useFeatureIsOn("embedded-tools");
+  const embeddedToolsTitle = useFeatureValue(
+    "embedded-tools-title",
+    "Try out Awesome Arcade's built-in tools!",
+  );
 
   const { data: session } = useSession();
 
@@ -141,6 +146,15 @@ export function Tools({ appProps, list }: ToolsProps): JSX.Element {
         <Link href="/help/contributing/tools">guide</Link> on how to submit a
         tool to Awesome Arcade!
       </p>
+      {showEmbeddedTools ? (
+        <div className="alert alert-primary position-relative" role="alert">
+          <Link href="/tools/built-in" className="stretched-link">
+            {embeddedToolsTitle}
+          </Link>
+        </div>
+      ) : (
+        <></>
+      )}
       <div className="row g-3 align-items-center mb-2">
         <div className="col-auto">
           <label htmlFor="searchBar" className="col-form-label">
@@ -200,8 +214,8 @@ export function Tools({ appProps, list }: ToolsProps): JSX.Element {
       </div>
       <p>
         Looking for Awesome Arcade Extensions? They have been split up into the{" "}
-        <Link href="/">Extensions</Link> page! (Which you can also find in the
-        navigation bar!)
+        <Link href="/public">Extensions</Link> page! (Which you can also find in
+        the navigation bar!)
       </p>
     </Layout>
   );