Converting all links to prefetched

package.json

@@ -7,7 +7,7 @@
     "nohoist": ["**/bulma", "**/bulma/**"]
   },
   "engines": {
-    "node": ">=10.15.1",
+    "node": ">=10.13.0",
     "yarn": "1.x"
   },
   "scripts": {
@@ -21,6 +21,7 @@
     "concurrently": "^5.0.0"
   },
   "devDependencies": {
+    "now": "^16.3.1",
     "prettier": "^1.18.2"
   }
 }

packages/web/components/Loading.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import SignUpForm from '~/components/SignUpForm'
+import WidthWrapper from '~/components/WidthWrapper'
+import {version} from '~/package.json'
+
+export default function Footer({ isFullwidth }) {
+  return (
+      <footer className="footer p-b-md">
+      <WidthWrapper isFullwidth={isFullwidth}>
+          <div className="columns">
+            <div className="column">
+              <h3 className="title is-3 ">
+                <img src="/supabase-logo.svg" alt="Supabase" width="180" />
+              </h3>
+              <SignUpForm />
+            </div>
+            <div className="column is-3"></div>
+            <div className="column is-2">
+              <p className="heading">Products</p>
+              <p>
+                <a href="https://docs.supabase.io">Docs</a>
+              </p>
+            </div>
+            <div className="column is-2">
+              <p className="heading">Company</p>
+              <p>
+                <a href="https://github.com/supabase/monorepo" target="_blank">
+                  Github
+                </a>
+              </p>
+            </div>
+          </div>
+        <hr />
+        <div className="level">
+          <div className="level-left ">
+            <div className="level-item ">
+              <small className="has-text-weight-bold">© Supabase. v{version}</small>
+            </div>
+          </div>
+          <div className="level-right">
+            <div className="level-item">
+              <a className="is-size-7 m-r-md">Terms of Use</a>·
+              <a className="is-size-7 m-l-md">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+    </WidthWrapper>
+      </footer>
+  )
+}

packages/web/components/Navbar.js

@@ -34,44 +34,11 @@ export default function Navbar({ isFullwidth }) {
           <div className="navbar-start"></div>
 
           <div className="navbar-end p-r-sm">
-            {/* Plugins */}
-            {/* <div className="navbar-item has-dropdown is-hoverable">
-            <span className="navbar-link">
-              Plugins
-            </span>
-            <div className="navbar-dropdown is-boxed  is-right">
-              <a className="navbar-item" href="">
-                <div className="navbar-content">
-                  <h5 className="has-text-weight-bold">PostGIS</h5>
-                  <p>Supercharge your database to work with locations and geographies.</p>
-                </div>
-              </a>
-              <a className="navbar-item" href="">
-                <div className="navbar-content">
-                  <h5 className="has-text-weight-bold">Timescale</h5>
-                  <p>Supercharge your database to work with time series data.</p>
-                </div>
-              </a>
-              <hr className="navbar-divider" />
-              <a className="navbar-item" href="">
-                <span className="">See all</span>
-                <span className="icon">
-                  <i className="fas fa-arrow-right"></i>
-                </span>
-              </a>
-            </div>
-          </div> */}
-
             <div className="navbar-item">
-              <Link href="/docs">
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
                 <a className="">Docs</a>
               </Link>
             </div>
-            {/* <div className="navbar-item">
-            <Link href="/">
-              <a className="button is-primary">Sign up</a>
-            </Link>
-          </div> */}
           </div>
         </div>
       </WidthWrapper>

packages/web/components/NavbarDocs.js

@@ -7,38 +7,38 @@ export default function Navbar({activeCategory}) {
       <ul>
         <li className="is-hidden-tablet">
           <a>
-          <span class="icon">
-            <i class="fas fa-bars"></i>
-          </span>
+            <span className="icon">
+              <i className="fas fa-bars"></i>
+            </span>
           </a>
         </li>
-        <li className={activeCategory == 'packaged' ? 'is-active': ''}>
-          <Link href="/docs/packaged/getting-started">
+        <li className={activeCategory == 'packaged' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/packaged/getting-started`}>
             <a className="">Packaged</a>
           </Link>
         </li>
-        <li className={activeCategory == 'admin-api' ? 'is-active': ''}>
-          <Link href="/docs/admin-api/getting-started">
+        <li className={activeCategory == 'admin-api' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/admin-api/getting-started`}>
             <a className="">Admin API</a>
           </Link>
         </li>
-        <li className={activeCategory == 'realtime' ? 'is-active': ''}>
-          <Link href="/docs/realtime/getting-started">
+        <li className={activeCategory == 'realtime' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
             <a className="">Realtime</a>
           </Link>
         </li>
-        <li className={activeCategory == 'rest' ? 'is-active': ''}>
-          <Link href="/realtime">
+        <li className={activeCategory == 'rest' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
             <a className="">Rest</a>
           </Link>
         </li>
-        <li className={activeCategory == 'graphql' ? 'is-active': ''}>
-          <Link href="/realtime">
+        <li className={activeCategory == 'graphql' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
             <a className="">GraphQL</a>
           </Link>
         </li>
-        <li className={activeCategory == 'baseless' ? 'is-active': ''}>
-          <Link href="/realtime">
+        <li className={activeCategory == 'baseless' ? 'is-active' : ''}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
             <a className="">Baseless</a>
           </Link>
         </li>

packages/web/components/layouts/DocsLayout.js

@@ -30,16 +30,16 @@ export default function DocsLayout(props) {
 const Sidebar = sidebar => {
   return Object.entries(sidebar || []).map(([heading, pages]) => {
     return (
-      <>
+      <div key={heading}>
         <p className="menu-label">{heading}</p>
         <ul className="menu-list">{pages.map(x => SidebarLink(x))}</ul>
-      </>
+      </div>
     )
   })
 }
 
 const SidebarLink = page => (
-  <li>
+  <li key={page.slug}>
     <a className="">{page.title}</a>
   </li>
 )

packages/web/content/docs/packaged/getting-started.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
   title: 'Packaged PostgreSQL',
-  description: 'PostgreSQL is easy, but we want to make it even easier.',
+  description: 'PostgreSQL is easy, but we\'re making it even easier.',
   sidebarLabel: 'Getting Started'
 }

packages/web/pages/docs/[category]/[slug].js

@@ -1,5 +1,7 @@
 import { useRouter } from 'next/router'
 import Layout from '~/components/layouts/DocsLayout'
+import Loading from '~/components/Loading'
+import PropTypes from 'prop-types'
 
 const importReducer = ctx => {
   let keys = ctx.keys()
@@ -28,10 +30,10 @@ Sidebars['realtime'] = {
   documentation: ['getting-started'],
 }
 
-export default function CategoryDocs() {
+const CategoryDocs = (props) => {
   const router = useRouter()
   let { category, slug } = router.query
-  if (!category || !slug) return <div></div>
+  if (!category || !slug) return <Loading />
 
   const categoryDocs = Docs[category]
   const categorySidebar = enrichSidebar(Sidebars[category], categoryDocs)
@@ -72,6 +74,13 @@ export default function CategoryDocs() {
   )
 }
 
+CategoryDocs.propTypes = {
+  category: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
+}
+
+export default CategoryDocs
+
 /**
  * Fills the sidebar array with relevant metadata,
  */