Merge pull request #80 from UnsignedArduino/staging

Help guide for installing extensions, optimize tooltips

src/components/AwesomeArcadeList/extension.tsx

@@ -1,15 +1,13 @@
-import {
-  Extension,
-  ExtensionRef,
-  URLLink,
-} from "@/scripts/Utils/ParseOldExtensionsXML";
+import { Extension, ExtensionRef, URLLink } from "@/scripts/Utils/ParseListXML";
 import React from "react";
 import "tippy.js/dist/tippy.css";
 import { copyTextToClipboard } from "@/scripts/Utils/Clipboard";
 import Link from "next/link";
 import { smoothScrollHash } from "@/components/AwesomeArcadeList/linkableHeader";
 import { AnalyticEvents } from "@/components/Analytics";
 import { useRouter } from "next/router";
+import { TippyJSLibContext } from "@/pages/_app";
+import { Instance } from "tippy.js";
 
 export function AwesomeArcadeExtension({
   ext,
@@ -22,47 +20,23 @@ export function AwesomeArcadeExtension({
   showImportURL?: boolean | undefined;
   pad?: boolean | undefined;
 }): JSX.Element {
+  const tippyJSLib = React.useContext(TippyJSLibContext);
   const [showCardLink, setShowCardLink] = React.useState(false);
   const [tooltip, setTooltip] = React.useState("Click to copy");
-  const tippyRef = React.useRef<any>();
-  const tipRef = React.useRef<any | undefined>();
-  const urlRef = React.useRef<HTMLAnchorElement | null>(null);
+  const tippyRef = React.useRef<Instance | null>(null);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
 
   React.useEffect(() => {
-    import("tippy.js").then((tippy) => {
-      tippyRef.current = tippy;
-      if (
-        urlRef.current != undefined &&
-        tippyRef.current != undefined &&
-        tipRef.current == undefined
-      ) {
-        tipRef.current = tippyRef.current.default(urlRef.current, {
+    if (tippyJSLib !== null && buttonRef.current !== null) {
+      if (tippyRef.current !== null) {
+        tippyRef.current.setContent(tooltip);
+      } else {
+        tippyRef.current = tippyJSLib.default(buttonRef.current, {
           content: tooltip,
-          hideOnClick: false,
-          onHidden: () => {
-            setTooltip("Click to copy");
-          },
-        });
-      }
-    });
-  });
-
-  React.useEffect(() => {
-    if (tipRef.current != undefined) {
-      const t = tipRef.current;
-      t.setContent(tooltip);
-    } else {
-      if (urlRef.current != undefined && tippyRef.current != undefined) {
-        tipRef.current = tippyRef.current.default(urlRef.current, {
-          content: tooltip,
-          hideOnClick: false,
-          onHidden: () => {
-            setTooltip("Click to copy");
-          },
         });
       }
     }
-  }, [tooltip]);
+  }, [tippyJSLib, tooltip]);
 
   return (
     <div
@@ -112,26 +86,28 @@ export function AwesomeArcadeExtension({
                   type="button"
                   className="btn text-start"
                   style={{ wordBreak: "break-all" }}
+                  ref={buttonRef}
+                  onMouseEnter={() => {
+                    setTooltip("Click to copy");
+                  }}
                   onClick={() => {
                     if (copyTextToClipboard(ext.url)) {
                       setTooltip("Copied!");
                     } else {
                       setTooltip(
-                        "Failed to copy - did you give us clipboard permission?"
+                        "Failed to copy - did you give us clipboard permission?",
                       );
                     }
-                    tipRef.current.setContent(tooltip);
+                    tippyRef.current?.show();
                     window.document.documentElement.dispatchEvent(
                       new CustomEvent<string>("clickrepo", {
                         detail: ext.repo,
-                      })
+                      }),
                     );
                     AnalyticEvents.sendAwesomeClick(ext.repo);
                   }}
                 >
-                  <a className="stretched-link" ref={urlRef}>
-                    {ext.url}
-                  </a>
+                  <a className="stretched-link">{ext.url}</a>
                 </button>
               </div>
             </blockquote>

src/components/AwesomeArcadeList/tool.tsx

@@ -1,9 +1,10 @@
-import { Tool, ToolRef, URLLink } from "@/scripts/Utils/ParseOldExtensionsXML";
+import { Tool, ToolRef, URLLink } from "@/scripts/Utils/ParseListXML";
 import React from "react";
 import Link from "next/link";
 import { smoothScrollHash } from "@/components/AwesomeArcadeList/linkableHeader";
 import { AnalyticEvents } from "@/components/Analytics";
 import { useRouter } from "next/router";
+import Tippy from "@tippyjs/react";
 
 export function AwesomeArcadeTool({
   tool,
@@ -57,18 +58,20 @@ export function AwesomeArcadeTool({
         <>
           Access this tool at:
           <blockquote className="border-start border-secondary border-2 ps-3 mt-1 mb-2">
-            <a
-              className="text-start"
-              href={tool.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{ wordBreak: "break-all" }}
-              onClick={() => {
-                AnalyticEvents.sendAwesomeClick(tool.repo);
-              }}
-            >
-              {tool.url}
-            </a>
+            <Tippy content="Click to open in a new tab!">
+              <a
+                className="text-start"
+                href={tool.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ wordBreak: "break-all" }}
+                onClick={() => {
+                  AnalyticEvents.sendAwesomeClick(tool.repo);
+                }}
+              >
+                {tool.url}
+              </a>
+            </Tippy>
           </blockquote>
         </>
         <div

src/components/Figure/ClickableFigure.tsx

@@ -0,0 +1,85 @@
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+import Image from "next/image";
+import React from "react";
+import { BootstrapLibContext } from "@/pages/_app";
+import Tippy from "@tippyjs/react";
+
+export default function ClickableFigure({
+  id,
+  src,
+  alt,
+  caption,
+}: {
+  id: string;
+  src: string | StaticImport;
+  alt: string;
+  caption: string | React.ReactNode;
+}) {
+  const bootstrapLib = React.useContext(BootstrapLibContext);
+
+  return (
+    <div>
+      <figure className="figure">
+        <Tippy content="Click to expand">
+          <Image
+            src={src}
+            className="figure-img img-fluid rounded"
+            style={{ width: "50%", height: "50%" }}
+            alt={alt}
+            onClick={() => {
+              if (bootstrapLib !== null) {
+                const modal = bootstrapLib.Modal.getOrCreateInstance(
+                  `#${id}Modal`,
+                );
+                modal.show();
+              }
+            }}
+          />
+        </Tippy>
+        <figcaption className="figure-caption">{caption}</figcaption>
+      </figure>
+      <div
+        className="modal fade"
+        id={`${id}Modal`}
+        tabIndex={-1}
+        aria-labelledby={`${id}ModalLabel`}
+        aria-hidden="true"
+      >
+        <div className="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h1 className="modal-title fs-5" id={`${id}ModalLabel`}>
+                Enlarged image
+              </h1>
+              <button
+                type="button"
+                className="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div className="modal-body text-center">
+              <figure className="figure">
+                <Image
+                  src={src}
+                  className="figure-img img-fluid rounded"
+                  alt={alt}
+                />
+                <figcaption className="figure-caption">{caption}</figcaption>
+              </figure>
+            </div>
+            <div className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Navbar/navbar.tsx

@@ -131,23 +131,26 @@ function Navbar({
           </div>
         </div>
         {(() => {
-          const elements = [];
+          const elements: { key: string; html: React.ReactNode }[] = [];
           if (extraNavbarHTML) {
-            elements.push(extraNavbarHTML);
+            elements.push({ key: "extraNavbarHTML", html: extraNavbarHTML });
           }
           if (!dontShowSignIn) {
-            elements.push(<Profile />);
+            elements.push({ key: "Profile", html: <Profile /> });
           }
-          elements.push(<NavbarDropdownThemePicker alignEnd />);
+          elements.push({
+            key: "NavbarDropdownThemePicker",
+            html: <NavbarDropdownThemePicker alignEnd />,
+          });
 
-          return elements.map((ele: JSX.Element, index: number) => {
+          return elements.map((ele, index: number) => {
             return (
-              <>
-                <div className="d-flex d-none d-md-inline me-2">{ele}</div>
+              <React.Fragment key={ele.key}>
+                <div className="d-flex d-none d-md-inline me-2">{ele.html}</div>
                 {index < elements.length - 1 ? (
                   <div className="d-flex d-none d-md-inline vr me-2" />
                 ) : undefined}
-              </>
+              </React.Fragment>
             );
           });
         })()}

src/pages/_app.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "katex/dist/katex.min.css";
+import "tippy.js/dist/tippy.css";
 import Adsense from "../components/Adsense";
 import Analytics from "../components/Analytics";
 import ErrorBoundary from "../components/ErrorBoundary";
@@ -12,12 +13,42 @@ import { useRouter } from "next/router";
 import { GrowthBookProvider } from "@growthbook/growthbook-react";
 import growthbook from "@/components/FeatureFlags";
 
+export type BootstrapLibContextType = typeof import("bootstrap") | null;
+export const BootstrapLibContext =
+  React.createContext<BootstrapLibContextType>(null);
+
+export type TippyJSLibContextType = typeof import("tippy.js") | null;
+export const TippyJSLibContext =
+  React.createContext<TippyJSLibContextType>(null);
+
 export default function AwesomeArcadeExtensions({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps): JSX.Element {
+  const [bootstrapLib, setBootstrapLib] =
+    React.useState<BootstrapLibContextType>(null);
+  const [tippyJSLib, setTippyJSLib] =
+    React.useState<TippyJSLibContextType>(null);
+
   React.useEffect(() => {
-    import("bootstrap");
+    import("bootstrap")
+      .then((lib) => {
+        setBootstrapLib(lib);
+        console.log("Loaded Bootstrap");
+      })
+      .catch((err) => {
+        console.error("Failed to load Bootstrap!");
+        console.error(err);
+      });
+    import("tippy.js")
+      .then((lib) => {
+        setTippyJSLib(lib);
+        console.log("Loaded Tippy.js");
+      })
+      .catch((err) => {
+        console.error("Failed to load Tippy.js!");
+        console.error(err);
+      });
   }, []);
 
   const router = useRouter();
@@ -34,14 +65,18 @@ export default function AwesomeArcadeExtensions({
 
   return (
     <ErrorBoundary>
-      <NextNProgress color="#FFF603" options={{ showSpinner: false }} />
-      <Analytics />
-      <Adsense />
-      <GrowthBookProvider growthbook={growthbook}>
-        <SessionProvider session={session}>
-          <Component {...pageProps} />
-        </SessionProvider>
-      </GrowthBookProvider>
+      <BootstrapLibContext.Provider value={bootstrapLib}>
+        <TippyJSLibContext.Provider value={tippyJSLib}>
+          <NextNProgress color="#FFF603" options={{ showSpinner: false }} />
+          <Analytics />
+          <Adsense />
+          <GrowthBookProvider growthbook={growthbook}>
+            <SessionProvider session={session}>
+              <Component {...pageProps} />
+            </SessionProvider>
+          </GrowthBookProvider>
+        </TippyJSLibContext.Provider>
+      </BootstrapLibContext.Provider>
     </ErrorBoundary>
   );
 }

src/pages/extensions.tsx

@@ -142,11 +142,9 @@ export function Extensions({ appProps, list }: ExtensionsProps): JSX.Element {
         by Microsoft, the owner of MakeCode Arcade.
       </p>
       <p>
-        To use these extensions, you will need to import them. First go to the
-        toolbox, click on <code>Extensions</code>, and you will see a text box
-        that says <code>Search or enter project URL...</code> This is where you
-        will paste in the URL to the extension. The URL will be posted along
-        with the extensions below.
+        Need help with adding extensions? Check out our{" "}
+        <Link href="/help/adding-extensions">guide</Link> on how to add
+        extensions to MakeCode Arcade!
       </p>
       {removeOldHome ? (
         <></>