mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Init monorepo
This commit is contained in:
Paul Copplestone committed
commit
1a374516de
26 files changed
+17639
No files matched your search
+95
@@ -0,0 +1,95 @@
|
||||
DS_Store
|
||||
node_modules
|
||||
.next
|
||||
out
|
||||
.docz
|
||||
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
@@ -0,0 +1,5 @@
|
||||
.expo
|
||||
.next
|
||||
node_modules
|
||||
package-lock.json
|
||||
docker*
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
# Supabase
|
||||
|
||||
Supercharge your database.
|
||||
|
||||
## Development
|
||||
|
||||
This is monorepo. As much as we love `npm`, we have decided to use `yarn` to manage the separate workspaces.
|
||||
|
||||
```sh
|
||||
yarn # installs all dependencies for all workspaces.
|
||||
yarn workspaces dev # runs "dev" command in all workspaces.
|
||||
yarn workspace @supabase/web dev # runs "dev" command in the "web" workspace.
|
||||
|
||||
yarn workspace @supabase/web add package # installs "package" in the "web" workspace
|
||||
yarn workspace @supabase/web remove package # removes "package" in the "web" workspace
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "supabase-monorepo",
|
||||
"private": true,
|
||||
"description": "Supabase Monorepo",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=10.15.1",
|
||||
"yarn": "1.x"
|
||||
},
|
||||
"scripts": {
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"concurrently": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^1.18.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
themeConfig: {
|
||||
mode: 'dark',
|
||||
codemirrorTheme: 'blackboard',
|
||||
showPlaygroundEditor: false,
|
||||
linesToScrollEditor: 50,
|
||||
colors: {
|
||||
codeColor: '#8DB6DE',
|
||||
codeBg: '#0C1021',
|
||||
blockquoteColor: '#8DB6DE',
|
||||
blockquoteBg: '#0C1021',
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
name: Hello world
|
||||
route: /
|
||||
menu: Documents
|
||||
---
|
||||
|
||||
# Hello world
|
||||
|
||||
Hello, I'm a mdx file!
|
||||
@@ -0,0 +1,10 @@
|
||||
# Supabase
|
||||
|
||||
Landing page for [supabase.io](supabase.io).
|
||||
|
||||
|
||||
## Deployment
|
||||
|
||||
This site is deployed as a STATIC site on Netlify. This means that pages must be listed in `next.config.js`. To update the site on Netlify, just push to `master`.
|
||||
|
||||
See the [NextJS](https://nextjs.org/learn/excel/static-html-export/exporting-other-pages) docs for more details.
|
||||
@@ -0,0 +1,19 @@
|
||||
module.exports = function(api) {
|
||||
api.cache(true)
|
||||
return {
|
||||
presets: ['next/babel'],
|
||||
plugins: [
|
||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
||||
[
|
||||
'module-resolver',
|
||||
{
|
||||
root: ['./'],
|
||||
alias: {
|
||||
'~': '.',
|
||||
'@base': '../..',
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Footer() {
|
||||
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>
|
||||
</div>
|
||||
<div className="column">
|
||||
<p>Link</p>
|
||||
<p>Link</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="level">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import '../styles/style.scss'
|
||||
import Navbar from './Navbar'
|
||||
import Footer from './Footer'
|
||||
import Head from 'next/head'
|
||||
|
||||
|
||||
export default function MainLaout(props) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Supabase</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
|
||||
</Head>
|
||||
<div className="">
|
||||
<Navbar />
|
||||
{props.children}
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function Navbar() {
|
||||
const [mobileActive, setMobileActive] = useState(false)
|
||||
|
||||
return (
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<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>
|
||||
</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">
|
||||
<span className="navbar-link">
|
||||
Plugins
|
||||
</span>
|
||||
<div className="navbar-dropdown is-boxed is-right">
|
||||
<a className="navbar-item" href="">
|
||||
<div className="navbar-content">
|
||||
<h5 className="has-text-weight-bold">PostGIS</h5>
|
||||
<p>Supercharge your database to work with locations and geographies.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a className="navbar-item" href="">
|
||||
<div className="navbar-content">
|
||||
<h5 className="has-text-weight-bold">Timescale</h5>
|
||||
<p>Supercharge your database to work with time series data.</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>
|
||||
|
||||
{/* 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">
|
||||
<Link href="/blog">
|
||||
<a className="">Blog</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="navbar-item">
|
||||
<Link href="/">
|
||||
<a className="button is-primary">Subscribe</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
const withSass = require('@zeit/next-sass')
|
||||
const withMDX = require('@zeit/next-mdx')({
|
||||
// parse mdx files
|
||||
extension: /\.mdx?$/,
|
||||
// options: {
|
||||
// mdPlugins: [images, emoji]
|
||||
// }
|
||||
})
|
||||
module.exports = withSass(
|
||||
withMDX({
|
||||
experimental: { publicDirectory: true },
|
||||
exportPathMap: function() {
|
||||
return {
|
||||
'/': { page: '/' },
|
||||
'/blog': { page: '/blog' },
|
||||
}
|
||||
},
|
||||
})
|
||||
)
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "@supabase/web",
|
||||
"version": "0.1.0",
|
||||
"description": "Supabase Main Website",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "next export",
|
||||
"static": "next build && next export"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdx-js/loader": "^1.3.1",
|
||||
"@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",
|
||||
"react-dom": "^16.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-decorators": "^7.4.4",
|
||||
"babel-plugin-module-resolver": "^3.2.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
export default class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// index.js
|
||||
import React from 'react'
|
||||
import MainLayout from '../components/MainLayout'
|
||||
import MDXDocument, { metadata } from './posts/post.mdx'
|
||||
export default () => (
|
||||
<>
|
||||
<MainLayout>
|
||||
<div className="section container">
|
||||
<div className="content">
|
||||
<MDXDocument />
|
||||
</div>
|
||||
</div>
|
||||
</MainLayout>
|
||||
</>
|
||||
)
|
||||
@@ -0,0 +1,117 @@
|
||||
import MainLayout from '~/components/MainLayout'
|
||||
import Link from 'next/link'
|
||||
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section container m-b-lg">
|
||||
<a name="pricing" id="pricing" />
|
||||
<h3 className="title is-3 has-underline ">Apps</h3>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
<div className="column">
|
||||
<a className="box">
|
||||
<div className="title is-3">Free</div>
|
||||
<ul>
|
||||
<li>Feature</li>
|
||||
<li>Feature</li>
|
||||
</ul>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# Hello World
|
||||
|
||||
This is a sample blog post, using markdown.
|
||||
|
||||
I also has a [link to the homepage](/)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,16 @@
|
||||
<svg width="2489" height="512" viewBox="0 0 2489 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="512" height="512" rx="100" fill="white"/>
|
||||
<rect x="41" y="41" width="430" height="430" rx="80" fill="#1F1F1F"/>
|
||||
<path d="M286.909 92.4831C286.909 85.5889 281.322 80 274.431 80C271.004 80 267.9 81.382 265.645 83.6192L263.912 85.548L167.675 215.658H263.18L286.429 96.0055L286.853 93.6682C286.89 93.2781 286.909 92.8828 286.909 92.4831Z" fill="#3ECF8E"/>
|
||||
<path d="M133 269.336C133 280.366 141.939 289.308 152.965 289.308L153.053 289.308H248.87L263.18 215.658H167.675L138.736 254.783L136.872 257.512C134.438 260.822 133 264.911 133 269.336Z" fill="#3ECF8E"/>
|
||||
<path d="M378 235.631C378 224.6 369.061 215.658 358.035 215.658H357.245H263.18L248.87 289.308H343.202L373.604 248.205L374.817 246.455C376.831 243.337 378 239.62 378 235.631Z" fill="#3ECF8E"/>
|
||||
<path d="M225.533 410.517C225.533 417.411 231.119 423 238.011 423C241.706 423 245.027 421.393 247.311 418.839L247.803 418.285L343.202 289.308H248.87L225.985 407.089L225.924 407.405C225.668 408.4 225.533 409.443 225.533 410.517Z" fill="#3ECF8E"/>
|
||||
<path d="M225.533 410.517C225.533 417.411 231.119 423 238.011 423C241.706 423 245.027 421.393 247.311 418.839L247.803 418.285L343.202 289.308H248.87L225.985 407.089L225.924 407.405C225.668 408.4 225.533 409.443 225.533 410.517Z" fill="url(#paint0_linear)"/>
|
||||
<path d="M915.2 183C908.8 151 882.4 109.4 813.6 109.4C760 109.4 714.8 147.8 714.8 198.2C714.8 241 744 270.2 789.2 279.4L828.8 287.4C850.8 291.8 863.2 304.6 863.2 321C863.2 341 846.8 355.8 817.2 355.8C777.2 355.8 757.6 330.6 755.2 302.6L704 316.2C708.4 356.6 741.6 405 816.8 405C882.8 405 919.2 361 919.2 317.4C919.2 277.4 891.6 243.8 840 233.8L800.4 226.2C779.6 222.2 769.6 209.8 769.6 194.2C769.6 175.4 787.2 158.2 814 158.2C850 158.2 862.8 182.6 865.6 198.2L915.2 183ZM1085.53 399H1136.33C1135.53 392.2 1134.33 378.6 1134.33 363.4V202.2H1081.13V316.6C1081.13 339.4 1067.53 355.4 1043.93 355.4C1019.13 355.4 1007.93 337.8 1007.93 315.8V202.2H954.728V326.6C954.728 369.4 981.928 404.2 1029.53 404.2C1050.33 404.2 1073.13 396.2 1083.93 377.8C1083.93 385.8 1084.73 395 1085.53 399ZM1244.3 475V379.8C1253.9 393 1273.9 403.8 1301.1 403.8C1356.7 403.8 1393.9 359.8 1393.9 300.2C1393.9 241.8 1360.7 197.8 1303.1 197.8C1273.5 197.8 1251.5 211 1242.7 226.2V202.2H1191.1V475H1244.3ZM1341.5 300.6C1341.5 335.8 1319.9 356.2 1292.7 356.2C1265.5 356.2 1243.5 335.4 1243.5 300.6C1243.5 265.8 1265.5 245.4 1292.7 245.4C1319.9 245.4 1341.5 265.8 1341.5 300.6ZM1424.03 345.4C1424.03 376.2 1449.63 404.6 1491.63 404.6C1520.83 404.6 1539.63 391 1549.63 375.4C1549.63 383 1550.43 393.8 1551.63 399H1600.43C1599.23 392.2 1598.03 378.2 1598.03 367.8V271C1598.03 231.4 1574.83 196.2 1512.43 196.2C1459.63 196.2 1431.23 230.2 1428.03 261L1475.23 271C1476.83 253.8 1489.63 239 1512.83 239C1535.23 239 1546.03 250.6 1546.03 264.6C1546.03 271.4 1542.43 277 1531.23 278.6L1482.83 285.8C1450.03 290.6 1424.03 310.2 1424.03 345.4ZM1502.83 365C1485.63 365 1477.23 353.8 1477.23 342.2C1477.23 327 1488.03 319.4 1501.63 317.4L1546.03 310.6V319.4C1546.03 354.2 1525.22 365 1502.83 365ZM1703.25 399V375C1713.65 391.8 1734.45 403.8 1761.65 403.8C1817.65 403.8 1854.45 359.4 1854.45 299.8C1854.45 241.4 1821.25 197 1763.65 197C1734.45 197 1712.85 209.8 1704.05 223.8V109.4H1651.65V399H1703.25ZM1801.25 300.2C1801.25 336.2 1779.65 356.2 1752.45 356.2C1725.65 356.2 1703.25 335.8 1703.25 300.2C1703.25 264.2 1725.65 244.6 1752.45 244.6C1779.65 244.6 1801.25 264.2 1801.25 300.2ZM1884.57 345.4C1884.57 376.2 1910.17 404.6 1952.17 404.6C1981.37 404.6 2000.17 391 2010.17 375.4C2010.17 383 2010.97 393.8 2012.17 399H2060.97C2059.77 392.2 2058.57 378.2 2058.57 367.8V271C2058.57 231.4 2035.37 196.2 1972.97 196.2C1920.17 196.2 1891.77 230.2 1888.57 261L1935.77 271C1937.37 253.8 1950.17 239 1973.37 239C1995.77 239 2006.57 250.6 2006.57 264.6C2006.57 271.4 2002.97 277 1991.77 278.6L1943.37 285.8C1910.57 290.6 1884.57 310.2 1884.57 345.4ZM1963.37 365C1946.17 365 1937.77 353.8 1937.77 342.2C1937.77 327 1948.57 319.4 1962.17 317.4L2006.57 310.6V319.4C2006.57 354.2 1985.77 365 1963.37 365ZM2095.4 344.2C2097.8 366.6 2118.2 405 2177.4 405C2229 405 2253.8 372.2 2253.8 340.2C2253.8 311.4 2234.2 287.8 2195.4 279.8L2167.4 273.8C2156.6 271.8 2149.4 265.8 2149.4 256.2C2149.4 245 2160.6 236.6 2174.6 236.6C2197 236.6 2205.4 251.4 2207 263L2251.4 253C2249 231.8 2230.2 196.2 2174.2 196.2C2131.8 196.2 2100.6 225.4 2100.6 260.6C2100.6 288.2 2117.8 311 2155.8 319.4L2181.8 325.4C2197 328.6 2203 335.8 2203 344.6C2203 355 2194.6 364.2 2177 364.2C2153.8 364.2 2142.2 349.8 2141 334.2L2095.4 344.2ZM2334.59 278.2C2335.79 260.2 2350.99 239.4 2378.59 239.4C2408.99 239.4 2421.79 258.6 2422.59 278.2H2334.59ZM2427.79 329.4C2421.39 347 2407.79 359.4 2382.99 359.4C2356.59 359.4 2334.59 340.6 2333.39 314.6H2474.19C2474.19 313.8 2474.99 305.8 2474.99 298.2C2474.99 235 2438.59 196.2 2377.79 196.2C2327.39 196.2 2280.99 237 2280.99 299.8C2280.99 366.2 2328.59 405 2382.59 405C2430.99 405 2462.19 376.6 2472.19 342.6L2427.79 329.4Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="304" y1="301" x2="235" y2="423" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#23915F"/>
|
||||
<stop offset="1" stop-color="#3ECF8E" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,29 @@
|
||||
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
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
@charset "utf-8";
|
||||
@import url(https://cdn.rawgit.com/kiwicopple/quick-font/master/css/circular.css);
|
||||
@import url(https://use.fontawesome.com/releases/v5.6.3/css/all.css);
|
||||
|
||||
/// BULMA
|
||||
|
||||
// Set your brand colors
|
||||
// $green: #45d092;
|
||||
$green: #45d092;
|
||||
$blue: #0069FF;
|
||||
$yellow: #F8C945;
|
||||
$orange: #EC6E2D;
|
||||
$grey-900: #1f1f1f;
|
||||
$grey-800: #2a2a2a;
|
||||
$grey-700: #3b3b3b;
|
||||
$grey-600: #4c4c4c;
|
||||
$grey-500: #5e5e5e;
|
||||
$grey-400: #6f6f6f;
|
||||
$grey-300: #7f7f7f;
|
||||
$grey-200: #8f8f8f;
|
||||
$grey-100: #eeeeee;
|
||||
$background: $grey-900;
|
||||
$border-color: $grey-400;
|
||||
$primary: $green;
|
||||
$link: $green;
|
||||
|
||||
$shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
|
||||
$shadow-shallow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
|
||||
$text-shallow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
// Typography
|
||||
$family-sans-serif: 'Circular', BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial',
|
||||
sans-serif;
|
||||
$body-size: 0.9rem;
|
||||
|
||||
$text: $grey-100;
|
||||
$text-light: $grey-100;
|
||||
$text-strong: $grey-100;
|
||||
$title-color: $text;
|
||||
$subtitle-color: $text;
|
||||
$text-invert: $grey-900;
|
||||
|
||||
$link: $primary;
|
||||
$link-invert: $text;
|
||||
$link-hover: $text;
|
||||
$link-visited: $primary;
|
||||
// $link-hover-border: $grey-100;
|
||||
// $link-focus: $grey-100;
|
||||
// $link-focus-border: $grey-100;
|
||||
// $link-active: $grey-100;
|
||||
// $link-active-border: $grey-100;
|
||||
|
||||
// Navbar
|
||||
$navbar-background-color: $background;
|
||||
$navbar-item-color: $text;
|
||||
$navbar-item-hover-color: $primary;
|
||||
$navbar-item-hover-background-color: $background;
|
||||
$navbar-dropdown-background-color: $grey-800;
|
||||
$navbar-dropdown-item-hover-color: $primary;
|
||||
$navbar-dropdown-boxed-shadow: $shadow;
|
||||
$navbar-dropdown-arrow: $text;
|
||||
$navbar-divider-background-color: $border-color;
|
||||
|
||||
// Footer
|
||||
$footer-background-color: $background;
|
||||
|
||||
// Forms
|
||||
$input-background-color: $background;
|
||||
$input-color: $text;
|
||||
$input-border-color: $border-color;
|
||||
$label-color: $text;
|
||||
|
||||
// Buttons
|
||||
$button-color: $text;
|
||||
$button-background-color: $background;
|
||||
$button-border-color: $border-color;
|
||||
$button-hover-color: $text;
|
||||
|
||||
// Box
|
||||
$box-background-color: $grey-800;
|
||||
$box-color: #fff;
|
||||
$box-shadow: $shadow-shallow;
|
||||
|
||||
// Modal
|
||||
$modal-card-body-background-color: $background;
|
||||
$modal-card-title-color: $text;
|
||||
.modal-card-head,
|
||||
.modal-card-foot {
|
||||
background: $background !important;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
$dropdown-content-background-color: $grey-600;
|
||||
$dropdown-item-color: $text;
|
||||
$dropdown-item-hover-color: $text;
|
||||
$dropdown-item-active-color: $background;
|
||||
|
||||
// Menu
|
||||
$menu-item-hover-color: $primary;
|
||||
$menu-item-active-color: $text-invert;
|
||||
|
||||
// Import only what you need from Bulma
|
||||
@import '../../../node_modules/bulma/bulma.sass';
|
||||
// @import '@base/node_modules/bulma/bulma.sass';
|
||||
|
||||
// SPACING CSS - see usage: https://github.com/jgthms/bulma/issues/451#issuecomment-331758839
|
||||
$sizeUnit: rem;
|
||||
$marginKey: 'm';
|
||||
$paddingKey: 'p';
|
||||
$separator: '-';
|
||||
$sizes: (
|
||||
('none', 0),
|
||||
('xxs', 0.125),
|
||||
('xs', 0.25),
|
||||
('sm', 0.5),
|
||||
('md', 1),
|
||||
('lg', 2),
|
||||
('xl', 4),
|
||||
('xxl', 8)
|
||||
);
|
||||
$positions: (('t', 'top'), ('r', 'right'), ('b', 'bottom'), ('l', 'left'));
|
||||
|
||||
@function sizeValue($key, $value) {
|
||||
@return if($key == 'none', 0, $value + $sizeUnit);
|
||||
}
|
||||
|
||||
@each $size in $sizes {
|
||||
$sizeKey: nth($size, 1);
|
||||
$sizeValue: nth($size, 2);
|
||||
.#{$marginKey}#{$separator}#{$sizeKey} {
|
||||
margin: sizeValue($sizeKey, $sizeValue) !important;
|
||||
}
|
||||
.#{$paddingKey}#{$separator}#{$sizeKey} {
|
||||
padding: sizeValue($sizeKey, $sizeValue) !important;
|
||||
}
|
||||
@each $position in $positions {
|
||||
$posKey: nth($position, 1);
|
||||
$posValue: nth($position, 2);
|
||||
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
|
||||
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
|
||||
}
|
||||
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
|
||||
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// end spacing
|
||||
|
||||
//
|
||||
// Custom CSS
|
||||
//
|
||||
html,
|
||||
body {
|
||||
background: $background;
|
||||
color: $text;
|
||||
}
|
||||
::selection {
|
||||
background: $primary;
|
||||
color: $text-invert;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: $primary;
|
||||
color: $text-invert;
|
||||
}
|
||||
hr {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
.navbar {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
.navbar-item {
|
||||
a {
|
||||
color: $text;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
box-shadow: inset 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.has-flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.has-flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.half-and-half {
|
||||
overflow: auto;
|
||||
div {
|
||||
width: 50% !important;
|
||||
float: left;
|
||||
}
|
||||
div:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
table tr th,
|
||||
p,
|
||||
strong {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: inset 0 -3px 0 -1px $primary;
|
||||
transition: box-shadow .15s ease-in-out;
|
||||
color: $text;
|
||||
padding-bottom: 2px;
|
||||
&:hover {
|
||||
box-shadow: inset 0 -30px 0 -1px $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
hr.is-title-accent {
|
||||
margin-top: 5px;
|
||||
max-width: 100px;
|
||||
}
|
||||
h1.has-underline,
|
||||
h2.has-underline,
|
||||
h3.has-underline {
|
||||
&::after {
|
||||
content: '\2501';
|
||||
display: block;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.has-shadow {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
.has-border-primary {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
.button {
|
||||
text-transform: uppercase;
|
||||
text-shadow: $text-shallow;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
&.is-primary {
|
||||
// color: $background;
|
||||
&.has-shadow {
|
||||
box-shadow: 1px 1px 5px 5px rgba($primary, 0);
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
&:hover {
|
||||
color: $background;
|
||||
box-shadow: 1px 1px 5px 5px rgba($primary, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-dark {
|
||||
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;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
padding: 0px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
code {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
white-space: pre;
|
||||
background: $grey-700;
|
||||
color: $text;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.has-overflow-scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
.deep-hover {
|
||||
transition: all 0.2s ease;
|
||||
&:hover {
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.5), 0 0 0 1px $primary !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user