Adding other docs

packages/web/components/Loading.js

@@ -1,51 +1,5 @@
 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>
-  )
+export default () => {
+  return <div>We haven't come up with a cool loading component yet. So all you get is is text.</div>
 }

packages/web/components/NavbarDocs.js

@@ -28,17 +28,17 @@ export default function Navbar({activeCategory}) {
           </Link>
         </li>
         <li className={activeCategory == 'rest' ? 'is-active' : ''}>
-          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
-            <a className="">Rest</a>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/restful/getting-started`}>
+            <a className="">Restful</a>
           </Link>
         </li>
         <li className={activeCategory == 'graphql' ? 'is-active' : ''}>
-          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/graphql/getting-started`}>
             <a className="">GraphQL</a>
           </Link>
         </li>
         <li className={activeCategory == 'baseless' ? 'is-active' : ''}>
-          <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
+          <Link href={`/docs/[category]/[slug]`} as={`/docs/baseless/getting-started`}>
             <a className="">Baseless</a>
           </Link>
         </li>

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

@@ -0,0 +1,10 @@
+export const metadata = {
+  title: 'Baseless',
+  description: 'We\'re building a serverless PostgreSQL so you can get started in seconds. Export your database to a fully native PostgreSQL instance at any time.'
+}
+
+
+# Hello world
+
+
+FOo bAr

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

@@ -0,0 +1,10 @@
+export const metadata = {
+  title: 'GraphQL',
+  description: 'Extend your database with a fully functional GraphQL API, without a line of code.'
+}
+
+
+# Hello world
+
+
+FOo bAr

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

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

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

@@ -0,0 +1,10 @@
+export const metadata = {
+  title: 'Restful',
+  description: 'Add a fully documented Restful API, simply by introspecting the schema.'
+}
+
+
+# Hello world
+
+
+FOo bAr

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

@@ -17,20 +17,32 @@ var Docs = []
 Docs['packaged'] = importReducer(require.context('../../../content/docs/packaged', true, /.mdx$/))
 Docs['admin-api'] = importReducer(require.context('../../../content/docs/admin-api', true, /.mdx$/))
 Docs['realtime'] = importReducer(require.context('../../../content/docs/realtime', true, /.mdx$/))
+Docs['restful'] = importReducer(require.context('../../../content/docs/restful', true, /.mdx$/))
+Docs['graphql'] = importReducer(require.context('../../../content/docs/graphql', true, /.mdx$/))
+Docs['baseless'] = importReducer(require.context('../../../content/docs/baseless', true, /.mdx$/))
 
 // Set up all sidebars
 var Sidebars = []
 Sidebars['packaged'] = {
-  documentation: ['getting-started'],
+  introduction: ['getting-started'],
 }
 Sidebars['admin-api'] = {
-  documentation: ['getting-started'],
+  introduction: ['getting-started'],
 }
 Sidebars['realtime'] = {
-  documentation: ['getting-started'],
+  introduction: ['getting-started'],
+}
+Sidebars['restful'] = {
+  introduction: ['getting-started'],
+}
+Sidebars['graphql'] = {
+  introduction: ['getting-started'],
+}
+Sidebars['baseless'] = {
+  introduction: ['getting-started'],
 }
 
-const CategoryDocs = (props) => {
+const CategoryDocs = props => {
   const router = useRouter()
   let { category, slug } = router.query
   if (!category || !slug) return <Loading />
@@ -45,7 +57,7 @@ const CategoryDocs = (props) => {
   return (
     <Layout sidebar={categorySidebar} activeCategory={category}>
       <div className="has-background-dark">
-        <div className="content w-m-800 p-md p-t-xl p-b-xl">
+        <div className="content w-m-800 p-md p-t-xl p-b-xl m-b-lg">
           <h1 className="title">{title}</h1>
           <p className="subtitle">{description}</p>
         </div>

packages/web/pages/index.js

@@ -25,24 +25,28 @@ export default class Home extends React.Component {
           </p>
           <div className="columns is-multiline">
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">Realtime</h4>
-                <p>Listen to your database updates, inserts, and deletes over websockets.</p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/realtime/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">Realtime</h4>
+                  <p>Listen to your database updates, inserts, and deletes over websockets.</p>
+                </a>
+              </Link>
             </div>
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">Restful</h4>
-                <p>
-                  Add a fully documented Restful API, simply by introspecting the schema.
-                </p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/restful/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">Restful</h4>
+                  <p>Add a fully documented Restful API, simply by introspecting the schema.</p>
+                </a>
+              </Link>
             </div>
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">GraphQL</h4>
-                <p>Add a fully documented GraphQL API, without a line of code.</p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/graphql/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">GraphQL</h4>
+                  <p>Extend your database with a fully functional GraphQL API, without a line of code.</p>
+                </a>
+              </Link>
             </div>
           </div>
         </div>
@@ -51,32 +55,39 @@ export default class Home extends React.Component {
           <a name="pricing" id="pricing" />
           <h3 className="title is-3 has-underline ">Launch</h3>
           <p className="subtitle">
-            Whether you're a DB expert or just a beginner, Supabase makes it ridiculously easy to get started with PostgreSQL.
+            Whether you're a DB expert or just a beginner, Supabase makes it ridiculously easy to
+            get started with PostgreSQL.
           </p>
           <div className="columns is-multiline">
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">Packaged PostgreSQL</h4>
-                <p>
-                  We've packaged PostgreSQL with a bunch of plugins and goodies that we think you'll
-                  like.
-                </p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/packaged/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">Packaged PostgreSQL</h4>
+                  <p>
+                    We've packaged PostgreSQL with a bunch of plugins and goodies that we think
+                    you'll like.
+                  </p>
+                </a>
+              </Link>
             </div>
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">Admin API</h4>
-                <p>Manage your PostgreSQL database with a well documented Restful API.</p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/admin-api/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">Admin API</h4>
+                  <p>Manage your PostgreSQL database with a well documented Restful API.</p>
+                </a>
+              </Link>
             </div>
             <div className="column is-4">
-              <a className="box deep-hover" style={{ height: '100%' }}>
-                <h4 className="title is-4">Baseless</h4>
-                <p>
-                  We're building a serverless PostgreSQL so you can get started in seconds. Export
-                  your database to a fully native PostgreSQL instance at any time.
-                </p>
-              </a>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/baseless/getting-started`}>
+                <a className="box deep-hover" style={{ height: '100%' }}>
+                  <h4 className="title is-4">Baseless</h4>
+                  <p>
+                    We're building a serverless PostgreSQL so you can get started in seconds. Export
+                    your database to a fully native PostgreSQL instance at any time.
+                  </p>
+                </a>
+              </Link>
             </div>
           </div>
         </div>