Add back button

Author: Tibowl

pages/_app.tsx

@@ -24,9 +24,9 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
     </Head>
 
     <div className="w-full">
-      <NavBar location={router.pathname}/>
+      <NavBar location={router.asPath}/>
       <div className="p-4 flex flex-col w-full flex-1 px-1 md:px-20 items-center justify-center">
-        <Component {...pageProps} location={router.pathname}/>
+        <Component {...pageProps} location={router.asPath}/>
       </div>
     </div>
     <Footer />

pages/guides/[category].tsx

@@ -19,13 +19,19 @@ export default function CategoryWebpage({ guide, location }: Props & { location:
         <meta property="og:title" content={`${guide.name} | Hu Tao`} />
         <meta property="og:description" content={`View ${guide.name} guides`} />
       </Head>
+      <h2 className="font-semibold">
+        <FormattedLink href="/guides/" location={location} font="semibold" size="lg">
+          Guides
+        </FormattedLink>
+      </h2>
+
       <h1 className="text-3xl font-bold">
         {guide.name}
       </h1>
       <ul>
         {guide.pages.map(p => (<li key={p.name} id={urlify(p.name, false)}>
           <h2 className="text-2xl font-semibold">
-            <FormattedLink href={`${urlify(guide.name, false)}/${urlify(p.name, true)}`} location={location} font="semibold" size="2xl">
+            <FormattedLink href={`/guides/${urlify(guide.name, false)}/${urlify(p.name, true)}`} location={location} font="semibold" size="2xl">
               {p.name}
             </FormattedLink>
           </h2>