Switch from dynamic URLs to query string parameters for migration det…

…ails (#2235)

* Switch from dynamic URLs to query string parameters for migration details

* fix broken link caught by CI

* Add helpful 404

* pre-commit

* More robust this way?

* pre-commit

---------

Co-authored-by: jaimergp <[email protected]>

docusaurus.config.js

@@ -109,18 +109,6 @@ const config = {
         ...editUrl,
       }),
     ],
-    [
-      path.resolve(__dirname, "plugins", "migration-urls"),
-      {
-        routes: [
-          {
-            path: "/status/migration/",
-            exact: false,
-            component: "@site/src/components/MigrationDetails/",
-          },
-        ],
-      },
-    ],
     [
       "content-blog",
       /** @type {import('@docusaurus/plugin-content-blog').Options} */

news/2024-05-15-numpy-2-migration.md

@@ -3,7 +3,7 @@
 In preparation for the NumPy 2 release, we have begun a migration of all
 conda-forge packages that depend on `numpy` during the build (so in
 `requirements/host`). The migration status is tracked
-[on our status page](/status/migration/numpy2).
+[on our status page](/status/migration/?name=numpy2).
 Particular package's status can be found there. Specific recommendations for
 maintainers updating packages can be found in the migration PRs themselves.
 Please reach out through the usual channels if you have any questions.

src/components/StatusDashboard/current_migrations.jsx

@@ -1,7 +1,7 @@
 import { Redirect } from "@docusaurus/router";
 import { urls } from "@site/src/constants";
 import React, { useEffect, useState } from "react";
-import { measureProgress } from "../MigrationDetails";
+import { measureProgress } from "@site/src/pages/status/migration";
 import styles from "./styles.module.css";
 import Link from "@docusaurus/Link";
 
@@ -158,7 +158,7 @@ function TableContent({ collapsed, name, resort, rows, select, sort }) {
       <tbody className={collapsed ? styles.collapsed  : undefined}>
         {rows.map((row) => {
           const { progress } = row;
-          const href = `/status/migration/${row.name}`;
+          const href = `/status/migration/?name=${row.name}`;
           return (
             <tr key={row.name}>
               <td>

src/components/MigrationDetails/index.jsx → src/pages/status/migration/index.jsx

@@ -37,7 +37,7 @@ export default function MigrationDetails() {
   const location = useLocation();
   const { siteConfig } = useDocusaurusContext();
   const [state, setState] = useState({
-    name: location.pathname.replace("/status/migration", "").split("/").pop(),
+    name: new URLSearchParams(location.search).get("name"),
     details: null,
     redirect: false,
     view: "table",

src/theme/NotFound/index.js

@@ -0,0 +1,45 @@
+/*
+We swizzle-wrap the original 404 component to provide a helpful message for migration 404s
+after merging this PR: https://github.com/conda-forge/conda-forge.github.io/pull/2235
+We can probably remove this at some point when enough migrations have been closed and
+they are not as relevant.
+*/
+import React from "react";
+import NotFound from "@theme-original/NotFound";
+import { useLocation } from "@docusaurus/router";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+
+export default function NotFoundWrapper(props) {
+  const location = useLocation().pathname;
+  if (location.match("/status/migration/[a-zA-Z0-9-_+]+")) {
+    const parts = location.split("/");
+    const target =
+      "/status/migration/?name=" + parts[parts.indexOf("migration") + 1];
+    return (
+      <Layout title="Page has moved">
+        <main className="container margin-vert--xl">
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <Heading as="h1" className="hero__title">
+                <h1>This page has moved</h1>
+              </Heading>
+              <p>
+                Please visit the new location at{" "}
+                <a href={target}>
+                  <code>{target}</code>
+                </a>
+              </p>
+            </div>
+          </div>
+        </main>
+      </Layout>
+    );
+  }
+  // Regular 404 component
+  return (
+    <>
+      <NotFound {...props} />
+    </>
+  );
+}