From 7479530c6725c919293f2712f818f972bb28564d Mon Sep 17 00:00:00 2001 From: Paul Copplestone Date: Mon, 14 Oct 2019 23:38:28 +0800 Subject: [PATCH] Adding in some docs --- packages/web/components/Footer.js | 72 +++++++++--------- packages/web/components/Navbar.js | 74 +++++++++---------- packages/web/components/NavbarDocs.js | 42 +++++++++++ packages/web/components/SignUpForm.js | 6 +- packages/web/components/WidthWrapper.js | 4 + packages/web/components/layouts/DocsLayout.js | 35 +++++++++ packages/web/components/layouts/MainLayout.js | 2 +- .../{pages/posts => content/blog}/post.mdx | 0 .../docs/admin-api/getting-started.mdx | 14 ++++ packages/web/content/docs/admin-api/index.js | 4 + .../content/docs/packaged/getting-started.mdx | 4 + packages/web/content/docs/sidebars.js | 7 ++ packages/web/pages/docs.js | 13 ++++ packages/web/pages/docs/[product]/[slug].js | 40 ++++++++++ packages/web/pages/index.js | 2 +- packages/web/styles/style.scss | 23 +++++- 16 files changed, 263 insertions(+), 79 deletions(-) create mode 100644 packages/web/components/NavbarDocs.js create mode 100644 packages/web/components/WidthWrapper.js create mode 100644 packages/web/components/layouts/DocsLayout.js rename packages/web/{pages/posts => content/blog}/post.mdx (100%) create mode 100644 packages/web/content/docs/admin-api/getting-started.mdx create mode 100644 packages/web/content/docs/admin-api/index.js create mode 100644 packages/web/content/docs/packaged/getting-started.mdx create mode 100644 packages/web/content/docs/sidebars.js create mode 100644 packages/web/pages/docs.js create mode 100644 packages/web/pages/docs/[product]/[slug].js diff --git a/packages/web/components/Footer.js b/packages/web/components/Footer.js index 7ebf43e803c..b8eeeb6939e 100644 --- a/packages/web/components/Footer.js +++ b/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 ( - ) } diff --git a/packages/web/components/Navbar.js b/packages/web/components/Navbar.js index e88b6d0c81d..d645885fcac 100644 --- a/packages/web/components/Navbar.js +++ b/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 ( ) } diff --git a/packages/web/components/NavbarDocs.js b/packages/web/components/NavbarDocs.js new file mode 100644 index 00000000000..9e7b4ac0fff --- /dev/null +++ b/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 ( + + ) +} diff --git a/packages/web/components/SignUpForm.js b/packages/web/components/SignUpForm.js index 695a8611761..b0541dc4a52 100644 --- a/packages/web/components/SignUpForm.js +++ b/packages/web/components/SignUpForm.js @@ -1,10 +1,10 @@ export default function Footer() { return ( -
-

+ +

-

+

diff --git a/packages/web/components/WidthWrapper.js b/packages/web/components/WidthWrapper.js new file mode 100644 index 00000000000..65ba13d0271 --- /dev/null +++ b/packages/web/components/WidthWrapper.js @@ -0,0 +1,4 @@ +export default function WidthWrapper({ isFullwidth, children }) { + if (!isFullwidth) return

{children}
+ else return <>{children} +} diff --git a/packages/web/components/layouts/DocsLayout.js b/packages/web/components/layouts/DocsLayout.js new file mode 100644 index 00000000000..10f68ba8e46 --- /dev/null +++ b/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 ( + <> + + + + Supabase | Docs + + +
+ + +
+
+

Documentation

+ +
+
{props.children}
+
+ +
+
+ + ) +} diff --git a/packages/web/components/layouts/MainLayout.js b/packages/web/components/layouts/MainLayout.js index a8797c63040..98b38345052 100644 --- a/packages/web/components/layouts/MainLayout.js +++ b/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 ( <> diff --git a/packages/web/pages/posts/post.mdx b/packages/web/content/blog/post.mdx similarity index 100% rename from packages/web/pages/posts/post.mdx rename to packages/web/content/blog/post.mdx diff --git a/packages/web/content/docs/admin-api/getting-started.mdx b/packages/web/content/docs/admin-api/getting-started.mdx new file mode 100644 index 00000000000..dee50691c6b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/packages/web/content/docs/admin-api/index.js b/packages/web/content/docs/admin-api/index.js new file mode 100644 index 00000000000..6f79c39a9d0 --- /dev/null +++ b/packages/web/content/docs/admin-api/index.js @@ -0,0 +1,4 @@ +import * as gettingStarted from './getting-started.mdx' +export { + gettingStarted +} \ No newline at end of file diff --git a/packages/web/content/docs/packaged/getting-started.mdx b/packages/web/content/docs/packaged/getting-started.mdx new file mode 100644 index 00000000000..41fb54985b1 --- /dev/null +++ b/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.' +} diff --git a/packages/web/content/docs/sidebars.js b/packages/web/content/docs/sidebars.js new file mode 100644 index 00000000000..27b8df0ce96 --- /dev/null +++ b/packages/web/content/docs/sidebars.js @@ -0,0 +1,7 @@ + +const sidebars = [] + +sidebars['packaged'] = ['getting-started'] +sidebars['admin-api'] = ['getting-started'] + +export default sidebars \ No newline at end of file diff --git a/packages/web/pages/docs.js b/packages/web/pages/docs.js new file mode 100644 index 00000000000..44f2d8eed6e --- /dev/null +++ b/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 () => ( + +
+

Docs

+ {/* */} +
+ +) diff --git a/packages/web/pages/docs/[product]/[slug].js b/packages/web/pages/docs/[product]/[slug].js new file mode 100644 index 00000000000..8f5e4c22cbd --- /dev/null +++ b/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
+ + let sidebar = Sidebars[product] + + const Doc = Docs[product][`./${slug}.mdx`] + const { metadata } = Doc + const { title, description } = metadata + + return ( + +
+
+

{title}

+

{description}

+
+
+ +
+
+ + ) +} diff --git a/packages/web/pages/index.js b/packages/web/pages/index.js index fa6abaaad1c..db7c9894844 100644 --- a/packages/web/pages/index.js +++ b/packages/web/pages/index.js @@ -34,7 +34,7 @@ export default class Home extends React.Component {

Restful

- Using introspection, Add a fully documented Restful API, without a line of code. + Add a fully documented Restful API, simply by introspecting the schema.

diff --git a/packages/web/styles/style.scss b/packages/web/styles/style.scss index 2e2cdb19287..1093fdb0ea4 100644 --- a/packages/web/styles/style.scss +++ b/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;