index.js: Fixed link prefixing for github pages

components/Navbar.js

@@ -8,7 +8,7 @@ const Navbar = () => (
         <div className="collapse navbar-collapse" id="navbarColor03">
             <ul className="navbar-nav mr-auto">
                 <li className="nav-item active">
-                    <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
+                    <a className="nav-link" href={`${process.env.ASSET_PREFIX}/`}>Home <span className="sr-only">(current)</span></a>
                 </li>
             </ul>
             {/* <form className="form-inline my-2 my-lg-0">

next.config.js

@@ -1,3 +1,18 @@
+const webpack = require('webpack');
+
+const isProduction = (process.env.NODE_ENV || 'production') === 'production';
+
+const assetPrefix = isProduction ? '/editorials' : '';
+
 module.exports = {
     exportTrailingSlash: true,
+    assetPrefix: assetPrefix,
+    webpack: config => {
+        config.plugins.push(
+            new webpack.DefinePlugin({
+                'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix),
+            }),
+        )    
+        return config
+    },
 }

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^16.13.1",
     "react-syntax-highlighter": "^12.2.1",
     "remark": "^12.0.0",
-    "remark-html": "^11.0.2"
+    "remark-html": "^11.0.2",
+    "webpack": "^4.43.0"
   }
 }

pages/index.js

@@ -21,7 +21,9 @@ export default function Home({ db }) {
                                 <td>{key}</td>
                                 <td>{db[key].title}</td>
                                 <td>{db[key].difficulty}</td>
-                                <Link href={`./problems/${key}`}><td>View editorial</td></Link> 
+                                <Link href={`/problems/${key}`} as={`${process.env.ASSET_PREFIX}/problems/${key}`}>
+                                    <td>View editorial</td>
+                                </Link> 
                             </tr>
                         ))
                     }