Improve docs navigation (#157)

* Persist slug in version select

* Fix broken edit button

* Fix small bugs

app/components/docs-footer.tsx

@@ -1,6 +1,7 @@
-import { Link, useParams } from "react-router";
+import { Link } from "react-router";
 import { useDoc } from "~/hooks/use-doc";
 import iconsHref from "~/icons.svg";
+import { useHeaderData } from "./docs-header/use-header-data";
 
 export function Footer() {
   return (
@@ -31,8 +32,9 @@ export function Footer() {
 
 function EditLink() {
   let doc = useDoc();
-  let params = useParams();
-  let isEditableRef = params.ref === "main" || params.ref === "dev";
+  let { ref } = useHeaderData();
+
+  let isEditableRef = ref === "main" || ref === "dev";
 
   if (!doc || !isEditableRef || !doc.filename) {
     return null;
@@ -41,9 +43,9 @@ function EditLink() {
   let editUrl: string;
   let repoUrl = "https://github.com/remix-run/react-router";
   if (doc.filename.match(/\.tsx?$/)) {
-    editUrl = `${repoUrl}/edit/${params.ref}/${doc.filename}`;
+    editUrl = `${repoUrl}/edit/${ref}/${doc.filename}`;
   } else {
-    editUrl = `${repoUrl}/edit/${params.ref}/${doc.slug}.md`;
+    editUrl = `${repoUrl}/edit/${ref}/${doc.slug}.md`;
   }
 
   return (

app/components/version-select.tsx

@@ -2,14 +2,20 @@ import iconsHref from "~/icons.svg";
 import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 import { PopupLabel } from "./popup-label";
-import { Link } from "react-router";
+import { Link, useParams } from "react-router";
 import classNames from "classnames";
 import { useHeaderData } from "./docs-header/use-header-data";
 import { useNavigation } from "~/hooks/use-navigation";
 
 export function VersionSelect() {
   let { versions, latestVersion, releaseBranch, branches, currentGitHubRef } =
     useHeaderData();
+  let { "*": splat } = useParams();
+
+  let slug = "";
+  if (splat && !currentGitHubRef.startsWith("6")) {
+    slug = splat?.replace(new RegExp(`^${currentGitHubRef}/`), "");
+  }
 
   // This is the same default, hover, focus style as the ColorScheme trigger
   const className =
@@ -32,9 +38,9 @@ export function VersionSelect() {
       </summary>
       <DetailsPopup className="w-40">
         <PopupLabel label="Branches" />
-        <MainLink latestVersion={latestVersion} />
-        <DevLink />
-        {branches.includes("local") && <LocalLink />}
+        <MainLink latestVersion={latestVersion} slug={slug} />
+        <DevLink slug={slug} />
+        {branches.includes("local") && <LocalLink slug={slug} />}
 
         <PopupLabel label="Versions" />
         {versions.map((version) => (
@@ -55,18 +61,23 @@ export function VersionSelect() {
   );
 }
 
-function MainLink({ latestVersion }: { latestVersion: string }) {
-  let isV7Link = latestVersion.startsWith("7");
-  let to = isV7Link ? "/home" : "/en/main";
+function MainLink({
+  latestVersion,
+  slug,
+}: {
+  latestVersion: string;
+  slug: string;
+}) {
+  let to = slug || "/home";
   return <RefLink to={to}>latest ({latestVersion})</RefLink>;
 }
 
-function DevLink() {
-  return <RefLink to={`/dev`}>dev</RefLink>;
+function DevLink({ slug }: { slug: string }) {
+  return <RefLink to={`/dev/${slug}`}>dev</RefLink>;
 }
 
-function LocalLink() {
-  return <RefLink to={`/local`}>local</RefLink>;
+function LocalLink({ slug }: { slug: string }) {
+  return <RefLink to={`/local/${slug}`}>local</RefLink>;
 }
 
 function VersionLink({ version }: { version: string }) {

app/pages/docs-index.tsx

@@ -7,9 +7,9 @@ export function loader({ request }: Route.LoaderArgs) {
     url.pathname += "/";
   }
 
-  if (url.pathname.startsWith("7")) {
-    return redirect(url.pathname + "home");
-  } else {
+  if (url.pathname.match(/^\/?(6)/)) {
     return redirect("/en" + url.pathname);
+  } else {
+    return redirect(url.pathname + "home");
   }
 }