docs(website): Better migration guide search behavior

Also add a "real world" example of the custom tests on the writing tests
page by linking to my template-rmd repo.

packages/dev-utils/src/indexer/generate.ts

@@ -56,11 +56,7 @@ function getMarkdownForRoute(route: string): string | null {
 
 function getTitleForRoute(route: string): string {
   const [name, pkgName] = route.split("/").reverse();
-  const title = toTitle(name)
-    .replace("Cdn", "CDN")
-    .replace("V1", "v1")
-    .replace("Api", "API")
-    .replace("Sassdoc", "SassDoc");
+  const title = toTitle(name);
 
   if (/Demos$/.test(title) && route.includes("form")) {
     return title;
@@ -73,6 +69,10 @@ function getTitleForRoute(route: string): string {
     return `${toTitle(pkgName, "")} ${title}`;
   }
 
+  if (pkgName === "migration-guides") {
+    return `Migrate from ${title}`;
+  }
+
   return title;
 }
 
@@ -145,6 +145,8 @@ export async function generate(
     let pageUrl = route;
     if (route.startsWith("/guides")) {
       pageUrl = "/guides/[id]";
+    } else if (route.startsWith("/migration-guides")) {
+      pageUrl = "/migration-guides/[id]";
     } else if (route.startsWith("/blog/")) {
       pageUrl = "/blog/[id]";
     } else if (route.startsWith("/packages") && !route.endsWith("demos")) {

packages/dev-utils/src/utils/titles.ts

@@ -32,7 +32,21 @@ export function toTitle(s: string, joinWith = " ", capitals = false): string {
 
   return s
     .split(capitals ? /(?=[A-Z])/ : "-")
-    .map(upperFirst)
+    .map((part) => {
+      if (/^((v\d+)|(to))$/.test(part)) {
+        return part;
+      }
+
+      if (/^api$/i.test(part)) {
+        return "API";
+      }
+
+      if (/^cdn$/i.test(part)) {
+        return "CDN";
+      }
+
+      return upperFirst(part);
+    })
     .join(joinWith);
 }
 

packages/documentation/src/guides/writing-tests.md

@@ -1,5 +1,13 @@
 ## Writing Tests
 
+> If you want to skip reading all the steps, you can check out my
+> [template-rmd](https://github.com/mlaursen/template-rmd) repo for a
+> "real-world" example. Check out the
+> [src/test-utils.tsx](https://github.com/mlaursen/template-rmd/blob/react-md%40v4.0.3/src/test-utils.tsx)
+> and
+> [src/components/\_\_tests\_\_/LinkUnstyled.tsx](https://github.com/mlaursen/template-rmd/blob/react-md%40v4.0.3/src/components/__tests__/LinkUnstyled.tsx)
+> for example usage.
+
 Testing an app with `react-md` components should not require many changes to
 your normal testing flow. The only times weird issues might occur are when using
 components that rely on one of the providers included by the [Configuration