+ 
+ 
+
+
+## Performance Tips when using indexes
+
+First, a few generic tips which you can pick and choose from:
+
+1. The Supabase managed platform will automatically optimize Postgres configs for you based on your compute addon. But if you self-host, consider **adjusting your Postgres config** based on RAM & CPU cores. See [example optimizations](https://gist.github.com/egor-romanov/323e2847851bbd758081511785573c08) for more details.
+2. Prefer `inner-product` to `L2` or `Cosine` distances if your vectors are normalized (like `text-embedding-ada-002`). If embeddings are not normalized, `Cosine` distance should give the best results with an index.
+3. **Pre-warm your database.** Implement the warm-up technique before transitioning to production or running benchmarks.
+ - Execute 10,000 to 50,000 "warm-up" queries before each benchmark, matching the number of `probes` you are going to use in production. Additionally, you can execute about 1,000 queries with probes ranging from three to ten times the prod's probes. Both of these help to increase RAM utilization.
+4. **Establish your workload.** Increasing the lists constant for the pgvector index can accelerate your queries (at the expense of a slower build). For instance, for benchmarks with 1,000,000 embeddings, we employed a `lists` constant of 2000 (`number of vectors / 500`) as opposed to the suggested 1000 (`number of vectors / 1000`).
+5. **Benchmark your own specific workloads.** Doing this during cache warm-up helps gauge the best value for the `probes` constant, balancing precision with requests per second (RPS).
+
+## Going into production
+
+1. Decide if you are going to use indexes or not. You can skip the rest of this guide if you do not use indexes.
+2. Over-provision RAM during preparation. You can scale down in step `5`, but it's better to start with a larger size to get the best results for RAM requirements. (We'd recommend at least 8XL if you're using Supabase.)
+3. Upload your data to the database. If you use the [`vecs`](/docs/guides/ai/python/api) library, it will automatically generate an index with default parameters.
+4. Run a benchmark using randomly generated queries and observe the results. Again, you can use the `vecs` library with the `ann-benchmarks` tool. Do it with probes set to 10 (default) and then with probes set to 100 or more, so RPS will be lower than 10.
+5. Monitor the RAM usage, and save it as a note for yourself. You would likely want to use a compute add-on in the future that has the same amount of RAM that was used at the moment (both actual RAM usage and RAM used for cache and buffers).
+6. Scale down your compute add-on to the one that would have the same amount of RAM used at the moment.
+7. Repeat step 3 to load the data into RAM. You should see RPS increase on subsequent runs, and stop when it no longer increases. Then repeat the benchmark with probes set to a higher value if you haven't already performed it for that compute add-on size.
+8. Run a benchmark using real queries and observe the results. You can use the `vecs` library for that as well with `ann-benchmarks` tool. Set probes to 10 (default) and then gradually increase/decrease probes until you see that both precision and RPS match your requirements.
+9. If you want higher RPS and you don't expect to have frequent inserts and reindexing, you can increase `lists` constantly. You have to rebuild the index with a higher lists value and repeat steps 6-7 to find the best combination of `lists` and `probes` constants to achieve the best RPS and precision values. Higher `lists` mean that index will build slower, but you can achieve better RPS and precision. Higher probes mean that select queries will be slower, but you can achieve better precision.
+
+## Useful links
+
+Don't forget to check out the general [Production Checklist](/docs/guides/platform/going-into-prod) to ensure your project is secure, performant, and will remain available for your users.
+
+You can look at our [Choosing Compute Add-on](/docs/guides/ai/choosing-compute-addon) guide to get a basic understanding of how much compute you might need for your workload.
+
+Or take a look at our [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blog post to see what pgvector is capable of and how the above technique can be used to achieve the best results.
+
+
+
+
+ 
+ 
+
+
+export const Page = ({ children }) =>
+
+
-
-
-
-## Prerequisites
-
-Make sure you have these installed on your local machine:
-
-- [Docker Desktop](https://docs.docker.com/desktop/)
-- [Supabase CLI](/docs/guides/cli)
-- [Git](https://github.com/git-guides/install-git)
-
## Log in to the Supabase CLI
```bash
@@ -415,24 +400,24 @@ supabase functions deploy
-
-
+
## Set up a local environment
diff --git a/apps/docs/pages/guides/cli/testing-emails.mdx b/apps/docs/pages/guides/cli/testing-emails.mdx
new file mode 100644
index 00000000000..f9e3cce6706
--- /dev/null
+++ b/apps/docs/pages/guides/cli/testing-emails.mdx
@@ -0,0 +1,24 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'testing-emails-locally',
+ title: 'Testing emails locally',
+ description: 'Testing emails for Supabase Auth on your local machine.',
+ subtitle: 'Testing emails for Supabase Auth on your local machine.',
+}
+
+The Supabase CLI uses [Inbucket](https://github.com/inbucket/inbucket) to capture emails sent from your local machine. This is useful for testing emails sent from Supabase Auth.
+
+## Accessing Inbucket
+
+By default, Inbucket is available at [localhost:54324](http://localhost:54324) when you run `supabase start`. Simply open this URL in your browser to view the emails.
+
+## Going into Production
+
+The "default" email provided by Supabase is only for development purposes. It is [heavily restricted](/docs/guides/platform/going-into-prod#auth-rate-limits) to ensure that it is not used for spam.
+
+Before you go into production, you must configure your own email provider. This is as simple as enabling a new SMTP credentials in your [project settings](https://supabase.com/dashboard/project/_/settings/auth).
+
+export const Page = ({ children }) =>
- {integrations.items.map((item) => {
- return ['Overview', 'OAuth Apps (Beta)'].includes(item.name) ? null :
- (
-
-
-export const Page = ({ children }) =>
-
-
-)})}
-
-{item.name}
-
- {item.items?.map((integration) => (
-
-
-
-
-
-
- )
-}
-
-export const getServerSideProps = withPageAuthRequired()
-
-export default Index
-```
-
-> Note: `withPageAuthRequired` will automatically redirect the user to `/api/auth/login` if they are not currently logged in.
-
-Test this is working by navigating to `http://localhost:3000` which should redirect you to an Auth0 sign in screen.
-
-
-
-Either `Sign up` for a new account, or click `Continue with Google` to sign in.
-
-You should now be able to view the landing page.
-
-
-
-## Step 7: Sign Auth0 token for Supabase
-
-Currently, neither Supabase or Auth0 allow for a custom signing secret to be set for their JWT. They also use different [signing algorithms](https://auth0.com/docs/configure/applications/signing-algorithms).
-
-Therefore, we need to extract the bits we need from Auth0's JWT, and sign our own to send to Supabase.
-
-We can do that using Auth0's `afterCallback` function, which gets called anytime the user authenticates.
-
-Install the `jsonwebtoken` library.
-
-```bash
-npm i jsonwebtoken
-```
-
-Update `pages/api/auth/[...auth0].js` with the following:
-
-```jsx
-// pages/api/auth/[...auth0].js
-
-import { handleAuth, handleCallback } from '@auth0/nextjs-auth0'
-import jwt from 'jsonwebtoken'
-
-const afterCallback = async (req, res, session) => {
- const payload = {
- userId: session.user.sub,
- exp: Math.floor(Date.now() / 1000) + 60 * 60,
- }
-
- session.user.accessToken = jwt.sign(payload, process.env.SUPABASE_JWT_SECRET)
-
- return session
-}
-
-export default handleAuth({
- async callback(req, res) {
- try {
- await handleCallback(req, res, { afterCallback })
- } catch (error) {
- res.status(error.status || 500).end(error.message)
- }
- },
-})
-```
-
-Our `payload` for the JWT will contain our user's unique identifier from Auth0 - `session.user.sub` and an expiry of 1 hour.
-
-We are signing this JWT using Supabase's signing secret, so Supabase will be able to validate it is authentic and hasn't been tampered with in transit.
-
-> Note: We need to sign the user out and back in again to run the `afterCallback` function, and create our new token.
-
-Now we just need to send the token along with the request to Supabase.
-
-## Step 8: Requesting data from Supabase
-
-Create a new file called `utils/supabase.js` and add the following:
-
-```jsx
-// utils/supabase.js
-
-import { createClient } from '@supabase/supabase-js'
-
-const getSupabase = (access_token) => {
- const options = {}
-
- if (access_token) {
- options.global = {
- headers: {
- Authorization: `Bearer ${access_token}`,
- },
- }
- }
-
- const supabase = createClient(
- process.env.NEXT_PUBLIC_SUPABASE_URL,
- process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
- options
- )
-
- return supabase
-}
-
-export { getSupabase }
-```
-
-This will be our client for talking to Supabase. We can pass it an `access_token` and it will be attached to our request.
-
-Let's load our `todos` from Supabase in our landing page!
-
-```jsx
-// pages/index.js
-
-import styles from '../styles/Home.module.css'
-import { withPageAuthRequired } from '@auth0/nextjs-auth0'
-import { getSupabase } from '../utils/supabase'
-import Link from 'next/link'
-import { useEffect } from 'react'
-
-const Index = ({ user }) => {
- const [todos, setTodos] = useState([])
- const supabase = getSupabase(user.accessToken)
-
- useEffect(() => {
- const fetchTodos = async () => {
- const { data } = await supabase.from('todo').select('*')
- setTodos(data)
- }
-
- fetchTodos()
- }, [])
-
- return (
- - Welcome {user.name}!{' '} - - Logout - -
-
-
- )
-}
-
-export const getServerSideProps = withPageAuthRequired()
-
-export default Index
-```
-
-Alternatively, we could fetch todos on the server using the `getServerSideProps` function.
-
-```jsx
-// pages/index.js
-
-import styles from '../styles/Home.module.css'
-import { withPageAuthRequired, getSession } from '@auth0/nextjs-auth0'
-import { getSupabase } from '../utils/supabase'
-import Link from 'next/link'
-
-const Index = ({ user, todos }) => {
- return (
- - Welcome {user.name}!{' '} - - Logout - -
- {todos?.length > 0 ? ( - todos.map((todo) =>{todo.content}
) - ) : ( -You have completed all todos!
- )} -
-
- )
-}
-
-export const getServerSideProps = withPageAuthRequired({
- async getServerSideProps({ req, res }) {
- const {
- user: { accessToken },
- } = await getSession(req, res)
-
- const supabase = getSupabase(accessToken)
-
- const { data: todos } = await supabase.from('todo').select('*')
-
- return {
- props: { todos },
- }
- },
-})
-
-export default Index
-```
-
-Either way, when we reload our application, we are still getting the empty state for todos.
-
-
-
-This is because we enabled Row Level Security, which blocks all requests by default. To enable our user to select their `todos` we need to write a policy.
-
-## Step 9: Write a policy to allow select
-
-Our policy will need to know who our currently logged in user is to determine whether or not they should have access. Let's create a PostgreSQL function to extract the current user from our new JWT.
-
-Navigate back to the Supabase dashboard, select `SQL` from the sidebar menu, and click `New query`. This will create a new query called `new sql snippet`, which will allow us to run any SQL against our Postgres database.
-
-Write the following and click `Run`.
-
-```sql
-create or replace function auth.user_id() returns text as $$
- select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text;
-$$ language sql stable;
-```
-
-This will create a function called `auth.user_id()`, which will inspect the `userId` field of our JWT payload.
-
-> Note: To learn more about PostgreSQL functions, check out [our deep dive video](https://www.youtube.com/watch?v=MJZCCpCYEqk).
-
-Let's create a policy that checks whether this user is the owner of the todo.
-
-Select `Authentication` from the Supabase sidebar menu, click `Policies`, and then `New Policy` on the `todo` table.
-
-
-
-From the modal, select `Create a policy from scratch` and add the following.
-
-
-
-This policy is calling the function we just created to get the currently logged in user's ID `auth.user_id()` and checking whether this matches the `user_id` column for the current `todo`. If it does, then it will allow the user to select it, otherwise it will continue to deny.
-
-Click `Review` and then `Save policy`.
-
-> Note: To learn more about RLS and policies, check out [our deep dive video](https://www.youtube.com/watch?v=Ow_Uzedfohk).
-
-The last thing we need to do is update the `user_id` columns for our existing `todos`.
-
-Head back to the Supabase dashboard, and select `Table editor` from the sidebar.
-
-
-
-Each of our `user_id` columns are set to `NULL`!
-
-To get the ID for our Auth0 user, head over to the Auth0 dashboard, select `User Management` from the sidebar, click `Users` and select your test user.
-
-
-
-Copy their `user_id`.
-
-
-
-Update each row in Supabase.
-
-
-
-Now when we refresh our application, we should finally see our list of `todos`!
-
-> Note: Check out [the repo](https://github.com/dijonmusters/supabase-auth0-example/blob/main/pages/index.js) for an example of writing new `todos` to Supabase.
-
-## Resources
-
-- [Auth0](https://auth0.com/) official website.
-- [Auth0 blog](https://auth0.com/blog/).
-- [Using Next.js and Auth0 with Supabase article](https://auth0.com/blog/using-nextjs-and-auth0-with-supabase/).
-- [Auth0 community](https://community.auth0.com/).
-- [Auth0 documentation](https://auth0.com/docs/).
-
-export const Page = ({ children }) => - Welcome {user.name}!{' '} - - Logout - -
- {todos?.length > 0 ? ( - todos.map((todo) =>{todo.content}
) - ) : ( -You have completed all todos!
- )} -
- {'Already have an account? '}
-
- Sign in
-
-
-
- {"Don't have an account? "}
-
- Sign up
-
-
- Signed in as: {user?.email}
-
-
- Create records
- -#### **Step 1:** - -Choose the screen you wish to integrate Supabase for from the list of screens. - -#### **Step 2:** - -Next, switch to the component you want to add Integration, and on the `onClick` property, choose `Supabase integration,` which will take you to its integration screen, where you will be asked to **Enter function name**, which will be used in generated code. Enter the name for it and click `Submit` - -#### **Step 3:** - -After submitting the function name, you will be asked to select a type of Supabase integration. For example, to create a record in Supabase, choose `Create.` - -#### **Step 4:** - -Next, select the table where you want to create a record from the listed Tables. - -#### **Step 5:** - -If you want to create a Single record, Select **Select**. Otherwise, **Multiple**. - -#### **Step 6:** - -Now, you will be redirected to the API Integration screen, where you can set request and response. - -For request binding, the below types are supported. - -| Type | Description | -| ----------------------- | ---------------------------------------------------------- | -| **View** | Select any component from the screen | -| **Constant** | Select a constant you've created in your app. | -| **Get from preference** | Select the key you want to fetch from preference. | -| **Navigation argument** | Select data that's been passed from one screen to another. | - -For response binding, the below types are supported. - -| Type | Description | -| ---------------------- | ------------------------------------ | -| **View** | Select any component from the screen | -| **Save to preference** | Storing the data to preference. | - -#### **Select 7:** - -`Handle action` - Select the action you wish to take once the Supabase call has either been accepted successfully or refused due to an error. - -Available action for On success and On error are, - -1. [Show Alert](https://docs.dhiwise.com/docs/flutter/show-alert) -2. [Navigation](https://docs.dhiwise.com/docs/flutter/navigation) - -#### **Step 9:** - -Finally, you have added Supabase to your application to create records from your screen data! - -## Resources - -- [DhiWise Official Website](https://dhiwise.com) -- [DhiWise Documentation](https://docs.dhiwise.com) - -export const Page = ({ children }) =>
-
-
-
-# Setup
-
-In the [Supabase control panel](https://supabase.com/dashboard/), open your project and click the Settings cog icon, and then "API".
-You will need:
-
-1. From the Project URL copy the project ID from https://your-project-id.supabase.co
-2. From the "Project API keys" section copy the "anon" "public" API Key into the
-
-Paste both into the [FEZTO Supabase setup page](https://www.fezto.xyz/#/supabase) and click Launch.
-You can now share and bookmark the browser URL which includes the projectID and anon key with others to launch the same app.
-
-export const Page = ({ children }) =>
-
-
-
-
-## Step 1: Connect FlutterFlow to Supabase
-
-Before we dive into the code, this guide assumes that you have the following ready:
-
-- [Supabase](https://database.new/) project created
-- Have setup tables in your Supabase project
-- [FlutterFlow](https://app.flutterflow.io/) project created
-
-You can then connect your Supabase project to your FlutterFlow project with the following steps:
-
-1. In your Supabase project, navigate to Project Settings > API. Copy the Project URL.
-2. Return to FlutterFlow, navigate to Settings and Integrations > Integrations > Supabase. Turn on the toggle (i.e., enable Supabase) and paste the API URL.
-3. Similarly, from the Supabase API section, copy the anon key (under Project API keys) and paste it inside the FlutterFlow > Settings and Integrations > Integrations > Supabase > Anon Key.
-4. Click on the Get Schema button. This will show the list of all tables with their schema (structure) created in Supabase.
-5. (Optional) If you have defined an Array for any Column Data Type in Supabase, you must set its type here. To do so, tap the "Click to set Array type" and choose the right one.
-
-
-
-## Step 2: Inserting rows
-
-Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
-
-1. Select the Widget (e.g., Button) on which you want to define the action.
-2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- 1. Click on + Add Action.
- 2. On the right side, search and select the Supabase > Insert Row action.
- 3. Set the Table to your table name (e.g., assignments).
- 4. Under the Set Fields section, click on the + Add Field button.
- 5. Click on the Field name and scroll down to find the Value Source dropdown and change it to From Variable.
- 6. Click on UNSET and select Widget State > Name of the TextField.
- 7. Similarly, add the field for the other UI elements.
-
-
-
-## Step 3: Selecting and displaying rows
-
-To query a Supabase table on a ListView:
-
-1. Select the ListView widget. Make sure you choose the ListView widget, not the ListTile.
-2. Select Backend Query from the properties panel (the right menu), and click Add Backend Query.
-3. Set the Query Type to Supabase Query.
-4. Select your Table from the dropdown list
-5. Set the Query Type to List of Rows.
-6. Optional: If you want to display the limited result, say, for example, you have thousands of entries, but you want to display only 100, you can specify the limit.
-7. Click Confirm.
-
-
-
-## Step 4: Updating rows
-
-Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
-
-1. Select the Widget (e.g., Button) on which you want to define the action.
-2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- 1. Click on + Add Action.
- 2. On the right side, search and select the Supabase > Update Row action.
- 3. Set the Table to your table name (e.g., assignments).
- 4. Optional: If you want to get the rows after the update is finished, enable the Return Matching Rows option.
- 5. Now, you must set the row you want to update. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
- 1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
- 2. Set the Relation to Equal To because you want to find a row with the exact id.
- 3. Into the Value Source, you can select the From Variable and provide the id of the row for which you just updated values in the UI.
- 6. Under the Set Fields section, click on the + Add Field button.
- 7. Click on the field name.
- 8. Scroll down to find the Value Source dropdown and change it to From Variable.
- 9. Click on UNSET and select Widget State > Name of the TextField.
- 10. Similarly, add the field for the other UI elements.
-
-## Step 5: Deleting rows
-
-Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
-
-1. Select the Widget (e.g., Button) on which you want to define the action.
-2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
- 1. Click on + Add Action.
- 2. On the right side, search and select the Supabase -> Delete Row action.
- 3. Set the Table to your table name (e.g., assignments).
- 4. Optional: Later, if you want to know which rows were deleted from a table, enable the Return Matching Rows option.
- 5. Now, you must set the row you want to delete. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
- 1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
- 2. Set the Relation to Equal To because you want to find a row with the exact id.
- 3. Into the Value Source, you can select the From Variable and provide the id of the row you want to delete.
-
-
-
-## Resources
-
-You can find more detailed guides on FlutterFlow’s docs.
-
-- [FlutterFlow Supabase available actions](https://docs.flutterflow.io/actions/actions/backend-database/supabase)
-- [Retrieving Data from Supabase on FlutterFlow](https://docs.flutterflow.io/data-and-backend/supabase/supabase-database/retrieving-data)
-- [Adding data to Supabase DB from FlutterFlow](https://docs.flutterflow.io/data-and-backend/supabase/supabase-database/adding-data)
-
-export const Page = ({ children }) =>
-
-
-
-For your web app, first download KeyriQR.html (available [here](https://raw.githubusercontent.com/Keyri-Co/library-keyri-connect/main/KeyriQR.html)) and save it to a public directory.
-
-Next, embed KeyriQR.html in your login page as an iFrame within the desired div. This serves as the widget that displays the dynamic QR code and connects with the Keyri API.
-
-```html
-
-
-
-```
-
-Next, for the same login view, set up an event listener to pick up the session token that the iFrame emits when the QR code is scanned by your app.
-
-```javascript
-useEffect(() => {
- window.addEventListener('message', async (evt) => {
- if (evt.data.keyri && evt.data.data && document.location.origin == evt.origin) {
- const { data } = evt;
- if (!data.error) {
- let refresh_token = JSON.parse(data.data).refreshToken;
- await handleQrLogin(refresh_token);
- } else if (data.error) {
- console.log(`Keyri error: ${data.message}`);
- }
- }
-});
-```
-
-That's it!
-
-# Mobile
-
-
-
-
-
-
-### Install Flutter
-
-First, install the Flutter SDK, found at flutter.dev
-
-Make sure to add Flutter to your PATH, for example:
-
-```shell
-export PATH="$PATH:`pwd`/flutter/bin"
-```
-
-### Apple - initial setup
-
-Download the latest version of Xcode from the Mac App Store. Make sure the Xcode provided simulator is using a 64-bit device (iPhone 5s or later). You can check the device by viewing the settings in the simulator’s **Hardware > Device** or **File > Open Simulator** menus.
-
-### Android - initial setup
-
-Download the latest version of [Android Studio](https://developer.android.com/studio). Install Android SDK and needed emulator(s).
-
-### Create Project
-
-Run this command in your terminal/shell at the desired location for your new project
-
-```shell
-$ flutter create my_app
-```
-
-You can then CD into the new directory, and run the test app with
-
-```shell
-flutter run
-```
-
-This is a good test - if things are configured correctly so far you should see the default Flutter test app deployed.
-
-### Add dependencies (Keyri and Supabase)
-
-Open your Pubspec.yaml file, which should be at the top level directory in your new project
-
-Add Keyri and Supabase under **dependencies**
-
-
-
-One can now access Supabase and Keyri sdks in their Flutter code
-
-### Utilize the two together
-
-1. Make a request to Supabase to authenticate the user
-2. Parse the response to extract the token
-3. Authenticate using Keyri
- 1. Below, we show how to utilize the EasyKeyriAuth function, which takes the user through scanning the code, creating the session, displaying the confirmation screen, and finalizing the payload transmission
- - Note - you can find your App Key in the Keyri Developer Portal
- 2. Alternatively, intermediate functions in the Keyri SDK, discussed in the mobile docs, can provide control over displaying a custom QR Scanner and/or Confirmation screen
-
-```kotlin
-// Sign in user with email and password
-// Alternatively one can utilize the Supabase API to accomplish the same thing
-final response = await client.auth.signIn(email: 'email', password: 'password');
-if (response.error != null) {
- // Error
- print('Error: ${response.error?.message}');
-} else {
- // Success
- final session = response.data;
- // This is the payload that needs to be send through Keyri
- final refreshToken = session.refreshToken
- // EasyKeyriAuth guides the user through scanning and parsing the QR, confirming the session, and configuring the payload
- // One can also use the initiateQRSession method to use the Keyri Scanner with a custom Confirmation screen
- // Or the ProcessLink method if you have your own scanner or are using deep linking
- await keyri
- .easyKeyriAuth([App Key],
- '{"refreshToken":"$refreshToken"}', [email])
- .then((authResult) => _onAuthResult(authResult))
- .catchError((error, stackTrace) => _onError(error));
-}
-```
-
-export const Page = ({ children }) =>
-
-
-
-In this guide, we will build a similar app and steps you through how you can integrate OneSignal with Supabase to create a seamless cloud messaging experience for your users using Database webhooks and edge functions through a simple Next.js application.
-
-
-
-We will create a simple ordering app and use Supabase Database Webhooks in conjunction with Edge Function to provide a real-time push notification experience.
-
-You can find the complete example app along with the edge functions code to send the notifications [here](https://github.com/supabase-community/onesignal).
-
-
-
-## Step 1: Getting started
-
-Before we dive into the code, this guide assumes that you have the following ready
-
-- [Supabase](https://supabase.com/) project created
-- [OneSignal](https://onesignal.com/) app created
-- [Supabase CLI](https://supabase.com/docs/guides/cli) installed on your machine
-
-Let’s create a Next.js app with tailwind CSS pre-installed
-
-```bash
-npx create-next-app -e with-tailwindcss --ts
-```
-
-We will then install the Supabase and OneSignal SDK.
-
-```bash
-npm i @supabase/supabase-js
-npm i react-onesignal
-```
-
-After that, follow the instructions [here](https://documentation.onesignal.com/docs/web-push-custom-code-setup) to set up OneSignal for the web. You can set the URL of the app as a local host if you want to run the app locally, or add a remote URL if you want to deploy your app to a public hosting. You should add the file you obtain in step 4 of the instruction under the `public` directory of your Next.js app like [this](https://github.com/supabase-community/onesignal/tree/main/app/public).
-
-## Step 2: Build Next.js app
-
-The Next.js app will have a login form for the user to sign in, and a button that they can press to make an order once they are signed in. Update the `index.tsx` file to the following.
-
-```tsx pages/index.tsx
-import { createClient, User } from '@supabase/supabase-js'
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import React, { useEffect, useState } from 'react'
-import OneSignal from 'react-onesignal'
-
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
-const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-const oneSignalAppId = process.env.NEXT_PUBLIC_ONESIGNAL_APP_ID!
-
-const supabase = createClient(supabaseUrl, supabaseAnonKey)
-
-const Home: NextPage = () => {
- const [user, setUser] = useState
-
- )
-}
-```
-
-When we have a successful registration the Passage element will request a redirect to `/dashboard` per the redirect URL we set during app creation.
-
-Create a new file `pages/dashboard.js` for this new route with the following content:
-
-```js
-// pages/dashboard.js
-import styles from '@/styles/Home.module.css'
-
-export default function Dashboard({isAuthorized, userID, todos}) {
- return(
-
-
- )
-}
-```
-Now when you visit `http://localhost:3000` in a browser you will have a fully functioning and passwordless login page!
-
-
-
-Go ahead and go through the registration process. You will be able to register an account with either a passkey or a magic link. Once you've logged in, you will notice that you just get redirected to `/dashboard` page.
-The login was successful, but we need to build in the functionality to know when a user is authenticated and show them the appropriate view.
-
-#### Use Passage to verify the JWT
-
-Now we will need to use a Passage SDK to verify the JWT from Passage.
-
-Install the Passage Node.js library.
-
-```bash
-npm install @passageidentity/passage-node
-```
-
-Create a utils folder and a file called `utils/passage.js` with the following content.
-
-```js
-// utils/passage.js
-import Passage from '@passageidentity/passage-node';
-
-const passage = new Passage({
- appID: process.env.NEXT_PUBLIC_PASSAGE_APP_ID,
- apiKey: process.env.PASSAGE_API_KEY,
-});
-
-export const getAuthenticatedUserFromSession = async (req, res) => {
- try {
- const userID = await passage.authenticateRequest(req);
- if (userID) {
- return {isAuthorized: true, userID: userID};
- }
- } catch (error) {
- // authentication failed
- return {isAuthorized: false, userID: ''};
- }
-}
-```
-
-This will be used in the `getServerSideProps()` function to check authentication status for a user. Add this function to `index.js` then update the `Home` function to use the props.
-
-```js
-// pages/index.js
-import styles from '@/styles/Home.module.css'
-import PassageLogin from '@/components/login'
-import { getAuthenticatedUserFromSession } from '@/utils/passage'
-import { useEffect } from 'react'
-import Router from 'next/router';
-
-export default function Home({isAuthorized}) {
- useEffect(()=> {
- if(isAuthorized){
- Router.push('/dashboard')
- }
- })
-
- return(
-
-
- - You've logged in! -
-
-
- )
-}
-
-export const getServerSideProps = async (context) => {
- const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
- return {
- props: {
- isAuthorized: loginProps.isAuthorized?? false,
- userID: loginProps.userID?? ''
- },
- }
-}
-```
-
-We will also use this logic on the dashboard page to check if a user is authenticated. If not we should redirect them to the login page. We will also add a quick sign out button using Passage while we are at it.
-
-```js
-// pages/dashboard.js
-import styles from '@/styles/Home.module.css'
-import { useEffect } from 'react';
-import Router from 'next/router';
-import { getAuthenticatedUserFromSession } from '@/utils/passage'
-import { PassageUser } from '@passageidentity/passage-elements/passage-user'
-
-export default function Dashboard({isAuthorized, userID}) {
- useEffect(() => {
- if(!isAuthorized){
- Router.push('/');
- }
- })
-
- const signOut = async ()=>{
- new PassageUser().signOut()
- Router.push('/')
- }
-
- return (
-
-
- -
- )
- }
-
-export const getServerSideProps = async (context) => {
- const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
-
- return {
- props: {
- isAuthorized: loginProps.isAuthorized?? false,
- userID: loginProps.userID?? '',
- },
- }
-}
-```
-
-The app can now tell the difference between an authenticated and unauthenticated user. When you log into the application, you will be redirected to the dashboard and see this message.
-
-
-
-## 5. Integrate Supabase into Next.js app
-
-Passage and Supabase do not currently allow for custom signing secrets. Therefore, we will need to extract the necessary claims from the Passage JWT and sign a new JWT to send to Supabase.
-
-Because of the sensitive nature of this functionality, we will handle the authentication and JWT exchange in Next.js’s server-side rendering function `getServerSideProps()`. Imports used in this function will not be bundled client-side. Additionally, the JWT provided by Passage is stored in a cookie which is automatically passed to `getServerSideProps()`.
-
-#### Sign Passage token for Supabase
-
-Install the Supabase client SDK and the popular Node package `jsonwebtoken`, which allows us to easily work with JWTs.
-
-```bash
-npm install @supabase/supabase-js jsonwebtoken
-```
-
-Create a new file called `utils/supabase.js` and add the following content. This function accepts a Passage user ID and then creates and signs a Supabase JWT for that user. This allows Supabase to verify the token and authenticate the user when making Supabase calls.
-
-```js
-// utils/supabase.js
-import { createClient } from '@supabase/supabase-js'
-import jwt from 'jsonwebtoken'
-
-const getSupabase = (userId) => {
- const options = {}
-
- if (userId) {
- const payload = {
- userId,
- exp: Math.floor(Date.now() / 1000) + 60 * 60,
- }
- const token = jwt.sign(payload, process.env.SUPABASE_JWT_SECRET)
-
- options.global = {
- headers: {
- Authorization: `Bearer ${token}`,
- },
- }
- }
-
- const supabase = createClient(
- process.env.NEXT_PUBLIC_SUPABASE_URL,
- process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
- options
- )
- return supabase
-}
-
-export { getSupabase }
-```
-
-#### Enable Row Level Security (RLS) in Supabase
-
-To enable users to view and create their own todo items we need to write a RLS policy. Our policy will check the currently logged in user is to determine whether or not they should have access. Let's create a PostgreSQL function to extract the current user from our new JWT.
-
-Navigate back to the Supabase dashboard, select `SQL Editor` from the sidebar menu, and click `New query`. This will create a new query called `new sql snippet`, which will allow us to run any SQL against our Postgres database.
-
-Write the following and click `Run`.
-
-```sql
-create or replace function auth.user_id() returns text as $$
- select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text;
-$$ language sql stable;
-```
-
-You should see the output `Success, no rows returned`. This created a function called `auth.user_id()` which will return the `userId` field of our JWT payload.
-
-> To learn more about PostgresSQL functions, check out this [deep dive video](https://www.youtube.com/watch?v=MJZCCpCYEqk).
-
-Now we can create a policy that checks whether the current user is the owner of a todo item. From the `Authentication` sidebar menu in Supabase, click `Policies` then create a new policy.
-
-
-
-Choose `For full customization create a policy from scratch` and add the following.
-
-
-
-This policy is calling the function we just created to get the currently logged in user's ID `auth.user_id() `and checking whether this matches the `user_id` column for the current todo. If it does, then it will allow the user to select it, otherwise it will deny access.
-
-Click `Review` and then `Save policy`.
-
-> Note: To learn more about RLS and policies, check out this [deep dive video](https://www.youtube.com/watch?v=Ow_Uzedfohk).
-
-#### Fetch data from Supabase
-
-Now we can fetch data from Supabase specific to that user. We will update `pages/dashboard.js` to do the following:
-1. authenticate the user using Passage
-2. create and sign a JWT for the user with the Supabase secret
-3. query Supabase to fetch a user’s todo list items
-
-```js
-// pages/dashboard.js
-import styles from '@/styles/Home.module.css'
-import { useEffect } from 'react';
-import Router from 'next/router';
-import { getAuthenticatedUserFromSession } from '@/utils/passage'
-import { getSupabase } from '../utils/supabase'
-
-
-export default function Dashboard({isAuthorized, userID, todos}) {
- useEffect(() => {
- if(!isAuthorized){
- Router.push('/');
- }
- })
-
- return(
- - Welcome {userID}!{' '} -
-- -
-
- )
- }
-
-export const getServerSideProps = async (context) => {
- const loginProps = await getAuthenticatedUserFromSession(context.req, context.res)
-
- if(loginProps.isAuthorized){
- const supabase = getSupabase(loginProps.userID)
- const {data} = await supabase.from('todo').select()
-
-
- return {
- props: {
- isAuthorized: loginProps.isAuthorized?? false,
- userID: loginProps.userID?? '',
- todos: data?? [],
- },
- }
- } else {
- return {
- props: {
- isAuthorized: loginProps.isAuthorized?? false,
- userID: loginProps.userID?? ''
- },
- }
- }
-}
-```
-
-When we reload our application, we are still getting the empty state for todos.
-
-This is because we enabled Row Level Security, which blocks all requests by default and lets you granularly control access to the data in your database.
-
-#### Update the UserID data
-
-The last thing we need to do is update the `user_id` columns for our existing todos. Head back to the Supabase dashboard, and select `Table editor` from the sidebar. You will see that the `user_id` field is NULL for all of our todo items.
-
-
-
-To get the user ID for our Passage user, go back to the Passage Console and check the `Users` tab.
-
-
-
-Copy this user ID and update two of the three rows in the Supabase database to match this user ID. When you are done, the database table will look like this.
-
-
-
-Now when we refresh the application, we will see the todo items for our user!
-
-
-
-## Bonus: Add todo items
-
-To build out a bit more functionality in our application, we can now let users add items to their to do list. Create a file `pages/api/addTodo.js` with the following content.
-
-```js
-// pages/api/addTodo.js
-import { getSupabase } from "../../utils/supabase";
-
-export default async function handler(req, res) {
- const { userID, todo } = req.body;
- const supabase = getSupabase(userID);
- const { data, error } = await supabase
- .from("todo")
- .insert({ title: todo })
- .select()
- .single();
- if (error) return res.status(400).json(error);
- res.status(200).json(data);
-}
-```
-Then update `pages/dashboard.js` to include a form for submitting new to do items. The complete file will look like this.
-
-```js
-//pages/dashboard.js
-import styles from "@/styles/Home.module.css";
-import { useEffect, useState } from "react";
-import Router from "next/router";
-import { getAuthenticatedUserFromSession } from "@/utils/passage";
-import { getSupabase } from "../utils/supabase";
-import { PassageUser } from "@passageidentity/passage-elements/passage-user";
-
-export default function Dashboard({ isAuthorized, userID, initialTodos }) {
- const [todos, setTodos] = useState(initialTodos);
- useEffect(() => {
- if (!isAuthorized) {
- Router.push("/");
- }
- });
-
- const handleSubmit = async (e) => {
- e.preventDefault();
- const data = new FormData(e.target);
- const todo = data.get("todo");
- const res = await fetch("/api/addTodo", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ todo, userID }),
- }).then((res) => res.json());
- setTodos([...todos, res]);
- };
-
- const signOut = async () => {
- new PassageUser().signOut();
- Router.push("/");
- };
-
- return (
-
-
- -
-
- - Welcome {userID}!{' '} -
-- -
-
- {todos?.length > 0 ? (
- todos.map((todo) => {todo.title} )
- ) : (
-
- You have completed all todos!
- )} -
-
- );
-}
-
-export const getServerSideProps = async (context) => {
- const loginProps = await getAuthenticatedUserFromSession(
- context.req,
- context.res
- );
-
- if (loginProps.isAuthorized) {
- const supabase = getSupabase(loginProps.userID);
- const { data } = await supabase
- .from("todo")
- .select()
- .is("is_complete", false);
-
- return {
- props: {
- isAuthorized: loginProps.isAuthorized ?? false,
- userID: loginProps.userID ?? "",
- initialTodos: data ?? [],
- },
- };
- } else {
- return {
- props: {
- isAuthorized: loginProps.isAuthorized ?? false,
- userID: loginProps.userID ?? "",
- },
- };
- }
-};
-```
-
-Finally, we need to add a new RLS policy in Supabase to allow users to insert their own todo items.
-
-
-
-That's it! Now the website has form for submitting new items for the to do list.
-
-
-
-## Resources
-
-* [Passage website](https://passage.id)
-* [Complete developer documentation](https://docs.passage.id)
-* [Passage Github](https://github.com/passageidentity), including SDKs and example apps for Next.js
-* [Developer community](https://discord.com/invite/445QpyEDXh) on Discord
-
-
-export const Page = ({ children }) =>
-
- -
-
- Welcome {userID}!
-- -
-
- {todos?.length > 0 ? (
- todos.map((todo) => {todo.title} )
- ) : (
-
-
- You have completed all todos!
- )} -
-
- {loggedIn ? (
-
- ) : (
-
- )}
-
-
- )
-}
-
-export const getServerSideProps: GetServerSideProps
-
- Picket 💜 Supabase
-
-
-
-
-
- )
-}
-
-export const getServerSideProps: GetServerSidePropsYour Personal Todo List
-
-
- Welcome {displayWalletAddress(walletAddress)},
-- Your todo list is stored in Supabase and are only accessible to you and your wallet - address. Picket + Supabase makes it easy to build scalable, hybrid web2 and web3 apps. - Use Supabase to store non-critical or private data off-chain like user app preferences - or todo lists. -
-
-
- Todo List
- {todos.map((todo) => ( -
- {
- await supabase.from('todos').upsert({
- wallet_address: walletAddress,
- name: todo.name,
- completed: !todo.completed,
- })
- setTodos((todos) =>
- todos.map((t) => (t.name === todo.name ? { ...t, completed: !t.completed } : t))
- )
- }}
- />
-
- {todo.name}
-
-
- ))}
-
-
- Go back home →
-
-
-
-
- {children}
-
-
- );
-}
-```
-
-Note that this code component is defined in your codebase. Feel free to augment it to expose more powerful querying capabilities to the Plasmic Studio.
-
-### SupabaseGridCollection
-
-`SupabaseGrid` also nests a `SupabaseGridCollection` under the `SupabaseQuery`. This code component is a simple CSS grid, where we retrieve the Supabase query results from `SupabaseQueryContext`, and iterate over the results. For each row, we populate a `RowContext`, which will be used by the children to read the results of a single row. Note the use of `repeatedElement`, a special convenience function that enables the component’s children to be repeated. In this case, this represents a single card to be shown in the gallery.
-
-```tsx
-// supabase-demo/components/CodeComponents/DisplayCollections.tsx
-
-export function SupabaseGridCollection(props: SupabaseGridCollectionProps) {
- const supabaseQuery = React.useContext(SupabaseQueryContext)
- const { children, columns, columnGap, rowGap, count, className, loading, testLoading } = props
-
- const result = supabaseQuery
- if (!result || testLoading) {
- return loading
- }
-
- return (
-
- {result.slice(0, count).map((row: any, i: any) => (
-
-
- ))}
-
- )
-}
-```
-
-### SupabaseField
-
-`SupabaseField` will either render a `SupabaseTextField` or `SupabaseImgField` depending on the type. These code components simply read a single value from the contexts and display the data.
-
-```tsx
-// supabase-demo/components/CodeComponents/DisplayCollections.tsx
-
-export function SupabaseTextField({ name, className }: { name?: string; className?: string }) {
- const contexts = useAllContexts()
- if (!name) {
- return {repeatedElement(i === 0, children)}
- You need to set the name prop
- } - return{getPropValue(name, contexts)}
-}
-```
-
-In summary, by populating state into React contexts, we can store and retrieve data for use in other code components, which can be used for arbitrarily powerful interactions in Plasmic Studio.
-
-export const Page = ({ children }) =>
-
-
-
-
-
-
-
-## Step 1: Prerequisites
-
-1. **A production Supabase project's connection string:** These can be found in Supabase via `Organization > Project > Database > Connection Pooling > Connection string`
-2. **A development Supabase project's connection string:** Same steps as above, but a different project/environment
-3. **A read-only role** in Production (recommended): This can be done by running the following statements on Supabase via `Organization > SQL Editor > + New Query`
-
-> To create a read-only role across all schemas you can checkout the Snaplet [docs](https://docs.snaplet.dev/guides/postgresql/#create-a-read-only-role)
-
-## Step 2: Copying your production database
-
-### 2.1. Connect your data source
-
-Navigate to [https://www.snaplet.dev/](https://www.snaplet.dev/) and sign up for a new account (it’s free). Once you have successfully signed up for a new account, create a team, and start by connecting to your Supabase project.
-
-
-
-Enter the credentials of your production Supabase project. Find the "Connection string" in Supabase via `Organization > Project > Settings > Database > Connection string` (at the bottom of the page).
-
-The password is the same password you used when creating the Supabase project.
-
-
-
-You’ll have to confirm providing Snaplet access to your database. Snaplet will prompt you to only provide `read-only` access to your database. Snaplet has a guide in their documentation on how to do so [here](https://docs.snaplet.dev/guides/postgresql/#create-read-only-role).
-
-> Note that whatever connection string you provide here will be that of your Data Source – essentially the production database in a real-life scenario
-
-
-
-### 2.2. Transform your data
-
-
-
-The next step is to exclude any schemas that you do not require. You are able to exclude an entire schema by clicking on the drop-down at the top, selecting the schema you would like to exclude and clicking ‘Exclude schema’. Alternatively, you can select a given schema and exclude only specific tables from that particular schema. Exclude any non-required table data (such as logs) and extensions and view your columns.
-
-At this point, Snaplet will automatically detect any columns that have Personally Identifiable Information (PII) and mark them in purple. If there are any additional columns that hold data you would like to anonymise, you can click on the respective column name and provide a replacement value for the data in that column. To complete the onboarding, click on `Review and Save` and proceed to the dashboard.
-
-
-
-### 2.3. Create a Snapshot
-
-Create a snapshot of your production database. This is what you’re going to restore later into your data target (more on that later in the guide).
-
-## Step 3: Pasting into your development database
-
-### 3.1. Create a data target on Supabase
-
-Your data target is where you want Snaplet to restore the captured snapshot of your production project. This would most likely be either your staging or developer Supabase project. If you don’t already have a developer database setup on Supabase, create a new data target by setting up a new project on Supabase. To create a new project, follow the steps below:
-
-1. Go to [supabase.com/dashboard](https://supabase.com/dashboard/)
-2. Click on “new project”
-3. Enter your project details
-4. Wait for the new database to launch
-
-> Remember the password you use when creating the project. You’ll need this password to connect your database to Snaplet later.
-
-### 3.2. Install the Snaplet CLI
-
-1. Open your terminal and run `curl -sL https://app.snaplet.dev/get-cli/ | bash`
-2. Run `snaplet auth`
-3. Navigate to [https://app.snaplet.dev/access-token/cli](https://app.snaplet.dev/access-token/cli) to get your access token
-4. Paste your access token in the terminal
-
-### 3.3. Restore to the data target
-
-You're now ready to restore your production snapshot into your Supabase development project.
-
-1. Navigate to your project directory
-2. Run `snaplet setup` – you will be prompted to enter your database credentials. These are the database credentials of your **data target.** This could be your staging or development database
-
-Once completed, you will be presented with a list of databases that are connected to your Snaplet account.
-
-1. Select a data source from the list
-2. Run `snaplet snapshot restore`
-
-## All done!
-
-As a Supabase user, you can see how this solves an issue developers all typically experience when attempting to create multiple development environments and populating each of those environments with data that can be worked with. Snaplet simplifies this process down to creating the respective Supabase projects, connecting the data source (The production database) to Snaplet and telling Snaplet where to restore that data (staging and development databases).
-
-If you want to learn more about Snaplet, you can explore the Snaplet [docs](https://docs.snaplet.dev/). If you have any questions, feel free to [reach out on Discord](https://discord.com/invite/6HUuajc866).
-
-export const Page = ({ children }) =>
-
- )
-}
-```
-
-Finally, replace the contents of the file `/pages/index.js` to render our new `StytchLogin` and `Profile` components.
-
-```jsx
-// pages/index.js
-import styles from '../styles/Home.module.css'
-import Profile from '../components/Profile'
-import StytchLogin from '../components/StytchLogin'
-
-const Index = ({ user, publicToken }) => {
- let content
- if (user) {
- content = Welcome {user.userId}
-Your expenses
- {user.expenses?.length > 0 ? ( - user.expenses.map((expense) => ( -- {expense.title}: ${expense.value} -
- )) - ) : ( -You have no expenses!
- )} - - - - -{content}
-}
-
-export async function getServerSideProps({ req, res }) {
- const user = null // Will update later
- return {
- props: { user, publicToken: process.env.STYTCH_PUBLIC_TOKEN },
- }
-}
-
-export default Index
-```
-
-On `localhost:3000` there is now a login form prompting for your email address.
-
-
-
-Enter your email address and press **Continue with email**.
-
-
-
-In your inbox you will find a login request from your app.
-
-
-
-However, if you click the link in the email you will get a 404. We need to build an API route to handle the email magic link authentication.
-
-## Step 6: Authenticate and start a session
-
-To make authentication easier we will use the Stytch Node.js library. Run
-
-```bash
-npm install stytch
-```
-
-Additionally, we will need to store the authenticated session in a cookie. Run
-
-```bash
-npm install cookies-next
-```
-
-Create a new folder named `utils` and inside a file named`stytchLogic.js` with the following contents
-
-```jsx
-// utils/stytchLogic.js
-import * as stytch from 'stytch'
-import { getCookie, setCookies, removeCookies } from 'cookies-next'
-
-export const SESSION_COOKIE = 'stytch_cookie'
-
-let client
-const loadStytch = () => {
- if (!client) {
- client = new stytch.Client({
- project_id: process.env.STYTCH_PROJECT_ID,
- secret: process.env.STYTCH_SECRET,
- env: process.env.STYTCH_PROJECT_ENV === 'live' ? stytch.envs.live : stytch.envs.test,
- })
- }
-
- return client
-}
-
-export const getAuthenticatedUserFromSession = async (req, res) => {
- const sessionToken = getCookie(SESSION_COOKIE, { req, res })
- if (!sessionToken) {
- return null
- }
-
- try {
- const stytchClient = loadStytch()
- const resp = await stytchClient.sessions.authenticate({
- session_token: sessionToken,
- })
- return resp.session.user_id
- } catch (error) {
- console.log(error)
- return null
- }
-}
-
-export const revokeAndClearSession = async (req, res) => {
- const sessionToken = getCookie(SESSION_COOKIE, { req, res })
-
- if (sessionToken) {
- try {
- const stytchClient = loadStytch()
- await stytchClient.sessions.revoke({
- session_token: sessionToken,
- })
- } catch (error) {
- console.log(error)
- }
- removeCookies(SESSION_COOKIE, { req, res })
- }
-
- return res.redirect('/')
-}
-
-export const authenticateTokenStartSession = async (req, res) => {
- const { token, type } = req.query
- let sessionToken
- try {
- const stytchClient = loadStytch()
- const resp = await stytchClient.magicLinks.authenticate(token, {
- session_duration_minutes: 30,
- })
- sessionToken = resp.session_token
- } catch (error) {
- console.log(error)
- const errorString = JSON.stringify(error)
- return res.status(400).json({ errorString })
- }
-
- setCookies(SESSION_COOKIE, sessionToken, {
- req,
- res,
- maxAge: 60 * 60 * 24,
- secure: true,
- })
-
- return res.redirect('/')
-}
-```
-
-This logic is responsible for setting up the Stytch client we will use to call the API. It provides functions we will use to login, logout, and validate user sessions.
-
-In order to complete the email login flow, create a new file `pages/api/authenticate.js` with the contents:
-
-```jsx
-// pages/api/authenticate.js
-import { authenticateTokenStartSession } from '../../utils/stytchLogic'
-
-export default async function handler(req, res) {
- return authenticateTokenStartSession(req, res)
-}
-```
-
-We will also create a logout API endpoint with similar contents. In `pages/api/logout.js` include the following:
-
-```jsx
-// pages/api/logout.js
-import { revokeAndClearSession } from '../../utils/stytchLogic'
-
-export default async function handler(req, res) {
- return revokeAndClearSession(req, res)
-}
-```
-
-Finally, update `pages/index.js` by importing `getAuthenticatedUserFromSession`, and calling it to set the user variable in `getServerSideProps`.
-
-```jsx
-// pages/index.js
-import styles from '../styles/Home.module.css'
-
-import StytchLogin from '../components/StytchLogin'
-import Profile from '../components/Profile'
-import { getAuthenticatedUserFromSession } from '../utils/stytchLogic'
-
-const Index = ({ user, publicToken }) => {
- let content
- if (user) {
- content = {content}
-}
-
-export async function getServerSideProps({ req, res }) {
- const userId = await getAuthenticatedUserFromSession(req, res)
- if (userId) {
- return {
- props: { user: { userId }, publicToken: process.env.STYTCH_PUBLIC_TOKEN },
- }
- }
- return {
- props: { publicToken: process.env.STYTCH_PUBLIC_TOKEN },
- }
-}
-
-export default Index
-```
-
-Return to `localhost:3000`, and login again by sending yourself a new email. Upon clicking through in the email you should be presented with “Welcome $USER_ID”. If you refresh the page, you should remain in an authenticated state. If you press **Logout** then you should return to the login screen.
-
-
-
-Now that we have a working login flow with persistent authentication it is time to pull in our expense data from Supabase.
-
-## Step 7: Requesting user data from Supabase
-
-First, install the Supabase client:
-
-```bash
-npm install @supabase/supabase-js
-```
-
-In order to pass an authenticated `user_id` to Supabase we will package it within a JWT. Install jsonwebtoken:
-
-```bash
-npm install jsonwebtoken
-```
-
-Create a new file `utils/supabase.js` and add the following:
-
-```jsx
-// utils/supabase.js
-import { createClient } from '@supabase/supabase-js'
-import jwt from 'jsonwebtoken'
-
-const getSupabase = (userId) => {
- const supabase = createClient(
- process.env.NEXT_PUBLIC_SUPABASE_URL,
- process.env.NEXT_PUBLIC_SUPABASE_KEY
- )
-
- if (userId) {
- const payload = {
- userId,
- exp: Math.floor(Date.now() / 1000) + 60 * 60,
- }
-
- supabase.auth.session = () => ({
- access_token: jwt.sign(payload, process.env.SUPABASE_SIGNING_SECRET),
- })
- }
-
- return supabase
-}
-
-export { getSupabase }
-```
-
-Our payload for the JWT will contain our user's unique identifier from Stytch, their `user_id`. We are signing this JWT using Supabase's signing secret, so Supabase will be able to validate it is authentic and hasn't been tampered with in transit.
-
-Let's load our expenses from Supabase on the home page! Update `pages/index.js` a final time to make a request for expense data from Supabase.
-
-```jsx
-import styles from '../styles/Home.module.css'
-
-import StytchLogin from '../components/StytchLogin'
-import Profile from '../components/Profile'
-import { getAuthenticatedUserFromSession } from '../utils/stytchLogic'
-import { getSupabase } from '../utils/supabase'
-
-const Index = ({ user, publicToken }) => {
- let content
- if (user) {
- content = {content}
-}
-
-export async function getServerSideProps({ req, res }) {
- const userId = await getAuthenticatedUserFromSession(req, res)
-
- if (userId) {
- const supabase = getSupabase(userId)
- const { data: expenses } = await supabase.from('expenses').select('*')
-
- return {
- props: {
- user: { userId, expenses },
- publicToken: process.env.STYTCH_PUBLIC_TOKEN,
- },
- }
- } else {
- return {
- props: { publicToken: process.env.STYTCH_PUBLIC_TOKEN },
- }
- }
-}
-
-export default Index
-```
-
-When we reload our application, we are still getting the empty state for expenses.
-
-This is because we enabled Row Level Security, which blocks all requests by default and lets you granularly control access to the data in your database. To enable our user to select their expenses we need to write a RLS policy.
-
-## Step 8: Write a policy to allow select
-
-Our policy will need to know who our currently logged in user is to determine whether or not they should have access. Let's create a PostgreSQL function to extract the current user from our new JWT.
-
-Navigate back to the Supabase dashboard, select SQL from the sidebar menu, and click **New query**. This will create a new query,, which will allow us to run any SQL against our Postgres database.
-
-Write the following and click **Run**.
-
-```sql
-create or replace function auth.user_id() returns text as $$
- select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text;
-$$ language sql stable;
-```
-
-You should see the output `Success, no rows returned`. This created a function called `auth.user_id()`, which will inspect the `userId` field of our JWT payload.
-
-> Note: To learn more about PostgreSQL functions, check out this [deep dive video](https://www.youtube.com/watch?v=MJZCCpCYEqk).
-
-Let's create a policy that checks whether this user is the owner of an expense.
-
-Select **Authentication** from the Supabase sidebar menu, click **Policies**, then **New Policy**.
-
-
-
-From the modal, select **For full customization create a policy from scratch** and add the following.
-
-
-
-This policy is calling the function we just created to get the currently logged in user's `user_id` `auth.user_id()` and checking whether this matches the `user_id` column for the current expense. If it does, then it will allow the user to select it, otherwise it will continue to deny.
-
-Click Review and then Save policy. After you've saved, click Enable RLS on the table to enable the policy we just created.
-
-> Note: To learn more about RLS and policies, check out this [video](https://www.youtube.com/watch?v=Ow_Uzedfohk).
-
-The last thing we need to do is update the `user_id` columns for our existing expenses.
-
-Head back to the Supabase dashboard, and select Table editor from the sidebar. You will notice each entry has `user_id` set to `NULL`. We need to update this value to the proper `user_id`.
-
-
-
-To get the `user_id` for our Stytch user, you can pull it from the welcome page in our example app (eg `user-test-61497d40-f957-45cd-a6c8-5408d22e93bc`).
-
-
-
-Update each row in Supabase to this `user_id`.
-
-
-
-Return to `localhost:3000`, and you will see your expenses listed.
-
-
-
-We now have a basic expense tracker application powered by Stytch, Supabase, and Next.js. From here you could add additional features like adding, editing, and organizing your expenses further.
-
-> Note: You can find a completed version of this project on [Github](https://github.com/stytchauth/stytch-nextjs-supabase).
-
-## Optional: Add Google One Tap
-
-In this optional step, we will extend our application to allow users to login with Google One Tap in addition to Email magic links.
-
-You will need to follow the first four steps of [this guide](https://stytch.com/docs/oauth?utm_source=supabase&utm_medium=guide#guides_google-sdk) to create a Google project, set up Google OAuth consent, and configure credentials and redirect URLs.
-
-First, we will make some adjustments to the `StytchLogin` component. We will update the configuration, so that it uses both Google OAuth, and Email magic links.
-
-```jsx
-// components/StytchLogin.js
-import React from 'react'
-import { Stytch } from '@stytch/stytch-react'
-
-const stytchConfig = {
- loginOrSignupView: {
- products: ['oauth', 'emailMagicLinks'],
- oauthOptions: {
- providers: [
- {
- type: 'google',
- one_tap: true,
- position: 'embedded',
- },
- ],
- loginRedirectURL: 'http://localhost:3000/api/authenticate?type=oauth',
- signupRedirectURL: 'http://localhost:3000/api/authenticate?type=oauth',
- },
- emailMagicLinksOptions: {
- loginRedirectURL: 'http://localhost:3000/api/authenticate',
- loginExpirationMinutes: 30,
- signupRedirectURL: 'http://localhost:3000/api/authenticate',
- signupExpirationMinutes: 30,
- createUserAsPending: true,
- },
- },
- style: {
- fontFamily: '"Helvetica New", Helvetica, sans-serif',
- width: '321px',
- primaryColor: '#0577CA',
- },
-}
-
-const StytchLogin = ({ publicToken }) => {
- return (
-
-
- SuperTokens 💫
-
-
-
-
-
-
- )
-}
-```
-
-As seen above we will be using SuperTokens `useSessionContext` hook to retrieve the authenticated user's `userId` and `accessTokenPayload`. Using React's `useEffect` hook we can use the Supabase client to retrieve the user's email from Supabase using the JWT retrieved from the user's `accessTokenPayload` and their `userId`.
-
-## Step 8: Create Policies to enforce Row Level Security for Select and Insert requests
-
-To enforce Row Level Security for the `Users` table we will need to create policies for Select and Insert requests.
-
-These polices will retrieve the userId from the JWT and check if it matches the userId in the Supabase table
-
-To do this we will need a PostgreSQL function to extract the userId from the JWT.
-
-The payload in the JWT will have the following structure:
-
-```
-// JWT payload
-{
- userId,
- exp
-}
-```
-
-To create the PostgreSQL function, lets navigate back to the Supabase dashboard, select `SQL` from the sidebar menu, and click `New query`. This will create a new query called `new sql snippet`, which will allow us to run any SQL against our Postgres database.
-
-Write the following and click `Run`.
-
-```sql
-create or replace function auth.user_id() returns text as $$
- select nullif(current_setting('request.jwt.claims', true)::json->>'userId', '')::text;
-$$ language sql stable;
-```
-
-This will create a function called `auth.user_id()`, which will inspect the `userId` field of our JWT payload.
-
-### SELECT query policy
-
-Our first policy will check whether the user is the owner of the email.
-
-Select `Authentication` from the Supabase sidebar menu, click `Policies`, and then `New Policy` on the `Users` table.
-
-
-
-From the modal, select `Create a policy from scratch` and add the following.
-
-
-
-This policy is calling the PostgreSQL function we just created to get the currently logged in user's ID `auth.user_id()` and checking whether this matches the `user_id` column for the current `email`. If it does, then it will allow the user to select it, otherwise it will continue to deny.
-
-Click `Review` and then `Save policy`.
-
-### INSERT query policy
-
-Our second policy will check whether the `user_id` being inserted is the same as the `userId` in the JWT.
-
-Create another policy and add the following:
-
-
-
-Similar to the previous policy we are calling the PostgreSQL function we created to get the currently logged in user's ID `auth.user_id()` and check whether this matches the `user_id` column for the row we are trying to insert. If it does, then it will allow the user to insert the row, otherwise it will continue to deny.
-
-Click `Review` and then `Save policy`.
-
-## Step 9: Test your changes
-
-You can now sign up and you should see the following screen:
-
-
-
-If you navigate to your table you should see a new row with the user's `user_id` and `email`.
-
-
-
-## Resources
-
-- [SuperTokens](https://supertokens.com/) official website.
-- [SuperTokens community](https://supertokens.com/discord).
-- [SuperTokens documentation](https://supertokens.com/docs/guides).
-
-export const Page = ({ children }) =>
- You are authenticated with SuperTokens! (UserId: {userId})
-
- Your email retrieved from Supabase: {userEmail}
-
working
-}
-```
-
-Run a local development server.
-
-```bash
-npm run dev
-```
-
-Navigate to `http://localhost:3000` to confirm the project is "working".
-
-## Step 4: Pull environment variables from Vercel
-
-First, we need to login to Vercel using their CLI tool.
-
-```bash
-npx vercel login
-```
-
-This will ask if we are happy to install `vercel`. Type `y` and hit `Enter`.
-
-We will then need to authenticate Vercel by selecting `Continue with GitHub`.
-
-This will open a browser window where you need to authenticate with your GitHub account.
-
-Next, we need to link our Vercel project.
-
-```bash
-npx vercel link
-```
-
-Step through the prompts to link the Vercel project.
-
-
-
-Copy the environment variables from our Vercel project.
-
-```bash
-npx vercel env pull
-```
-
-This will create a `.env` file containing our Supabase environment variables. Rename this file to `.env.local` to automatically ignore it from git.
-
-## Step 5: Install Supabase.js
-
-Install the `supabase-js` library.
-
-```bash
-npm i @supabase/supabase-js
-```
-
-Create a new file called `/utils/supabase.js` and add the following.
-
-```jsx
-import { createClient } from '@supabase/supabase-js'
-
-export default createClient(
- process.env.NEXT_PUBLIC_SUPABASE_URL,
- process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
-)
-```
-
-Create a new file called `/components/NewTodo.js` and add the following.
-
-```jsx
-import { useState } from 'react'
-import supabase from '../utils/supabase'
-
-export default ({ reload }) => {
- const [title, setTitle] = useState('')
-
- const addTodo = async (e) => {
- e.preventDefault()
- await supabase.from('todos').insert({ title })
- reload()
- setTitle('')
- }
-
- return (
-
- )
-}
-```
-
-This component will be responsible for writing a new `todo` to Supabase.
-
-Let's import our new component in `pages/index.js` and display a list of todos.
-
-```jsx
-import { useState, useEffect } from 'react'
-import styles from '../styles/Home.module.css'
-import supabase from '../utils/supabase'
-import NewTodo from '../components/NewTodo'
-
-export default function Home() {
- const [todos, setTodos] = useState([])
-
- const fetchTodos = async () => {
- const { data } = await supabase.from('todos').select('*')
- setTodos(data)
- }
-
- useEffect(() => {
- fetchTodos()
- }, [])
-
- return (
-
-
- )
-}
-```
-
-## Resources
-
-- [Vercel official website](https://vercel.com).
-- [Vercel blog](https://vercel.com/blog).
-- [Vercel docs](https://vercel.com/docs).
-- [Vercel Integration docs](https://vercel.com/docs/integrations)
-
-export const Page = ({ children }) => {todo.title}
- ))} -Build in a weekend, - scale to millions + + {' '} + scale to millions +
diff --git a/apps/www/components/DarkModeToggle.tsx b/apps/www/components/DarkModeToggle.tsx
index 4b3b03cc7aa..f8c9ad1abff 100644
--- a/apps/www/components/DarkModeToggle.tsx
+++ b/apps/www/components/DarkModeToggle.tsx
@@ -1,20 +1,21 @@
import { useTheme } from 'common/Providers'
import { IconSun, IconMoon } from 'ui'
-function DarkModeToggle() {
+function DarkModeToggle({ disabled = false }: { disabled?: boolean }) {
const { isDarkMode, toggleTheme } = useTheme()
return (
-
+
© Supabase Inc
-
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index a309e4087f1..6aba7c1539c 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -3,31 +3,55 @@ import { useRouter } from 'next/router'
import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
import gaEvents from '~/lib/gaEvents'
-import { Button, IconBookOpen } from 'ui'
+import { Button, IconArrowRight, IconBookOpen } from 'ui'
import SectionContainer from '~/components/Layouts/SectionContainer'
import HeroFrameworks from './HeroFrameworks'
import styles from './hero.module.css'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
const Hero = () => {
const router = useRouter()
+ const [showAnnouncement, setShowAnnouncement] = useState(false)
const telemetryProps = useTelemetryProps()
const sendTelemetryEvent = async (event: TelemetryEvent) => {
await Telemetry.sendEvent(event, telemetryProps, router)
}
+ useEffect(() => {
+ if (typeof window !== undefined) {
+ const lw8AnnouncementKey = window.localStorage.getItem('announcement_SupabaseLaunchWeek8')
+ setShowAnnouncement(!!lw8AnnouncementKey)
+ }
+ }, [showAnnouncement])
+
return (
-
-
+
+
+
)
diff --git a/apps/www/components/Hero/HeroFrameworks.tsx b/apps/www/components/Hero/HeroFrameworks.tsx
index 12e604a1746..2065c40a3d3 100644
--- a/apps/www/components/Hero/HeroFrameworks.tsx
+++ b/apps/www/components/Hero/HeroFrameworks.tsx
@@ -31,6 +31,12 @@ const frameworks = [
docs: '/docs/guides/getting-started/quickstarts/flutter',
gaEvent: 'www_hp_hero_frameworks_flutter',
},
+ {
+ name: 'Android Kotlin',
+ icon: 'M29.6,11.4L11.4,28.2V13.4c0-1.1,1-2,2.1-2H29.6z M45.1,14.7L25.4,32.9L11.6,45.5c-0.2-0.3-0.3-0.6-0.3-0.9V33.7l24.2-22.3h8C45.5,11.4,46.4,13.5,45.1,14.7z M44.5,46.6H16.5l16.5-15.2L46,43.3C47.3,44.5,46.4,46.6,44.5,46.6z',
+ docs: '/docs/guides/getting-started/quickstarts/kotlin',
+ gaEvent: 'www_hp_hero_frameworks_kotlin',
+ },
{
name: 'Svelte',
icon: 'M28.8421 13.5737C33.6246 10.5267 40.239 11.9474 43.588 16.7408H43.5882C45.1937 18.9881 45.826 21.7874 45.3423 24.5066C45.1104 25.792 44.6203 27.017 43.9015 28.1076C44.9502 30.1077 45.3021 32.4004 44.9015 34.6229C44.4229 37.291 42.8426 39.634 40.5482 41.0772L32.1489 46.4304C27.3671 49.4774 20.7527 48.0572 17.4029 43.2634C15.7977 41.016 15.1654 38.2167 15.6488 35.4975C15.8809 34.2121 16.3713 32.987 17.0902 31.8964C16.041 29.8965 15.6888 27.6038 16.0895 25.3813C16.5683 22.7133 18.1485 20.3704 20.4428 18.927L28.8421 13.5737ZM20.8577 41.0643C22.4527 43.3635 25.3126 44.4236 28.0207 43.7194H28.0206C28.6247 43.558 29.2004 43.305 29.7278 42.9693L38.1291 37.6151C39.5092 36.7467 40.4598 35.3374 40.7479 33.7325C41.0388 32.0968 40.6583 30.4128 39.6925 29.061C38.0976 26.7618 35.2377 25.7017 32.5296 26.4059C31.926 26.5672 31.3506 26.8201 30.8237 27.1557L27.618 29.1987C27.4585 29.3002 27.2845 29.3766 27.1019 29.4255C26.286 29.6371 25.4247 29.3173 24.9444 28.6246C24.6537 28.2169 24.5393 27.7094 24.627 27.2164C24.7138 26.7331 25.0001 26.3087 25.4157 26.0471L33.8177 20.6927C33.9771 20.5912 34.1512 20.5147 34.3338 20.4659C35.1494 20.2542 36.0104 20.5738 36.4904 21.2664C36.7471 21.6298 36.8671 22.0722 36.8293 22.5155L36.8005 22.8272L37.1128 22.922C38.294 23.2783 39.4056 23.8339 40.3996 24.5648L40.8298 24.8804L40.988 24.398C41.0728 24.1413 41.1399 23.8792 41.1888 23.6134C41.4796 21.9776 41.0992 20.2937 40.1334 18.9419C38.5385 16.6427 35.6786 15.5826 32.9705 16.2868C32.3664 16.4481 31.7907 16.7011 31.2633 17.0369L22.862 22.3915C21.4818 23.2594 20.5311 24.6687 20.2432 26.2735C19.9523 27.9092 20.3328 29.5932 21.2987 30.945C22.8935 33.2442 25.7534 34.3043 28.4616 33.6001C29.0651 33.4388 29.6405 33.1861 30.1677 32.8509L33.3738 30.8071C33.533 30.7057 33.7068 30.6293 33.8892 30.5804C34.7051 30.3689 35.5664 30.6886 36.0467 31.3814C36.3372 31.7891 36.4518 32.2964 36.3648 32.7894C36.2775 33.2728 35.991 33.6973 35.5754 33.959L27.1734 39.3132C27.014 39.4147 26.8399 39.4912 26.6573 39.54C25.8417 39.7517 24.9807 39.4321 24.5007 38.7396C24.2437 38.3763 24.1237 37.9337 24.1618 37.4903L24.1906 37.1787L23.8783 37.084C22.6973 36.7276 21.5858 36.1723 20.5917 35.4419L20.1613 35.1257L20.0031 35.6082C19.9181 35.8648 19.851 36.1269 19.8023 36.3928C19.5115 38.0285 19.8919 39.7125 20.8577 41.0643Z',
diff --git a/apps/www/components/ImageModal.tsx b/apps/www/components/ImageModal.tsx
new file mode 100644
index 00000000000..fab5a4d8207
--- /dev/null
+++ b/apps/www/components/ImageModal.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react'
+
+import * as Dialog from '@radix-ui/react-dialog'
+
+import styleHandler from 'ui/src/lib/theme/styleHandler'
+
+export type ImageModalProps = RadixProps & Props
+
+interface RadixProps
+ extends Dialog.DialogProps,
+ Pick<
+ Dialog.DialogContentProps,
+ | 'onOpenAutoFocus'
+ | 'onCloseAutoFocus'
+ | 'onEscapeKeyDown'
+ | 'onPointerDownOutside'
+ | 'onInteractOutside'
+ > {}
+
+interface Props {
+ children?: React.ReactNode
+ onCancel?: any
+ visible: boolean
+ size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
+ className?: string
+}
+
+/**
+ * Similar to ui/Modal component but with an unstyled dialog content component.
+ * Mainly used to show images in a overlay.
+ */
+const ImageModal = ({
+ children,
+ onCancel = () => {},
+ visible = false,
+ size = 'large',
+ className = '',
+}: ImageModalProps) => {
+ const [open, setOpen] = useState(visible ? visible : false)
+
+ const __styles = styleHandler('modal')
+
+ useEffect(() => {
+ setOpen(visible)
+ }, [visible])
+
+ function handleOpenChange(open: boolean) {
+ if (visible !== undefined && !open) {
+ // controlled component behavior
+ onCancel()
+ } else {
+ // un-controlled component behavior
+ setOpen(open)
+ }
+ }
+
+ const contentClasses = 'relative data-open:animate-overlay-show data-closed:animate-overlay-hide'
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function Content({ children }: { children: React.ReactNode }) {
+ const __styles = styleHandler('modal')
+ return
-
+
+ {showAnnouncement && (
+
+
+
+
+ Get your ticket
+
+ Launch Week 8 - August 7-11
+ Build in a weekend @@ -63,12 +87,46 @@ const Hero = () => {
+
+
+
+
+
+
+
+
{children}
+}
+
+ImageModal.Content = Content
+export default ImageModal
diff --git a/apps/www/components/LaunchWeek/ScheduleInfo.tsx b/apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/ScheduleInfo.tsx
rename to apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
diff --git a/apps/www/components/LaunchWeek/days.json b/apps/www/components/LaunchWeek/5/days.json
similarity index 100%
rename from apps/www/components/LaunchWeek/days.json
rename to apps/www/components/LaunchWeek/5/days.json
diff --git a/apps/www/components/LaunchWeek/HackathonSection.tsx b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/HackathonSection.tsx
rename to apps/www/components/LaunchWeek/6/HackathonSection.tsx
diff --git a/apps/www/components/LaunchWeek/LaunchHero.tsx b/apps/www/components/LaunchWeek/6/LaunchHero.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/LaunchHero.tsx
rename to apps/www/components/LaunchWeek/6/LaunchHero.tsx
diff --git a/apps/www/components/LaunchWeek/PreLaunchTeaser.tsx b/apps/www/components/LaunchWeek/6/PreLaunchTeaser.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/PreLaunchTeaser.tsx
rename to apps/www/components/LaunchWeek/6/PreLaunchTeaser.tsx
diff --git a/apps/www/components/LaunchWeek/launch-controller.json b/apps/www/components/LaunchWeek/6/launch-controller.json
similarity index 100%
rename from apps/www/components/LaunchWeek/launch-controller.json
rename to apps/www/components/LaunchWeek/6/launch-controller.json
diff --git a/apps/www/components/LaunchWeek/lw6_days.json b/apps/www/components/LaunchWeek/6/lw6_days.json
similarity index 100%
rename from apps/www/components/LaunchWeek/lw6_days.json
rename to apps/www/components/LaunchWeek/6/lw6_days.json
diff --git a/apps/www/components/LaunchWeek/7/BlogLinks.tsx b/apps/www/components/LaunchWeek/7/BlogLinks.tsx
index 41168f03550..6ccf0de19ca 100644
--- a/apps/www/components/LaunchWeek/7/BlogLinks.tsx
+++ b/apps/www/components/LaunchWeek/7/BlogLinks.tsx
@@ -2,7 +2,7 @@ import { motion } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
-import days from '~/components/LaunchWeek/lw7_days'
+import days from '~/components/LaunchWeek/7/lw7_days'
const BlogLinks = () => {
const activeDays = days.filter((day) => Date.parse(day.publishedAt) <= Date.now())
diff --git a/apps/www/components/LaunchWeek/LW7BgGraphic.tsx b/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/LW7BgGraphic.tsx
rename to apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
diff --git a/apps/www/components/LaunchWeek/LabelBadge.tsx b/apps/www/components/LaunchWeek/7/LabelBadge.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/LabelBadge.tsx
rename to apps/www/components/LaunchWeek/7/LabelBadge.tsx
diff --git a/apps/www/components/LaunchWeek/LaunchSection/Announcement.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/Announcement.tsx
similarity index 94%
rename from apps/www/components/LaunchWeek/LaunchSection/Announcement.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/Announcement.tsx
index 73805f6de09..5f8f4db18a9 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/Announcement.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/Announcement.tsx
@@ -1,4 +1,4 @@
-import { Announcement as AnnouncementType } from '../types'
+import { Announcement as AnnouncementType } from '../../types'
export const Announcement = (props: AnnouncementType) => {
const containerClasses = []
diff --git a/apps/www/components/LaunchWeek/LaunchSection/ArticleButton.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButton.tsx
similarity index 95%
rename from apps/www/components/LaunchWeek/LaunchSection/ArticleButton.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/ArticleButton.tsx
index 10826a772f0..364e9ccd5eb 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/ArticleButton.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButton.tsx
@@ -1,5 +1,5 @@
import { NewspaperIcon } from '@heroicons/react/outline'
-import { Article } from '../types'
+import { Article } from '../../types'
const ArticleButton = (props: Article) => {
return (
diff --git a/apps/www/components/LaunchWeek/LaunchSection/ArticleButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
similarity index 94%
rename from apps/www/components/LaunchWeek/LaunchSection/ArticleButtonListItem.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
index be927a23cd2..e374bd023fc 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/ArticleButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
@@ -1,6 +1,6 @@
import { NewspaperIcon } from '@heroicons/react/outline'
import Link from 'next/link'
-import { Article } from '../types'
+import { Article } from '../../types'
const ArticleButtonListItem = (props: Article) => {
return (
diff --git a/apps/www/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
diff --git a/apps/www/components/LaunchWeek/LaunchSection/ProductButton.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
similarity index 95%
rename from apps/www/components/LaunchWeek/LaunchSection/ProductButton.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
index c1b89239015..550d0e28815 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/ProductButton.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
@@ -1,5 +1,5 @@
import { SparklesIcon } from '@heroicons/react/outline'
-import { Article } from '../types'
+import { Article } from '../../types'
const ProductButton = (props: Article) => {
return (
diff --git a/apps/www/components/LaunchWeek/LaunchSection/ProductButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
similarity index 95%
rename from apps/www/components/LaunchWeek/LaunchSection/ProductButtonListItem.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
index bb8edfb1af4..07ed656ae0c 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/ProductButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
@@ -1,6 +1,6 @@
import { SparklesIcon } from '@heroicons/react/outline'
import Link from 'next/link'
-import { Article } from '../types'
+import { Article } from '../../types'
export const ProductButtonListItem = (props: Article) => {
return (
diff --git a/apps/www/components/LaunchWeek/LaunchSection/TicketBrick.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrick.tsx
similarity index 96%
rename from apps/www/components/LaunchWeek/LaunchSection/TicketBrick.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/TicketBrick.tsx
index 50e0438868d..5f393f57650 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/TicketBrick.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrick.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import TicketHeader from '../Ticket/TicketHeader'
import TicketNumber from '../Ticket/TicketNumber'
-import { UserData } from '../Ticket/hooks/use-conf-data'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
import Image from 'next/image'
interface Props {
diff --git a/apps/www/components/LaunchWeek/LaunchSection/TicketBrickWall.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWall.tsx
similarity index 96%
rename from apps/www/components/LaunchWeek/LaunchSection/TicketBrickWall.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWall.tsx
index b757f4cdeaf..ea7922d61f4 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/TicketBrickWall.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWall.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
import React from 'react'
import { Button } from 'ui'
import { useBreakpoint } from 'common/hooks/useBreakpoint'
-import { UserData } from '../Ticket/hooks/use-conf-data'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
import { TicketBrickWallSlider } from './TicketBrickWallSlider'
type user = UserData
diff --git a/apps/www/components/LaunchWeek/LaunchSection/TicketBrickWallSlider.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWallSlider.tsx
similarity index 92%
rename from apps/www/components/LaunchWeek/LaunchSection/TicketBrickWallSlider.tsx
rename to apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWallSlider.tsx
index 8ff947547f9..ebc7a12ffb9 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/TicketBrickWallSlider.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWallSlider.tsx
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
-import { UserData } from '../Ticket/hooks/use-conf-data'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
import { useWindowSize } from 'react-use'
import { Swiper, SwiperSlide } from 'swiper/react'
@@ -34,7 +34,7 @@ export function TicketBrickWallSlider({ users, reverse, speed = 10000 }: Props)
return (
-
+
)
diff --git a/apps/www/components/LaunchWeek/Ticket/TicketNumber.tsx b/apps/www/components/LaunchWeek/7/Ticket/TicketNumber.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/TicketNumber.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/TicketNumber.tsx
diff --git a/apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx b/apps/www/components/LaunchWeek/7/Ticket/TicketProfile.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/TicketProfile.tsx
diff --git a/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx b/apps/www/components/LaunchWeek/7/Ticket/TicketVisual.tsx
similarity index 98%
rename from apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/TicketVisual.tsx
index be31e8c231c..7dffd9a3439 100644
--- a/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx
+++ b/apps/www/components/LaunchWeek/7/Ticket/TicketVisual.tsx
@@ -2,7 +2,7 @@ import styles from './ticket-visual.module.css'
import TicketProfile from './TicketProfile'
import TicketNumber from './TicketNumber'
import Tilt from 'vanilla-tilt'
-import useConfData from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
import TicketHeader from './TicketHeader'
import { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
diff --git a/apps/www/components/LaunchWeek/Ticket/conf-container.module.css b/apps/www/components/LaunchWeek/7/Ticket/conf-container.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/conf-container.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/conf-container.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/conf-container.tsx b/apps/www/components/LaunchWeek/7/Ticket/conf-container.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/conf-container.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/conf-container.tsx
diff --git a/apps/www/components/LaunchWeek/Ticket/form.module.css b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/form.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/form.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/form.tsx b/apps/www/components/LaunchWeek/7/Ticket/form.tsx
similarity index 96%
rename from apps/www/components/LaunchWeek/Ticket/form.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/form.tsx
index d8a9c9dbc3d..15b20e2edb8 100644
--- a/apps/www/components/LaunchWeek/Ticket/form.tsx
+++ b/apps/www/components/LaunchWeek/7/Ticket/form.tsx
@@ -1,10 +1,10 @@
import { useState, useCallback } from 'react'
import cn from 'classnames'
-import useConfData from '~/components/LaunchWeek/Ticket/hooks/use-conf-data'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
import { useRouter } from 'next/router'
-import styleUtils from './utils.module.css'
+import styleUtils from '../../utils.module.css'
import styles from './form.module.css'
-import useEmailQueryParam from '~/components/LaunchWeek/Ticket/hooks/use-email-query-param'
+import useEmailQueryParam from '~/components/LaunchWeek/hooks/use-email-query-param'
import { IconLoader } from '~/../../packages/ui'
type FormState = 'default' | 'loading' | 'error'
diff --git a/apps/www/components/LaunchWeek/Ticket/loading-dots.module.css b/apps/www/components/LaunchWeek/7/Ticket/loading-dots.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/loading-dots.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/loading-dots.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/loading-dots.tsx b/apps/www/components/LaunchWeek/7/Ticket/loading-dots.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/loading-dots.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/loading-dots.tsx
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-actions.module.css b/apps/www/components/LaunchWeek/7/Ticket/ticket-actions.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/ticket-actions.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-actions.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css b/apps/www/components/LaunchWeek/7/Ticket/ticket-copy.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-copy.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx b/apps/www/components/LaunchWeek/7/Ticket/ticket-copy.tsx
similarity index 98%
rename from apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-copy.tsx
index c228e815a67..2286aae4293 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx
+++ b/apps/www/components/LaunchWeek/7/Ticket/ticket-copy.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState, useRef } from 'react'
import cn from 'classnames'
import { SITE_URL } from '~/lib/constants'
-import styleUtils from './utils.module.css'
+import styleUtils from '../../utils.module.css'
import { IconCopy, IconCheck } from 'ui'
type Props = {
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-form.module.css b/apps/www/components/LaunchWeek/7/Ticket/ticket-form.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/ticket-form.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-form.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-image.module.css b/apps/www/components/LaunchWeek/7/Ticket/ticket-image.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/ticket-image.module.css
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-image.module.css
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-image.tsx b/apps/www/components/LaunchWeek/7/Ticket/ticket-image.tsx
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/ticket-image.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-image.tsx
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-info-footer.tsx b/apps/www/components/LaunchWeek/7/Ticket/ticket-info-footer.tsx
similarity index 90%
rename from apps/www/components/LaunchWeek/Ticket/ticket-info-footer.tsx
rename to apps/www/components/LaunchWeek/7/Ticket/ticket-info-footer.tsx
index 7dd3b821630..375223f161c 100644
--- a/apps/www/components/LaunchWeek/Ticket/ticket-info-footer.tsx
+++ b/apps/www/components/LaunchWeek/7/Ticket/ticket-info-footer.tsx
@@ -1,6 +1,6 @@
import styles from './ticket-info.module.css'
import cn from 'classnames'
-import { DATE, SITE_URL } from '~/lib/constants'
+import { LW7_DATE, SITE_URL } from '~/lib/constants'
const siteUrl = new URL(SITE_URL)
const siteUrlForTicket = `${siteUrl.host}${siteUrl.pathname}`.replace(/\/$/, '')
@@ -16,7 +16,7 @@ export default function TicketInfoFooter({
golden && '!text-white'
}`}
>
-
{DATE}
+ {LW7_DATE}
window.scrollTo(0, 0)}
>
diff --git a/apps/www/components/LaunchWeek/lw7-bg-graphic.module.css b/apps/www/components/LaunchWeek/7/lw7-bg-graphic.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/lw7-bg-graphic.module.css
rename to apps/www/components/LaunchWeek/7/lw7-bg-graphic.module.css
diff --git a/apps/www/components/LaunchWeek/lw7_days.ts b/apps/www/components/LaunchWeek/7/lw7_days.ts
similarity index 100%
rename from apps/www/components/LaunchWeek/lw7_days.ts
rename to apps/www/components/LaunchWeek/7/lw7_days.ts
diff --git a/apps/www/components/LaunchWeek/8/AnimatedParticles/Particle.tsx b/apps/www/components/LaunchWeek/8/AnimatedParticles/Particle.tsx
new file mode 100644
index 00000000000..29908f79016
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/AnimatedParticles/Particle.tsx
@@ -0,0 +1,49 @@
+import React, { useRef } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+interface Props {
+ animate?: boolean
+ children: any
+ config: any
+ user?: any
+}
+
+const Particle = ({ animate = true, children, config }: Props) => {
+ const particle = useRef(null)
+
+ const pathOffsetShape =
+ Math.pow(
+ Math.random() * config.xRandomnessShape,
+ config.xRandomness - 1 + 1 - config.xRandomness / 2
+ ) * config.xThickness
+
+ const pathOffset = pathOffsetShape * (pathOffsetShape < 1 || Math.random() < 0.5 ? 1 : -1)
+ const verticalRandomness = Math.random() * (config.yThickness - 1) + 1 - config.yThickness / 2
+
+ const speed = Math.random() * (config.min_speed - config.max_speed) + config.max_speed
+
+ const circumference = (config.widthRadius * Math.PI * 2) / 100
+ const delayOffsetFactor = 100
+ const delayOffset = Math.random() * delayOffsetFactor
+
+ useFrame(({ clock }) => {
+ if (animate) {
+ const timer = clock.getElapsedTime() * speed + delayOffset
+ // When the loop count is even, draw bottom 8 shape
+ // if odd, draw top 8 shape
+ const isEven = Math.floor(timer / circumference) % 2 == 0
+ particle.current.position.x = isEven
+ ? Math.sin(timer) * config.widthRadius * config.widthRatio + pathOffset
+ : Math.sin(timer) * config.widthRadius + pathOffset
+ particle.current.position.y = isEven
+ ? Math.cos(timer) * config.bottomHeightRadius -
+ config.bottomHeightRadius +
+ verticalRandomness
+ : -Math.cos(timer) * config.topHeightRadius + config.topHeightRadius + verticalRandomness
+ }
+ })
+
+ return {children}
+}
+
+export default Particle
diff --git a/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx b/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx
new file mode 100644
index 00000000000..6d88c89268a
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx
@@ -0,0 +1,140 @@
+import React, { useMemo, useEffect, useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { AdditiveBlending } from 'three'
+import Particle from './Particle'
+import useParticlesConfig from './hooks/useParticlesConfig'
+import { SupabaseClient } from '@supabase/supabase-js'
+
+const ParticlesCanvas = ({ supabase, users }: { supabase?: SupabaseClient; users: any }) => {
+ const isWindowUndefined = typeof window === 'undefined'
+ if (isWindowUndefined) return null
+
+ const canvasRef = React.useRef(null)
+
+ const [animate, setAnimate] = useState(true)
+ const { config, handleSetConfig, particles, setParticles, isDebugMode } =
+ useParticlesConfig(users)
+ const [realtimeChannel, setRealtimeChannel] = useState | null>(null)
+
+ const loadUsers = async () => {
+ return await supabase!.from('lw8_tickets_golden').select('username, golden', { count: 'exact' })
+ }
+
+ // Update particles live when new tickets are generated
+ useEffect(() => {
+ if (!!supabase) {
+ const channel = supabase
+ .channel('lw8_tickets_changes')
+ .on(
+ 'postgres_changes',
+ {
+ event: 'INSERT',
+ schema: 'public',
+ table: 'lw8_tickets_golden',
+ },
+ async () => {
+ const { data: users } = await loadUsers()
+
+ handleSetConfig('particles', users?.length)
+ setParticles((prev: any) => users! ?? prev)
+ }
+ )
+ .subscribe()
+ setRealtimeChannel(channel)
+ }
+
+ return () => {
+ // Cleanup realtime subscription on unmount
+ realtimeChannel?.unsubscribe()
+ }
+ }, [])
+
+ // stop animation if canvas if is not in viewport
+ // to avoid unnecessary computations
+ const handleScroll = () => {
+ if (canvasRef.current && typeof window !== 'undefined') {
+ const rect = (canvasRef.current as HTMLDivElement)?.getBoundingClientRect()
+ const isInView = rect.bottom > 0
+
+ setAnimate(isInView)
+ }
+ }
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll)
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ }
+ }, [])
+
+ /* ThreeJs setup */
+
+ const Geometry = useMemo(
+ () => () => (users)
+
+ const [config, setConfig] = useState(defaultConfig)
+
+ const handleSetConfig = (name: string, value: any) => {
+ setConfig((prevConfig) => ({ ...prevConfig, [name]: value }))
+ }
+
+ const init = async () => {
+ if (!isDebugMode) return
+ const dat = await import('dat.gui')
+ const gui = new dat.GUI()
+ const particlesFolder = gui.addFolder('Particles')
+ const shapeFolder = gui.addFolder('Shape')
+ const speedFolder = gui.addFolder('Speed')
+ // const trailFolder = gui.addFolder('Trail')
+ gui.width = 500
+ particlesFolder
+ .add(config, 'particles')
+ .min(1)
+ .max(5000)
+ .step(1)
+ .name('Count')
+ .onChange((value) => {
+ handleSetConfig('particles', value)
+ setParticles(range(0, value))
+ })
+ particlesFolder
+ .add(config, 'particlesSize')
+ .min(1)
+ .max(10)
+ .step(0.05)
+ .name('Size')
+ .onChange((value) => handleSetConfig('particlesSize', value))
+ particlesFolder
+ .add(config, 'goldParticlesSize')
+ .min(1)
+ .max(10)
+ .step(0.05)
+ .name('Gold Particles Size')
+ .onChange((value) => handleSetConfig('goldParticlesSize', value))
+ particlesFolder
+ .add(config, 'particlesSides')
+ .min(3)
+ .max(20)
+ .step(1)
+ .name('Sides')
+ .onChange((value) => handleSetConfig('particlesSides', value))
+ particlesFolder
+ .add(config, 'lightIntensity')
+ .min(0)
+ .max(10)
+ .step(0.05)
+ .name('Light intensity')
+ .onChange((value) => handleSetConfig('lightIntensity', value))
+ particlesFolder
+ .add(config, 'showGold')
+ .name('Show Gold Particles')
+ .onChange((value) => handleSetConfig('showGold', value))
+ particlesFolder
+ .add(config, 'particlesBlending')
+ .name('Blending')
+ .onChange((value) => handleSetConfig('particlesBlending', value))
+ shapeFolder
+ .add(config, 'widthRadius')
+ .min(1)
+ .max(200)
+ .step(1)
+ .name('Width Radius')
+ .onChange((value) => handleSetConfig('widthRadius', value))
+ shapeFolder
+ .add(config, 'widthRatio')
+ .min(0.5)
+ .max(3)
+ .step(0.01)
+ .name('Top/Bottom Ratio')
+ .onChange((value) => handleSetConfig('widthRatio', value))
+ shapeFolder
+ .add(config, 'topHeightRadius')
+ .min(1)
+ .max(200)
+ .step(1)
+ .name('Height Radius - Top')
+ .onChange((value) => handleSetConfig('topHeightRadius', value))
+ shapeFolder
+ .add(config, 'bottomHeightRadius')
+ .min(1)
+ .max(200)
+ .step(1)
+ .name('Height Radius - Bottom')
+ .onChange((value) => handleSetConfig('bottomHeightRadius', value))
+ shapeFolder
+ .add(config, 'xThickness')
+ .min(1)
+ .max(100)
+ .step(0.1)
+ .name('Stroke Width')
+ .onChange((value) => handleSetConfig('xThickness', value))
+ shapeFolder
+ .add(config, 'xRandomnessShape')
+ .min(0)
+ .max(5)
+ .step(0.001)
+ .name('Randomness shape')
+ .onChange((value) => handleSetConfig('xRandomnessShape', value))
+ shapeFolder
+ .add(config, 'xRandomness')
+ .min(0)
+ .max(50)
+ .step(0.01)
+ .name('Randomness')
+ .onChange((value) => handleSetConfig('xRandomness', value))
+ shapeFolder
+ .add(config, 'yThickness')
+ .min(1)
+ .max(50)
+ .step(0.1)
+ .name('y thickness')
+ .onChange((value) => handleSetConfig('yThickness', value))
+ speedFolder
+ .add(config, 'min_speed')
+ .min(-6)
+ .max(6)
+ .step(0.01)
+ .name('Min speed')
+ .onChange((value) => handleSetConfig('min_speed', value))
+ speedFolder
+ .add(config, 'max_speed')
+ .min(-6)
+ .max(6)
+ .step(0.01)
+ .name('Max speed')
+ .onChange((value) => handleSetConfig('max_speed', value))
+
+ particlesFolder.open()
+ shapeFolder.open()
+ speedFolder.open()
+ }
+
+ useEffect(() => {
+ init()
+ }, [])
+
+ return { config, handleSetConfig, particles, setParticles, isDebugMode }
+}
+
+export default useParticlesConfig
diff --git a/apps/www/components/LaunchWeek/8/Countdown.tsx b/apps/www/components/LaunchWeek/8/Countdown.tsx
new file mode 100644
index 00000000000..322b7a944db
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Countdown.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Countdown from 'react-countdown'
+import { CountdownWidget } from 'ui'
+import { LW8_LAUNCH_DATE } from '~/lib/constants'
+
+const CountdownComponent = () => {
+ const renderer = ({ days, hours, minutes, seconds, completed }: any) => {
+ if (completed) {
+ // Render a completed state
+ return null
+ } else {
+ // Render countdown
+ return
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeSection.tsx
new file mode 100644
index 00000000000..b59b35da825
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeSection.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import LabelBadge from './LabelBadge'
+import LaunchWeekPrizeCard from './LaunchWeekPrizeCard'
+import Image from 'next/image'
+
+export default function LaunchWeekPrizeSection({
+ className,
+ ticket,
+}: {
+ className?: string
+ ticket?: any
+}) {
+ const Ticket = ticket
+
+ return (
+ ()
+ const link = `${SITE_URL}/tickets/${username}?lw=8${golden ? `&golden=true` : ''}`
+ const permalink = encodeURIComponent(link)
+ const text = golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT
+ const encodedText = encodeURIComponent(text)
+ const { userData, supabase } = useConfData()
+ const tweetUrl = `https://twitter.com/intent/tweet?url=${permalink}&via=supabase&text=${encodedText}`
+ const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${permalink}`
+ const downloadUrl = `https://obuldanrptloktxcffvn.functions.supabase.co/lw8-ticket?username=${encodeURIComponent(
+ username
+ )}`
+ const params = useParams()
+ const sharePage = params.username
+ const LW_TABLE = 'lw8_tickets'
+
+ useEffect(() => {
+ setImgReady(false)
+
+ const img = new Image()
+
+ img.src = downloadUrl
+ img.onload = () => {
+ setImgReady(true)
+ setLoading(false)
+ if (downloadLink.current) {
+ downloadLink.current.click()
+ downloadLink.current = undefined
+ }
+ }
+ }, [downloadUrl])
+
+ const handleShare = async (social: 'twitter' | 'linkedin') => {
+ if (!supabase) return
+ if (social === 'twitter') {
+ await supabase.from(LW_TABLE).update({ sharedOnTwitter: 'now' }).eq('username', username)
+ window.open(tweetUrl, '_blank')
+ } else if (social === 'linkedin') {
+ await supabase.from(LW_TABLE).update({ sharedOnLinkedIn: 'now' }).eq('username', username)
+ window.open(linkedInUrl, '_blank')
+ }
+ }
+
+ return (
+ ('default')
+ const winningChances = useWinningChances()
+
+ if (!user.username)
+ return (
+ ('default')
+ const [errorMsg] = useState('')
+ const { supabase, session, setUserData, setPageState, userData } = useConfData()
+ const [realtimeChannel, setRealtimeChannel] = useState | null>(null)
+ const formRef = useRef(null)
+ const router = useRouter()
+
+ useEffect(() => {
+ if (supabase && session?.user && !userData.id) {
+ document.body.classList.add('ticket-generated')
+ const username = session.user.user_metadata.user_name
+ setUsername(username)
+ const name = session.user.user_metadata.full_name
+ const email = session.user.email
+ supabase
+ .from('lw8_tickets')
+ .insert({ email, name, username, referred_by: router.query?.referral ?? null })
+ .eq('email', email)
+ .select()
+ .single()
+ .then(async ({ error }: any) => {
+ // If error because of duplicate email, ignore and proceed, otherwise sign out.
+ if (error && error?.code !== '23505') return supabase.auth.signOut()
+ const { data } = await supabase
+ .from('lw8_tickets_golden')
+ .select('*')
+ .eq('username', username)
+ .single()
+ if (data) {
+ setUserData(data)
+ }
+ setFormState('default')
+
+ // Prefetch GitHub avatar
+ new Image().src = `https://github.com/${username}.png`
+
+ // Prefetch the twitter share URL to eagerly generate the page
+ fetch(`/launch-week/tickets/${username}`).catch((_) => {})
+
+ setPageState('ticket')
+
+ // Listen to realtime changes
+ if (!realtimeChannel && !data?.golden) {
+ const channel = supabase
+ .channel('changes')
+ .on(
+ 'postgres_changes',
+ {
+ event: 'UPDATE',
+ schema: 'public',
+ table: 'lw8_tickets',
+ filter: `username=eq.${username}`,
+ },
+ (payload: any) => {
+ const golden = !!payload.new.sharedOnTwitter && !!payload.new.sharedOnLinkedIn
+ setUserData({
+ ...payload.new,
+ golden,
+ })
+ if (golden) {
+ channel.unsubscribe()
+ }
+ }
+ )
+ .subscribe()
+ setRealtimeChannel(channel)
+ }
+ })
+ }
+ return () => {
+ // Cleanup realtime subscription on unmount
+ realtimeChannel?.unsubscribe()
+ }
+ }, [session])
+
+ return formState === 'error' ? (
+ (null)
+ const buttonRef = useRef(null)
+ const url = `${SITE_URL}/tickets/${username}?lw=8${isGolden ? `&golden=true` : ''}`
+ useEffect(() => {
+ if (navigator.clipboard) {
+ setCopyEnabled(true)
+ }
+ }, [])
+
+ return (
+ >
diff --git a/apps/www/components/LaunchWeek/Ticket/hooks/use-email-query-param.ts b/apps/www/components/LaunchWeek/hooks/use-email-query-param.ts
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/hooks/use-email-query-param.ts
rename to apps/www/components/LaunchWeek/hooks/use-email-query-param.ts
diff --git a/apps/www/components/LaunchWeek/Ticket/hooks/useWinningChances.ts b/apps/www/components/LaunchWeek/hooks/useWinningChances.ts
similarity index 88%
rename from apps/www/components/LaunchWeek/Ticket/hooks/useWinningChances.ts
rename to apps/www/components/LaunchWeek/hooks/useWinningChances.ts
index b843fd0f5fe..46783c103d3 100644
--- a/apps/www/components/LaunchWeek/Ticket/hooks/useWinningChances.ts
+++ b/apps/www/components/LaunchWeek/hooks/useWinningChances.ts
@@ -1,5 +1,5 @@
import { UserData } from './use-conf-data'
-import useConfData from '~/components/LaunchWeek/Ticket//hooks/use-conf-data'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
function calculateWinChances(userData: UserData): number {
// Just signing up gives you 1
diff --git a/apps/www/components/LaunchWeek/Ticket/utils.module.css b/apps/www/components/LaunchWeek/utils.module.css
similarity index 100%
rename from apps/www/components/LaunchWeek/Ticket/utils.module.css
rename to apps/www/components/LaunchWeek/utils.module.css
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index ec9a2c5d075..2439d76df00 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -2,7 +2,8 @@ import React, { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { Button, Badge, IconStar, IconChevronDown } from 'ui'
+import Announcement from '~/components/Announcement/Announcement'
+import { Button, Badge, IconStar, IconChevronDown, LW8CountdownBanner } from 'ui'
import FlyOut from '~/components/UI/FlyOut'
import Transition from 'lib/Transition'
@@ -19,18 +20,18 @@ import Image from 'next/image'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-import * as supabaseLogoWordmarkWhite from 'common/assets/images/supabase-logo-wordmark--white.png'
-
const Nav = () => {
const { isDarkMode } = useTheme()
- const { pathname } = useRouter()
+ const router = useRouter()
const [open, setOpen] = useState(false)
const [openProduct, setOpenProduct] = useState(false)
const [openDevelopers, setOpenDevelopers] = useState(false)
const isLoggedIn = useIsLoggedIn()
- const isLaunchWeekPage = pathname.includes('launch-week')
- const showLaunchWeekNavMode = isLaunchWeekPage && !open && !openProduct && !openDevelopers
+ const isHomePage = router.pathname === '/'
+ const isLaunchWeekPage = router.pathname.includes('launch-week')
+ const showLaunchWeekNavMode =
+ (isLaunchWeekPage || isHomePage) && !open && !openProduct && !openDevelopers
React.useEffect(() => {
if (open) {
@@ -197,8 +198,9 @@ const Nav = () => {
return (
<>
- {/*
- */}
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
new file mode 100644
index 00000000000..353fb85499e
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
@@ -0,0 +1,69 @@
+import Image from 'next/image'
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type animateFromType = 'left' | 'right' | 'up' | 'down' | 'opacityOnly'
+
+export default function LaunchWeekPrizeCard({
+ imageUrl = '',
+ imageWrapperClassName,
+ content,
+ className,
+ animateFrom,
+ imgObjectPosition = 'center',
+}: {
+ imageUrl: string
+ imageWrapperClassName?: string
+ content: any
+ className?: string
+ animateFrom?: animateFromType
+ imgObjectPosition?: string
+}) {
+ const finalState = { x: 0, y: 0, opacity: 1 }
+
+ function getAnimationFrom(animationDirection: animateFromType) {
+ switch (animationDirection) {
+ case 'left':
+ return { x: -20, opacity: 0 }
+ case 'up':
+ return { y: -20, opacity: 0 }
+ case 'right':
+ return { x: 20, opacity: 0 }
+ case 'down':
+ return { y: 20, opacity: 0 }
+ case 'opacityOnly':
+ return { opacity: 0 }
+ }
+ }
+
+ return (
+
+
+
+
+ Launch week 8
++ August 7th–11th, 2023 + 9:00 AM PT +
+
+ Join us in a week of announcing new features.
+ Connect with GitHub to generate your unique ticket and contribute to the constellation. + + {' '} + You might also win{' '} + + swag + + . + +
+ + Connect with GitHub to generate your unique ticket and contribute to the constellation. + + {' '} + You might also win{' '} + + swag + + . + +
+
+
+
+ {content && content}
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/Ticket.tsx b/apps/www/components/LaunchWeek/8/Ticket/Ticket.tsx
new file mode 100644
index 00000000000..71a0b3113ed
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/Ticket.tsx
@@ -0,0 +1,79 @@
+import styles from './ticket-visual.module.css'
+import TicketProfile from './TicketProfile'
+import TicketNumber from './TicketNumber'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
+import TicketHeader from './TicketHeader'
+import Image from 'next/image'
+import TicketForm from './TicketForm'
+import TicketFooter from './TicketFooter'
+
+type TicketGenerationState = 'default' | 'loading'
+type Props = {
+ user: UserData
+ ticketGenerationState?: TicketGenerationState
+ setTicketGenerationState?: any
+}
+
+export default function TicketVisual({
+ user,
+ ticketGenerationState = 'default',
+ setTicketGenerationState,
+}: Props) {
+ const { username, golden = false, bg_image_id: bgImageId, ticketNumber } = user
+
+ const ticketBg = {
+ regular: {
+ background: `/images/launchweek/8/ticket-bg/regular.png`,
+ },
+ golden: {
+ background: `/images/launchweek/8/ticket-bg/golden.png`,
+ },
+ }
+
+ const CURRENT_TICKET = golden ? 'golden' : 'regular'
+ const CURRENT_TICKET_BG = ticketBg[CURRENT_TICKET].background
+
+ return (
+
+
+
+
+
+
+
+ {ticket &&
+
+
+
+ Get your winning ticket
+
+ Join us on August 11th for Launch Week 8's final day
+
and find out if you are one of the lucky
+ winners. Get sharing!
+
+
+
+
+ Supabase Desk Mat
+ Supabase T-Shirt
+ Supabase Cap
+ Supabase Sticker Pack
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx
new file mode 100644
index 00000000000..3a81766bc57
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react'
+import { SITE_URL, TWEET_TEXT, TWEET_TEXT_GOLDEN } from '~/lib/constants'
+import { IconCheckCircle } from 'ui'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
+import { useParams } from '~/hooks/useParams'
+import TicketForm from './TicketForm'
+
+type TicketGenerationState = 'default' | 'loading'
+
+type Props = {
+ username: string
+ golden?: boolean
+ ticketGenerationState?: TicketGenerationState
+ setTicketGenerationState: (ticketGenerationState: TicketGenerationState) => void
+}
+
+export default function TicketActions({
+ username,
+ golden = false,
+ ticketGenerationState,
+ setTicketGenerationState,
+}: Props) {
+ const [imgReady, setImgReady] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const downloadLink = useRef
+ {username ? (
+
+
+
+ ) : (
+
+
+
+
+
+ {!sharePage ? (
+ <>
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketContainer.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketContainer.tsx
new file mode 100644
index 00000000000..7416c69bb09
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketContainer.tsx
@@ -0,0 +1,179 @@
+import { useState } from 'react'
+import { SupabaseClient } from '@supabase/supabase-js'
+import Link from 'next/link'
+import cn from 'classnames'
+import { Button } from 'ui'
+
+import styles from './ticket.module.css'
+import styleUtils from '../../utils.module.css'
+import Ticket from './Ticket'
+import TicketActions from '~/components/LaunchWeek/8/Ticket/TicketActions'
+import TicketCopy from '~/components/LaunchWeek/8/Ticket/ticket-copy'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
+import useWinningChances from '~/components/LaunchWeek/hooks/useWinningChances'
+import { SITE_URL } from '~/lib/constants'
+import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import TicketCustomizationForm from './TicketCustomizationForm'
+import TicketDisclaimer from './TicketDisclaimer'
+
+type TicketGenerationState = 'default' | 'loading'
+
+type Props = {
+ user: UserData
+ supabase: SupabaseClient
+ referrals: number
+ sharePage?: boolean
+}
+
+export default function TicketContainer({ user, sharePage, referrals, supabase }: Props) {
+ const { username, name, golden } = user
+ const isMobile = useBreakpoint(1023)
+ const [ticketGenerationState, setTicketGenerationState] =
+ useState
+
+
+
+
+ ) : (
+ !username && (
+
+
+
+
+ Connect with GitHub
+
+
+ )
+
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
new file mode 100644
index 00000000000..dd9aa9e243c
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
@@ -0,0 +1,147 @@
+import React, { useState } from 'react'
+import { Badge, IconCheck, Input } from 'ui'
+import { UserData } from '../../hooks/use-conf-data'
+import { SupabaseClient } from '@supabase/supabase-js'
+import { useDebounce } from 'common'
+
+interface Props {
+ supabase: SupabaseClient
+ user: UserData
+}
+
+const TicketCustomizationForm = ({ supabase, user }: Props) => {
+ const defaultFormValues = {
+ role: user.metadata?.role,
+ company: user.metadata?.company,
+ location: user.metadata?.location,
+ }
+ const [formData, setFormData] = useState(defaultFormValues)
+ const [formState, setFormState] = useState<'idle' | 'saved' | 'saving' | 'error'>('idle')
+ const IS_SAVING = formState === 'saving'
+ const IS_SAVED = formState === 'saved'
+ const HAS_ERROR = formState === 'error'
+
+ const handleInputChange = (name: string, value: string) => {
+ setFormData((prev) => ({ ...prev, [name]: value }))
+ }
+
+ const handleFormSubmit = async () => {
+ setFormState('saving')
+ const payload = { metadata: formData }
+
+ if (supabase) {
+ await supabase
+ .from('lw8_tickets')
+ .update(payload)
+ .eq('username', user.username)
+ .then((res) => {
+ if (res.error) return setFormState('error')
+ setFormState('saved')
+ setTimeout(() => {
+ setFormState('idle')
+ }, 1800)
+ })
+ }
+ }
+
+ const debouncedChangeHandler = useDebounce(handleFormSubmit, 1200)
+
+ return (
+
+ )
+}
+
+export default TicketCustomizationForm
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketDisclaimer.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketDisclaimer.tsx
new file mode 100644
index 00000000000..e23e77804e2
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketDisclaimer.tsx
@@ -0,0 +1,7 @@
+const TicketDisclaimer = ({ className, children }: { className?: string; children?: any }) => (
+
+
+
+
+ {!sharePage ? (
+ name ? (
+ <>
+ {winningChances === 1 && (
+ <>
+ You're in!
+ Now make it unique and share.
+
+ )}
+ {winningChances === 2 && (
+ <>
+ That's x2!
+
+
+
+
+ {!sharePage ? (
+ name ? (
+ <>
+ {winningChances === 1 && (
+ <>
+ You're in!
+ Now make it unique and share.
+
+ )}
+ {winningChances === 2 && (
+ <>
+ That's x2!
+
Share again to get a golden ticket.
+
+ )}
+ {winningChances === 3 && (
+ <>
+ You have a golden
+ chance of winning!
+
+ )}
+
+ ) : (
+ <>
+ Generate your ticket.
+ Win the SupaKeyboard.
+
+ )
+ ) : (
+ <>
+ {name ? name : username}'s
+ unique ticket
+
+ )}
+
+
+
+ {!sharePage ? (
+ golden ? (
+
+
+ {!sharePage && user.username && (
+ + Join us on August 11th for Launch Week 8's final day and find out if you are one + of the lucky winners. +
+ ) : ( ++ Customize your ticket and boost your chances of winning{' '} + + limited edition awards + {' '} + by sharing it with the community. +
+ ) + ) : ( + <> ++ Generate and share your own custom ticket for a chance to win{' '} + + awesome swag + + . +
+ + + + )} +
+
+
+
+
+
+ )}
+ + {children || 'By registering you accept to receive email updates on Supabase Launch Week.'} +
+) + +export default TicketDisclaimer diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketFooter.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketFooter.tsx new file mode 100644 index 00000000000..ebffc62ecf2 --- /dev/null +++ b/apps/www/components/LaunchWeek/8/Ticket/TicketFooter.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { LW8_DATE } from '~/lib/constants' + +interface Props {} + +export default function TicketFooter({}: Props) { + return ( +
+ {LW8_DATE}
+ supabase.com/launch-week
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketForm.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketForm.tsx
new file mode 100644
index 00000000000..51a1b7bcb41
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketForm.tsx
@@ -0,0 +1,169 @@
+import { useState, useRef, useEffect } from 'react'
+import { useRouter } from 'next/router'
+import cn from 'classnames'
+import { SITE_ORIGIN } from '~/lib/constants'
+import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
+import formStyles from './form.module.css'
+import ticketFormStyles from './ticket-form.module.css'
+import { Button, IconCheckCircle, IconLoader } from 'ui'
+
+type FormState = 'default' | 'loading' | 'error'
+type TicketGenerationState = 'default' | 'loading'
+
+type Props = {
+ defaultUsername?: string
+ ticketGenerationState?: TicketGenerationState
+ setTicketGenerationState: any
+}
+
+export default function TicketForm({ defaultUsername = '', setTicketGenerationState }: Props) {
+ const [username, setUsername] = useState(defaultUsername)
+ const [formState, setFormState] = useState
+
+ ) : (
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketHeader.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketHeader.tsx
new file mode 100644
index 00000000000..217cf6a38bb
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketHeader.tsx
@@ -0,0 +1,20 @@
+import Image from 'next/image'
+import React from 'react'
+
+interface Props {
+ golden?: boolean
+}
+
+export default function TicketHeader({ golden = false }: Props) {
+ return (
+
+
+
+
+ {errorMsg}
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketNumber.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketNumber.tsx
new file mode 100644
index 00000000000..d7348a6b545
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketNumber.tsx
@@ -0,0 +1,31 @@
+import styles from './ticket.module.css'
+
+type Props = {
+ number: number | undefined
+ golden?: boolean
+}
+
+export default function TicketNumber({ number, golden = false }: Props) {
+ const numDigits = `${number}`.length
+ const prefix = `00000000`.slice(numDigits)
+ const ticketNumberText = `NO ${prefix}${number}`
+
+ return (
+ <>
+
+
+ {ticketNumberText}
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketProfile.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketProfile.tsx
new file mode 100644
index 00000000000..e1cacdff171
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketProfile.tsx
@@ -0,0 +1,42 @@
+import { UserData } from '../../hooks/use-conf-data'
+
+type TicketGenerationState = 'default' | 'loading'
+type Props = {
+ user: UserData
+ ticketGenerationState?: TicketGenerationState
+ setTicketGenerationState?: (ticketGenerationState: TicketGenerationState) => void
+ golden?: boolean
+}
+
+export default function TicketProfile({ user, ticketGenerationState, golden = false }: Props) {
+ const { username, name, metadata } = user
+
+ const HAS_ROLE = !!metadata?.role
+ const HAS_COMPANY = !!metadata?.company
+ const HAS_LOCATION = !!metadata?.location
+ const HAS_NO_META = !HAS_ROLE && !HAS_COMPANY && !HAS_LOCATION
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/form.module.css b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
new file mode 100644
index 00000000000..5b6a078561b
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
@@ -0,0 +1,244 @@
+/* .form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 12px;
+ gap: 12px;
+} */
+
+/* .formLeft {
+ align-items: center;
+}
+.formCenter {
+ align-items: center;
+} */
+
+/* @media (min-width: 1200px) {
+ .formLeft {
+ align-items: start;
+ }
+ .formCenter {
+ align-items: center;
+ }
+} */
+/*
+.formInfo {
+ max-width: 520px;
+} */
+
+.formInfo h3 {
+ font-size: 1.25em;
+ font-weight: 400;
+}
+
+.formInfo p {
+ font-size: 1.1em;
+ line-height: 1.4;
+ margin-bottom: 32px;
+ color: var(--lw-secondary-color);
+}
+
+@media (min-width: 1200px) {
+ /* .form.share-page {
+ justify-content: flex-start;
+ } */
+}
+
+/* .formInfoLeft {
+ text-align: center;
+}
+.formInfoCenter {
+ text-align: center;
+ margin: 0 auto;
+} */
+
+@media (min-width: 1200px) {
+ .formInfoLeft {
+ text-align: left;
+ }
+ .formInfoCenter {
+ text-align: center;
+ margin: 0 auto;
+ }
+}
+
+.input {
+ border: none;
+ width: 100%;
+ background: transparent;
+ outline: none;
+ height: 56px;
+ padding-left: 15px;
+ padding-right: 15px;
+ font-size: var(--text-md);
+ color: #fff;
+ font-family: inherit;
+}
+
+@media (min-width: 768px) {
+ .input {
+ width: calc(100% - var(--space-32x));
+ padding-right: 0;
+ }
+}
+
+.input::placeholder {
+ color: var(--lw-secondary-color);
+}
+
+.input-label {
+ background-color: var(--gray);
+ border-radius: var(--space-2x);
+ border: 1px solid transparent;
+ transition: border-color 0.2s ease, background-color 0.2s ease;
+ display: block;
+}
+
+.input-label.focused {
+ background-color: #33373c;
+}
+
+.input-label.error {
+ background: red;
+}
+
+.input-label.success {
+ background: #0070f3;
+}
+
+.input-text {
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
+
+.form-row {
+ position: relative;
+ max-width: 400px;
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .form-row {
+ max-width: 480px;
+ }
+}
+
+.submit {
+ width: 100%;
+ height: 56px;
+ margin-top: var(--space-4x);
+ border-radius: var(--space-2x);
+ border: 1px solid var(--brand);
+ background: var(--brand);
+ cursor: pointer;
+ font-family: inherit;
+ font-size: var(--text-md);
+ letter-spacing: -0.02em;
+ outline: none;
+ font-weight: 500;
+ color: white;
+ transition: background-color 0.2s ease, color 0.2s ease;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.submit.generate-with-github {
+ display: flex;
+ margin-bottom: 12px;
+ position: relative;
+}
+
+@media (min-width: 768px) {
+ .submit.register {
+ width: 120px;
+ height: 40px;
+ margin-top: 0;
+ position: absolute;
+ border-radius: 5px;
+ right: var(--space-2x);
+ top: var(--space-2x);
+ }
+}
+
+.submit.loading {
+ cursor: default;
+}
+
+.submit.default:hover,
+.submit.default:focus {
+ background: black;
+ color: var(--brand);
+}
+
+.submit.default.generate-with-github:hover path,
+.submit.default.generate-with-github:focus path {
+ fill: var(--brand);
+}
+
+.submit.error:hover,
+.submit.error:focus {
+ background: #000;
+ color: #fff;
+}
+
+.submit.default:disabled,
+.submit.default:disabled:hover,
+.submit.default:disabled:focus {
+ cursor: default;
+ background: var(--gray);
+ border-color: var(--gray);
+ color: #fff;
+ justify-content: flex-start;
+ overflow: hidden;
+}
+
+.submit.default.generate-with-github:disabled path,
+.submit.default.generate-with-github:disabled:hover path,
+.submit.default.generate-with-github:disabled:focus path {
+ fill: #fff;
+}
+
+.submit.default.generate-with-github.not-allowed:disabled {
+ cursor: not-allowed;
+}
+
+@media (min-width: 1200px) {
+ .form-row {
+ margin: 0;
+ }
+
+ .submit.generate-with-github {
+ width: 240px;
+ }
+}
+
+.stage-btn {
+ background: #323332;
+ border: 2px solid #34b27b;
+}
+
+.github-wrapper {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.or-divider {
+ width: 100%;
+ text-align: center;
+ color: var(--lw-secondary-color);
+ margin: var(--space-4x) 0;
+}
+
+@media (min-width: 1200px) {
+ .github-wrapper {
+ flex-direction: row;
+ }
+ .or-divider {
+ width: 240px;
+ margin: 0;
+ }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-actions.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket-actions.module.css
new file mode 100644
index 00000000000..d13c42418d7
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-actions.module.css
@@ -0,0 +1,70 @@
+.button {
+ border-radius: var(--space-2x);
+ border: 1px solid #fff;
+ color: #000;
+ background: #fff;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: var(--text-md);
+ letter-spacing: -0.02em;
+ font-weight: 500;
+ outline: none;
+ transition: background-color 0.2s ease;
+ display: grid;
+ grid-template-columns: 24px 1fr;
+ text-align: center;
+ align-items: center;
+ padding: 0 var(--space-4x);
+ height: 55px;
+ width: 100%;
+ max-width: 400px;
+ margin: var(--space-2x) auto;
+}
+
+.loading {
+ grid-template-columns: 1fr;
+ justify-items: center;
+}
+
+@media (min-width: 768px) {
+ .button {
+ width: 200px;
+ margin: 0 6px;
+ }
+}
+
+.button:hover,
+.button:focus {
+ background: black;
+ color: #fff;
+}
+
+.first {
+ animation-delay: 2s;
+}
+.second {
+ animation-delay: 2.2s;
+}
+.third {
+ animation-delay: 2.4s;
+}
+
+:global(.ticket-generated) .first {
+ animation-delay: 0.6s;
+}
+:global(.ticket-generated) .second {
+ animation-delay: 0.8s;
+}
+:global(.ticket-generated) .third {
+ animation-delay: 1s;
+}
+
+.linkedin-button {
+ display: none !important;
+}
+
+@media (min-width: 768px) {
+ .linkedin-button {
+ display: grid !important;
+ }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.module.css
new file mode 100644
index 00000000000..65007c67559
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.module.css
@@ -0,0 +1,190 @@
+.wrapper {
+ color: var(--lw-secondary-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation-delay: 2.6s;
+ flex-direction: column;
+}
+
+:global(.ticket-generated) .wrapper {
+ animation-delay: 1.2s;
+}
+
+.label {
+ width: 100%;
+ margin-bottom: var(--space-2x);
+}
+
+.label-wrapper {
+ display: flex;
+ align-items: center;
+ max-width: 400px;
+ width: 100%;
+ justify-content: space-between;
+}
+
+@media (min-width: 768px) {
+ .wrapper {
+ flex-direction: row;
+ }
+
+ .label {
+ width: auto;
+ margin-right: 10px;
+ margin-bottom: 0px;
+ }
+
+ .label-wrapper {
+ width: auto;
+ }
+}
+
+.field {
+ position: relative;
+ border-radius: var(--space-2x);
+ overflow: hidden;
+ background: var(--gray);
+}
+
+@media (min-width: 768px) {
+ .field {
+ padding-right: 50px;
+ }
+ .field.desktop-copy-disabled {
+ padding-right: 0px;
+ }
+}
+
+.mobile-copy {
+ margin-bottom: 10px;
+ display: flex;
+}
+
+.mobile-copy-disabled.mobile-copy-disabled {
+ display: none;
+}
+
+.mobile-copy * {
+ color: var(--lw-secondary-color);
+ transition: color 0.2s ease;
+}
+
+.mobile-copy:hover * {
+ color: #fff;
+ transition: color 0.2s ease;
+}
+
+.field * {
+ color: var(--lw-secondary-color);
+ transition: color 0.2s ease;
+}
+
+.field:hover * {
+ color: #fff;
+ transition: color 0.2s ease;
+}
+
+.url {
+ width: calc(100vw - 36px);
+ user-select: all;
+ overflow-x: scroll;
+ white-space: nowrap;
+ display: block;
+
+ padding: var(--space-2x) 14px;
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+@media (min-width: 436px) {
+ .url {
+ width: 400px;
+ }
+}
+
+@media (min-width: 768px) {
+ .url {
+ width: 400px;
+ }
+ .mobile-copy {
+ margin-bottom: 0;
+ display: none;
+ }
+}
+
+.url::-webkit-scrollbar {
+ display: none;
+}
+
+/* .fade {
+ position: absolute;
+ background: linear-gradient(90deg, rgba(37, 39, 41, 0%) 0%, #252729 100%);
+ top: 0;
+ bottom: 0;
+ right: 0px;
+ width: 50px;
+ z-index: 1;
+ display: block;
+ border-radius: var(--space-2x);
+ pointer-events: none;
+} */
+
+.desktop-copy.desktop-copy-disabled {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .fade {
+ right: 50px;
+ }
+ .fade.desktop-copy-disabled {
+ right: 0px;
+ }
+}
+
+.copied {
+ display: flex;
+ z-index: 2;
+ align-items: center;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.2s ease !important;
+}
+
+.copied.visible {
+ opacity: 1;
+}
+
+.copy-button {
+ background: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ z-index: 2;
+ border-radius: var(--space-2x);
+ width: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: -10px;
+}
+
+@media (min-width: 768px) {
+ .copied {
+ position: absolute;
+ right: 50px;
+ top: 0px;
+ bottom: 0px;
+ background: linear-gradient(90deg, rgba(37, 39, 41, 0%) 0px, #252729 40px);
+ padding-left: 50px;
+ }
+ .copy-button {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ margin-right: 0px;
+ width: 50px;
+ }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.tsx b/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.tsx
new file mode 100644
index 00000000000..65e700c6730
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-copy.tsx
@@ -0,0 +1,85 @@
+import { useEffect, useState, useRef } from 'react'
+import cn from 'classnames'
+import { SITE_URL } from '~/lib/constants'
+import styleUtils from '../../utils.module.css'
+import { IconCopy, IconCheck } from 'ui'
+
+type Props = {
+ username: string
+ isGolden?: boolean
+}
+
+export default function TicketCopy({ username, isGolden }: Props) {
+ const [fadeOpacity, setFadeOpacity] = useState(1)
+ const [scrolling, setScrolling] = useState(false)
+ const [copyEnabled, setCopyEnabled] = useState(false)
+ const [copied, setCopied] = useState(false)
+ const scrollRef = useRef
+
+ {name || username || 'Your Name'}
+ {HAS_NO_META && username &&@{username}
} +
+ {HAS_ROLE && {metadata?.role}}
+ {HAS_COMPANY && (
+
+ {HAS_ROLE && ' '}
+ at {metadata?.company}
+
+ )}
+ {HAS_LOCATION && (
+
+ {' '}
+ {(HAS_ROLE || HAS_COMPANY) && '—'} {metadata?.location}
+
+ )}
+
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-form.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket-form.module.css
new file mode 100644
index 00000000000..d10b43a0284
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-form.module.css
@@ -0,0 +1,65 @@
+.githubIcon {
+ margin-left: 12px;
+ margin-right: var(--space-4x);
+ display: inline-flex;
+}
+
+.checkIcon {
+ position: absolute;
+ right: var(--space-4x);
+ display: inline-flex;
+}
+
+.generateWithGithub {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+}
+
+.stageIcon {
+ position: absolute;
+ left: var(--space-4x);
+ display: inline-flex;
+}
+
+.form-row {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 600px;
+}
+
+.description {
+ color: var(--secondary-color);
+ margin: 0;
+ text-align: center;
+ margin-left: var(--space-4x);
+}
+
+@media (min-width: 768px) {
+ .form-row {
+ margin-bottom: 20px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .form-row {
+ margin: 0;
+ }
+
+ .description {
+ text-align: left;
+ }
+
+ .generateWithGithub {
+ width: 100%;
+ }
+}
+
+.learn-more {
+ color: #fff;
+}
+
+.learn-more:hover {
+ text-decoration: underline;
+ color: #fff;
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-profile.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket-profile.module.css
new file mode 100644
index 00000000000..ac08447a22a
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-profile.module.css
@@ -0,0 +1,149 @@
+.image {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ border: 1px solid #999;
+}
+
+@media (min-width: 768px) {
+ .image {
+ width: calc(100px * var(--size));
+ height: calc(100px * var(--size));
+ }
+}
+
+.name {
+ font-size: 24px;
+ display: inline-block;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ margin: 0;
+}
+
+.name-golden {
+ color: var(--gold-primary);
+}
+
+@media (min-width: 768px) {
+ .name {
+ font-size: calc(var(--space-8x) * var(--size));
+ margin-bottom: 5px;
+ }
+}
+
+.username {
+ display: inline-block;
+ font-size: calc(1em * var(--size));
+ color: var(--lw-secondary-color);
+ display: flex;
+ align-items: center;
+ margin: 0;
+}
+
+.username-golden {
+ color: var(--gold-secondary);
+}
+
+.githubIcon {
+ margin-right: calc(5px * var(--size));
+ display: inline-flex;
+}
+
+.githubIcon-golden svg {
+ color: var(--gold-secondary);
+ opacity: 0.5;
+}
+
+.empty-icon {
+ display: block;
+ background: linear-gradient(320deg, #121212, #191919);
+ width: 60px;
+}
+
+.empty-icon--golden {
+ display: block;
+ background: linear-gradient(90deg, #fff9eb, #e2ba52);
+ width: 60px;
+ border: 1px solid #ecc154ad;
+}
+
+@media (min-width: 768px) {
+ .empty-icon {
+ width: calc(80px * var(--size));
+ }
+
+ .empty-icon--golden {
+ width: calc(80px * var(--size));
+ }
+}
+
+@keyframes loading {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+}
+/*
+.skeleton {
+ display: flex;
+ align-items: center;
+ border-radius: 25px;
+} */
+
+.skeleton.loaded {
+ width: unset !important;
+}
+
+.skeleton:not(.wrapper):not(.show) {
+ display: none;
+}
+
+.wrapper:not(.show)::before {
+ content: none;
+}
+
+.skeleton:not(.wrapper):not(.loaded) {
+ border-radius: var(--space);
+ background-image: linear-gradient(270deg, #252729, #34383d, #34383d, #252729);
+ background-size: 200% 100%;
+ animation: loading 2s ease-in-out infinite;
+}
+
+.wrapper {
+ position: relative;
+}
+
+.wrapper::before {
+ content: '';
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ right: 0;
+ bottom: 0;
+ border-radius: var(--space);
+ z-index: 100;
+ background-image: linear-gradient(270deg, #111111, #333333, #333333, #111111);
+ background-size: 200% 100%;
+ animation: loading 2s ease-in-out infinite;
+}
+
+.inline {
+ display: inline-block !important;
+}
+
+.rounded,
+.rounded.wrapper::before {
+ width: calc(80px * var(--size));
+ height: calc(80px * var(--size));
+ border-radius: 50% !important;
+}
+
+@media (min-width: 768px) {
+ .rounded,
+ .rounded.wrapper::before {
+ width: calc(110px * var(--size));
+ height: calc(110px * var(--size));
+ }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket-visual.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket-visual.module.css
new file mode 100644
index 00000000000..f399e967aa1
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket-visual.module.css
@@ -0,0 +1,70 @@
+.visual {
+ /* transform: translateZ(0); */
+ background: linear-gradient(
+ 30deg,
+ hsla(274, 100%, 77%, 0.05) 0%,
+ hsla(200, 43%, 1%, 0.2) 30%,
+ hsla(200, 43%, 1%, 0.2) 70%,
+ hsla(151, 50%, 53%, 0.1) 100%
+ ),
+ hsla(200, 43%, 1%, 0.8);
+ /* background: hsla(200, 43%, 1%, 0.2); */
+ box-shadow: 0px 1px 27px rgba(158, 68, 239, 0.06),
+ /* 0 0 0 1px rgba(121, 89, 134, 0.25), */ 0 10px 20px 0px rgba(20, 17, 21, 0.8),
+ inset 0 0.2px 1px 0.2px rgba(214, 210, 210, 0.4),
+ inset -0.4px -0.4px 1px -0.3px rgba(74, 252, 175, 0.4);
+ /* border: 1px solid rgba(0, 0, 0, 0.05); */
+ /* border-radius: 16px; */
+
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+
+ /* border: 1px solid #1c1c1c; */
+ /* animation: 2s ease-in-out infinite alternate; */
+
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.visual--gold {
+ background: radial-gradient(#fcdf9d50, #dbb33340);
+}
+
+.visual--gold::before {
+ content: ' ';
+ position: absolute;
+ inset: 0;
+ filter: drop-shadow(0 0 60px #fcdf9d);
+ background: radial-gradient(#fcdf9d50, #dbb33320);
+ /* border: 1px solid #dbb33320; */
+}
+
+@keyframes opacity-pulse {
+ from {
+ opacity: 0.5;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes svg-shadow {
+ from {
+ filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #d99f0c) drop-shadow(0 0 6px #d99f0c);
+ }
+
+ to {
+ filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px #d99f0c) drop-shadow(0 0 9px #d99f0c);
+ }
+}
+
+@keyframes blank-svg-shadow {
+ from {
+ filter: drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55);
+ }
+
+ to {
+ filter: drop-shadow(0 0 3px #bada55) drop-shadow(0 0 2px #bada55) drop-shadow(0 0 2px #bada55);
+ }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/ticket.module.css b/apps/www/components/LaunchWeek/8/Ticket/ticket.module.css
new file mode 100644
index 00000000000..51d423c3b22
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Ticket/ticket.module.css
@@ -0,0 +1,150 @@
+.ticket-hero {
+ background: linear-gradient(137.46deg, rgba(125, 196, 176, 0.04) 0%, rgba(255, 255, 255, 0) 100%),
+ linear-gradient(137.46deg, rgba(255, 255, 255, 0) 6.19%, rgba(255, 255, 255, 0) 103.29%);
+ z-index: 10;
+ box-shadow: 0 1px 1px rgba(131, 6, 184, 0.1), 0 1px 1px rgba(128, 6, 184, 0.1),
+ 0 20px 30px -30px rgba(76, 195, 138, 0.05), 0 80px 40px -40px rgba(128, 6, 184, 0.04),
+ inset 0.25px 0.3px 0px 0.3px rgba(209, 243, 227, 0.1),
+ inset 0.25px 0.3px 0px 0.3px rgba(76, 195, 138, 0.02),
+ inset 0 -3px 0 -2px rgba(255, 255, 255, 0.08), 0px 4px 20px rgba(118, 7, 170, 0.1);
+}
+
+.hero {
+ line-height: 1.15;
+ letter-spacing: -0.05em;
+ font-weight: 400;
+ margin: 0;
+ text-align: center;
+}
+
+@media (min-width: 768px) {
+ .hero {
+ line-height: 1;
+ }
+}
+
+.description {
+ font-size: 20px;
+ line-height: 1.4;
+ color: var(--lw-secondary-color);
+ text-align: center;
+ margin: 30px auto;
+ max-width: 350px;
+}
+
+@media (min-width: 768px) {
+ .description {
+ font-size: 24px;
+ max-width: 415px;
+ }
+}
+
+.ticket-text {
+ margin-bottom: 30px;
+}
+
+.ticket-layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 45px;
+ margin: auto;
+ padding: var(--space-4x);
+ padding-top: 64px;
+ padding-bottom: 64px;
+}
+
+@media (min-width: 1200px) {
+ .ticket-layout {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+}
+
+.ticket-share-layout {
+ align-items: center;
+ margin-bottom: auto;
+}
+
+.ticket-visual:before {
+ left: 50%;
+ top: -7.5%;
+ transform: translateZ(0) translateX(-50%) rotate(90deg);
+}
+
+.ticket-visual:after {
+ left: 50%;
+ bottom: -7.5%;
+ transform: translateZ(0) translateX(-50%) rotate(90deg);
+}
+
+@media (min-width: 768px) {
+ .ticket-visual:before {
+ top: 50%;
+ left: -7%;
+ transform: translateZ(0) translateY(-50%);
+ }
+
+ .ticket-visual:after {
+ top: 50%;
+ left: 96%;
+ transform: translateZ(0) translateY(-50%);
+ }
+}
+
+.ticket-actions {
+ margin-top: 70px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+.ticket-copy {
+ margin-top: 30px;
+}
+
+.ticket-actions-placeholder {
+ height: 280px;
+}
+
+@media (min-width: 768px) {
+ .ticket-actions {
+ flex-direction: row;
+ }
+ .ticket-actions-placeholder {
+ height: 157px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .ticket-layout {
+ grid-template-columns: 1fr 1fr;
+ }
+ .hero {
+ text-align: left;
+ }
+ .description {
+ text-align: left;
+ margin: 30px 0;
+ }
+}
+
+.gold-text {
+ color: #f4cf72;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+ .gold-text {
+ color: #e4b641;
+ }
+}
+
+.ticket-number {
+ text-shadow: 0 0px 2px rgba(22, 22, 22, 0.9), 0 0px 6px rgba(131, 6, 184, 0.9),
+ 0 0px 12px rgba(217, 195, 226, 0.5);
+}
+.ticket-number-gold {
+ text-shadow: 0 0px 2px rgba(22, 22, 22, 0.9), 0 0px 6px rgba(255, 195, 125, 0.9),
+ 0 0px 12px rgba(226, 224, 195, 0.5);
+}
diff --git a/apps/www/components/LaunchWeek/8/TicketBrickWall.tsx b/apps/www/components/LaunchWeek/8/TicketBrickWall.tsx
new file mode 100644
index 00000000000..11f32de267c
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/TicketBrickWall.tsx
@@ -0,0 +1,53 @@
+import Link from 'next/link'
+import React, { useEffect, useRef, useState } from 'react'
+import { Button } from 'ui'
+import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
+import { TicketBrickWallSlider } from './TicketBrickWallSlider'
+
+type user = UserData
+
+interface Props {
+ users: user[]
+}
+
+export default function TicketBrickWall({ users }: Props) {
+ const isMobile = useBreakpoint(768)
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/TicketBrickWallSlider.tsx b/apps/www/components/LaunchWeek/8/TicketBrickWallSlider.tsx
new file mode 100644
index 00000000000..6a062befedd
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/TicketBrickWallSlider.tsx
@@ -0,0 +1,81 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import 'swiper/swiper.min.css'
+
+interface Props {
+ users: UserData[]
+ reverse?: boolean
+ speed?: number
+ animate?: boolean
+}
+
+export function TicketBrickWallSlider({ users, reverse, speed = 50000, animate }: Props) {
+ const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw8'
+ const BUCKET_FOLDER_VERSION = 'v1'
+ const getOgUrl = (username: string, isGold: boolean) =>
+ `${STORAGE_URL}/tickets/${
+ isGold ? 'golden' : 'regular'
+ }/${BUCKET_FOLDER_VERSION}/${username}.png`
+
+ return (
+
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/TicketsGrid.tsx b/apps/www/components/LaunchWeek/8/TicketsGrid.tsx
new file mode 100644
index 00000000000..25e5172e9e6
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/TicketsGrid.tsx
@@ -0,0 +1,100 @@
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useBreakpoint } from 'common/hooks/useBreakpoint'
+import { UserData } from '../hooks/use-conf-data'
+
+interface Props {
+ loadedUsers: UserData[]
+ isLoading: boolean
+ pageCount: number
+ offset: number
+}
+
+export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset }: Props) {
+ const STORAGE_URL = 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw8'
+ const BUCKET_FOLDER_VERSION = 'v1'
+ const getTicketImageUrl = (username: string, isGold: boolean) =>
+ `${STORAGE_URL}/tickets/${
+ isGold ? 'golden' : 'regular'
+ }/${BUCKET_FOLDER_VERSION}/${username}.png`
+ const isMobile = useBreakpoint(1024)
+ const isTablet = useBreakpoint(1280)
+ const horizontalOffset = isMobile ? 8 : 20
+
+ return (
+
+
+ {users.map((user, i) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {loadedUsers?.map((user, i) => {
+ const rowTickets = isMobile ? 2 : isTablet ? 3 : 4
+ const divider = Math.floor(i / rowTickets)
+ const isOddRow = divider % 2 === 0
+ // Delay should be no more than pageCount for new loaded users
+ const recalculatedDelay = i >= pageCount * 2 ? (i - pageCount * (offset - 1)) / 15 : i / 15
+ const imgUrl =
+ getTicketImageUrl(user.username!, !!user.golden) ??
+ '/images/launchweek/8/lw8-ticket-empty.jpg'
+
+ return (
+ window.scrollTo(0, 0)}
+ >
+
+
+
+ )
+ })}
+ {isLoading &&
+ Array.from({ length: pageCount }, (_, i) => (
+
+
+ ))}
+
+ )
+}
diff --git a/apps/www/components/LaunchWeek/8/ticket-brick-wall-slider.module.css b/apps/www/components/LaunchWeek/8/ticket-brick-wall-slider.module.css
new file mode 100644
index 00000000000..164e683b3a2
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/ticket-brick-wall-slider.module.css
@@ -0,0 +1,3 @@
+.swiper-wrapper .swiper-slide {
+ width: 300px !important;
+}
diff --git a/apps/www/components/LaunchWeek/Ticket/hooks/use-conf-data.ts b/apps/www/components/LaunchWeek/hooks/use-conf-data.ts
similarity index 86%
rename from apps/www/components/LaunchWeek/Ticket/hooks/use-conf-data.ts
rename to apps/www/components/LaunchWeek/hooks/use-conf-data.ts
index fc8d1df8fbb..e8ba6d233c8 100644
--- a/apps/www/components/LaunchWeek/Ticket/hooks/use-conf-data.ts
+++ b/apps/www/components/LaunchWeek/hooks/use-conf-data.ts
@@ -5,18 +5,24 @@ export type PageState = 'registration' | 'ticket'
export type UserData = {
id?: string
+ email?: string
ticketNumber?: number
username?: string
name?: string
golden?: boolean
referrals?: number
bg_image_id?: number
+ metadata?: {
+ role?: string
+ company?: string
+ location?: string
+ }
sharedOnTwitter?: string
sharedOnLinkedIn?: string
}
type ConfDataContextType = {
- supabase: SupabaseClient
+ supabase: SupabaseClient | any
session: Session | null
userData: UserData
setUserData: React.Dispatch
+
+
+
+
+ {
className={[
`border-scale-300 border-b backdrop-blur-sm transition-opacity`,
showLaunchWeekNavMode && '!opacity-100 !border-[#e0d2f430]',
+ isLaunchWeekPage && showLaunchWeekNavMode && '!border-b-0',
].join(' ')}
>
{/*
(partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
+ )
+
+ const featuredPartners = partners.filter((p) => p.featured)
+
return (
<>
- {Object.keys(partnersByCategory).map((category) => (
-
*/}
@@ -225,19 +228,21 @@ const Nav = () => {
- {!hideCategories &&
{category}
} -
- {partnersByCategory[category].map((p) => (
+ {featuredPartners.length > 0 ? (
+
+ ) : null}
+ {Object.keys(partnersByCategory).map((category) => (
+
+
+ Featured
+
+ {featuredPartners.map((p) => (
-
+
+
+
+
+ ))}
+
@@ -49,7 +53,58 @@ export default function TileGrid({
+ {p.title}
-{p.description}
++ {p.description} +
+
+ {!hideCategories &&
{category}
} +
+ {partnersByCategory[category].map((p) => (
+
+
+
{shipped ? 'Shipped' : 'Coming Soon'}
-
+
{day} ・ {date}
- {title}
+ {title}
)
}
@@ -116,18 +121,18 @@ export default function launchweek() {
return (
+
diff --git a/apps/www/data/Announcements.json b/apps/www/data/Announcements.json
index 7744b9fb5a8..6b0beeeee3d 100644
--- a/apps/www/data/Announcements.json
+++ b/apps/www/data/Announcements.json
@@ -16,15 +16,15 @@
},
{
"type": "Announcement",
- "title": "Supabase Launch Week 7",
+ "title": "Supabase Launch Week 8",
"description": "One new feature (or more) every day during a week.",
- "imgUrl": "/images/launchweek/seven/launch-week-7.jpg",
- "logoUrl": "/images/launchweek/seven/launch-week-7.jpg",
+ "imgUrl": "/images/launchweek/8/lw8-og.jpg",
+ "logoUrl": "/images/launchweek/8/lw8-og.jpg",
"organization": "Supabase",
"url": "/launch-week",
"postMeta": {
"name": "Paul Copplestone",
- "publishDate": "Apr 03, 2023",
+ "publishDate": "Aug 07, 2023",
"readLength": 5
},
"ctaText": "Learn more"
diff --git a/apps/www/data/Footer.json b/apps/www/data/Footer.json
index 50b9881d290..877b6568777 100644
--- a/apps/www/data/Footer.json
+++ b/apps/www/data/Footer.json
@@ -31,7 +31,7 @@
"url": "/pricing"
},
{
- "text": "Launch Week 7",
+ "text": "Launch Week 8",
"url": "/launch-week"
}
]
diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts
index 2bbc4bf52d8..bcaeffc5dd8 100644
--- a/apps/www/lib/constants.ts
+++ b/apps/www/lib/constants.ts
@@ -35,8 +35,10 @@ export const SITE_URL =
: 'http://localhost:3000/launch-week'
export const SITE_ORIGIN = new URL(SITE_URL).origin
export const TWITTER_USER_NAME = 'supabase'
-export const DATE = 'April 10th 2023'
+export const LW7_DATE = 'April 10th 2023'
+export const LW8_DATE = 'August 7-11'
+export const LW8_LAUNCH_DATE = '2023-08-07T09:00:00.000-07:00'
export const TWEET_TEXT =
- "It's almost #SupaLaunchWeek 7! Generate your unique ticket here 👇 you can win a mechanical keyboard 🤩"
-export const TWEET_TEXT_GOLDEN = `I turned my #SupaLaunchWeek 7 ticket Gold! 🤩\n\n`
+ '#SupaLaunchWeek 8 is coming August 7-11! Join the party and generate your custom ticket for a chance to win swag ✨'
+export const TWEET_TEXT_GOLDEN = `I turned my #SupaLaunchWeek 8 ticket GOLD! 🌟😎🌟\n\n`
export const SITE_NAME = 'Supabase'
diff --git a/apps/www/lib/database.types.ts b/apps/www/lib/database.types.ts
index 2e536759c2f..c834e0a4110 100644
--- a/apps/www/lib/database.types.ts
+++ b/apps/www/lib/database.types.ts
@@ -1,112 +1,140 @@
-export type Json = string | number | boolean | null | { [key: string]: Json } | Json[]
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]
export interface Database {
public: {
Tables: {
- partners: {
- Row: {
- id: number
- slug: string
- type: Database['public']['Enums']['partner_type']
- category: string
- developer: string
- title: string
- description: string
- logo: string
- images: string[]
- video: string
- overview: string
- website: string
- docs: string
- approved: boolean
- }
- Insert: {
- id?: number
- slug?: string
- type?: Database['public']['Enums']['partner_type']
- category?: string
- developer?: string
- title?: string
- description?: string
- logo?: string
- images?: string[]
- video?: string
- overview?: string
- website?: string
- docs?: string
- approved?: boolean
- }
- Update: {
- id?: number
- slug?: string
- type?: Database['public']['Enums']['partner_type']
- category?: string
- developer?: string
- title?: string
- description?: string
- logo?: string
- images?: string[]
- video?: string
- overview?: string
- website?: string
- docs?: string
- approved?: boolean
- }
- }
partner_contacts: {
Row: {
- id: number
- type: Database['public']['Enums']['partner_type']
company: string
+ contacted: boolean
country: string
- details?: string
+ created_at: string
+ details: string | null
email: string
first: string
+ id: number
last: string
- phone?: string
- size?: number
- title?: string
+ phone: string | null
+ size: number | null
+ title: string | null
+ type: Database['public']['Enums']['partner_type']
website: string
}
Insert: {
+ company: string
+ contacted?: boolean
+ country: string
+ created_at?: string
+ details?: string | null
+ email: string
+ first: string
id?: number
- type?: Database['public']['Enums']['partner_type']
- company?: string
- country?: string
- details?: string
- email?: string
- first?: string
- last?: string
- phone?: string
- size?: number
- title?: string
- website?: string
+ last: string
+ phone?: string | null
+ size?: number | null
+ title?: string | null
+ type: Database['public']['Enums']['partner_type']
+ website: string
}
Update: {
- id?: number
- type?: Database['public']['Enums']['partner_type']
company?: string
+ contacted?: boolean
country?: string
- details?: string
+ created_at?: string
+ details?: string | null
email?: string
first?: string
+ id?: number
last?: string
- phone?: string
- size?: number
- title?: string
+ phone?: string | null
+ size?: number | null
+ title?: string | null
+ type?: Database['public']['Enums']['partner_type']
website?: string
}
+ Relationships: []
+ }
+ partners: {
+ Row: {
+ approved: boolean | null
+ call_to_action_link: string | null
+ category: string
+ contact: number
+ created_at: string
+ description: string
+ developer: string
+ docs: string | null
+ featured: boolean
+ id: number
+ images: string[] | null
+ logo: string
+ overview: string
+ slug: string
+ title: string
+ tsv: unknown | null
+ type: Database['public']['Enums']['partner_type']
+ video: string | null
+ website: string
+ }
+ Insert: {
+ approved?: boolean | null
+ call_to_action_link?: string | null
+ category: string
+ contact: number
+ created_at?: string
+ description: string
+ developer: string
+ docs?: string | null
+ featured?: boolean
+ id?: number
+ images?: string[] | null
+ logo: string
+ overview: string
+ slug: string
+ title: string
+ tsv?: unknown | null
+ type: Database['public']['Enums']['partner_type']
+ video?: string | null
+ website: string
+ }
+ Update: {
+ approved?: boolean | null
+ call_to_action_link?: string | null
+ category?: string
+ contact?: number
+ created_at?: string
+ description?: string
+ developer?: string
+ docs?: string | null
+ featured?: boolean
+ id?: number
+ images?: string[] | null
+ logo?: string
+ overview?: string
+ slug?: string
+ title?: string
+ tsv?: unknown | null
+ type?: Database['public']['Enums']['partner_type']
+ video?: string | null
+ website?: string
+ }
+ Relationships: [
+ {
+ foreignKeyName: 'partners_contact_fkey'
+ columns: ['contact']
+ referencedRelation: 'partner_contacts'
+ referencedColumns: ['id']
+ }
+ ]
}
}
Views: {}
- Functions: {
- derive_label_sort_from_label: {
- Args: { label: string }
- Returns: string
- }
- }
+ Functions: {}
Enums: {
partner_type: 'technology' | 'expert'
}
+ CompositeTypes: {
+ [_ in never]: never
+ }
}
}
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 6f12eb9e9f6..642862ff73d 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1712,6 +1712,11 @@ module.exports = [
source: '/docs/guides/with-expo',
destination: '/docs/guides/getting-started/tutorials/with-expo',
},
+ {
+ permanent: true,
+ source: '/docs/guides/with-kotlin',
+ destination: '/docs/guides/getting-started/tutorials/with-kotlin',
+ },
{
permanent: true,
source: '/docs/guides/with-ionic-react',
@@ -1923,11 +1928,6 @@ module.exports = [
source: '/docs/support',
destination: '/support',
},
- {
- permanent: true,
- source: '/docs/guides/cli/local-development',
- destination: '/docs/guides/getting-started/local-development',
- },
// old case studies moved to /customers
@@ -2071,4 +2071,184 @@ module.exports = [
source: '/docs/guides/ai/choosing-instance-type',
destination: '/docs/guides/ai/choosing-compute-addon',
},
+ {
+ permanent: true,
+ source: '/docs/guides/cli/using-environment-variables-in-config',
+ destination: '/docs/guides/cli/managing-config',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/getting-started/local-development',
+ destination: '/docs/guides/cli/local-development',
+ },
+ {
+ permanent: true,
+ source: '/blog/flutter-authentication-and-authorization-with-rls',
+ destination: '/blog/flutter-authorization-with-rls',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations',
+ destination: '/docs/guides/platform/marketplace',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/appsmith',
+ destination: '/partners/integrations/appsmith',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/auth0',
+ destination: '/partners/integrations/auth0',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/authsignal',
+ destination: '/partners/integrations/authsignal',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/bracket',
+ destination: '/partners/integrations/bracket',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/clerk',
+ destination: '/partners/integrations/clerk',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/cloudflare-workers',
+ destination: '/partners/integrations/cloudflare-workers',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/dhiwise',
+ destination: '/partners/integrations/dhiwise',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/directus',
+ destination: '/partners/integrations/directus',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/draftbit',
+ destination: '/partners/integrations/draftbit',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/estuary',
+ destination: '/partners/integrations/estuary',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/fezto',
+ destination: '/partners/integrations/fezto',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/flutterflow',
+ destination: '/partners/integrations/flutterflow',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/forestadmin',
+ destination: '/partners/integrations/forestadmin',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/illa',
+ destination: '/partners/integrations/illa',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/integrations',
+ destination: '/partners/integrations',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/keyri',
+ destination: '/partners/integrations/keyri',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/oauth-apps/authorize-an-oauth-app',
+ destination: '/docs/guides/platform/oauth-apps/authorize-an-oauth-app',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/oauth-apps/publish-an-oauth-app',
+ destination: '/docs/guides/platform/oauth-apps/publish-an-oauth-app',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/onesignal',
+ destination: '/partners/integrations/onesignal',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/passage',
+ destination: '/partners/integrations/passage',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/pgmustard',
+ destination: '/partners/integrations/pgmustard',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/picket',
+ destination: '/partners/integrations/picket',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/plasmic',
+ destination: '/partners/integrations/plasmic',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/polyscale',
+ destination: '/partners/integrations/polyscale',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/prisma',
+ destination: '/partners/integrations/prisma',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/sequin',
+ destination: '/partners/integrations/sequin',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/snaplet',
+ destination: '/partners/integrations/snaplet',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/stytch',
+ destination: '/partners/integrations/stytch',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/supertokens',
+ destination: '/partners/integrations/supertokens',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/vercel',
+ destination: '/partners/integrations/vercel',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/weweb',
+ destination: '/partners/integrations/weweb',
+ },
+ {
+ permanent: true,
+ source: '/docs/guides/integrations/zuplo',
+ destination: '/partners/integrations/zuplo',
+ },
]
diff --git a/apps/www/package.json b/apps/www/package.json
index 70f04daba7a..55aacb7ebbb 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -19,12 +19,14 @@
"@mdx-js/react": "^2.1.5",
"@next/bundle-analyzer": "^13.4.0",
"@next/mdx": "^12.3.2",
+ "@react-three/fiber": "^7.0.29",
"@supabase/auth-ui-react": "^0.1.6",
"@supabase/supabase-js": "^2.23.0",
"classnames": "^2.3.1",
"cobe": "^0.6.2",
"common": "*",
"config": "*",
+ "dat.gui": "^0.7.9",
"date-fns": "2.10.0",
"dayjs": "^1.11.7",
"framer-motion": "^6.5.1",
@@ -32,7 +34,6 @@
"gray-matter": "^4.0.3",
"lottie-react": "^2.4.0",
"markdown-toc": "^1.2.0",
- "marked": "^4.0.12",
"next": "^12.3.2",
"next-compose-plugins": "^2.2.1",
"next-mdx-remote": "^4.1.0",
@@ -43,6 +44,7 @@
"parse-numeric-range": "^1.3.0",
"react": "^17.0.2",
"react-copy-to-clipboard": "^5.1.0",
+ "react-countdown": "^2.3.5",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-markdown": "^8.0.3",
@@ -58,6 +60,7 @@
"shared-data": "*",
"swiper": "^6.5.0",
"swr": "^0.5.4",
+ "three": "^0.154.0",
"typescript": "^5.0.4",
"ui": "*",
"use-debounce": "^7.0.1",
@@ -68,8 +71,8 @@
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
"@types/classnames": "^2.3.1",
+ "@types/dat.gui": "^0.7.10",
"@types/jest": "^27.4.0",
- "@types/marked": "^4.0.3",
"@types/mdx-js__react": "^1.5.5",
"@types/node": "^17.0.24",
"@types/nodemailer": "^6.4.4",
@@ -78,6 +81,7 @@
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^17.0.11",
"@types/react-syntax-highlighter": "^15.5.6",
+ "@types/three": "^0.154.0",
"autoprefixer": "^10.4.14",
"config": "*",
"file-loader": "^6.2.0",
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index 1769d9f5a4b..a303e9f2e9a 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -49,7 +49,7 @@ export async function getStaticProps() {
},
{
login: 'lyqht',
- avatar_url: 'https://pbs.twimg.com/profile_images/1589662526941253632/s1cu3vuD_400x400.jpg',
+ avatar_url: 'https://pbs.twimg.com/profile_images/1665778877837504514/4SWgLpjA_400x400.png',
html_url: 'https://twitter.com/estee_tey',
},
{
diff --git a/apps/www/pages/index.tsx b/apps/www/pages/index.tsx
index 37a1365aa72..fc580b738dd 100644
--- a/apps/www/pages/index.tsx
+++ b/apps/www/pages/index.tsx
@@ -1,8 +1,10 @@
import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
import { getSortedPosts } from '~/lib/posts'
import PostTypes from '~/types/post'
import Layout from '~/components/Layouts/Default'
import Hero from '~/components/Hero/Hero'
+import { useTheme } from 'common'
// Import Swiper styles if swiper used on page
import 'swiper/swiper.min.css'
@@ -19,6 +21,18 @@ const TwitterSocialSection = dynamic(() => import('~/components/TwitterSocialSec
type Props = { customerStories: PostTypes[] }
const Index = ({ customerStories }: Props) => {
+ const { isDarkMode, toggleTheme } = useTheme()
+ const [initialDarkMode] = useState(isDarkMode)
+
+ useEffect(() => {
+ toggleTheme(true)
+ document.body.className = 'dark'
+ return () => {
+ document.body.className = ''
+ toggleTheme(initialDarkMode)
+ }
+ }, [])
+
return (
+
+
+
+
+ {p.title} +
++ {p.description} +
-
+
Blog post
-
+
{docs && (
-
+
Docs
-
+
@@ -135,9 +140,9 @@ export default function launchweek() {
)}
{video && (
-
+
-
Video
-
+
@@ -173,13 +178,13 @@ export default function launchweek() {
)}
>
- 
+ /> */}
+ /> */}
Dec 12 – 16 at 6 AM PT | 9 AM ET
@@ -214,7 +219,7 @@ export default function launchweek() {
+
![]()
- Who we hire at Supabase
+ Who we hire at Supabase
Fireside chat with founders
-
+
Watch video
-
+
-
+
-
Read blogpost
-
+
@@ -250,25 +255,26 @@ export default function launchweek() {
+
- Wrap Up
+ Wrap Up
Everything we shipped
-
+
Read blogpost
-
+
@@ -281,7 +287,7 @@ export default function launchweek() {
type="default"
openBehaviour="multiple"
size="large"
- className="text-scale-900 dark:text-white"
+ className="text-white"
justified={false}
bordered={false}
chevronAlign="right"
@@ -293,7 +299,7 @@ export default function launchweek() {
day5.d?.toString(),
]}
>
-
+
-
+
-
{day1.description}
-
+
Redesigned
@@ -336,7 +342,7 @@ export default function launchweek() {
)}
+
0 && (
-
+
+
New
{day2.steps[0].title}
-
-
+
New
- {day2.steps[1].title}
+ {day2.steps[1].title}
{day2.steps[1].description}
+
0 && (
-
+
-
{day3.steps[0].title}
-
+
Updated
@@ -452,7 +458,7 @@ export default function launchweek() {
)}
+
0 && (
-
+
-
{day4.steps[0].title}
-
+
New
@@ -518,7 +524,7 @@ export default function launchweek() {
)}
+
-
- {day5.steps[0].title}
-
+ {day5.steps[0].title}
+
New
-
+
New
-
- {day5.steps[1].title}
-
+ {day5.steps[1].title}
Community
+Community
- Community Day
+ Community Day
@@ -666,9 +670,9 @@ export default function launchweek() {
target="_blank"
rel="noopener"
>
-
+
Blog post
-
+
-
-
+
Flutterflow
-
+
-
-
+
OneSignal
-
+
-
-
+
NextAuth
-
Submissions Closed
-
+
-
One more thing
+One more thing
-
+
Updated
-
- pg_graphql v1.0
-
+ pg_graphql v1.0
-
+
New
-
- Custom Domains
-
+ Custom Domains
-
+
New
-
- Point-in-time recovery
-
+ Point-in-time recovery
-
+
Experimental
- pg_crdt
+ pg_crdt
-
+
Upgrade
-
- Postgres 15
-
+ Postgres 15
-
+
Upgrade
-
- PostgREST 11
-
+ PostgREST 11
Launch Week Hackathon
+Launch Week Hackathon
The traditional parallel Hackathon is back! Build a new open source project with Supabase and you can win $1500 in GitHub sponsorships and a coveted Supabase Darkmode @@ -1034,14 +1028,14 @@ export default function launchweek() {
-
Prizes
+Prizes
There are 5 categories to win, with prizes for winners and runner-ups of each category. Each team member gets a prize.
-
Judges
+Judges
The Supabase team will judge all the categories except the Best Edge Functions Project, which will be judged by our friends at Deno. @@ -1049,7 +1043,7 @@ export default function launchweek() {
-
Community
+Community
If you need help or advice when building, find other people to join your team, or if you just want to chill and watch people build, come and join us! @@ -1066,7 +1060,7 @@ export default function launchweek() {
-
Submission
+Submission
Submit your project through{' '}
Previous Best Overall Project Winner Previous Best Overall Project Runner Up Winner Best Flutter Project Previous Winner: Most Fun/Interesting Previous Winner Best Realtime Project
We worked with more than 30 content creators from around the world to drop a mountain
of content simultaneously!
@@ -1217,7 +1212,7 @@ export default function launchweek() {
+ Join us on April 16th for Launch Week 7's final day{' '}
+
- Join us on April 16th for Launch Week 7's final day{' '}
+
+ Join us on August 11th for Launch Week 8's final day{' '}
Most Popular
+ Most Popular
+
+
{plan.priceLabel}
+
{plan.costUnit}
-
+
{plan.warning}
{plan.preface} {plan.preface} Included with plan: {plan.footer} {plan.footer} {addon.price} {addon.price}
+
{addon.description}
@@ -1093,12 +1088,12 @@ export default function launchweek() {
rel="noopener noreferrer"
className="self-end"
>
-
+
@@ -1107,12 +1102,12 @@ export default function launchweek() {
target="_blank"
rel="noopener noreferrer"
>
- 
- Supabase Cache Helpers
+ Supabase Cache Helpers
+
@@ -1122,22 +1117,22 @@ export default function launchweek() {
rel="noopener noreferrer"
className="self-end"
>
-
- Super UI
+ Super UI
+
-
- Quid Faciam Hodie?
+ Quid Faciam Hodie?
+
@@ -1147,12 +1142,12 @@ export default function launchweek() {
rel="noopener noreferrer"
className="self-end"
>
-
- That Hot Dog Game
+ That Hot Dog Game
+
@@ -1185,7 +1180,7 @@ export default function launchweek() {
- RepoWatch
+ RepoWatch
@@ -1196,15 +1191,15 @@ export default function launchweek() {
The Supabase Content Storm
+ The Supabase Content Storm
-
+
{activeCreator !== null
? `${creators[activeCreator].first_name} ${creators[activeCreator].last_name}`
: 'Title'}
diff --git a/apps/www/pages/launch-week/7/index.tsx b/apps/www/pages/launch-week/7/index.tsx
new file mode 100644
index 00000000000..55c3b4348aa
--- /dev/null
+++ b/apps/www/pages/launch-week/7/index.tsx
@@ -0,0 +1,104 @@
+import { GetServerSideProps } from 'next'
+import { NextSeo } from 'next-seo'
+import { useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { createClient } from '@supabase/supabase-js'
+
+import { SITE_ORIGIN, SITE_URL } from '~/lib/constants'
+
+import DefaultLayout from '~/components/Layouts/Default'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader'
+import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
+import LW7BgGraphic from '~/components/LaunchWeek/7/LW7BgGraphic'
+import { useTheme } from 'common/Providers'
+
+const LW7Releases = dynamic(() => import('~/components/LaunchWeek/7/Releases'))
+const LaunchWeekPrizeSection = dynamic(
+ () => import('~/components/LaunchWeek/7/LaunchWeekPrizeSection')
+)
+const TicketBrickWall = dynamic(
+ () => import('~/components/LaunchWeek/7/LaunchSection/TicketBrickWall')
+)
+const CTABanner = dynamic(() => import('~/components/CTABanner'))
+
+interface Props {
+ users: UserData[]
+}
+
+const supabaseAdmin = createClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL ?? 'http://localhost:54321',
+ process.env.SUPABASE_SERVICE_ROLE_SECRET ??
+ process.env.NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_SECRET ??
+ ''
+)
+
+export default function TicketHome({ users }: Props) {
+ const { isDarkMode, toggleTheme } = useTheme()
+
+ const TITLE = 'Supabase LaunchWeek 7'
+ const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023'
+ const OG_IMAGE = `${SITE_ORIGIN}/images/launchweek/seven/launch-week-7-teaser.jpg`
+
+ useEffect(() => {
+ toggleTheme(true)
+ document.body.className = 'bg-[#1C1C1C]'
+ return () => {
+ document.body.className = ''
+ isDarkMode ? toggleTheme(true) : toggleTheme(false)
+ }
+ }, [])
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ {users &&
+
+
+
+
+
+
+
+
+
+ Check out all the tickets
+
+
and find out if you are one of the lucky
+ winners. Get sharing!
+
+
+
+
+
+
+
+
+
+
-
- )
-
return (
<>
-
-
-
-
+
-
+
-
+
+
+
+ {supabase &&
+
+
+
-
- {users &&
+ {supabase && (
+
+
+
+ )}
+
-
-
-
-
- See the prizes{' '}
-
-
-
+
-
+
-
+
+
+ {supabase && (
+
+
+
-
-
-
-
-
-
-
-
+
-
- Check out all the tickets
-
- Launch Week 8 tickets
+
and find out if you are one of the lucky
- winners. Get sharing!
+ winners.
+
@@ -129,7 +136,9 @@ function Partner({ partner }: { partner: Partner }) {
)}
-
+
+
@@ -169,7 +178,7 @@ function Partner({ partner }: { partner: Partner }) {
- {partner.type === 'technology' && (
+ {partner.type === 'technology' && partner.docs && (
Documentation
{
- const { data: slugs } = await supabase.from('partners').select('slug')
+ const { data: slugs } = await supabase
+ .from('partners')
+ .select('slug')
+ .eq('approved', true)
+ .eq('type', 'expert')
const paths: {
params: { slug: string }
@@ -231,10 +244,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
}
// Parse markdown
- partner.overview = marked.parse(partner.overview)
+ const overview = await serialize(partner.overview)
return {
- props: { partner },
+ props: { partner, overview },
revalidate: 18000, // In seconds - refresh every 5 hours
}
}
diff --git a/apps/www/pages/partners/experts/index.tsx b/apps/www/pages/partners/experts/index.tsx
index 7c3f1c15844..c9de3a7cdc4 100644
--- a/apps/www/pages/partners/experts/index.tsx
+++ b/apps/www/pages/partners/experts/index.tsx
@@ -31,10 +31,6 @@ interface Props {
function ExpertPartnersPage(props: Props) {
const { partners } = props
- const partnersByCategory: { [category: string]: Partner[] } = {}
- partners.map(
- (p) => (partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
- )
const router = useRouter()
const meta_title = 'Find an expert'
@@ -122,7 +118,7 @@ function ExpertPartnersPage(props: Props) {
{/* Partner Tiles */}
{partners.length ? (
- No Partners Found
)}
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 2ac95452ff2..95a87f58eba 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -1,18 +1,53 @@
-import { marked } from 'marked'
+import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
+import { CH } from '@code-hike/mdx/components'
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import { GetStaticPaths, GetStaticProps } from 'next'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
import { NextSeo } from 'next-seo'
import Image from 'next/image'
import Link from 'next/link'
+import { Dispatch, SetStateAction, useState } from 'react'
+import remarkGfm from 'remark-gfm'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'
-import { IconChevronLeft, IconExternalLink } from 'ui'
+import { Admonition, Button, ExpandableVideo, IconChevronLeft, IconExternalLink } from 'ui'
+import ImageModal from '~/components/ImageModal'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
import supabase from '~/lib/supabase'
import { Partner } from '~/types/partners'
import Error404 from '../../404'
-function Partner({ partner }: { partner: Partner }) {
+/**
+ * Returns custom components so that the markdown converts to a nice looking html.
+ */
+function mdxComponents(callback: Dispatch callback(props.src!)} />
+ },
+ }
+
+ return components
+}
+
+function Partner({
+ partner,
+ overview,
+}: {
+ partner: Partner
+ overview: MDXRemoteSerializeResult
@@ -80,12 +132,12 @@ function Partner({ partner }: { partner: Partner }) {
1024: {
slidesPerView: 4,
},
- 1208: {
+ 1280: {
slidesPerView: 5,
},
}}
>
- {partner.images.map((image: any, i: number) => {
+ {partner.images?.map((image: any, i: number) => {
return (
-
@@ -96,6 +148,7 @@ function Partner({ partner }: { partner: Partner }) {
height={960}
src={image}
alt={partner.title}
+ onClick={() => setFocusedImage(image)}
/>
-
+
+
-
- {partner.video && (
-
-
-
- )}
-
-
+
+
-
- Details
-
+
+
@@ -197,7 +262,11 @@ function Partner({ partner }: { partner: Partner }) {
// This function gets called at build time
export const getStaticPaths: GetStaticPaths = async () => {
- const { data: slugs } = await supabase.from('partners').select('slug')
+ const { data: slugs } = await supabase
+ .from('partners')
+ .select('slug')
+ .eq('approved', true)
+ .eq('type', 'technology')
const paths: {
params: { slug: string }
@@ -230,11 +299,24 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
}
}
+ const codeHikeOptions: CodeHikeConfig = {
+ theme: codeHikeTheme,
+ lineNumbers: true,
+ showCopyButton: true,
+ skipLanguages: [],
+ autoImport: false,
+ }
+
// Parse markdown
- partner.overview = marked.parse(partner.overview)
+ const overview = await serialize(partner.overview, {
+ mdxOptions: {
+ useDynamicImport: true,
+ remarkPlugins: [remarkGfm, [remarkCodeHike, codeHikeOptions]],
+ },
+ })
return {
- props: { partner },
+ props: { partner, overview },
revalidate: 18000, // In seconds - refresh every 5 hours
}
}
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 50236ca7598..2e878b0a792 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -1,7 +1,7 @@
-import { IconLoader, IconSearch, Input } from 'ui'
import { NextSeo } from 'next-seo'
import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { IconLoader, IconSearch, Input } from 'ui'
import { useDebounce } from 'use-debounce'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -39,10 +39,6 @@ function IntegrationPartnersPage(props: Props) {
const allCategories = Array.from(new Set(initialPartners.map((p) => p.category)))
- const partnersByCategory: { [category: string]: Partner[] } = {}
- partners.forEach(
- (p) => (partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
- )
const router = useRouter()
const meta_title = 'Find an Integration'
@@ -164,11 +160,11 @@ function IntegrationPartnersPage(props: Props) {
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
- stroke-width="1"
+ strokeWidth="1"
>
+
+ {partner.call_to_action_link && (
+
+ Details
+
-
- {partner.type === 'technology' && (
-
- Developer
- {partner.developer}
+ {partner.video && (
+
+
)}
-
- Category
-
-
- {partner.category}
-
-
-
+
+ {partner.type === 'technology' && (
+
+ Developer
+ {partner.developer}
+
+ )}
-
- Website
-
- {new URL(partner.website).host}
-
-
-
- {partner.type === 'technology' && (
+
+
- )}
+
+ {partner.type === 'technology' && partner.docs && (
+
+ Documentation
+
+
+ Learn
+
+ )}
+
+
+ )}
+
+
+ Get started with {partner.title} and Supabase.
+
+
+
+
+
{partners.length ? (
- No Partners Found
)}
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 32f23ded8bf..3940e1b06e6 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -179,7 +179,9 @@ export default function IndexPage() {
].join(' ')}
>
{plan.name === 'Pro' && (
-
{plan.nameBadge && (
-
+
{plan.nameBadge}
)}
@@ -227,7 +229,7 @@ export default function IndexPage() {
{plan.priceLabel && (
-
{plan.warning && (
+
{plan.features.map((feature) => (
{plan.footer && (
-
@@ -323,7 +325,10 @@ export default function IndexPage() {
-
+
{planEnterprise.features.map((feature) => (
-
- 
@@ -402,7 +407,7 @@ export default function IndexPage() {
{addon.name === 'Optimized Compute' ? (