Misc. docs engineering improvements (#5495)

* Misc. docs engineering improvements

* Add comment to explain QSP logic

---------

Co-authored-by: Thomas Leing <[email protected]>

Author: tjleing

src/components/Card/styles.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
-import Link from "next/link";
+import InternalLink from "../InternalLink";
 
 import {MQFablet, MQDesktop} from "../media";
 
@@ -30,7 +30,7 @@ const docsCard: React.FC<CardProps> = ({
 }) => {
   if (!href) return <div className={className}>{children}</div>;
   return (
-    <Link href={href} passHref={true} legacyBehavior>
+    <InternalLink href={href} passHref={true} legacyBehavior>
       <Anchor>
         {external && (
           <ExternalLinkGraphic
@@ -40,7 +40,7 @@ const docsCard: React.FC<CardProps> = ({
         )}
         <div className={className}>{children}</div>
       </Anchor>
-    </Link>
+    </InternalLink>
   );
 };
 

src/components/Menu/Directory/index.tsx

@@ -72,6 +72,7 @@ class DirectoryGroup extends React.Component<
     if (this.itemsToDisplay.length === 0) {
       return <></>;
     }
+
     return (
       <div>
         <DirectoryGroupHeaderStyle onClick={this.toggleOpen}>
@@ -82,7 +83,7 @@ class DirectoryGroup extends React.Component<
           <DirectoryLinksStyle>
             {this.itemsToDisplay.map((item) => (
               <DirectoryGroupItemStyle
-                isActive={this.currentRoute.startsWith(item.route)}
+                isActive={this.currentRoute === item.route}
                 key={item.title}
               >
                 <InternalLink href={`${item.route}`}>

src/components/Menu/VersionSwitcher/index.tsx

@@ -85,8 +85,8 @@ export function VersionSwitcher({url}) {
 
 const lib = directory["lib"].items;
 const libLegacy = directory["lib-v1"].items;
-const libLegacyPaths = [];
-const libPaths = [];
+const libLegacyPaths: string[] = [];
+const libPaths: string[] = [];
 const libItemsAndPaths: [object, string[]][] = [
   [lib, libPaths],
   [libLegacy, libLegacyPaths],
@@ -130,18 +130,28 @@ export function LibVersionSwitcher({
     urlEnd = url.split("/lib")[1];
   }
 
+  // Function to remove query string parameters before checking if href is included in the list of possibilities.
+  // This is so we are only comparing the paths without the query string parameters to avoid false negatives.
+  function isHrefIncluded(href: string, paths: string[]) {
+    href = href.split("#")[0];
+    if (href.endsWith("/")) {
+      href = href.substring(0, href.length-1);
+    }
+    return paths.includes(href);
+  }
+
   const leftHref = "/lib-v1" + urlEnd;
   const leftOption = {
     title: legacyVersion,
-    href: libLegacyPaths.includes(leftHref)
+    href: isHrefIncluded(leftHref, libLegacyPaths)
       ? leftHref
       : "/lib-v1/" + filter,
   };
 
   const rightHref = "/lib" + urlEnd;
   const rightOption = {
     title: `${latestVersion} (latest)`,
-    href: libPaths.includes(rightHref) ? rightHref : "/lib/" + filter,
+    href: isHrefIncluded(rightHref, libPaths) ? rightHref : "/lib/" + filter,
   };
 
   return (