Removing docz

2019-10-15 16:27:34 +08:00
parent e2e9af2283
commit 212df49b7a
14 changed files with 146 additions and 112 deletions
--- a/packages/docs/doczrc.js
+++ b/packages/docs/doczrc.js
@@ -1,31 +0,0 @@
-export default {
-  title: 'Supabase',
-  description: 'Supercharge your database.',
-  // src: 'pages',
-  // files: 'pages/**/*.mdx',
-  // propsParser: false,
-  // codeSandbox: false,
-  htmlContext: {
-    head: {
-      links: [
-        {
-          rel: 'stylesheet',
-          href: 'https://codemirror.net/theme/blackboard.css',
-        },
-      ],
-    },
-  },
-  menu: ['Supabase', 'Realtime', 'Documents'],
-  themeConfig: {
-    mode: 'dark',
-    codemirrorTheme: 'blackboard',
-    showPlaygroundEditor: false,
-    linesToScrollEditor: 50,
-    colors: {
-      codeColor: '#8DB6DE',
-      codeBg: '#0C1021',
-      blockquoteColor: '#8DB6DE',
-      blockquoteBg: '#0C1021',
-    },
-  },
-}
--- a/packages/docs/netlify.toml
+++ b/packages/docs/netlify.toml
@@ -1,5 +0,0 @@
-# COMMENT: This a rule for Single Page Applications as Docz site is one
-[[redirects]]
-  from = "/*"
-  to = "/"
-  status = 200
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,16 +0,0 @@
-{
-  "name": "@supabase/docs",
-  "version": "0.1.0",
-  "scripts": {
-    "dev": "docz dev --port=3005",
-    "build": "docz build"
-  },
-  "dependencies": {
-    "docz": "^2.0.0-rc.55",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
-  },
-  "devDependencies": {
-    "docz-theme-default": "^1.2.0"
-  }
-}
--- a/packages/docs/pages/hello.mdx
+++ b/packages/docs/pages/hello.mdx
@@ -1,9 +0,0 @@
---
-name: Getting Started
-route: /
-menu: Supabase
---
-
-# Supabase
-
-Hello, I'm a mdx file!
--- a/packages/docs/pages/realtime/getting-started.mdx
+++ b/packages/docs/pages/realtime/getting-started.mdx
@@ -1,9 +0,0 @@
---
-name: Getting Started
-route: /realtime/
-menu: Realtime
---
-
-# Realtime
-
-Hello, I'm a mdx file!
--- a/packages/docs/pages/test-page.mdx
+++ b/packages/docs/pages/test-page.mdx
@@ -1,8 +0,0 @@
---
-name: Test Page
-menu: Documents
---
-
-# Test Page
-
-Hello, I'm another mdx file!
--- a/packages/web/components/NavbarDocs.js
+++ b/packages/web/components/NavbarDocs.js
@@ -2,10 +2,16 @@ 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-hidden-tablet">
+          <a>
+          <span class="icon">
+            <i class="fas fa-bars"></i>
+          </span>
+          </a>
+        </li>
        <li className="is-active">
          <Link href="/docs/packaged/getting-started">
            <a className="">Packaged</a>
@@ -17,7 +23,7 @@ export default function Navbar() {
          </Link>
        </li>
        <li>
-          <Link href="/realtime">
+          <Link href="/docs/realtime/getting-started">
            <a className="">Realtime</a>
          </Link>
        </li>
--- a/packages/web/components/layouts/DocsLayout.js
+++ b/packages/web/components/layouts/DocsLayout.js
@@ -5,6 +5,7 @@ import Footer from '../Footer'
 import Head from 'next/head'

 export default function DocsLayout(props) {
+  const { sidebar } = props
  return (
    <>
      <Head>
@@ -15,12 +16,7 @@ export default function DocsLayout(props) {
        <NavbarDocs />
        <div className="columns m-none is-gapless">
          <div className="DocsMenuColumn column is-narrow is-hidden-mobile" style={{ width: 250 }}>
-            <p className="menu-label">Documentation</p>
-            <ul className="menu-list">
-              <li><a className="">Manage Your Team</a></li>
-              <li><a className="is-active">Manage Your Team</a></li>
-              <li><a className="">Manage Your Team</a></li>
-            </ul>
+            {Sidebar(sidebar)}
          </div>
          <div className="column">{props.children}</div>
        </div>
@@ -30,3 +26,20 @@ export default function DocsLayout(props) {
    </>
  )
 }
+
+const Sidebar = sidebar => {
+  return Object.entries(sidebar).map(([heading, pages]) => {
+    return (
+      <>
+        <p className="menu-label">{heading}</p>
+        <ul className="menu-list">{pages.map(x => SidebarLink(x))}</ul>
+      </>
+    )
+  })
+}
+
+const SidebarLink = page => (
+  <li>
+    <a className="">{page.title}</a>
+  </li>
+)
--- a/packages/web/content/docs/packaged/getting-started.mdx
+++ b/packages/web/content/docs/packaged/getting-started.mdx
@@ -1,4 +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 want to make it even easier.',
+  sidebarLabel: 'Getting Started'
 }
--- a/packages/web/content/docs/realtime/getting-started.mdx
+++ b/packages/web/content/docs/realtime/getting-started.mdx
@@ -0,0 +1,10 @@
+export const metadata = {
+  title: 'Realtime',
+  description: 'Listen to your database updates, inserts, and deletes over websockets.'
+}
+
+
+# Hello world
+
+
+FOo bAr
--- a/packages/web/content/docs/sidebars.js
+++ b/packages/web/content/docs/sidebars.js
@@ -1,7 +0,0 @@
-
-const sidebars = []
-
-sidebars['packaged'] = ['getting-started']
-sidebars['admin-api'] = ['getting-started']
-
-export default sidebars
--- a/packages/web/pages/docs/[product]/[slug].js
+++ b/packages/web/pages/docs/[product]/[slug].js
@@ -1,40 +1,88 @@
 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 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$/));
+// Import all docs
+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$/))

+// Set up all sidebars
+var Sidebars = []
+Sidebars['packaged'] = {
+  documentation: ['getting-started'],
+}
+Sidebars['admin-api'] = {
+  documentation: ['getting-started'],
+}
+Sidebars['realtime'] = {
+  documentation: ['getting-started'],
+}

 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 productDocs = Docs[product]
+  const productSidebar = enrichSidebar(Sidebars[product], productDocs)
+  const documentation = productDocs[`./${slug}.mdx`]
+  const Content = documentation.default
+  const { metadata } = documentation
  const { title, description } = metadata

  return (
-    <Layout>
-      <div className="content">
-        <div className="has-background-dark p-md">
+    <Layout sidebar={productSidebar} category>
+      <div className="has-background-dark">
+        <div className="content w-m-800 p-md p-t-xl p-b-xl">
          <h1 className="title">{title}</h1>
          <p className="subtitle">{description}</p>
        </div>
-        <div className="p-md">
-          <Doc.default />
-        </div>
+      </div>
+      <div className="content w-m-800 p-md">
+        <Content />
+      </div>
+      <div className="w-m-800 p-md p-b-lg">
+        <nav className="columns reverse-row-order">
+          <div className="column ">
+            <a className="box p-md">
+              <p className="heading has-text-grey">Next</p>
+              <p className="">Some post</p>
+            </a>
+          </div>
+          <div className="column is-hidden-mobile "></div>
+          <div className="column">
+            <a className="box p-md has-text-right">
+              <p className="heading has-text-grey">Previous</p>
+              <p className="">Some post</p>
+            </a>
+          </div>
+        </nav>
      </div>
    </Layout>
  )
 }
+
+/**
+ * Fills the sidebar array with relevant metadata,
+ */
+const enrichSidebar = (sidebar, productDocs) => {
+  return Object.keys(sidebar).reduce((acc, heading) => {
+    acc[heading] = sidebar[heading].map(slug => {
+      const documentation = productDocs[`./${slug}.mdx`]
+      const { metadata } = documentation
+      const { title, sidebarLabel } = metadata
+      return { slug, title: sidebarLabel || title }
+    })
+    return acc
+  }, {})
+}
--- a/packages/web/pages/index.js
+++ b/packages/web/pages/index.js
@@ -51,7 +51,7 @@ 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/packages/web/styles/style.scss
+++ b/packages/web/styles/style.scss
@@ -101,6 +101,10 @@ $dropdown-item-active-color: $background;
 $menu-item-hover-color: $primary;
 $menu-item-active-color: $text-invert;

+// Menu
+$tabs-border-bottom-color: $border-color;
+$tabs-link-color: $grey-200;
+
 // Import only what you need from Bulma
@import '../node_modules/bulma/bulma.sass';

@@ -147,6 +151,37 @@ $positions: (('t', 'top'), ('r', 'right'), ('b', 'bottom'), ('l', 'left'));
 }
 // end spacing

+
+$widths: (
+  ('100', 100),
+  ('200', 200),
+  ('300', 300),
+  ('400', 400),
+  ('500', 500),
+  ('600', 600),
+  ('700', 700),
+  ('800', 800),
+  ('900', 900),
+  ('1000', 1000),
+  ('1100', 1100),
+  ('1200', 1200),
+);
+
+
+@each $width in $widths {
+  $widthKey: nth($width, 1);
+  $widthValue: nth($width, 2);
+  .w-#{$widthKey} {
+    width: #{$widthValue}px !important;
+    margin: 0 auto;
+  }
+  // Set max widths
+  .w-m-#{$widthKey} {
+    max-width: #{$widthValue}px !important;
+    margin: 0 auto;
+  }
+}
+
 //
 // Custom CSS
 //
@@ -298,4 +333,10 @@ code {
  &:hover {
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.5), 0 0 0 1px $primary !important;
  }
+}
+@media only screen and (min-width: 769px) {
+  .reverse-row-order {
+    display: flex;
+    flex-direction: row-reverse;
+  }
 }