mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Merge branch 'feat/new_website' of github.com:supabase/supabase into feat/new_website
This commit is contained in:
mildtomato committed
commit
fe4f61a513
3 files changed
+496
-206
No files matched your search
+23
-10
@@ -10,7 +10,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
|
||||
@@ -32,7 +32,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
@@ -52,7 +52,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
@@ -73,7 +73,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<line x1="6" y1="3" x2="6" y2="15" />
|
||||
<circle cx="18" cy="6" r="3" />
|
||||
@@ -96,7 +96,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
@@ -119,7 +119,7 @@ export const AlphaNumbers = [
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="css-i6dzq1"
|
||||
className="stroke-white dark:stroke-black"
|
||||
>
|
||||
<polyline points="4 17 10 11 4 5" />
|
||||
<line x1="12" y1="19" x2="20" y2="19" />
|
||||
@@ -134,19 +134,32 @@ export const AlphaNumbers = [
|
||||
export const IntroductionSegments = [
|
||||
{
|
||||
description: "In preparation for some of our users moving into production, we've put extra effort into 3 key areas of Supabase",
|
||||
chapters: ['Performance', 'Security', 'Reliability']
|
||||
chapters: [
|
||||
{ no: 1, name: 'Performance', key: 'performance' },
|
||||
{ no: 2, name: 'Security', key: 'security' },
|
||||
{ no: 3, name: 'Reliability', key: 'reliability' }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: "We have received an incredible number of requests for new features and integrations from our Alpha Users, and we are factoring these conversations into our Beta Pricing model.",
|
||||
chapters: ['New Features & Integrations', 'Beta Pricing']
|
||||
chapters: [
|
||||
{ no: 4, name: 'New Features & Integrations', key: 'features' },
|
||||
{ no: 5, name: 'Beta Pricing', key: 'pricing' }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: "Open Source is, and will always be, at the core of everything that we do. Find out how we've been working with the community to support existing OSS projects and Communities.",
|
||||
chapters: ['Open Source']
|
||||
chapters: [
|
||||
{ no: 6, name: 'Open Source', key: 'openSource' }
|
||||
]
|
||||
},
|
||||
{
|
||||
description: "And finally, we are bringing on 23 new Funding Partners to help us achieve our goal of becoming the default backend for every business. Find out who they are, and what we have in store for 2021.",
|
||||
chapters: ['Funding Partners', 'Scaling Our Team', 'What\'s Next']
|
||||
chapters: [
|
||||
{ no: 7, name: 'Funding Partners', key: 'funding' },
|
||||
{ no: 8, name: 'Scaling Our Team', key: 'scaling' },
|
||||
{ no: 9, name: 'What\'s Next', key: 'next' }
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
+472
-196
@@ -6,13 +6,13 @@ import {
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Label,
|
||||
LabelList,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
|
||||
import Head from 'next/head'
|
||||
import { useRef } from 'react'
|
||||
import Container from 'components/Container'
|
||||
import Layout from 'components/Layout'
|
||||
import CountUp from 'components/CountUp'
|
||||
@@ -21,87 +21,132 @@ import { AlphaNumbers, IntroductionSegments, PerformanceComparisonData } from 'd
|
||||
|
||||
const site_title = `${APP_NAME} | We are now in Beta`
|
||||
|
||||
type SectionHeaderProps = {
|
||||
sectionNumber: number
|
||||
header: string
|
||||
}
|
||||
const HamburgerMenu = () => (
|
||||
<div className="cursor-pointer">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
|
||||
const SectionHeader = (props: SectionHeaderProps) => {
|
||||
const SectionHeader = (props: any) => {
|
||||
const { sectionNumber, header } = props
|
||||
return (
|
||||
<div className="col-span-12">
|
||||
<span className="block font-mono text-3xl text-dark-300 mb-3">0{sectionNumber}</span>
|
||||
<h3 className="text-6xl">{header}</h3>
|
||||
<span className="block font-mono text-3xl text-dark-300 dark:text-dark-400 mb-3">
|
||||
0{sectionNumber}
|
||||
</span>
|
||||
<h3 className="text-black dark:text-white text-6xl">{header}</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Hero = () => (
|
||||
<div className="w-screen h-screen bg-dark-500 flex items-center justify-center text-white">
|
||||
TBD, scroll down first
|
||||
</div>
|
||||
)
|
||||
|
||||
const Introduction = () => (
|
||||
<div className="bg-gray-50">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-4">
|
||||
<div className="col-span-7 text-base mb-20">
|
||||
<div className="w-screen py-16 lg:py-36 bg-dark-800">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 h-full grid grid-cols-12 gap-4 items-center text-white">
|
||||
<div className="col-span-12 md:col-span-9 lg:col-span-8 xl:col-span-6 text-2xl">
|
||||
<p className="mb-10">
|
||||
Supabase is an opensource Firebase alternative. We're building the features of Firebase
|
||||
using enterprise-grade, open source tools.
|
||||
</p>
|
||||
<p>
|
||||
After the launch of our <span className="text-brand-700 hover:text-brand-800">Alpha</span>{' '}
|
||||
Program in June, we've been fortunate to work with thousands of early adopters on
|
||||
improving both our Open Source, and Hosted offerings.
|
||||
Today, we're moving to <span className="text-brand-700">Beta</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 text-base mb-10">
|
||||
<p className="w-60 pb-2 border-b-2 border-dark-100">Alpha Program in Numbers</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-y-20 mb-20">
|
||||
{AlphaNumbers.map((stat: any, idx: number) => (
|
||||
<div key={`stat_${idx}`} className="col-span-4 grid grid-cols-12 gap-x-6 items-center">
|
||||
<div className="col-span-2">
|
||||
<div className="w-12 h-12 rounded-md bg-dark-700 flex items-center justify-center">
|
||||
{stat.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-10">
|
||||
<p className="text-6xl">
|
||||
<CountUp>{stat.value}</CountUp>
|
||||
{stat.unit && <span className="text-2xl ml-1">{stat.unit}</span>}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-10 col-start-3">
|
||||
<p className="text-dark-300">{stat.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-y-10">
|
||||
{IntroductionSegments.map((segment: any, segmentIdx: number) => (
|
||||
<>
|
||||
<div key={`introSegment_${segmentIdx}`} className="col-span-4">
|
||||
{segment.description}
|
||||
</div>
|
||||
<div className="col-span-2" />
|
||||
<div className="col-span-6 flex flex-col">
|
||||
{segment.chapters.map((chapter: string, idx: number) => (
|
||||
<div className="flex items-center mb-5">
|
||||
<p className="font-mono text-xs text-dark-300">{`0${idx + 1}`}</p>
|
||||
<p className="ml-4 text-base border-b border-gray-400 cursor-pointer">
|
||||
{chapter}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const Introduction = (props: any) => {
|
||||
const { scrollTo } = props
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-dark-700">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-4 text-black dark:text-white">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base mb-20">
|
||||
<p>
|
||||
After the launch of our{' '}
|
||||
<a
|
||||
href="https://news.ycombinator.com/item?id=23319901"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Alpha
|
||||
</a>{' '}
|
||||
Program in June, we've been fortunate to work with thousands of early adopters on
|
||||
improving both our Open Source, and Hosted offerings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 text-base mb-10">
|
||||
<p className="w-60 pb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
Alpha Program in Numbers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-y-12 lg:gap-y-20 mb-20">
|
||||
{AlphaNumbers.map((stat: any, idx: number) => (
|
||||
<div
|
||||
key={`stat_${idx}`}
|
||||
className="col-span-6 sm:col-span-4 grid grid-cols-8 sm:grid-cols-12 gap-x-4 xl:gap-x-6 items-center"
|
||||
>
|
||||
<div className="col-span-4 sm:col-span-3 xl:col-span-2">
|
||||
<div className="w-12 h-12 rounded-md bg-dark-700 flex items-center justify-center bg-gray-900 dark:bg-white">
|
||||
{stat.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-4 sm:col-span-9 xl:col-span-10">
|
||||
<p className="text-5xl lg:text-6xl">
|
||||
<CountUp>{stat.value}</CountUp>
|
||||
{stat.unit && <span className="text-2xl ml-1">{stat.unit}</span>}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-10 sm:col-start-4 xl:col-start-3">
|
||||
<p className="text-xs lg:text-base text-dark-300 dark:text-dark-400">{stat.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-y-10">
|
||||
{IntroductionSegments.map((segment: any, segmentIdx: number) => (
|
||||
<div key={`introSegment_${segmentIdx}`} className="col-span-12 grid grid-cols-12">
|
||||
<div className="col-span-12 mb-10 sm:col-span-5 xl:col-span-4 sm:mb-0">
|
||||
<p>{segment.description}</p>
|
||||
</div>
|
||||
<div className="hidden sm:block sm:col-span-1 xl:col-span-2" />
|
||||
<div className="col-span-12 sm:col-span-6 flex flex-col">
|
||||
{segment.chapters.map((chapter: any, idx: number) => (
|
||||
<div
|
||||
key={`section_select_${idx}`}
|
||||
className="flex items-center mb-5 cursor-pointer"
|
||||
onClick={() => scrollTo(chapter.key)}
|
||||
>
|
||||
<p className="font-mono text-xs text-dark-300 dark:text-dark-400">{`0${
|
||||
chapter.no
|
||||
}`}</p>
|
||||
<p className="ml-4 text-base border-b border-gray-400">{chapter.name}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Performance = () => {
|
||||
const readColors = ['#38BC81', 'red']
|
||||
const writeColors = ['#65D9A5', 'pink']
|
||||
@@ -165,13 +210,95 @@ const Performance = () => {
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
|
||||
const ComparisonChartV2 = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-12 text-black dark:text-white items-center">
|
||||
<div className="col-span-12">
|
||||
<p className="w-36 pb-2 mb-4">Read (requests/s)</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-9 grid grid-cols-12">
|
||||
<div className="col-span-12 grid grid-cols-12 items-center">
|
||||
<div className="col-span-4 sm:col-span-3 py-2 border-r-2 border-dark-200 dark:border-dark-400 mr-3">
|
||||
Supabase
|
||||
</div>
|
||||
<div className="col-span-8 py-2">
|
||||
<div
|
||||
className="bg-brand-600 dark:bg-brand-700 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
<p className="transition opacity-0 group-hover:opacity-100">1167</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden col-span-1 sm:block" />
|
||||
</div>
|
||||
<div className="col-span-12 grid grid-cols-12 items-center">
|
||||
<div className="col-span-4 sm:col-span-3 py-2 border-r-2 border-dark-200 dark:border-dark-400 mr-3">
|
||||
Firebase
|
||||
</div>
|
||||
<div className="col-span-8 py-2">
|
||||
<div
|
||||
className="bg-dark-300 dark:bg-dark-400 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
|
||||
style={{ width: '31.36%' }}
|
||||
>
|
||||
<p className="transition opacity-0 group-hover:opacity-100">366</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-3">
|
||||
<p className="text-6xl sm:text-right">3.2x</p>
|
||||
<p className="text-sm sm:text-right -mt-2">faster read requests</p>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 py-5" />
|
||||
|
||||
<div className="col-span-12">
|
||||
<p className="w-36 pb-2 mb-4">Write (requests/s)</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-9 grid grid-cols-12">
|
||||
<div className="col-span-12 grid grid-cols-12 items-center">
|
||||
<div className="col-span-4 sm:col-span-3 py-2 border-r-2 border-dark-200 dark:border-dark-400 mr-3">
|
||||
Supabase
|
||||
</div>
|
||||
<div className="col-span-8 py-2">
|
||||
<div
|
||||
className="bg-brand-600 dark:bg-brand-700 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
|
||||
style={{ width: '74.55%' }}
|
||||
>
|
||||
<p className="transition opacity-0 group-hover:opacity-100">870</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden col-span-1 sm:block" />
|
||||
</div>
|
||||
<div className="col-span-12 grid grid-cols-12 items-center">
|
||||
<div className="col-span-4 sm:col-span-3 py-2 border-r-2 border-dark-200 dark:border-dark-400 mr-3">
|
||||
Firebase
|
||||
</div>
|
||||
<div className="col-span-8 py-2">
|
||||
<div
|
||||
className="bg-dark-300 dark:bg-dark-400 transition-all flex items-center justify-center group rounded-full h-3 hover:h-6"
|
||||
style={{ width: '23.99%' }}
|
||||
>
|
||||
<p className="transition opacity-0 group-hover:opacity-100">280</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-3">
|
||||
<p className="text-6xl sm:text-right">3.1x</p>
|
||||
<p className="text-sm sm:text-right -mt-2">faster write requests</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="performance" className="bg-white">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div id="performance" className="bg-white dark:bg-dark-800">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={1} header="Performance" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10 items-center">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10 items-center">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
Supabase grew out of a need for a faster and more scalable web-ready datastore.
|
||||
Postgres enables our users to handle massive amounts of data without sacrificing read
|
||||
@@ -180,34 +307,53 @@ const Performance = () => {
|
||||
<p className="mb-10">
|
||||
During our Alpha program we have been obsessively tweaking our stack to tease out
|
||||
superior performance. We chose the hyper-scalable{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://elixir-lang.org/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Elixer
|
||||
</a>{' '}
|
||||
to handle our{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://github.com/supabase/realtime"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Realtime engine
|
||||
</a>
|
||||
, and have supported the{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://postgrest.org/en/v7.0.0/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
PostgREST
|
||||
</a>{' '}
|
||||
team while they improved the performance of their auto-generated CRUD APIs.
|
||||
</p>
|
||||
<p>
|
||||
<p className="text-black dark:text-white">
|
||||
We are proud to publish the results of our benchmarks here and we'll continue to seek
|
||||
gains throughout our Beta program and beyond. Our{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://github.com/supabase/benchmarks/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
benchmarks
|
||||
</a>{' '}
|
||||
are Open Source, and we are seeking contributors to help maintain our code and improve
|
||||
on our methodologies.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
{/* <div className="col-span-12 sm:col-span-9 xl:col-span-7">
|
||||
<ComparisonChart />
|
||||
</div> */}
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 mt-10 mb-10">
|
||||
<ComparisonChartV2 />
|
||||
</div>
|
||||
<div className="col-span-7 text-base">
|
||||
<p className="mt-10 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
Supabase is now available in 7 different geographic regions, so you can reduce latency
|
||||
by deploying in close proximity to your customer base.
|
||||
</p>
|
||||
@@ -225,88 +371,77 @@ const Performance = () => {
|
||||
)
|
||||
}
|
||||
|
||||
const Security = () => (
|
||||
<div id="security" className="bg-gray-50">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<SectionHeader sectionNumber={2} header="Security" />
|
||||
const Security = () => {
|
||||
return (
|
||||
<div id="security" className="bg-gray-50 dark:bg-dark-700">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={2} header="Security" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8">
|
||||
<div className="col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
As an infrastructure provider, Security has been a priority from day one. During
|
||||
Supabase's Alpha period we experienced a single security breach, which was the result of
|
||||
weak customer passwords. An automated brute force attack accessed a handful of our
|
||||
customer's databases who had chosen weak passwords. The instances involved were
|
||||
destroyed, and the users involved reminded the importance of strong passwords. We now
|
||||
require that all database passwords pass a strength test (provided by the excellent{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
zxcvbn
|
||||
</a>
|
||||
).
|
||||
</p>
|
||||
<p className="mb-5">
|
||||
Approaching the launch of our Beta period, we have been working with a number of
|
||||
security advisors and specialists globally to put in place several new measures and
|
||||
processes:
|
||||
</p>
|
||||
<ul className="list-disc list-outside ml-6">
|
||||
<li className="mb-5">
|
||||
Employed DigitalXRAID to run a full Pen Test on both our internal and customer
|
||||
infrastructure. In the interest of transparency we are making the summary report
|
||||
available here. We have since patched the higher priority issues and are currently in
|
||||
the process of resolving the minor and informational issues.
|
||||
</li>
|
||||
<li className="mb-5">
|
||||
Published a disclosure policy to help ethical hackers help us find vulnerabilities in
|
||||
our systems. It is availablein the usual place.
|
||||
</li>
|
||||
<li className="mb-5">
|
||||
We now run an ongoing internal Capture the Flag competition, where team members are
|
||||
challenged to breach various components of our systems.
|
||||
</li>
|
||||
<li>
|
||||
Adopted the{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
Snyk
|
||||
</a>{' '}
|
||||
dependency monitor as part of our SSDLC on several key component of our system, to
|
||||
help locate potential vulnerabilities in third party Open Source dependencies.
|
||||
</li>
|
||||
</ul>
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
As an infrastructure provider, Security has been a priority from day one. During
|
||||
Supabase's Alpha period we experienced a single security breach, which was the result
|
||||
of weak customer passwords. An automated brute force attack accessed a handful of our
|
||||
customer's databases who had chosen weak passwords. The instances involved were
|
||||
destroyed, and the users involved reminded the importance of strong passwords. We now
|
||||
require that all database passwords pass a strength test (provided by the excellent{' '}
|
||||
<a
|
||||
href="https://github.com/dropbox/zxcvbn"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
zxcvbn
|
||||
</a>
|
||||
).
|
||||
</p>
|
||||
<p className="mb-5">
|
||||
Approaching the launch of our Beta period, we have been working with a number of
|
||||
security advisors and specialists globally to put in place several new measures and
|
||||
processes:
|
||||
</p>
|
||||
<ul className="list-disc list-outside ml-6">
|
||||
<li className="mb-5">
|
||||
Employed DigitalXRAID to run a full Pen Test on both our internal and customer
|
||||
infrastructure. In the interest of transparency we are making the summary report
|
||||
available here. We have since patched the higher priority issues and are currently
|
||||
in the process of resolving the minor and informational issues.
|
||||
</li>
|
||||
<li className="mb-5">
|
||||
Published a disclosure policy to help ethical hackers help us find vulnerabilities
|
||||
in our systems. It is availablein the usual place.
|
||||
</li>
|
||||
<li className="mb-5">
|
||||
We now run an ongoing internal Capture the Flag competition, where team members are
|
||||
challenged to breach various components of our systems.
|
||||
</li>
|
||||
<li>
|
||||
Adopted the{' '}
|
||||
<a
|
||||
href="https://snyk.io/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Snyk
|
||||
</a>{' '}
|
||||
dependency monitor as part of our SSDLC on several key component of our system, to
|
||||
help locate potential vulnerabilities in third party Open Source dependencies.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Joshen: Was trying a card layout */}
|
||||
{/* <div className="col-span-12 grid grid-cols-12 gap-8 mt-10">
|
||||
<div className="col-span-6 bg-white shadow-md rounded-md px-4 py-4">
|
||||
Employed DigitalXRAID to run a full Pen Test on both our internal and customer infrastructure.
|
||||
In the interest of transparency we are making the summary report available here. We have since patched
|
||||
the higher priority issues and are currently in the process of resolving the minor and informational issues.
|
||||
</div>
|
||||
<div className="col-span-6 bg-white shadow-md rounded-md px-4 py-4">
|
||||
Published a disclosure policy to help ethical hackers help us find vulnerabilities in our systems.
|
||||
It is availablein the usual place.
|
||||
</div>
|
||||
<div className="col-span-6 bg-white shadow-md rounded-md px-4 py-4">
|
||||
We now run an ongoing internal Capture the Flag competition, where team members are challenged to breach
|
||||
various components of our systems.
|
||||
</div>
|
||||
<div className="col-span-6 bg-white shadow-md rounded-md px-4 py-4">
|
||||
Adopted the <a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">Snyk</a> dependency monitor as part of our SSDLC on several key component of our system, to help locate
|
||||
potential vulnerabilities in third party Open Source dependencies.
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const Reliability = () => (
|
||||
<div id="reliability" className="bg-white">
|
||||
<div className="container mx-auto px-28 py-12 grid grid-cols-12 gap-y-10">
|
||||
<div id="reliability" className="bg-white dark:bg-dark-800">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-12 grid grid-cols-12 gap-y-10 text-black dark:text-white ">
|
||||
<SectionHeader sectionNumber={3} header="Reliability" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-5">
|
||||
During Alpha we experienced 2 minor incidents related to availability, neither of which
|
||||
affected customer access to their data. These were:
|
||||
@@ -347,27 +482,116 @@ const Reliability = () => (
|
||||
)
|
||||
|
||||
const NewFeaturesAndIntegrations = () => (
|
||||
<div id="newFeaturesAndIntegrations" className="bg-gray-50">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div id="newFeaturesAndIntegrations" className="bg-gray-50 dark:bg-dark-700">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={4} header="New Features & Integrations" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-5">
|
||||
Supabase Beta now comes with the following high level features: (Joshen see whether you
|
||||
can add pizzazz to this part)
|
||||
If you're new to Supabase, here's some of the things you can expect to get when using
|
||||
Supabase as your backend and database:
|
||||
</p>
|
||||
<ul className="list-disc list-outside ml-6">
|
||||
<li className="mb-5">
|
||||
Supabase Auth: we provide an easy to use Javascript (and HTTP) interface allowing your
|
||||
Users to sign in and out of your application. You can define which rows in your
|
||||
Database a given user is allowed to access (e.g. only his or her shopping cart), and
|
||||
we even provide confirmation, recovery, and invite email templates which you can
|
||||
customize on the dashboard, and we'll send all of your transactional emails for you.
|
||||
<ul className="">
|
||||
<li className="mb-10">
|
||||
<p className="w-20 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">Auth</p>
|
||||
<p>
|
||||
We provide an easy to use{' '}
|
||||
<a
|
||||
href="https://supabase.io/docs/client/auth-signup/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Javascript
|
||||
</a>{' '}
|
||||
(and{' '}
|
||||
<a
|
||||
href="https://supabase.io/docs/gotrue/server/about/#endpoints"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
HTTP
|
||||
</a>
|
||||
) interface allowing your Users to sign in and out of your application. You can
|
||||
define which rows in your database a given user is allowed to access (e.g. only his
|
||||
or her shopping cart), and we even provide confirmation, recovery, and invite email
|
||||
templates which you can customize on the dashboard, and we'll send all of your
|
||||
transactional emails for you. We support sending your users passwordless links, they
|
||||
can use to log them into your app, and even offer several OAuth providers including
|
||||
Google, GitHub, and have more on the way.
|
||||
</p>
|
||||
</li>
|
||||
<li className="mb-10">
|
||||
<p className="w-20 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
Realtime
|
||||
</p>
|
||||
<p>
|
||||
You can{' '}
|
||||
<a
|
||||
href="https://supabase.io/docs/guides/client-libraries/#realtime-changes"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
subscribe to changes in your database
|
||||
</a>{' '}
|
||||
over websockets, so you don't have to continuously poll for new data. Great for
|
||||
building chat applications, triggering notifications, or piping data to an analytics
|
||||
dashboard as and when it comes into your database.
|
||||
</p>
|
||||
</li>
|
||||
<li className="mb-10">
|
||||
<p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
CRUD API
|
||||
</p>
|
||||
<p>
|
||||
You can start interacting with your data directly from your front end application
|
||||
without the need for an ORM or building out an API backend. We support GraphQL-like{' '}
|
||||
<a
|
||||
href="https://supabase.io/docs/client/select/#query-foreign-tables"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
querying of multiple tables
|
||||
</a>{' '}
|
||||
in a single request, and you can even create and{' '}
|
||||
<a
|
||||
href="https://supabase.io/docs/client/rpc/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
invoke complex functions
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</li>
|
||||
<li className="mb-10">
|
||||
<p className="w-44 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
Quickstart Templates
|
||||
</p>
|
||||
<p>
|
||||
If you're unfamiliar with SQL, we provide a set of Quickstart Templates that you can
|
||||
start using straight away. Very soon you'll be able to deploy entire apps (front and
|
||||
back end) with just the click of a button.
|
||||
</p>
|
||||
</li>
|
||||
<li className="mb-10">
|
||||
<p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
Table View
|
||||
</p>
|
||||
<p>
|
||||
View and edit your data like a spreadsheet from within the Supabase dashboard,
|
||||
create complex relationships, import and export to csv.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className="w-24 pb-2 mb-2 border-b-2 border-dark-200 dark:border-dark-400">
|
||||
SQL Editor
|
||||
</p>
|
||||
<p>
|
||||
No need to install third party SQL tools, you can run queries directly from the
|
||||
Supabase Dashbaord.
|
||||
</p>
|
||||
</li>
|
||||
<li className="mb-5">Vercel + Stripe</li>
|
||||
<li className="mb-5">Table Editor</li>
|
||||
<li>SQL Editor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -376,12 +600,12 @@ const NewFeaturesAndIntegrations = () => (
|
||||
)
|
||||
|
||||
const BetaPricing = () => (
|
||||
<div id="betaPricing" className="bg-white">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div id="betaPricing" className="bg-white dark:bg-dark-800">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={5} header="Beta Pricing" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
We've been working closely with many Open Source projects, Infrastructure Providers, and
|
||||
of course our Alpha Users, to provide a predictable and sustainable pricing model.
|
||||
@@ -438,12 +662,12 @@ const BetaPricing = () => (
|
||||
)
|
||||
|
||||
const OpenSource = () => (
|
||||
<div id="openSource" className="bg-gray-50">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div id="openSource" className="bg-gray-50 dark:bg-dark-700">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={6} header="Open Source" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-10">
|
||||
Great software is multi generational and stretches far beyond any single company.
|
||||
</p>
|
||||
@@ -454,7 +678,11 @@ const OpenSource = () => (
|
||||
</p>
|
||||
<p className="mb-10">
|
||||
Every dollar that is given to Supabase in GitHub{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://github.com/sponsors/supabase/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
sponsorship
|
||||
</a>{' '}
|
||||
will be funneled back into the community to support the next generation of Open Source
|
||||
@@ -463,7 +691,11 @@ const OpenSource = () => (
|
||||
<p className="mb-10">
|
||||
One of the biggest barriers to Open Source is knowing exactly how you can contribute.
|
||||
We're partnering with{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://strive.school/"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
Strive School
|
||||
</a>{' '}
|
||||
to educate the next generation of programmers in Open Source by providing tutorials,
|
||||
@@ -491,12 +723,12 @@ const OpenSource = () => (
|
||||
const FundingPartners = () => <div></div>
|
||||
|
||||
const ScalingOurTeam = () => (
|
||||
<div id="scalingOurTeam" className="bg-white">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div id="scalingOurTeam" className="bg-white dark:bg-dark-800">
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={7} header="Scaling Our Team" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p>
|
||||
We are looking for hires across multiple positions including PostgreSQL engineers, Cloud
|
||||
engineers, SRE's, and Developer Advocates. We are a fully remote team, spanning 4
|
||||
@@ -518,12 +750,15 @@ const ScalingOurTeam = () => (
|
||||
)
|
||||
|
||||
const WhatsNext = () => (
|
||||
<div id="whatsNext" className="bg-gray-50">
|
||||
<div className="container mx-auto px-28 py-20 grid grid-cols-12 gap-y-10">
|
||||
<div
|
||||
id="whatsNext"
|
||||
className="border-b-2 border-gray-50 bg-gray-50 dark:bg-dark-700 dark:border-dark-800"
|
||||
>
|
||||
<div className="container mx-auto px-8 lg:px-28 py-20 grid grid-cols-12 gap-y-10 text-black dark:text-white">
|
||||
<SectionHeader sectionNumber={8} header="What's Next" />
|
||||
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-8 mb-10">
|
||||
<div className="col-span-7 text-base">
|
||||
<div className="col-span-12 grid grid-cols-12 gap-x-2 lg:gap-x-8 mb-10">
|
||||
<div className="col-span-12 sm:col-span-9 xl:col-span-7 text-base">
|
||||
<p className="mb-5">
|
||||
If you watch our repos you'll see that development never stops, we ship every day (and
|
||||
night!), and are always improving Supabase based on user feedback. Alongside
|
||||
@@ -564,7 +799,11 @@ const WhatsNext = () => (
|
||||
beta@supabase.io
|
||||
</a>{' '}
|
||||
or join the{' '}
|
||||
<a href="#" target="_blank" className="text-brand-700 hover:text-brand-800">
|
||||
<a
|
||||
href="https://github.com/supabase/supabase/discussions"
|
||||
target="_blank"
|
||||
className="text-brand-700 hover:text-brand-800"
|
||||
>
|
||||
discussion
|
||||
</a>{' '}
|
||||
on GitHub to let us know how we can help you build things faster.
|
||||
@@ -576,6 +815,23 @@ const WhatsNext = () => (
|
||||
)
|
||||
|
||||
const Beta = () => {
|
||||
const references: any = {
|
||||
performance: useRef<HTMLDivElement>(null),
|
||||
security: useRef<HTMLDivElement>(null),
|
||||
reliability: useRef<HTMLDivElement>(null),
|
||||
features: useRef<HTMLDivElement>(null),
|
||||
pricing: useRef<HTMLDivElement>(null),
|
||||
openSource: useRef<HTMLDivElement>(null),
|
||||
scaling: useRef<HTMLDivElement>(null),
|
||||
next: useRef<HTMLDivElement>(null),
|
||||
}
|
||||
|
||||
const scrollTo = (key: string) => {
|
||||
if (references[key]) {
|
||||
references[key].current.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout hideHeader={true}>
|
||||
<Head>
|
||||
@@ -597,16 +853,36 @@ const Beta = () => {
|
||||
<meta name="twitter:image" content="/public/og/og-image.jpg" />
|
||||
</Head>
|
||||
<Container>
|
||||
<div className="shadow-lg py-5 px-5 lg:px-20 sticky inset-0 bg-dark-800 z-50 flex items-center justify-between">
|
||||
<img className="h-5" src="images/logo-dark.png" />
|
||||
<HamburgerMenu />
|
||||
</div>
|
||||
<Hero />
|
||||
<Introduction />
|
||||
<Performance />
|
||||
<Security />
|
||||
<Reliability />
|
||||
<NewFeaturesAndIntegrations />
|
||||
<BetaPricing />
|
||||
<OpenSource />
|
||||
<ScalingOurTeam />
|
||||
<WhatsNext />
|
||||
<Introduction scrollTo={scrollTo} />
|
||||
<div ref={references['performance']}>
|
||||
<Performance />
|
||||
</div>
|
||||
<div ref={references['security']}>
|
||||
<Security />
|
||||
</div>
|
||||
<div ref={references['reliability']}>
|
||||
<Reliability />
|
||||
</div>
|
||||
<div ref={references['features']}>
|
||||
<NewFeaturesAndIntegrations />
|
||||
</div>
|
||||
<div ref={references['pricing']}>
|
||||
<BetaPricing />
|
||||
</div>
|
||||
<div ref={references['openSource']}>
|
||||
<OpenSource />
|
||||
</div>
|
||||
<div ref={references['scaling']}>
|
||||
<ScalingOurTeam />
|
||||
</div>
|
||||
<div ref={references['next']}>
|
||||
<WhatsNext />
|
||||
</div>
|
||||
</Container>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
@@ -110,6 +110,7 @@ module.exports = {
|
||||
extend: {
|
||||
inset: ['group-hover'],
|
||||
stroke: ['dark'],
|
||||
height: ['hover'],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
Reference in new issue
Block a user