Merge branch 'supabase:master' into master

nipundev · Sep 5, 2023 · f7436a8 · f7436a8
2 parents 6f5e23a + 2a9c287
commit f7436a8
Show file tree

Hide file tree

Showing 42 changed files with 792 additions and 524 deletions.
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and
 - [pg_graphql](http://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
 - [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
 - [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
-- [GoTrue](https://github.com/supabase/gotrue) is an JWT based API for managing users and issuing JWT tokens.
+- [GoTrue](https://github.com/supabase/gotrue) is a JWT based API for managing users and issuing JWT tokens.
 - [Kong](https://github.com/Kong/kong) is a cloud-native API gateway.
 
 #### Client libraries

diff --git a/apps/docs/pages/guides/platform/compute-add-ons.mdx b/apps/docs/pages/guides/platform/compute-add-ons.mdx
@@ -8,21 +8,23 @@ export const meta = {
 
 Every project on the Supabase Platform comes with its own dedicated Postgres instance running inside a virtual machine (VM). The following table describes the base instance with additional compute add-ons available if you need extra performance when scaling up Supabase.
 
-| Plan            | Pricing | CPU                     | Memory | Connections: Direct | Connections: Pooler |
-| --------------- | ------- | ----------------------- | ------ | ------------------- | ------------------- |
-| Free (Included) | $0      | 2-core ARM (shared)     | 1 GB   | 60                  | 200                 |
-| Small           | $5      | 2-core ARM (shared)     | 2 GB   | 90                  | 200                 |
-| Medium          | $50     | 2-core ARM (shared)     | 4 GB   | 120                 | 200                 |
-| Large           | $100    | 2-core ARM (dedicated)  | 8 GB   | 160                 | 300                 |
-| XL              | $200    | 4-core ARM (dedicated)  | 16 GB  | 240                 | 700                 |
-| 2XL             | $400    | 8-core ARM (dedicated)  | 32 GB  | 380                 | 1500                |
-| 4XL             | $950    | 16-core ARM (dedicated) | 64 GB  | 480                 | 3000                |
-| 8XL             | $1,860  | 32-core ARM (dedicated) | 128 GB | 490                 | 6000                |
-| 12XL            | $2,790  | 48-core ARM (dedicated) | 192 GB | 500                 | 9000                |
-| 16XL            | $3,720  | 64-core ARM (dedicated) | 256 GB | 500                 | 12,000              |
+| Plan    | Hourly Price USD | Monthly Price USD | CPU                     | Memory | Connections: Direct | Connections: Pooler |
+| ------- | ---------------- | ----------------- | ----------------------- | ------ | ------------------- | ------------------- |
+| Starter | $0.01344         | ~$10              | 2-core ARM (shared)     | 1 GB   | 60                  | 200                 |
+| Small   | $0.0206          | ~$15              | 2-core ARM (shared)     | 2 GB   | 90                  | 200                 |
+| Medium  | $0.0822          | ~$60              | 2-core ARM (shared)     | 4 GB   | 120                 | 200                 |
+| Large   | $0.1517          | ~$110             | 2-core ARM (dedicated)  | 8 GB   | 160                 | 300                 |
+| XL      | $0.2877          | ~$210             | 4-core ARM (dedicated)  | 16 GB  | 240                 | 700                 |
+| 2XL     | $0.562           | ~$410             | 8-core ARM (dedicated)  | 32 GB  | 380                 | 1500                |
+| 4XL     | $1.32            | ~$960             | 16-core ARM (dedicated) | 64 GB  | 480                 | 3000                |
+| 8XL     | $2.562           | ~$1,870           | 32-core ARM (dedicated) | 128 GB | 490                 | 6000                |
+| 12XL    | $3.836           | ~$2,800           | 48-core ARM (dedicated) | 192 GB | 500                 | 9000                |
+| 16XL    | $5.12            | ~$3,730           | 64-core ARM (dedicated) | 256 GB | 500                 | 12,000              |
 
 Number of connections above are recommended values.
 
+We charge hourly for additional compute based on your usage. Read more about [usage-based billing for compute](/docs/guides/platform/org-based-billing#usage-based-billing-for-compute).
+
 [Contact us](https://supabase.com/contact/enterprise) if you require a custom plan.
 
 ## Dedicated vs. shared CPU
@@ -37,18 +39,18 @@ When considering compute upgrades, assess whether your bottlenecks are hardware-
 
 SSD Disks are attached to your servers and the disk performance depends on the compute add-on of your instance. Disk IO refers to two metrics: throughput (Megabits per Second) and IOPS (Input/Output Operations per Second).
 
-| Plan            | Pricing | Max Disk Throughput | Baseline Disk Throughput | Max IOPS    | Baseline IOPS |
-| --------------- | ------- | ------------------- | ------------------------ | ----------- | ------------- |
-| Free (Included) | $0      | 2,085 Mbps          | 87 Mbps                  | 11,800 IOPS | 500 IOPS      |
-| Small           | $5      | 2,085 Mbps          | 174 Mbps                 | 11,800 IOPS | 1,000 IOPS    |
-| Medium          | $50     | 2,085 Mbps          | 347 Mbps                 | 11,800 IOPS | 2,000 IOPS    |
-| Large           | $100    | 4,750 Mbps          | 630 Mbps                 | 20,000 IOPS | 3,600 IOPS    |
-| XL              | $200    | 4,750 Mbps          | 1,188 Mbps               | 20,000 IOPS | 6,000 IOPS    |
-| 2XL             | $400    | 4,750 Mbps          | 2,375 Mbps               | 20,000 IOPS | 12,000 IOPS   |
-| 4XL             | $950    | 4,750 Mbps          | 4,750 Mbps               | 20,000 IOPS | 20,000 IOPS   |
-| 8XL             | $1,860  | 9,500 Mbps          | 9,500 Mbps               | 40,000 IOPS | 40,000 IOPS   |
-| 12XL            | $2,790  | 14,250 Mbps         | 14,250 Mbps              | 50,000 IOPS | 50,000 IOPS   |
-| 16XL            | $3,720  | 19,000 Mbps         | 19,000 Mbps              | 80,000 IOPS | 80,000 IOPS   |
+| Plan    | Max Disk Throughput | Baseline Disk Throughput | Max IOPS    | Baseline IOPS |
+| ------- | ------------------- | ------------------------ | ----------- | ------------- |
+| Starter | 2,085 Mbps          | 87 Mbps                  | 11,800 IOPS | 500 IOPS      |
+| Small   | 2,085 Mbps          | 174 Mbps                 | 11,800 IOPS | 1,000 IOPS    |
+| Medium  | 2,085 Mbps          | 347 Mbps                 | 11,800 IOPS | 2,000 IOPS    |
+| Large   | 4,750 Mbps          | 630 Mbps                 | 20,000 IOPS | 3,600 IOPS    |
+| XL      | 4,750 Mbps          | 1,188 Mbps               | 20,000 IOPS | 6,000 IOPS    |
+| 2XL     | 4,750 Mbps          | 2,375 Mbps               | 20,000 IOPS | 12,000 IOPS   |
+| 4XL     | 4,750 Mbps          | 4,750 Mbps               | 20,000 IOPS | 20,000 IOPS   |
+| 8XL     | 9,500 Mbps          | 9,500 Mbps               | 40,000 IOPS | 40,000 IOPS   |
+| 12XL    | 14,250 Mbps         | 14,250 Mbps              | 50,000 IOPS | 50,000 IOPS   |
+| 16XL    | 19,000 Mbps         | 19,000 Mbps              | 80,000 IOPS | 80,000 IOPS   |
 
 [Contact us](https://supabase.com/contact/enterprise) if you require a custom plan.
 

diff --git a/apps/docs/pages/guides/realtime/realtime-with-nextjs.mdx b/apps/docs/pages/guides/realtime/realtime-with-nextjs.mdx
@@ -7,8 +7,8 @@ export const meta = {
   sidebar_label: 'Videos',
 }
 
-In this guide we explore the best ways to receive realtime Postgres changes with your Next.js application.
-We'll show both client and serverside updates, and explore the which option is best.
+In this guide, we explore the best ways to receive real-time Postgres changes with your Next.js application.
+We'll show both client and server side updates, and explore which option is best.
 
 <div className="video-container">
   <iframe

diff --git a/apps/www/components/Pricing/ComputePricingModal.tsx b/apps/www/components/Pricing/ComputePricingModal.tsx
@@ -1,9 +1,10 @@
 import React, { Fragment, useMemo } from 'react'
 import { useRouter } from 'next/router'
 import { useTheme } from 'common/Providers'
-import { IconCheckCircle, IconXCircle, Modal } from 'ui'
+import { IconXCircle, Modal } from 'ui'
 import pricingAddOn from '~/data/PricingAddOnTable.json'
 import { IconPricingIncludedCheck, IconPricingMinus } from './PricingIcons'
+import Link from 'next/link'
 
 interface Props {
   showComputeModal: boolean
@@ -47,12 +48,33 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
             </div>
             <div className="max-w-4xl prose">
               <h2 className="text-lg">Choose best compute setup for you</h2>
-              <p className="text-sm lg:max-w-3xl">
+              <p className="text-sm">
                 Every project on the Supabase Platform comes with its own dedicated Postgres
                 instance running inside a virtual machine (VM). The following table describes the
                 base instance with additional compute add-ons available if you need extra
                 performance when scaling up Supabase.
               </p>
+              <p className="text-sm">
+                Compute instances are billed hourly and you can scale up or down at any time if you
+                need extra performance. You'll only be charged at the end of the month for the hours
+                you've used. Paid plans come with $10 in Compute Credits to cover one Starter
+                instance or parts of any other instance. Read more on{' '}
+                <Link
+                  href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
+                  passHref
+                >
+                  <a target="_blank" className="transition text-brand hover:text-brand-600">
+                    usage-based billing for compute
+                  </a>
+                </Link>{' '}
+                or{' '}
+                <Link href="https://supabase.com/docs/guides/platform/compute-add-ons" passHref>
+                  <a target="_blank" className="transition text-brand hover:text-brand-600">
+                    Compute Add-ons
+                  </a>
+                </Link>
+                .
+              </p>
             </div>
           </div>
         </div>
@@ -73,7 +95,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
                   {i === 0 && (
                     <tr className="">
                       <td className="pb-1 bg-scale-700 px-3 py-1 -mr-1 border-l-4 border-scale-700">
-                        <span className="">Included in Free and Pro plan</span>
+                        <span className="">First instance is free on paid plans</span>
                       </td>
                     </tr>
                   )}

diff --git a/apps/www/data/PricingAddOnTable.json b/apps/www/data/PricingAddOnTable.json
@@ -11,7 +11,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "Starter" },
-          { "key": "pricing", "title": "Pricing", "value": "$0" },
+          { "key": "pricing", "title": "Price USD", "value": "$10" },
           { "key": "cpu", "title": "CPU", "value": "2-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": false },
           { "key": "memory", "title": "Memory", "value": "1 GB" },
@@ -36,7 +36,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "Small" },
-          { "key": "pricing", "title": "Pricing", "value": "$5" },
+          { "key": "pricing", "title": "Price USD", "value": "$15" },
           { "key": "cpu", "title": "CPU", "value": "2-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": false },
           { "key": "memory", "title": "Memory", "value": "2 GB" },
@@ -61,7 +61,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "Medium" },
-          { "key": "pricing", "title": "Pricing", "value": "$50" },
+          { "key": "pricing", "title": "Price USD", "value": "$60" },
           { "key": "cpu", "title": "CPU", "value": "2-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": false },
           { "key": "memory", "title": "Memory", "value": "4 GB" },
@@ -86,7 +86,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "Large" },
-          { "key": "pricing", "title": "Pricing", "value": "$100" },
+          { "key": "pricing", "title": "Price USD", "value": "$110" },
           { "key": "cpu", "title": "CPU", "value": "2-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "8 GB" },
@@ -111,7 +111,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$200" },
+          { "key": "pricing", "title": "Price USD", "value": "$210" },
           { "key": "cpu", "title": "CPU", "value": "4-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "16 GB" },
@@ -136,7 +136,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "2XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$400" },
+          { "key": "pricing", "title": "Price USD", "value": "$410" },
           { "key": "cpu", "title": "CPU", "value": "8-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "32 GB" },
@@ -161,7 +161,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "4XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$950" },
+          { "key": "pricing", "title": "Price USD", "value": "$960" },
           { "key": "cpu", "title": "CPU", "value": "16-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "64 GB" },
@@ -186,7 +186,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "8XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$1,860" },
+          { "key": "pricing", "title": "Price USD", "value": "$1,870" },
           { "key": "cpu", "title": "CPU", "value": "32-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "128 GB" },
@@ -211,7 +211,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "12XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$2,790" },
+          { "key": "pricing", "title": "Price USD", "value": "$2,800" },
           { "key": "cpu", "title": "CPU", "value": "48-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "192 GB" },
@@ -240,7 +240,7 @@
       {
         "columns": [
           { "key": "plan", "title": "Plan", "value": "16XL" },
-          { "key": "pricing", "title": "Pricing", "value": "$3,720" },
+          { "key": "pricing", "title": "Price USD", "value": "$3,730" },
           { "key": "cpu", "title": "CPU", "value": "64-core ARM" },
           { "key": "dedicated", "title": "Dedicated", "value": true },
           { "key": "memory", "title": "Memory", "value": "256 GB" },

diff --git a/apps/www/lib/mdx/mdxComponents.tsx b/apps/www/lib/mdx/mdxComponents.tsx
@@ -12,6 +12,7 @@ import {
   CollapsibleTrigger_Shadcn_,
   CollapsibleContent_Shadcn_,
   IconTriangle,
+  cn,
 } from 'ui'
 import ImageFadeStack from '~/components/ImageFadeStack'
 import ZoomableImg from '~/components/ZoomableImg/ZoomableImg'
@@ -91,8 +92,8 @@ export default function mdxComponents(type?: 'blog' | 'lp' | undefined) {
       }
       return <img {...props} />
     },
-    Img: ({ zoomable = true, ...props }: any) => (
-      <figure className="m-0">
+    Img: ({ zoomable = true, className, ...props }: any) => (
+      <figure className={cn('m-0', className)}>
         <ZoomableImg zoomable={zoomable}>
           <span
             className={[