Refactor routing and redirects for v6 documentation (#176)

* Refactor routing and redirects for v6 documentation

* Add 404s for invalid refs

Author: brookslybrand

_redirects

@@ -82,10 +82,14 @@
 /en/main/route/loader                        https://api.reactrouter.com/v7/types/react_router.LoaderFunction.html   
 /en/main/route/should-revalidate             https://api.reactrouter.com/v7/interfaces/react_router.ShouldRevalidateFunction.html
 
+# catchall for remaining v6 docs with lang prefix
+/en/* /*
+
 # API reference redirects
 /reference /en/main/reference
 
 # removed `/docs` prefix
+/docs /home
 /docs/en/v6/* /en/v6.3.0/*
 /docs/* /*
 

app/components/docs-menu/menu.tsx

@@ -9,7 +9,13 @@ import { useNavigation } from "~/hooks/use-navigation";
 import { useDelayedValue } from "~/hooks/use-delayed-value";
 import { useHeaderData } from "../docs-header/use-header-data";
 
-export function Menu({ menu }: { menu?: MenuDoc[] }) {
+export function Menu({
+  menu,
+  changelogHref,
+}: {
+  menu?: MenuDoc[];
+  changelogHref?: string;
+}) {
   // github might be down but the menu but the doc could be cached in memory, so
   // prevent the whole page from blowing up and still render the doc
   if (menu === undefined) {
@@ -22,7 +28,9 @@ export function Menu({ menu }: { menu?: MenuDoc[] }) {
 
   return (
     <nav>
-      <HeaderMenuLink to="start/changelog">Changelog</HeaderMenuLink>
+      {changelogHref ? (
+        <HeaderMenuLink to={changelogHref}>Changelog</HeaderMenuLink>
+      ) : null}
       {menu.map((category) => (
         <div key={category.attrs.title}>
           <MenuCategory category={category} />

app/pages/docs-index.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router";
+import { Outlet, redirect } from "react-router";
 import classNames from "classnames";
 
 import { Header } from "~/components/docs-header/docs-header";
@@ -15,7 +15,25 @@ import { useCodeBlockCopyButton } from "~/ui/utils";
 
 import docsCss from "~/styles/docs.css?url";
 
-export let loader = async ({ params }: Route.LoaderArgs) => {
+export let loader = async ({ request, params }: Route.LoaderArgs) => {
+  let url = new URL(request.url);
+  if (!url.pathname.endsWith("/")) {
+    url.pathname += "/";
+  }
+
+  // the /:ref param should only be used for v6 docs
+  if (params.ref) {
+    // if the ref is not a valid semver, this is 404
+    if (!semver.valid(params.ref)) {
+      throw new Response("Not Found", { status: 404 });
+    }
+
+    // if ref is not a v6 ref, redirect to the /home of that ref
+    if (!url.pathname.match(/^\/?(6)/)) {
+      throw redirect(url.pathname + "home");
+    }
+  }
+
   let splat = params["*"];
   let firstSegment = splat?.split("/")[0];
   let refParam = params.ref
@@ -37,25 +55,31 @@ export let loader = async ({ params }: Route.LoaderArgs) => {
 };
 
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
-  const { menu } = loaderData;
+  const { menu, header } = loaderData;
 
   let docsContainer = useRef<HTMLDivElement>(null);
   useCodeBlockCopyButton(docsContainer);
 
+  const changelogHref = header.hasAPIDocs
+    ? header.refParam
+      ? `/${header.refParam}/changelog`
+      : "/changelog"
+    : undefined;
+
   return (
     <>
       <link rel="stylesheet" href={docsCss} />
       <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
         <div className="sticky top-0 z-20">
           <Header />
           <NavMenuMobile>
-            <Menu menu={menu} />
+            <Menu menu={menu} changelogHref={changelogHref} />
           </NavMenuMobile>
         </div>
 
         <div className="block lg:flex">
           <NavMenuDesktop>
-            <Menu menu={menu} />
+            <Menu menu={menu} changelogHref={changelogHref} />
           </NavMenuDesktop>
           <div
             ref={docsContainer}

app/pages/docs-layout.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "react-router";
 import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
-import type { Route } from "./+types/redirect-v7-doc";
+import type { Route } from "./+types/redirect-major-version";
 
 export async function loader({ request }: Route.LoaderArgs) {
   let url = new URL(request.url);

app/pages/redirect-v7-doc.tsx app/pages/redirect-major-version.tsxapp/pages/redirect-v7-doc.tsx renamed to app/pages/redirect-major-version.tsx

@@ -8,21 +8,20 @@ const routes: RouteConfig = [
 
   route("", "pages/docs-layout.tsx", { id: "docs" }, [
     route("home", "pages/doc.tsx", { id: "home" }),
+    route("changelog", "pages/doc.tsx", { id: "changelog" }),
     route("*", "pages/doc.tsx"),
   ]),
 
-  route("/:ref", "pages/docs-index.tsx", { id: "docs-index" }),
-
   // short version URLs for changelogs and stuff
-  route("/v6/*", "pages/redirect-v6-doc.tsx"),
-  route("/v7/*", "pages/redirect-v7-doc.tsx"),
+  route("/v6/*", "pages/redirect-major-version.tsx", { id: "v6-redirect" }),
+  route("/v7/*", "pages/redirect-major-version.tsx", { id: "v7-redirect" }),
 
-  // v6 URLs before the api reference docs
-  route("/en/:ref", "pages/docs-layout.tsx", { id: "v6-docs" }, [
+  // This route primarily exists to support the old v6 index page and to
+  // redirect to the new docs at /home
+  route("/:ref", "pages/docs-layout.tsx", { id: "v6-index-layout" }, [
     index("pages/docs-home.tsx", {
       id: "v6-index",
     }),
-    route("*", "pages/doc.tsx", { id: "v6-guide" }),
   ]),
 ];