dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adding sign up form

Browse Source
This commit is contained in:
Paul Copplestone committed 2019-10-12 14:33:00 +08:00
1 parent 1a374516de
commit ff6a1d1517
13 files changed
+88 -381
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+5 -1
View File
@@ -10,9 +10,13 @@
"yarn": "1.x"
},
"scripts": {
"build": "yarn run build:docs && yarn run build:web",
"build:docs": "yarn workspace @supabase/docs build",
"build:web": "yarn workspace @supabase/web build",
"dev": "concurrently --kill-others-on-fail \"yarn dev:web\" \"yarn dev:docs\" ",
"dev:docs": "yarn workspace @supabase/docs dev",
"dev:web": "yarn workspace @supabase/web dev"
"dev:web": "yarn workspace @supabase/web dev",
"static:web": "yarn workspace @supabase/web static"
},
"dependencies": {
"concurrently": "^5.0.0"
packages/web/babel.config.js
-1
View File
@@ -10,7 +10,6 @@ module.exports = function(api) {
root: ['./'],
alias: {
'~': '.',
'@base': '../..',
},
},
],
packages/web/components/Footer.js
+12 -4
View File
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import SignUpForm from '~/components/SignUpForm'
export default function Footer() {
return (
@@ -10,15 +11,22 @@ export default function Footer() {
<h3 className="title is-3 ">
<img src="/supabase-logo.svg" alt="Supabase" width="180" />
</h3>
<SignUpForm />
</div>
<div className="column">
<p>Link</p>
<p>Link</p>
<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>
<hr />
<div className="level">
<div className="level container">
<div className="level-left ">
<div className="level-item ">
<small className="has-text-weight-bold">© Supabase</small>
packages/web/components/Navbar.js
+9 -37
View File
@@ -6,6 +6,7 @@ export default function Navbar() {
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">
@@ -32,7 +33,7 @@ export default function Navbar() {
<div className="navbar-end p-r-sm">
{/* Plugins */}
<div className="navbar-item has-dropdown is-hoverable">
{/* <div className="navbar-item has-dropdown is-hoverable">
<span className="navbar-link">
Plugins
</span>
@@ -57,54 +58,25 @@ export default function Navbar() {
</span>
</a>
</div>
</div>
</div> */}
{/* Apps */}
<div className="navbar-item has-dropdown is-hoverable">
<span className="navbar-link">
Apps
</span>
<div className="navbar-dropdown is-boxed is-right">
<a className="navbar-item" href="">
<div className="navbar-content">
<h5 className="has-text-weight-bold">API</h5>
<p>Deploy a fully documented RestFUL API without a single bit of code.</p>
</div>
</a>
<a className="navbar-item" href="">
<div className="navbar-content">
<h5 className="has-text-weight-bold">GraphQL</h5>
<p>Deploy a fully documented GraphQL API without a single bit of code.</p>
</div>
</a>
<a className="navbar-item" href="">
<div className="navbar-content">
<h5 className="has-text-weight-bold">Forms</h5>
<p>Customisable, validated, embeddable forms that save data directly to your database.</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">
<a className="https://docs.supabase.io">Docs</a>
</div>
{/* <div className="navbar-item">
<Link href="/blog">
<a className="">Blog</a>
</Link>
</div>
</div> */}
<div className="navbar-item">
<Link href="/">
<a className="button is-primary">Subscribe</a>
<a className="button is-primary">Sign up</a>
</Link>
</div>
</div>
</div>
</div>
</nav>
)
}
packages/web/components/SignUpForm.js
+14
View File
@@ -0,0 +1,14 @@
export default function Footer() {
return (
<form class="field is-grouped" name="contact" method="POST" data-netlify="true">
<p class="control is-expanded">
<input className="input" type="email" name="email" placeholder="your@email.com" />
</p>
<p class="control">
<button className="button is-primary" type="submit">
Early Sign Up
</button>
</p>
</form>
)
}
packages/web/components/MainLayout.js → packages/web/components/layouts/MainLayout.js
+3 -4
View File
@@ -1,9 +1,8 @@
import '../styles/style.scss'
import Navbar from './Navbar'
import Footer from './Footer'
import '~/styles/style.scss'
import Navbar from '../Navbar'
import Footer from '../Footer'
import Head from 'next/head'
export default function MainLaout(props) {
return (
<>
packages/web/package.json
-3
View File
@@ -14,9 +14,6 @@
"@zeit/next-mdx": "^1.2.0",
"@zeit/next-sass": "^1.0.0",
"bulma": "^0.7.5",
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",
"mobx-state-tree": "^3.14.1",
"next": "^9.0.5-canary.2",
"node-sass": "^4.7.2",
"react": "^16.7.0",
packages/web/pages/_app.js
-43
View File
@@ -1,43 +0,0 @@
import React from 'react'
import { Provider } from 'mobx-react'
import { getSnapshot } from 'mobx-state-tree'
import App from 'next/app'
import { initializeStore } from '../stores/store'
export default class MyApp extends App {
static async getInitialProps ({ Component, ctx }) {
//
// Use getInitialProps as a step in the lifecycle when
// we can initialize our store
//
const isServer = typeof window === 'undefined'
const store = initializeStore(isServer)
//
// Check whether the page being rendered by the App has a
// static getInitialProps method and if so call it
//
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return {
initialState: getSnapshot(store),
isServer,
pageProps
}
}
constructor (props) {
super(props)
this.store = initializeStore(props.isServer, props.initialState)
}
render () {
const { Component, pageProps } = this.props
return (
<Provider store={this.store}>
<Component {...pageProps} />
</Provider>
)
}
}
packages/web/pages/blog.js
+2 -2
View File
@@ -1,7 +1,7 @@
// index.js
import React from 'react'
import MainLayout from '../components/MainLayout'
import MDXDocument, { metadata } from './posts/post.mdx'
import MainLayout from '~/components/layouts/MainLayout'
import MDXDocument, { metadata } from '~/pages/posts/post.mdx'
export default () => (
<>
<MainLayout>
packages/web/pages/index.js
+42 -73
View File
@@ -1,39 +1,41 @@
import MainLayout from '~/components/MainLayout'
import MainLayout from '~/components/layouts/MainLayout'
import Link from 'next/link'
import SignUpForm from '~/components/SignUpForm'
import { inject, observer } from 'mobx-react'
@inject('store')
@observer
export default class Home extends React.Component {
render() {
return (
<MainLayout>
<div className="hero">
<div className="hero-body">
<div className="columns">
<div className="column has-text-centered">
<h1 className="title is-1">Supabase</h1>
<p className="subtitle">Supercharge Postgres without a single line of code.</p>
</div>
<div className="section container">
<div className="columns">
<div className="column" style={{ maxWidth: 450 }}>
<h1 className="title is-1">Supabase</h1>
<p className="subtitle">Supercharge PostgreSQL.</p>
<SignUpForm />
</div>
</div>
</div>
<div className="section container m-b-lg">
<a name="pricing" id="pricing" />
<h3 className="title is-3 has-underline ">Apps</h3>
<h3 className="title is-3 has-underline ">Products</h3>
<p className="subtitle">
Extend your existing Postgres Database with opensource products.
</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>Subscribe to all changes to your database over websockets.</p>
<p>Listen to your database updates, inserts, and deletes over websockets.</p>
</a>
</div>
<div className="column is-4">
<a className="box deep-hover" style={{ height: '100%' }}>
<h4 className="title is-4">Restful API</h4>
<p>Add a fully documented Restful API, without a line of code.</p>
<h4 className="title is-4">Restful</h4>
<p>
Using introspection, Add a fully documented Restful API, without a line of code.
</p>
</a>
</div>
<div className="column is-4">
@@ -42,73 +44,40 @@ export default class Home extends React.Component {
<p>Add a fully documented GraphQL API, without a line of code.</p>
</a>
</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 database with a Restful API rather than SQL.</p>
</a>
</div>
<div className="column is-4">
<a className="box deep-hover" style={{ height: '100%' }}>
<h4 className="title is-4">Forms</h4>
<p>Embeddable and customizable forms, fully validated and secure. <span className="tag is-small">COMING SOON</span></p>
</a>
</div>
<div className="column is-4">
<a className="box deep-hover" style={{ height: '100%' }}>
<h4 className="title is-4">Dashboard</h4>
<p>Manage your database with a Restful API rather than SQL. <span className="tag is-small">COMING SOON</span></p>
</a>
</div>
</div>
</div>
<div className="section container m-b-lg">
<a name="pricing" id="pricing" />
<h3 className="title is-3 has-underline ">Pricing</h3>
<div className="columns has-text-centered">
<div className="column">
<Link href="/docs?page=hosting">
<a className="box">
<div className="title is-3">Free</div>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>
</a>
</Link>
</div>
<div className="column">
<a className="box">
<div className="title is-3">Free</div>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>
<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.
</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>
</div>
<div className="column">
<a className="box">
<div className="title is-3">Free</div>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>
<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>
</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>
</div>
</div>
</div>
<div className="section container">
<h3 className="title is-3 has-underline">Section title</h3>
<div className="content">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>
This is what a paragraph looks like with <a href="#">a linky link.</a>
</p>
</div>
</div>
</MainLayout>
packages/web/pages/plugin/[slug].js
-170
View File
@@ -1,170 +0,0 @@
import { useRouter } from 'next/router'
import Layout from '../../components/MainLayout'
import Link from 'next/link'
import { inject, observer } from 'mobx-react'
@inject('store')
@observer
export default class Site extends React.Component {
static async getInitialProps({ query }) {
return {
slug: query.slug,
}
}
constructor(props) {
super(props)
this.state = {
...this.props,
}
}
render() {
let { slug } = this.state
const Site = this.props.store.siteBySlug(slug)
return (
<Layout>
<div className="hero is-light is-large">
<div className="hero-body">Cover image</div>
</div>
<div className="container">
<div className="section">
<div className="columns">
<div className="column is-8">
<div className="content">
<h1 className="title is-1">{Site.name}</h1>
<Link href="/sites">
<a className="subtitle">{Site.location.name}</a>
</Link>
<span className="heading">Depth:</span>
<p>
{Site.min_depth}m - {Site.max_depth}m{' '}
</p>
<hr />
<p>{Site.blurb}</p>
</div>
<hr />
<div className="level">
<div className="level-left">
<div className="level-item has-flex-start">
<h4 className="title is-4">
34 Dives <Rating />
</h4>
</div>
</div>
<div className="level-right">
<div className="level-item">
<input
className="input is-fullwidth"
type="text"
placeholder="Search dives"
/>
</div>
</div>
</div>
<hr />
<div className="columns is-multiline">
<div className="column is-half">
<div className="half-and-half">
<div>Visibility</div>
<div>
<Rating />
</div>
</div>
</div>
<div className="column is-half">
<div className="half-and-half">
<div>Sealife</div>
<div>
<Rating />
</div>
</div>
</div>
<div className="column is-half">
<div className="half-and-half">
<div>Enjoyment</div>
<div>
<Rating />
</div>
</div>
</div>
<div className="column is-half">
<div className="half-and-half">
<div>Novelty</div>
<div>
<Rating />
</div>
</div>
</div>
</div>
<div>
<p className="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png" />
</p>
<strong>Barbara Middleton</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus,
nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor
blandit rutrum. Nunc in tempus turpis.
</p>
<small>
<a>Like</a> · 3 hrs
</small>
</div>
</div>
<div className="column">
<div className="box">
<button className="button is-fullwidth m-b-sm">
<span className="icon">
<i className="far fa-heart" />
</span>
<span>Save</span>
</button>
<button className="button is-fullwidth m-b-sm">
<span className="icon">
<i className="far fa-share-square" />
</span>
<span>Share</span>
</button>
<button className="button is-primary is-fullwidth">Log a dive</button>
</div>
</div>
</div>
</div>
</div>
</Layout>
)
}
}
@inject('store')
@observer
class Rating extends React.Component {
render() {
return (
<span className="Rating">
<span className="icon has-text-primary">
<i className="fas fa-star" />
</span>
<span className="icon has-text-primary">
<i className="fas fa-star" />
</span>
<span className="icon has-text-primary">
<i className="fas fa-star" />
</span>
<span className="icon has-text-primary">
<i className="fas fa-star" />
</span>
<span className="icon has-text-primary">
<i className="fas fa-star" />
</span>
</span>
)
}
}
packages/web/stores/store.js
-29
View File
@@ -1,29 +0,0 @@
import { types, applySnapshot } from 'mobx-state-tree'
let store = null
// const Plugin = types.model({
// id: types.string,
// slug: types.string,
// title: types.title,
// })
const Store = types
.model({
// Plugins: types.maybe(types.map(Plugin)),
})
.actions(self => {
return {}
})
.views(self => ({
pluginBySlug(slug) {
return Object.entries(self.Plugin).find(x => x.slug == slug)
},
}))
export function initializeStore(isServer, snapshot = null) {
if (isServer) store = Store.create({ })
if (store === null) store = Store.create({ })
if (snapshot) applySnapshot(store, snapshot)
return store
}
packages/web/styles/style.scss
+1 -14
View File
@@ -20,6 +20,7 @@ $grey-300: #7f7f7f;
$grey-200: #8f8f8f;
$grey-100: #eeeeee;
$background: $grey-900;
$background: $grey-900;
$border-color: $grey-400;
$primary: $green;
$link: $green;
@@ -239,9 +240,7 @@ h3.has-underline {
border: 1px solid $primary !important;
}
.button {
text-transform: uppercase;
text-shadow: $text-shallow;
font-size: 0.8em;
font-weight: bold;
&.is-primary {
// color: $background;
@@ -258,18 +257,6 @@ h3.has-underline {
color: $grey-200 !important;
border: 1px solid transparent;
}
&.is-medium {
font-size: 1rem;
padding-left: 1.5rem;
padding-right: 1.2rem;
}
}
.field.has-addons {
.button {
padding-top: 14.5px;
padding-bottom: 15px;
border: 1px solid $border-color;
}
}
pre {
background: $grey-700;