Adding in some docs

packages/web/components/Footer.js

@@ -1,44 +1,50 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import SignUpForm from '~/components/SignUpForm'
+import WidthWrapper from '~/components/WidthWrapper'
 
-export default function Footer() {
+export default function Footer({ isFullwidth }) {
   return (
-    <footer className="footer p-b-md">
-      <div className="section container p-t-none">
-        <div className="columns">
-          <div className="column">
-            <h3 className="title is-3 ">
-              <img src="/supabase-logo.svg" alt="Supabase" width="180" />
-            </h3>
-            <SignUpForm />
+      <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>
-          <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>
+        <hr />
+        <div className="level">
+          <div className="level-left ">
+            <div className="level-item ">
+              <small className="has-text-weight-bold">© Supabase</small>
+            </div>
           </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 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>
-      </div>
-      <hr />
-      <div className="level container">
-        <div className="level-left ">
-          <div className="level-item ">
-            <small className="has-text-weight-bold">© Supabase</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>
-    </footer>
+    </WidthWrapper>
+      </footer>
   )
 }

packages/web/components/Navbar.js

@@ -1,39 +1,41 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
+import WidthWrapper from '~/components/WidthWrapper'
 
-export default function Navbar() {
+export default function Navbar({ isFullwidth }) {
   const [mobileActive, setMobileActive] = useState(false)
 
+  
   return (
     <nav className="navbar" role="navigation" aria-label="main navigation">
-      <div className="container">
-      <div className="navbar-brand">
-        <Link href="/">
-          <a className="navbar-item has-text-weight-bold">
-            <img src="/supabase-logo.svg" alt="Supabase" />
+      <WidthWrapper isFullwidth={isFullwidth}>
+        <div className="navbar-brand">
+          <Link href="/">
+            <a className="navbar-item has-text-weight-bold">
+              <img src="/supabase-logo.svg" alt="Supabase" />
+            </a>
+          </Link>
+
+          <a
+            role="button"
+            className="navbar-burger burger"
+            aria-label="menu"
+            aria-expanded="false"
+            data-target="navbarBasicExample"
+            onClick={() => setMobileActive(!mobileActive)}
+          >
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
           </a>
-        </Link>
+        </div>
 
-        <a
-          role="button"
-          className="navbar-burger burger"
-          aria-label="menu"
-          aria-expanded="false"
-          data-target="navbarBasicExample"
-          onClick={() => setMobileActive(!mobileActive)}
-        >
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-          <span aria-hidden="true" />
-        </a>
-      </div>
+        <div id="navbarBasicExample" className={`navbar-menu ${mobileActive ? 'is-active' : ''}`}>
+          <div className="navbar-start"></div>
 
-      <div id="navbarBasicExample" className={`navbar-menu ${mobileActive ? 'is-active' : ''}`}>
-        <div className="navbar-start"></div>
-
-        <div className="navbar-end p-r-sm">
-          {/* Plugins */}
-          {/* <div className="navbar-item has-dropdown is-hoverable">
+          <div className="navbar-end p-r-sm">
+            {/* Plugins */}
+            {/* <div className="navbar-item has-dropdown is-hoverable">
             <span className="navbar-link">
               Plugins
             </span>
@@ -60,23 +62,19 @@ export default function Navbar() {
             </div>
           </div> */}
 
-
-          <div className="navbar-item">
-              <a className="https://docs.supabase.io">Docs</a>
-          </div>
-          {/* <div className="navbar-item">
-            <Link href="/blog">
-              <a className="">Blog</a>
-            </Link>
-          </div> */}
-          {/* <div className="navbar-item">
+            <div className="navbar-item">
+              <Link href="/docs">
+                <a className="">Docs</a>
+              </Link>
+            </div>
+            {/* <div className="navbar-item">
             <Link href="/">
               <a className="button is-primary">Sign up</a>
             </Link>
           </div> */}
+          </div>
         </div>
-      </div>
-      </div>
+      </WidthWrapper>
     </nav>
   )
 }

packages/web/components/NavbarDocs.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+
+export default function Navbar() {
+
+  return (
+    <nav className="tabs m-none">
+      <ul>
+        <li className="is-active">
+          <Link href="/docs/packaged/getting-started">
+            <a className="">Packaged</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/docs/admin-api/getting-started">
+            <a className="">Admin API</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/realtime">
+            <a className="">Realtime</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/realtime">
+            <a className="">Rest</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/realtime">
+            <a className="">GraphQL</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/realtime">
+            <a className="">Baseless</a>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  )
+}

packages/web/components/SignUpForm.js

@@ -1,10 +1,10 @@
 export default function Footer() {
   return (
-    <form class="field is-grouped" name="contact" method="POST" data-netlify="true">
-      <p class="control is-expanded">
+    <form className="field is-grouped" name="contact" method="POST" data-netlify="true">
+      <p className="control is-expanded">
         <input className="input" type="email" name="email" placeholder="your@email.com" />
       </p>
-      <p class="control">
+      <p className="control">
         <button className="button is-primary" type="submit">
           Early Sign Up
         </button>

packages/web/components/WidthWrapper.js

@@ -0,0 +1,4 @@
+export default function WidthWrapper({ isFullwidth, children }) {
+  if (!isFullwidth) return <div class="section container p-b-none p-t-none">{children}</div>
+  else return <>{children}</>
+}

packages/web/components/layouts/DocsLayout.js

@@ -0,0 +1,35 @@
+import '~/styles/style.scss'
+import Navbar from '../Navbar'
+import NavbarDocs from '../NavbarDocs'
+import Footer from '../Footer'
+import Head from 'next/head'
+
+export default function DocsLayout(props) {
+  return (
+    <>
+      <Head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Supabase | Docs</title>
+        <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+      </Head>
+      <div className="">
+        <Navbar isFullwidth={true} />
+        <NavbarDocs />
+        <div className="columns m-none is-gapless">
+          <div className="DocsMenuColumn column is-narrow is-hidden-mobile" style={{ width: 250 }}>
+            <p class="menu-label">Documentation</p>
+            <ul class="menu-list">
+              <li><a class="">Manage Your Team</a></li>
+              <li><a class="is-active">Manage Your Team</a></li>
+              <li><a class="">Manage Your Team</a></li>
+            </ul>
+          </div>
+          <div className="column">{props.children}</div>
+        </div>
+
+        <Footer isFullwidth={true} />
+      </div>
+    </>
+  )
+}

packages/web/components/layouts/MainLayout.js

@@ -3,7 +3,7 @@ import Navbar from '../Navbar'
 import Footer from '../Footer'
 import Head from 'next/head'
 
-export default function MainLaout(props) {
+export default function MainLayout(props) {
   return (
     <>
       <Head>

packages/web/content/docs/admin-api/getting-started.mdx

@@ -0,0 +1,14 @@
+export const metadata = {
+  title: 'Admin API',
+  description: 'SQL is awesome, but sometimes you just want to use a technology you\'re familiar with.'
+}
+
+
+lorem ipsum
+
+### Somthing else
+
+
+
+
+lorem ipsum

packages/web/content/docs/admin-api/index.js

@@ -0,0 +1,4 @@
+import * as gettingStarted from './getting-started.mdx'
+export {
+  gettingStarted
+}

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

@@ -0,0 +1,4 @@
+export const metadata = {
+  title: 'Packaged PostgreSQL',
+  description: 'PostgreSQL is easy, but we want to make it even easier.'
+}

packages/web/content/docs/sidebars.js

@@ -0,0 +1,7 @@
+
+const sidebars = []
+
+sidebars['packaged'] = ['getting-started']
+sidebars['admin-api'] = ['getting-started']
+
+export default sidebars

packages/web/pages/docs.js

@@ -0,0 +1,13 @@
+// index.js
+import React from 'react'
+import Layout from '~/components/layouts/DocsLayout'
+// import MDXDocument, { metadata } from '~/pages/posts/post.mdx'
+
+export default () => (
+    <Layout>
+        <div className="content">
+          <h1>Docs</h1>
+          {/* <MDXDocument /> */}
+        </div>
+    </Layout>
+)

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

@@ -0,0 +1,40 @@
+import { useRouter } from 'next/router'
+import Layout from '~/components/layouts/DocsLayout'
+import Sidebars from '~/content/docs/sidebars'
+
+const importReducer = ctx => {
+  let keys = ctx.keys();
+  let values = keys.map(ctx);
+  return keys.reduce((o, k, i) => { o[k] = values[i]; return o; }, {});
+}
+
+let Docs = []
+Docs['packaged'] = importReducer(require.context('../../../content/docs/packaged', true, /.mdx$/));
+Docs['admin-api'] = importReducer(require.context('../../../content/docs/admin-api', true, /.mdx$/));
+
+
+export default function ProductDocs() {
+  const router = useRouter()
+  let { product, slug } = router.query
+  if (!product || !slug) return <div></div>
+
+  let sidebar = Sidebars[product]
+
+  const Doc = Docs[product][`./${slug}.mdx`]
+  const { metadata } = Doc
+  const { title, description } = metadata
+
+  return (
+    <Layout>
+      <div className="content">
+        <div className="has-background-dark p-md">
+          <h1 className="title">{title}</h1>
+          <p className="subtitle">{description}</p>
+        </div>
+        <div className="p-md">
+          <Doc.default />
+        </div>
+      </div>
+    </Layout>
+  )
+}

packages/web/pages/index.js

@@ -34,7 +34,7 @@ export default class Home extends React.Component {
               <a className="box deep-hover" style={{ height: '100%' }}>
                 <h4 className="title is-4">Restful</h4>
                 <p>
-                  Using introspection, Add a fully documented Restful API, without a line of code.
+                  Add a fully documented Restful API, simply by introspecting the schema.
                 </p>
               </a>
             </div>

packages/web/styles/style.scss

@@ -167,9 +167,6 @@ body {
 hr {
   border: 1px solid $border-color;
 }
-.navbar {
-  box-shadow: $shadow;
-}
 .navbar-item {
   a {
     color: $text;
@@ -239,6 +236,26 @@ h3.has-underline {
 .has-border-primary {
   border: 1px solid $primary !important;
 }
+.DocsMenuColumn {
+  border-right: 2px solid $border-color !important;
+
+  .menu-label {
+    padding: 1rem 1rem 0 1rem;
+  }
+  .menu-list {
+    li a {
+      border-radius: 0;
+      border-left: 3px solid $background;
+      color: $grey-200;
+
+      &.is-active {
+        background: none;
+        color: $text;
+        border-left: 3px solid $primary;
+      }
+    }
+  }
+}
 .button {
   text-shadow: $text-shallow;
   font-weight: bold;