Fix website internal links not prepended with public path (#6678)

* Fix website internal links not prepended with basename

* Add loader-utils@1.1.0 to package.json

Author: kenrick95

website/package-lock.json

@@ -46,6 +46,7 @@
     "html-webpack-plugin": "^3.2.0",
     "isomorphic-fetch": "^2.2.1",
     "jsxstyle": "^2.1.1",
+    "loader-utils": "1.1.0",
     "markdown-it": "^7.0.0",
     "postcss-loader": "^2.1.5",
     "prismjs": "^1.8.4",

website/package.json

@@ -32,11 +32,11 @@ module.exports = {
   ].concat(
     process.env.NODE_ENV === "production"
       ? [
-          new SWPrecacheWebpackPlugin({
-            cacheId: "react-router-website",
-            staticFileGlobsIgnorePatterns: [/\.map$/]
-          })
-        ]
+        new SWPrecacheWebpackPlugin({
+          cacheId: "react-router-website",
+          staticFileGlobsIgnorePatterns: [/\.map$/]
+        })
+      ]
       : []
   ),
 
@@ -112,7 +112,10 @@ module.exports = {
       },
       {
         test: /\.md(\?(.+))?$/,
-        loader: "markdown-loader"
+        loader: "markdown-loader",
+        options: {
+          basename: process.env.NODE_ENV === "production" ? "/react-router" : undefined
+        }
       },
       {
         test: /\.(gif|jpe?g|png|ico)$/,
@@ -132,6 +135,7 @@ module.exports = {
     historyApiFallback: true,
     quiet: false,
     noInfo: false,
+    publicPath: "/",
     stats: {
       assets: true,
       version: false,

website/webpack.config.js

@@ -14,6 +14,7 @@ const cheerio = require("cheerio");
 const path = require("path");
 const slug = require("slug");
 const resolve = require("resolve-pathname");
+const loaderUtils = require("loader-utils");
 
 const routerDelegationClassName = "internal-link";
 
@@ -70,53 +71,53 @@ const isOtherTypeSibling = href =>
 
 const isCrossPackage = href => href.startsWith("../../../");
 
-const makeHref = (hash, ...segments) => {
-  let href = "/" + segments.join("/").replace(/\.md$/, "");
+const makeHref = (basename, hash, ...segments) => {
+  let href = basename + "/" + segments.join("/").replace(/\.md$/, "");
   if (hash) href += "/" + hash;
   return href;
 };
 
-const correctLinks = ($, moduleSlug, environment, type) => {
+const correctLinks = ($, moduleSlug, environment, type, basename) => {
   $("a[href]").each((i, e) => {
     const $e = $(e);
     const [href, hash] = $e.attr("href").split("#");
 
     if (isSelfHeader(href)) {
       // #render-func
       // /web/api/Route/render-func
-      $e.attr("href", `/${environment}/${type}/${moduleSlug}/${hash}`);
+      $e.attr("href", `${basename}/${environment}/${type}/${moduleSlug}/${hash}`);
       $e.addClass(routerDelegationClassName);
     } else if (isSibling(href)) {
       // ./quick-start.md
       // /web/guides/quick-start
       const [_, doc] = href.split("/");
 
-      $e.attr("href", makeHref(hash, environment, type, doc));
+      $e.attr("href", makeHref(basename, hash, environment, type, doc));
       $e.addClass(routerDelegationClassName);
     } else if (isOtherTypeSibling(href)) {
       // ../api/NativeRouter.md
       // /web/api/NativeRouter
       const [_, type, doc] = href.split("/");
-      $e.attr("href", makeHref(hash, environment, type, doc));
+      $e.attr("href", makeHref(basename, hash, environment, type, doc));
       $e.addClass(routerDelegationClassName);
     } else if (isCrossPackage(href)) {
       // ../../../react-router/docs/api/Route.md
       // /core/api/Route
       const [$0, $1, $2, env, $4, type, doc] = href.split("/");
-      $e.attr("href", makeHref(hash, envMap[env], type, doc));
+      $e.attr("href", makeHref(basename, hash, envMap[env], type, doc));
       $e.addClass(routerDelegationClassName);
     }
   });
 };
 
-const makeHeaderLinks = ($, moduleSlug, environment, type) => {
+const makeHeaderLinks = ($, moduleSlug, environment, type, basename) => {
   // can abstract these two things a bit, but it's late.
   $("h1").each((i, e) => {
     const $e = $(e);
     $e.attr("id", moduleSlug);
     const children = $e.html();
     const link = $(
-      `<a href="/${environment}/${type}/${moduleSlug}" class="${routerDelegationClassName}"/>`
+      `<a href="${basename}/${environment}/${type}/${moduleSlug}" class="${routerDelegationClassName}"/>`
     );
     link.html(children);
     $e.empty().append(link);
@@ -129,7 +130,7 @@ const makeHeaderLinks = ($, moduleSlug, environment, type) => {
     $e.attr("id", `${moduleSlug}-${slug}`);
     const children = $e.html();
     const link = $(
-      `<a href="/${environment}/${type}/${moduleSlug}/${slug}" class="${routerDelegationClassName}"/>`
+      `<a href="${basename}/${environment}/${type}/${moduleSlug}/${slug}" class="${routerDelegationClassName}"/>`
     );
     link.html(children);
     $e.empty().append(link);
@@ -145,11 +146,13 @@ const md = markdownIt({
 
 module.exports = function(content) {
   this.cacheable();
+  const options = loaderUtils.getOptions(this);
+  const basename = options.basename || "";
   const markup = md.render(content);
   const $markup = cheerio.load(markup);
   const title = extractHeaders($markup, "h1", this.data.type)[0];
-  correctLinks($markup, title.slug, this.data.environment, this.data.type);
-  makeHeaderLinks($markup, title.slug, this.data.environment, this.data.type);
+  correctLinks($markup, title.slug, this.data.environment, this.data.type, basename);
+  makeHeaderLinks($markup, title.slug, this.data.environment, this.data.type, basename);
   const headers = extractHeaders($markup, "h2", this.data.type);
   const value = {
     markup: $markup.html(),