Highlight selected extension or tool from hash

src/components/AwesomeArcadeList/extension.tsx

@@ -9,13 +9,16 @@ 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";
 
 export function AwesomeArcadeExtension({
   ext,
+  highlight,
   showImportURL,
   pad,
 }: {
   ext: Extension;
+  highlight?: boolean | undefined;
   showImportURL?: boolean | undefined;
   pad?: boolean | undefined;
 }): JSX.Element {
@@ -62,7 +65,12 @@ export function AwesomeArcadeExtension({
   }, [tooltip]);
 
   return (
-    <div className={`card ${pad ? "mb-2" : ""} h-100`} id={ext.repo}>
+    <div
+      className={`card ${pad ? "mb-2" : ""} ${
+        highlight ? "border-primary border-3" : ""
+      } h-100`}
+      id={ext.repo}
+    >
       <div className="card-body">
         <h5
           className="card-title"
@@ -216,6 +224,42 @@ export function AwesomeArcadeExtensionGroup({
   showImportURL?: boolean | undefined;
   pad?: boolean | undefined;
 }): JSX.Element {
+  const router = useRouter();
+
+  const [extToHighlight, setExtToHighlight] = React.useState<
+    string | undefined
+  >(undefined);
+
+  const onHashChange = (e?: HashChangeEvent | undefined) => {
+    const repo = e
+      ? e.newURL.split("#")[1]
+      : window.location.hash.replaceAll("#", "");
+    console.log(`Changing extension to highlight ${repo}`);
+    setExtToHighlight(repo);
+  };
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      onHashChange();
+    });
+
+    window.addEventListener("hashchange", onHashChange);
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    router.events.on("routeChangeComplete", () => {
+      onHashChange();
+    });
+
+    return () =>
+      router.events.off("routeChangeComplete", () => {
+        onHashChange();
+      });
+  }, [router.events]);
+
   return (
     <div className={pad == undefined || pad ? "mb-3" : ""}>
       {title}
@@ -227,6 +271,7 @@ export function AwesomeArcadeExtensionGroup({
               <div className="col py-3" key={ext.repo}>
                 <AwesomeArcadeExtension
                   ext={ext}
+                  highlight={ext.repo === extToHighlight}
                   showImportURL={showImportURL}
                   pad={i < exts.length - 1}
                 />

src/components/AwesomeArcadeList/linkableHeader.tsx

@@ -6,17 +6,20 @@ export function smoothScrollHash(
   e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
 ) {
   e.preventDefault();
-  const hash = e.currentTarget.href.split("#")[1];
+  const href = e.currentTarget.href;
   setTimeout(() => {
+    const hash = href.split("#")[1];
     console.log(`Smooth scrolling to ${hash}`);
     smoothScrollToID(hash);
+    window.dispatchEvent(new HashChangeEvent("hashchange", { newURL: href }));
   });
 }
 
 export function smoothScrollToID(id: string) {
   const e = document.getElementById(id);
   e?.scrollIntoView({
     behavior: "smooth",
+    block: "center",
   });
   const u = new URL(window.location.toString());
   u.hash = id;

src/components/AwesomeArcadeList/tool.tsx

@@ -3,18 +3,26 @@ 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";
 
 export function AwesomeArcadeTool({
   tool,
+  highlight,
   pad,
 }: {
   tool: Tool;
+  highlight?: boolean | undefined;
   pad?: boolean | undefined;
 }): JSX.Element {
   const [showCardLink, setShowCardLink] = React.useState(false);
 
   return (
-    <div className={`card ${pad ? "mb-2" : ""} h-100`} id={tool.repo}>
+    <div
+      className={`card ${pad ? "mb-2" : ""} ${
+        highlight ? "border-primary border-3" : ""
+      } h-100`}
+      id={tool.repo}
+    >
       <div className="card-body">
         <h5
           className="card-title"
@@ -145,6 +153,42 @@ export function AwesomeArcadeToolGroup({
   tools: Tool[];
   pad?: boolean | undefined;
 }): JSX.Element {
+  const router = useRouter();
+
+  const [toolToHighlight, setToolToHighlight] = React.useState<
+    string | undefined
+  >(undefined);
+
+  const onHashChange = (e?: HashChangeEvent | undefined) => {
+    const repo = e
+      ? e.newURL.split("#")[1]
+      : window.location.hash.replaceAll("#", "");
+    console.log(`Changing tool to highlight ${repo}`);
+    setToolToHighlight(repo);
+  };
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      onHashChange();
+    });
+
+    window.addEventListener("hashchange", onHashChange);
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    router.events.on("routeChangeComplete", () => {
+      onHashChange();
+    });
+
+    return () =>
+      router.events.off("routeChangeComplete", () => {
+        onHashChange();
+      });
+  }, [router.events]);
+
   return (
     <div className={pad == undefined || pad ? "mb-3" : ""}>
       {title}
@@ -154,7 +198,11 @@ export function AwesomeArcadeToolGroup({
           {tools.map((tool, i) => {
             return (
               <div className="col py-3" key={tool.repo}>
-                <AwesomeArcadeTool tool={tool} pad={i < tools.length - 1} />
+                <AwesomeArcadeTool
+                  tool={tool}
+                  highlight={tool.repo === toolToHighlight}
+                  pad={i < tools.length - 1}
+                />
               </div>
             );
           })}

src/components/Layout/layout.tsx

@@ -101,10 +101,10 @@ LayoutProps): JSX.Element {
   const baseURL = (() => {
     switch (appProps.environment) {
       case "production": {
-        return "https://awesome-arcade-extensions.vercel.app";
+        return "https://awesome-arcade.vercel.app";
       }
       case "preview": {
-        return "https://awesome-arcade-extensions-beta.vercel.app";
+        return "https://awesome-arcade-beta.vercel.app";
       }
       case "development": {
         return "http://localhost:3000";

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import Adsense from "../components/Adsense";
 import Analytics from "../components/Analytics";
 import ErrorBoundary from "../components/ErrorBoundary";
 import { SessionProvider } from "next-auth/react";
+import { useRouter } from "next/router";
 
 export default function AwesomeArcadeExtensions({
   Component,
@@ -17,6 +18,14 @@ export default function AwesomeArcadeExtensions({
     import("bootstrap");
   }, []);
 
+  const router = useRouter();
+
+  React.useEffect(() => {
+    window.addEventListener("popstate", () => {
+      router.push(window.location.href);
+    });
+  }, [router]);
+
   return (
     <ErrorBoundary>
       <NextNProgress color="#FFF603" options={{ showSpinner: false }} />