diff --git a/.github/workflows/docs-last-changed.yml b/.github/workflows/docs-last-changed.yml index 882e7847367..5025e4b0d10 100644 --- a/.github/workflows/docs-last-changed.yml +++ b/.github/workflows/docs-last-changed.yml @@ -19,7 +19,7 @@ jobs: env: NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SEARCH_SUPABASE_URL }} - SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }} + SUPABASE_SECRET_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }} steps: - name: Check out repo diff --git a/.github/workflows/docs-lint-v2-comment.yml b/.github/workflows/docs-lint-v2-comment.yml index 89c037c42fa..7194e9e2181 100644 --- a/.github/workflows/docs-lint-v2-comment.yml +++ b/.github/workflows/docs-lint-v2-comment.yml @@ -1,4 +1,4 @@ -name: Comment on external PRs with linter results +name: docs_lint_comment_external # This is a continuation of ./docs-lint-v2.yml, to write comments on external # PRs. @@ -11,7 +11,7 @@ name: Comment on external PRs with linter results on: workflow_run: - workflows: ['[Docs] Lint v2'] + workflows: [docs_lint] types: - completed @@ -21,7 +21,7 @@ permissions: jobs: comment_on_pr: runs-on: ubuntu-latest - if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' + if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'failure' steps: - id: download_artifact name: 'Download artifact' diff --git a/.github/workflows/docs-lint-v2.yml b/.github/workflows/docs-lint-v2.yml index cf543f15f1e..4ceb1f82102 100644 --- a/.github/workflows/docs-lint-v2.yml +++ b/.github/workflows/docs-lint-v2.yml @@ -1,4 +1,4 @@ -name: '[Docs] Lint v2' +name: docs_lint # Runs the docs linter on PRs that edit docs content. # There are two branches of this workflow for internal and external PRs, due @@ -102,3 +102,6 @@ jobs: with: name: lint_results path: __github_actions__pr/ + - name: fail if linter fails (external) + if: steps.filter.outputs.docs == 'true' && github.event.pull_request.head.repo.full_name != github.repository && steps.external_lint.outputs.LINT_EXIT_CODE != 0 + run: exit 1 diff --git a/.github/workflows/docs-sync-troubleshooting.yml b/.github/workflows/docs-sync-troubleshooting.yml index f0d2ec07116..52c0d793e7c 100644 --- a/.github/workflows/docs-sync-troubleshooting.yml +++ b/.github/workflows/docs-sync-troubleshooting.yml @@ -17,9 +17,9 @@ jobs: runs-on: ubuntu-latest env: - SEARCH_GITHUB_APP_ID: ${{ secrets.SEARCH_GITHUB_APP_ID }} - SEARCH_GITHUB_APP_INSTALLATION_ID: ${{ secrets.SEARCH_GITHUB_APP_INSTALLATION_ID }} - SEARCH_GITHUB_APP_PRIVATE_KEY: ${{ secrets.SEARCH_GITHUB_APP_PRIVATE_KEY }} + DOCS_GITHUB_APP_ID: ${{ secrets.SEARCH_GITHUB_APP_ID }} + DOCS_GITHUB_APP_INSTALLATION_ID: ${{ secrets.SEARCH_GITHUB_APP_INSTALLATION_ID }} + DOCS_GITHUB_APP_PRIVATE_KEY: ${{ secrets.SEARCH_GITHUB_APP_PRIVATE_KEY }} NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SEARCH_SUPABASE_URL }} SUPABASE_SECRET_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }} diff --git a/.github/workflows/search.yml b/.github/workflows/search.yml index 03de1b2e7aa..9d5aa59959a 100644 --- a/.github/workflows/search.yml +++ b/.github/workflows/search.yml @@ -29,12 +29,14 @@ jobs: runs-on: ubuntu-latest env: - OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} + DOCS_GITHUB_APP_ID: ${{ secrets.SEARCH_GITHUB_APP_ID }} + DOCS_GITHUB_APP_INSTALLATION_ID: ${{ secrets.SEARCH_GITHUB_APP_INSTALLATION_ID }} + DOCS_GITHUB_APP_PRIVATE_KEY: ${{ secrets.SEARCH_GITHUB_APP_PRIVATE_KEY }} + NEXT_PUBLIC_MISC_URL: ${{ secrets.NEXT_PUBLIC_MISC_URL}} + NEXT_PUBLIC_MISC_ANON_KEY: ${{ secrets.NEXT_PUBLIC_MISC_ANON_KEY }} NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.SEARCH_SUPABASE_URL }} - SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }} - SEARCH_GITHUB_APP_ID: ${{ secrets.SEARCH_GITHUB_APP_ID }} - SEARCH_GITHUB_APP_INSTALLATION_ID: ${{ secrets.SEARCH_GITHUB_APP_INSTALLATION_ID }} - SEARCH_GITHUB_APP_PRIVATE_KEY: ${{ secrets.SEARCH_GITHUB_APP_PRIVATE_KEY }} + OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} + SUPABASE_SECRET_KEY: ${{ secrets.SEARCH_SUPABASE_SERVICE_ROLE_KEY }} steps: - name: Check out repo @@ -58,10 +60,6 @@ jobs: - name: Download dependencies run: pnpm i - # Need the miscellaneous use API, which is available publicly (by design) in www - - name: Copy environment variables - run: cp apps/www/.env.local.example apps/docs/.env - - name: Update embeddings working-directory: ./apps/docs if: ${{ !inputs.refresh }} diff --git a/apps/docs/.env.development b/apps/docs/.env.development index 7c41f0565e4..f5e09eed460 100644 --- a/apps/docs/.env.development +++ b/apps/docs/.env.development @@ -2,5 +2,17 @@ # Only publicly available environment variables should be listed here. # Do not add secrets here. Use .env.local instead. +NEXT_PUBLIC_SITE_URL="http://localhost:3001" +NEXT_PUBLIC_BASE_PATH="/docs" + +# Whether to enable features available only on Supabase's own hosted services +# Setting this to true requires certain secret keys +NEXT_PUBLIC_IS_PLATFORM="false" + +# Supabase project containing integration information NEXT_PUBLIC_MISC_URL="https://obuldanrptloktxcffvn.supabase.co" NEXT_PUBLIC_MISC_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTg2MTQ2ODUsImV4cCI6MjAzNDE5MDY4NX0.NFt49g6DFkc1X5khCzN5p01iAVo2TMxlx88cY1V0E2M" + +# Supabase project containing docs content information +NEXT_PUBLIC_SUPABASE_URL="https://xguihxuzqibwxjnimxev.supabase.co" +NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhndWloeHV6cWlid3hqbmlteGV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTgzNzc1MTgsImV4cCI6MjAzMzk1MzUxOH0.aIqjQ9V7djMxYit-DT1fYNV_VWMHSqldh_18XfX2_BE" diff --git a/apps/docs/.env.example b/apps/docs/.env.example deleted file mode 100644 index 735dd88086d..00000000000 --- a/apps/docs/.env.example +++ /dev/null @@ -1,14 +0,0 @@ -# PUBLIC -NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321 -NEXT_PUBLIC_SUPABASE_ANON_KEY= - -# PRIVATE -OPENAI_API_KEY= -SUPABASE_SERVICE_ROLE_KEY= -SEARCH_GITHUB_APP_ID= -SEARCH_GITHUB_APP_INSTALLATION_ID= -SEARCH_GITHUB_APP_PRIVATE_KEY= - -# Set IS_PLATFORM to true if you have the api keys and urls -NEXT_PUBLIC_IS_PLATFORM=false -NEXT_PUBLIC_LOCAL_SUPABASE=false diff --git a/apps/docs/.eslintrc.js b/apps/docs/.eslintrc.cjs similarity index 100% rename from apps/docs/.eslintrc.js rename to apps/docs/.eslintrc.cjs diff --git a/apps/docs/app/api/crawlers/route.ts b/apps/docs/app/api/crawlers/route.ts index 0aae261baea..253e6648cb1 100644 --- a/apps/docs/app/api/crawlers/route.ts +++ b/apps/docs/app/api/crawlers/route.ts @@ -85,7 +85,6 @@ function htmlShell( `` + `` + `` + '' + diff --git a/apps/docs/app/api/graphql/__snapshots__/route.test.ts.snap b/apps/docs/app/api/graphql/__snapshots__/route.test.ts.snap index c668a0b5208..5c0bac58a6a 100644 --- a/apps/docs/app/api/graphql/__snapshots__/route.test.ts.snap +++ b/apps/docs/app/api/graphql/__snapshots__/route.test.ts.snap @@ -131,6 +131,9 @@ type RootQueryType { """Search the Supabase docs for content matching a query string""" searchDocs(query: String!, limit: Int): SearchResultCollection + + """Get the details of an error code returned from a Supabase service""" + error(code: String!, service: Service!): Error } """A collection of search results containing content from Supabase docs""" @@ -149,5 +152,30 @@ type SearchResultCollection { type SearchResultEdge { """The SearchResult at the end of the edge""" node: SearchResult! +} + +"""An error returned by a Supabase service""" +type Error { + """ + The unique code identifying the error. The code is stable, and can be used for string matching during error handling. + """ + code: String! + + """The Supabase service that returns this error.""" + service: Service! + + """The HTTP status code returned with this error.""" + httpStatusCode: Int + + """ + A human-readable message describing the error. The message is not stable, and should not be used for string matching during error handling. Use the code instead. + """ + message: String +} + +enum Service { + AUTH + REALTIME + STORAGE }" `; diff --git a/apps/docs/app/api/graphql/route.test.ts b/apps/docs/app/api/graphql/route.test.ts index 8b464e23f9d..bcd6633e9bf 100644 --- a/apps/docs/app/api/graphql/route.test.ts +++ b/apps/docs/app/api/graphql/route.test.ts @@ -3,15 +3,11 @@ import { POST } from './route' describe('/api/graphql basic error statuses', () => { beforeAll(() => { - vi.mock('server-only', () => { - return {} - }) vi.spyOn(console, 'error').mockImplementation(() => {}) }) afterAll(() => { vi.restoreAllMocks() - vi.doUnmock('server-only') }) beforeEach(() => { diff --git a/apps/docs/app/api/graphql/tests/errors.test.ts b/apps/docs/app/api/graphql/tests/errors.test.ts new file mode 100644 index 00000000000..92972b850fb --- /dev/null +++ b/apps/docs/app/api/graphql/tests/errors.test.ts @@ -0,0 +1,64 @@ +import { describe, expect, it, vi } from 'vitest' +import { POST } from '../route' + +describe('/api/graphql error', () => { + it('returns the error matching given error code and service', async () => { + const errorQuery = ` + query { + error(code: "test_code", service: AUTH) { + code + service + httpStatusCode + message + } + } + ` + const request = new Request('http://localhost/api/graphql', { + method: 'POST', + body: JSON.stringify({ query: errorQuery }), + }) + + const result = await POST(request) + const { + data: { error }, + errors, + } = await result.json() + + expect(errors).toBeUndefined() + expect(error.code).toBe('test_code') + expect(error.service).toBe('AUTH') + expect(error.httpStatusCode).toBe(500) + expect(error.message).toBe('This is a test error message') + }) + + it('returns error if no matching error exists', async () => { + vi.spyOn(console, 'error').mockImplementation(() => {}) + + const errorQuery = ` + query { + error(code: "nonexistent_code", service: AUTH) { + code + service + httpStatusCode + message + } + } + ` + const request = new Request('http://localhost/api/graphql', { + method: 'POST', + body: JSON.stringify({ query: errorQuery }), + }) + + const result = await POST(request) + const { + data: { error }, + errors, + } = await result.json() + + expect(error).toBe(null) + expect(errors).toHaveLength(1) + expect(errors[0].message).toMatch(/not found/i) + + vi.restoreAllMocks() + }) +}) diff --git a/apps/docs/app/api/utils.ts b/apps/docs/app/api/utils.ts index a2e87017713..949947abce5 100644 --- a/apps/docs/app/api/utils.ts +++ b/apps/docs/app/api/utils.ts @@ -45,6 +45,24 @@ export class InvalidRequestError
extends } } +export class NoDataError
extends ApiError
{ + constructor(message: string, source?: unknown, details?: Details) { + super(`Data not found: ${message}`, source, details) + } + + isPrivate() { + return false + } + + isUserError() { + return true + } + + statusCode() { + return 404 + } +} + export function convertUnknownToApiError(error: unknown): ApiError { return new ApiError('Unknown error', error) } diff --git a/apps/docs/app/guides/database/database-advisors/page.tsx b/apps/docs/app/guides/database/database-advisors/page.tsx index 184c8fee410..ce95941cf19 100644 --- a/apps/docs/app/guides/database/database-advisors/page.tsx +++ b/apps/docs/app/guides/database/database-advisors/page.tsx @@ -1,15 +1,15 @@ import { Octokit } from '@octokit/core' -import { capitalize } from 'lodash' +import { capitalize } from 'lodash-es' import { type SerializeOptions } from 'next-mdx-remote/dist/types' import rehypeSlug from 'rehype-slug' import { Heading } from 'ui' -import { genGuideMeta } from '~/features/docs/GuidesMdx.utils' import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template' +import { genGuideMeta } from '~/features/docs/GuidesMdx.utils' import { MDXRemoteBase } from '~/features/docs/MdxBase' import { fetchRevalidatePerDay } from '~/features/helpers.fetch' -import { Tabs, TabPanel } from '~/features/ui/Tabs' +import { TabPanel, Tabs } from '~/features/ui/Tabs' import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform' import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition' import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle' diff --git a/apps/docs/components/Feedback/Feedback.utils.ts b/apps/docs/components/Feedback/Feedback.utils.ts index 3337d2f57ee..c93ebb55715 100644 --- a/apps/docs/components/Feedback/Feedback.utils.ts +++ b/apps/docs/components/Feedback/Feedback.utils.ts @@ -1,4 +1,4 @@ -import { pick } from 'lodash' +import { pick } from 'lodash-es' /** * Gets the Notion team to send feedback to based on the pathname. diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 0dcb96f727b..641b40d937d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -119,7 +119,7 @@ export const GLOBAL_MENU_ITEMS: GlobalMenuItems = [ level: 'platform', }, { - label: 'Security', + label: 'Security & Compliance', icon: 'security', href: '/guides/security', level: 'security', @@ -917,10 +917,6 @@ export const database: NavMenuConstant = { name: 'Database configuration', url: '/guides/database/postgres/configuration', }, - { - name: 'Managing database replication', - url: '/guides/database/replication', - }, { name: 'Query optimization', url: '/guides/database/query-optimization', @@ -960,6 +956,22 @@ export const database: NavMenuConstant = { }, ormQuickstarts, guiQuickstarts, + { + name: 'Database replication', + url: undefined, + items: [ + { name: 'Overview', url: '/guides/database/replication' }, + { + name: 'Setting up replication', + url: '/guides/database/replication/setting-up-replication', + }, + { + name: 'Monitoring replication', + url: '/guides/database/replication/monitoring-replication', + }, + { name: 'FAQ', url: '/guides/database/replication/faq' }, + ], + }, { name: 'Extensions', url: undefined, @@ -2080,6 +2092,19 @@ export const security: NavMenuConstant = { { name: 'HIPAA', url: '/guides/security/hipaa-compliance' }, ], }, + { + name: 'Guides', + url: undefined, + items: [ + { name: 'Production Checklist', url: '/guides/deployment/going-into-prod' }, + { + name: 'Shared Responsibility Model', + url: '/guides/deployment/shared-responsibility-model', + }, + { name: 'Row Level Security', url: '/guides/database/postgres/row-level-security' }, + { name: 'Hardening the Data API', url: '/guides/database/hardening-data-api' }, + ], + }, ], } diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx index 7b210ea3032..53d62179b15 100644 --- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx +++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx @@ -1,18 +1,18 @@ +import { noop } from 'lodash-es' import { Check, ChevronsUpDown } from 'lucide-react' -import { noop } from 'lodash' import { useState } from 'react' import { Button_Shadcn_ as Button, - Popover_Shadcn_ as Popover, - PopoverTrigger_Shadcn_ as PopoverTrigger, - PopoverContent_Shadcn_ as PopoverContent, - Command_Shadcn_ as Command, - CommandInput_Shadcn_ as CommandInput, - CommandEmpty_Shadcn_ as CommandEmpty, - CommandItem_Shadcn_ as CommandItem, - CommandGroup_Shadcn_ as CommandGroup, - CommandList_Shadcn_ as CommandList, cn, + Command_Shadcn_ as Command, + CommandEmpty_Shadcn_ as CommandEmpty, + CommandGroup_Shadcn_ as CommandGroup, + CommandInput_Shadcn_ as CommandInput, + CommandItem_Shadcn_ as CommandItem, + CommandList_Shadcn_ as CommandList, + Popover_Shadcn_ as Popover, + PopoverContent_Shadcn_ as PopoverContent, + PopoverTrigger_Shadcn_ as PopoverTrigger, ScrollArea, } from 'ui' diff --git a/apps/docs/components/SharedData.tsx b/apps/docs/components/SharedData.tsx index f5b4cbc9111..113a8340195 100644 --- a/apps/docs/components/SharedData.tsx +++ b/apps/docs/components/SharedData.tsx @@ -1,4 +1,4 @@ -import { at } from 'lodash' +import { at } from 'lodash-es' import { ReactNode } from 'react' import { config, logConstants } from 'shared-data' diff --git a/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx b/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx index d26c8eee48d..4c0af8c9c46 100644 --- a/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx +++ b/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx @@ -10,8 +10,9 @@ Claims returned must conform to our specification. Supabase Auth will check for These are the fields currently available on an access token: -Required Claims: `iss`, `aud`, `exp`, `iat`, `sub`, `role`, `aal`, `session_id` -Optional Claims: `jti`, `nbf`, `app_metadata`, `user_metadata`, `amr`, `email`, `phone` +Required Claims: `iss`, `aud`, `exp`, `iat`, `sub`, `role`, `aal`, `session_id`, `email`, `phone`, `is_anonymous` + +Optional Claims: `jti`, `nbf`, `app_metadata`, `user_metadata`, `amr`, **Inputs** @@ -241,7 +242,10 @@ as $$ 'sub', 'role', 'aal', - 'session_id' + 'session_id', + 'email', + 'phone', + 'is_anonymous' ] loop if original_claims ? claim then -- original_claims contains one of the listed claims, set it on new_claims diff --git a/apps/docs/content/guides/database/hardening-data-api.mdx b/apps/docs/content/guides/database/hardening-data-api.mdx index 64258cf784a..bfe1f421b7b 100644 --- a/apps/docs/content/guides/database/hardening-data-api.mdx +++ b/apps/docs/content/guides/database/hardening-data-api.mdx @@ -2,7 +2,24 @@ title: 'Hardening the Data API' --- -Your database's automatically generated Data API exposes the `public` schema by default. If your `public` schema is used by other tools as a default space, you might want to lock down this schema. This helps prevent accidental exposure of data that's automatically added to `public`. +Your database's auto-generated Data API exposes the `public` schema by default. You can change this to any schema in your database, or even disable the Data API completely. + +Any tables that are accessible through the Data API _must_ have [Row Level Security](/docs/guides/database/postgres/row-level-security) enabled. Row Level Security (RLS) is enabled by default when you create tables from the Supabase Dashboard. If you create a table using the SQL editor or your own SQL client or migration runner, you*must* enable RLS yourself. + +## Shared responsibility + +Your application's security is your responsibility as a developer. This includes RLS, falling under the [Shared Responsibility](/docs/guides/deployment/shared-responsibility-model) model. To help you: + +- Supabase sends daily emails warning of any tables that are exposed to the Data API which do not have RLS enabled. +- Supabase provides a Security Advisor and other tools in the Supabase Dashboard to fix any issues. + +## Private schemas + +We highly recommend creating a `private` schema for storing tables that you do not want to expose via the Data API. These tables can be accessed via Supabase Edge Functions or any other serverside tool. In this model, you should implement your security model in your serverside code. Although it's not required, we _still_ recommend enabling RLS for private tables and then connecting to your database using a Postgres role with `bypassrls` privileges. + +## Managing the public schema + +If your `public` schema is used by other tools as a default space, you might want to lock down this schema. This helps prevent accidental exposure of data that's automatically added to `public`. There are two levels of security hardening for the Data API: diff --git a/apps/docs/content/guides/database/postgres/setup-replication-external.mdx b/apps/docs/content/guides/database/postgres/setup-replication-external.mdx index 02bbbb939f3..0e74c9df844 100644 --- a/apps/docs/content/guides/database/postgres/setup-replication-external.mdx +++ b/apps/docs/content/guides/database/postgres/setup-replication-external.mdx @@ -27,9 +27,9 @@ select pg_create_logical_replication_slot('example_slot', 'pgoutput'); -This will need a direct connection to your database and you can find the connection info in the [Dashboard](https://supabase.com/dashboard/project/_/settings/database). +This will need a **direct** connection (not a Connection Pooler) to your database and you can find the connection info in the [Dashboard](https://supabase.com/dashboard/project/_/settings/database). -You will also need to ensure that ipv6 is supported by your replication destination. +You will also need to ensure that IPv6 is supported by your replication destination (or you can enable the [IPv4 add-on](/guides/platform/ipv4-address)) If you would prefer not to use the `postgres` user, then you can run `CREATE ROLE WITH REPLICATION;` using the `postgres` user. diff --git a/apps/docs/content/guides/database/replication.mdx b/apps/docs/content/guides/database/replication.mdx index 18f2d05a604..ee5445662ff 100644 --- a/apps/docs/content/guides/database/replication.mdx +++ b/apps/docs/content/guides/database/replication.mdx @@ -1,93 +1,69 @@ --- -id: 'replication' -title: 'Replication' -slug: 'replication' +title: 'Replication and change data capture' +description: 'An introduction to logical replication and change data capture' --- -Replication is a technique for copying the data from one database to another. Supabase uses replication functionality to provide a real-time API. Replication is useful for: +Replication is the process of copying changes from your database to another location. It's also referred to as change data capture (CDC): capturing all the changes that occur to your data. -- Spreading out the "load." For example, if your database has a lot of reads, you might want to split it between two databases. -- Reducing latency. For example, you may want one database in London to serve your European customers, and one in New York to serve the US. +## Use cases -Replication is done through _publications_, a method of choosing which changes to send to other systems (usually another Postgres database). Publications can be managed in the [Dashboard](https://supabase.com/dashboard) or with SQL. +You might use replication for: -## Manage publications in the dashboard +- **Analytics and Data Warehousing**: Replicate your operational database to analytics platforms like BigQuery for complex analysis without impacting your application's performance. +- **Data Integration**: Keep your data synchronized across different systems and services in your tech stack. +- **Backup and Disaster Recovery**: Maintain up-to-date copies of your data in different locations. +- **Read Scaling**: Distribute read operations across multiple database instances to improve performance. -1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard. -2. Click on **Publications** in the sidebar. -3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**. -4. Control which tables broadcast changes by selecting **Source** and toggling each table. +## Replication in Postgres - +Postgres comes with built-in support for replication via publications and replication slots. Refer to the [Concepts and terms](#concepts-and-terms) section to learn how replication works. -## Create a publication +## Setting up and monitoring replication in Supabase -This publication contains changes to all tables. +- [Setting up replication](/docs/guides/database/replication/setting-up-replication) +- [Monitoring replication](/docs/guides/database/replication/monitoring-replication) -```sql -create publication publication_name -for all tables; -``` + -## Create a publication to listen to individual tables +If you want to set up a read replica, see [Read Replicas](/docs/guides/platform/read-replicas) instead. If you want to sync your data in real time to a client such as a browser or mobile app, see [Realtime](/docs/guides/realtime) instead. -```sql -create publication publication_name -for table table_one, table_two; -``` + -## Add tables to an existing publication +## Concepts and terms -```sql -alter publication publication_name -add table table_name; -``` +### Write-Ahead Log (WAL) -## Listen to `insert` +Postgres uses a system called the Write-Ahead Log (WAL) to manage changes to the database. As you make changes, they are appended to the WAL (which is a series of files (also called "segments"), where the file size can be specified). Once one segment is full, Postgres will start appending to a new segment. After a period of time, a checkpoint occurs and Postgres synchronizes the WAL with your database. Once the checkpoint is complete, then the WAL files can be removed from disk and free up space. -```sql -create publication publication_name -for all tables -with (publish = 'insert'); -``` +### Logical replication and WAL -## Listen to `update` +Logical replication is a method of replication where Postgres uses the WAL files and transmit those changes to another Postgres database, or a system that supports reading WAL files. -```sql -create publication publication_name -for all tables -with (publish = 'update'); -``` +### LSN -## Listen to `delete` +LSN is a Log Sequence Number that is used to identify the position of a WAL file in the WAL directory. It is often used to determine the progress of replication in subscribers and calculate the lag of a replication slot. -```sql -create publication publication_name -for all tables -with (publish = 'delete'); -``` +## Logical replication architecture -## Remove a publication +When setting up logical replication, three key components are involved: -```sql -drop publication if exists publication_name; -``` +- `publication` - A set of tables on your primary database that will be `published` +- `replication slot` - A slot used for replicating the data from a single publication. The slot, when created, will specify the output format of the changes +- `subscription` - A subscription is created from an external system (i.e. another Postgres database) and must specify the name of the `publication`. If you do not specify a replication slot, one is automatically created -## Recreate a publication +## Logical replication output format -If you're recreating a publication, it's best to do it in a transaction to ensure the operation succeeds. +Logical replication is typically output in 2 forms, `pgoutput` and `wal2json`. The output method is how Postgres sends changes to any active replication slot. -```sql -begin; - -- remove the realtime publication - drop publication if exists publication_name; +## Logical replication configuration - -- re-create the publication but don't enable it for any tables - create publication publication_name; -commit; -``` +When using logical replication, Postgres is then configured to keep WAL files around for longer than it needs them. If the files are removed too quickly, then your `replication slot` will become inactive and, if the database receives a large number of changes in a short time, then the `replication slot` can become lost as it was not able to keep up. + +In order to mitigate this, Postgres has many options and settings that can be [tweaked](/guides/database/custom-postgres-config) to manage the WAL usage effectively. Not all of these settings are user configurable as they can impact the stability of your database. For those that are, these should be considered as advanced configuration and not changed without understanding that they can cause additional disk space and resources to be used, as well as incur additional costs. + +| Setting | Description | User-facing | Default | +| ---------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------- | +| [`max_replication_slots`](https://postgresqlco.nf/doc/en/param/max_replication_slots/) | Max count of replication slots allowed | No | | +| [`wal_keep_size`](https://postgresqlco.nf/doc/en/param/wal_keep_size/) | Minimum size of WAL files to keep for replication | No | | +| [`max_slot_wal_keep_size`](https://postgresqlco.nf/doc/en/param/max_slot_wal_keep_size/) | Max WAL size that can be reserved by replication slots | No | | +| [`checkpoint_timeout`](https://postgresqlco.nf/doc/en/param/checkpoint_timeout/) | Max time between WAL checkpoints | No | | diff --git a/apps/docs/content/guides/database/replication/faq.mdx b/apps/docs/content/guides/database/replication/faq.mdx new file mode 100644 index 00000000000..f0bdd97f465 --- /dev/null +++ b/apps/docs/content/guides/database/replication/faq.mdx @@ -0,0 +1,41 @@ +--- +id: 'replication-faq' +title: 'FAQs' +description: 'Considerations and FAQs when setting up replication' +sidebar_label: 'FAQs' +--- + +# Which connection string should be used? + +Always use the direct connection string for logical replication. + +Connections through a pooler, such as Supavisor, will not work. + +# The tool in use does not support IPv6 + +You can enable the [IPv4 add-on](/guides/platform/ipv4-address) for your project. + +# What is XMIN and should it be used? + +Xmin is a different form of replication from logical replication and should only be used if logical replication is not available for your database (i.e. older versions of Postgres). + +Xmin performs replication by checking the [xmin system column](https://www.postgresql.org/docs/current/ddl-system-columns.html) and determining if that row has already been synchronized. + +It does not capture deletion of data and is **not recommended**, particularly for larger databases. + +# Can replication be configured in the Dashboard? + +You can view [publications](https://supabase.com/dashboard/project/default/database/publications) in the Dashboard but all steps to configure replication must be done using the [SQL Editor](https://supabase.com/dashboard/project/default/sql/new) or a CLI tool of your choice. + +# How to configure database settings for replication? + +Yes. Using the Supabase CLI, you can [configure database settings](/guides/database/custom-postgres-config#cli-configurable-settings) to optimize them for your replication needs. These values can vary depending on the activity of your database size and activity. + +# What are some important configuration options? + +Some of the more important options to be aware of are: + +- `max_wal_size` +- `max_slot_wal_keep_size` +- `wal_keep_size` +- `max_wal_senders` diff --git a/apps/docs/content/guides/database/replication/monitoring-replication.mdx b/apps/docs/content/guides/database/replication/monitoring-replication.mdx new file mode 100644 index 00000000000..a49b8a8f27a --- /dev/null +++ b/apps/docs/content/guides/database/replication/monitoring-replication.mdx @@ -0,0 +1,94 @@ +--- +title: 'Monitoring replication' +--- + +Monitoring replication lag is important and there are 3 ways to do this: + +1. Dashboard - Under the [Reports](/guides/platform/reports) of the dashboard, you can view the replication lag of your project +2. Database - + - pg_stat_subscription (subscriber) - if PID is null, then the subscription is not active + - pg_stat_subscription_stats - look here for error_count to see if there were issues applying or syncing (if yes, check the logs for why) + - pg_replication_slots - use this to check if the slot is active and you can also calculate the lag from here +3. [Metrics](/guides/telemetry/metrics) - Using the prometheus endpoint for your project + - replication_slots_max_lag_bytes - this is the more important one + - pg_stat_replication_replay_lag - lag to replay WAL files from the source DB on the target DB (throttled by disk or high activity) + - pg_stat_replication_send_lag - lag in sending WAL files from the source DB (a high lag means that the publisher is not being asked to send new WAL files OR a network issues) + +## Primary + +### Replication status and lag + +The `pg_stat_replication` table shows the status of any replicas connected to the primary database. + +```sql +select pid, application_name, state, sent_lsn, write_lsn, flush_lsn, replay_lsn, sync_state +from pg_stat_replication; +``` + +### Replication slot status + +A replication slot can be in one of three states: + +- `active` - The slot is active and is receiving data +- `inactive` - The slot is not active and is not receiving data +- `lost` - The slot is lost and is not receiving data + +The state can be checked using the `pg_replication_slots` table: + +```sql +select slot_name, active, state from pg_replication_slots; +``` + +### WAL size + +The WAL size can be checked using the `pg_ls_waldir()` function: + +```sql +select * from pg_ls_waldir(); +``` + +### Check LSN + +```sql +select pg_current_wal_lsn(); +``` + +## Subscriber + +### Subscription status + +The `pg_subscription` table shows the status of any subscriptions on a replica and the `pg_subscription_rel` table shows the status of each table within a subscription. + +The `srsubstate` column in `pg_subscription_rel` can be one of the following: + +- `i` - Initializing - The subscription is being initialized +- `d` - Data Synchronizing - The subscription is synchronizing data for the first time (i.e. doing the initial copy) +- `s` - Synchronized - The subscription is synchronized +- `r` - Replicating - The subscription is replicating data + +```sql +SELECT + sub.subname AS subscription_name, + relid::regclass AS table_name, + srel.srsubstate AS replication_state, + CASE srel.srsubstate + WHEN 'i' THEN 'Initializing' + WHEN 'd' THEN 'Data Synchronizing' + WHEN 's' THEN 'Synchronized' + WHEN 'r' THEN 'Replicating' + ELSE 'Unknown' + END AS state_description, + srel.srsyncedlsn AS last_synced_lsn +FROM + pg_subscription sub +JOIN + pg_subscription_rel srel ON sub.oid = srel.srsubid +ORDER BY + table_name; +``` + +### Check LSN + +```sql +select pg_last_wal_replay_lsn(); +``` diff --git a/apps/docs/content/guides/database/replication/setting-up-replication.mdx b/apps/docs/content/guides/database/replication/setting-up-replication.mdx new file mode 100644 index 00000000000..170b54b64d4 --- /dev/null +++ b/apps/docs/content/guides/database/replication/setting-up-replication.mdx @@ -0,0 +1,86 @@ +--- +id: 'setting-up-replication' +title: 'Setting up replication and CDC with Supabase' +description: 'Performing Extract Transform Load (ETL) with Supabase' +sidebar_label: 'Setting up replication and CDC' +--- + +## Prerequisites + +To set up replication, the following is recommended: + +- Instance size of XL or greater +- [IPv4 add-on](/guides/platform/ipv4-address) enabled + +To create a replication slot, you will need to use the `postgres` user and follow the instructions in our [guide](/guides/database/postgres/setup-replication-external). + + + If you are running Postgres 17 or higher, you can create a new user and grant them replication + permissions with the `postgres` user. For versions below 17, you will need to use the `postgres` + user. + + +If you are replicating to an external system and using any of the tools below, check their documentation first and we have added additional information where the setup with Supabase can vary. + + + + + +Airbyte has the following [documentation](https://docs.airbyte.com/integrations/sources/postgres/) for setting up Postgres as a source, either in their cloud offering or by self-hosting. + +You can follow those steps with the following modifications: + +1. Use the `postgres` user +2. Select `logical replication` as the replication method (`xmin` is possible, but not recommended) + +## Troubleshooting + +Airbyte has a known [issue](https://discuss.airbyte.io/t/postgres-source-replication-slot-safe-wal-size-only-reset-when-a-change-occurs/3263/7) where it does not clear WAL files on each successful sync. The recommended workaround is to have a `heartbeat` table that you write changes to once an hour.> + + + + +Estuary has the following [documentation](https://docs.estuary.dev/reference/Connectors/capture-connectors/PostgreSQL/Supabase/) for setting up Postgres as a source. + + + + + +Fivetran has the following [documentation](https://fivetran.com/docs/connectors/databases/postgresql/setup-guide) for setting up Postgres as a source. + +You can follow those steps with the following modifications: + +1. In Step 2, choose `logical replication` as the sync mechanism +2. In Step 3, do not create a user and use the existing `postgres` user for replication +3. In Step 5, no need to modify any WAL settings as we have done that for you + + + + + +Materialize has the following [documentation](https://materialize.com/docs/sql/create-source/postgres/) on setting up Postgres as a source. + +You can follow those steps with the following modifications: + +1. Follow the steps in our [guide](/guides/database/postgres/setup-replication-external) to create a publication slot + + + + + +Stitch has the following [documentation](https://www.stitchdata.com/docs/integrations/databases/postgresql/v2#extract-data) on configuring Postgres as a source. + +You can follow those steps with the following modifications: + +1. Use the `postgres` user for replication +2. Skip step 3 + + + + diff --git a/apps/docs/content/guides/platform/manage-your-usage/egress.mdx b/apps/docs/content/guides/platform/manage-your-usage/egress.mdx index 74d6bdff874..9f979e821ee 100644 --- a/apps/docs/content/guides/platform/manage-your-usage/egress.mdx +++ b/apps/docs/content/guides/platform/manage-your-usage/egress.mdx @@ -15,7 +15,7 @@ Data sent to the client when retrieving data stored in your database. -There are various ways to interact with your database, such as through the PostgREST API using one of the client SDKs or via the Supavisor connection pooler. On the Supabase Dashboard, Egress from the PostgREST API is labeled as **Database Egress**, while Egress through Supavisor is labeled as **Supavisor Egress**. +There are various ways to interact with your database, such as through the PostgREST API using one of the client SDKs or via the Supavisor connection pooler. On the Supabase Dashboard, Egress from the PostgREST API is labeled as **Database Egress**, while Egress through Supavisor is labeled as **Shared Pooler Egress**. @@ -43,6 +43,12 @@ Data pushed to clients via Supabase Realtime for subscribed events. **Example:** When a user views a product page in an online shop, their client subscribes to real-time inventory updates. As stock levels change, Supabase Realtime pushes updates to all subscribed clients, contributing to Realtime Egress. +### Shared pooler Egress + +Data sent to the client when using the shared connection pooler (Supavisor) to access your database. WHen using the shared connection pooler, we do not count database egress, as this would otherwise count double (Database -> Shared Pooler + Shared Pooler -> Client). + +**Example:** You are using our [shared connection pooler](https://supabase.com/docs/guides/database/connecting-to-postgres#shared-pooler) and you query a list of invoices in your backend. The data returned from that query is contributing to Shared Pooler Egress. + ### Log Drain Egress Data pushed to the connected log drain. diff --git a/apps/docs/content/guides/realtime/broadcast.mdx b/apps/docs/content/guides/realtime/broadcast.mdx index abc206aa9ce..14fc142a370 100644 --- a/apps/docs/content/guides/realtime/broadcast.mdx +++ b/apps/docs/content/guides/realtime/broadcast.mdx @@ -76,11 +76,15 @@ Go to your Supabase project's [API Settings](https://supabase.com/dashboard/proj ```python - from supabase import create_client + import asyncio + from supabase import acreate_client URL = "https://.supabase.co" KEY = "" - supabase = create_client(URL, KEY) + + async def create_supabase(): + supabase = await acreate_client(URL, KEY) + return supabase ``` @@ -179,6 +183,11 @@ You can provide a callback for the `broadcast` channel to receive message. This + + + In the following Realtime examples, certain methods are awaited. These should be enclosed within an `async` function. + + {/* prettier-ignore */} ```python @@ -190,7 +199,7 @@ You can provide a callback for the `broadcast` channel to receive message. This print(f"Broadcast received: {payload}") # Subscribe to the Channel - my_channel + await my_channel .on_broadcast('shout', message_received) # Listen for "shout". Can be "*" to listen to all events .subscribe() ``` @@ -323,6 +332,12 @@ You can use the Supabase client libraries to send Broadcast messages. + + + When an asynchronous method needs to be used within a synchronous context, such as the callback for `.subscribe()`, utilize `asyncio.create_task()` to schedule the coroutine. This is why the [initialize the client](#initialize-the-client) example includes an import of `asyncio`. + + + {/* prettier-ignore */} ```python my_channel = supabase.channel('test-channel') @@ -332,12 +347,12 @@ You can use the Supabase client libraries to send Broadcast messages. if status != RealtimeSubscribeStates.SUBSCRIBED: return - my_channel.send_broadcast( + asyncio.create_task(my_channel.send_broadcast( 'shout', { "message": 'hello, world' }, - ) + )) - my_channel.subscribe(on_subscribe) + await my_channel.subscribe(on_subscribe) ``` @@ -543,6 +558,12 @@ You can pass configuration options while initializing the Supabase Client. + + + When an asynchronous method needs to be used within a synchronous context, such as the callback for `.subscribe()`, utilize `asyncio.create_task()` to schedule the coroutine. This is why the [initialize the client](#initialize-the-client) example includes an import of `asyncio`. + + + By default, broadcast messages are only sent to other clients. You can broadcast messages back to the sender by setting Broadcast's `self` parameter to `True`. ```python @@ -559,10 +580,10 @@ You can pass configuration options while initializing the Supabase Client. return # Send a message once the client is subscribed - channel_b.send_broadcast( + asyncio.create_task(channel_b.send_broadcast( 'test-my-messages', { "message": 'talking to myself' }, - ) + )) my_channel.subscribe(on_subscribe) ``` diff --git a/apps/docs/features/docs/Reference.generated.script.ts b/apps/docs/features/docs/Reference.generated.script.ts index 42c5f1b6a5c..b4cefeec563 100644 --- a/apps/docs/features/docs/Reference.generated.script.ts +++ b/apps/docs/features/docs/Reference.generated.script.ts @@ -1,4 +1,4 @@ -import { isPlainObject, keyBy } from 'lodash' +import { isPlainObject, keyBy } from 'lodash-es' import { mkdir, readFile, writeFile } from 'node:fs/promises' import { dirname, join } from 'node:path' import { fileURLToPath } from 'node:url' diff --git a/apps/docs/features/docs/Reference.navigation.client.tsx b/apps/docs/features/docs/Reference.navigation.client.tsx index 4ef50c32ff9..ca574e3e4c0 100644 --- a/apps/docs/features/docs/Reference.navigation.client.tsx +++ b/apps/docs/features/docs/Reference.navigation.client.tsx @@ -2,7 +2,7 @@ import * as Collapsible from '@radix-ui/react-collapsible' -import { debounce } from 'lodash' +import { debounce } from 'lodash-es' import { ChevronUp } from 'lucide-react' import Link from 'next/link' import { usePathname } from 'next/navigation' diff --git a/apps/docs/features/docs/Reference.ui.tsx b/apps/docs/features/docs/Reference.ui.tsx index 4cc062daf17..a1047dbf4df 100644 --- a/apps/docs/features/docs/Reference.ui.tsx +++ b/apps/docs/features/docs/Reference.ui.tsx @@ -1,4 +1,4 @@ -import { isEqual } from 'lodash' +import { isEqual } from 'lodash-es' import { ChevronRight, XCircle } from 'lucide-react' import type { HTMLAttributes, PropsWithChildren } from 'react' import ReactMarkdown from 'react-markdown' diff --git a/apps/docs/features/docs/Reference.utils.ts b/apps/docs/features/docs/Reference.utils.ts index b95db420a45..9687a001ff8 100644 --- a/apps/docs/features/docs/Reference.utils.ts +++ b/apps/docs/features/docs/Reference.utils.ts @@ -1,6 +1,6 @@ import { fromMarkdown } from 'mdast-util-from-markdown' -import { toMarkdown } from 'mdast-util-to-markdown' import { mdxFromMarkdown, mdxToMarkdown } from 'mdast-util-mdx' +import { toMarkdown } from 'mdast-util-to-markdown' import { mdxjs } from 'micromark-extension-mdxjs' import type { Metadata, ResolvingMetadata } from 'next' import { redirect } from 'next/navigation' @@ -131,7 +131,7 @@ export async function generateReferenceMetadata( const isApiReference = parsedPath.__type === 'api' const isSelfHostingReference = parsedPath.__type === 'self-hosting' if (isClientSdkReference) { - const { sdkId, maybeVersion } = parsedPath + const { sdkId, maybeVersion, path } = parsedPath const version = maybeVersion ?? REFERENCES[sdkId].versions[0] const flattenedSections = await getFlattenedSections(sdkId, version) @@ -141,7 +141,7 @@ export async function generateReferenceMetadata( slug.length > 0 ? flattenedSections.find((section) => section.slug === slug[0])?.title : undefined - const url = [BASE_PATH, 'reference', sdkId, maybeVersion, slug[0]].filter(Boolean).join('/') + const url = [BASE_PATH, 'reference', sdkId, path[0]].filter(Boolean).join('/') const images = generateOpenGraphImageMeta({ type: 'API Reference', diff --git a/apps/docs/features/docs/Troubleshooting.page.tsx b/apps/docs/features/docs/Troubleshooting.page.tsx index e57e1b872b0..ff6b238c202 100644 --- a/apps/docs/features/docs/Troubleshooting.page.tsx +++ b/apps/docs/features/docs/Troubleshooting.page.tsx @@ -1,11 +1,11 @@ +import { Github } from 'lucide-react' +import Link from 'next/link' import { cn } from 'ui' - import Breadcrumbs from '~/components/Breadcrumbs' import { Feedback } from '~/components/Feedback' import { SidebarSkeleton } from '~/layouts/MainSkeleton' import { MDXRemoteBase } from './MdxBase' import { getTroubleshootingUpdatedDates, type ITroubleshootingEntry } from './Troubleshooting.utils' -import Link from 'next/link' import { formatError, serializeTroubleshootingSearchParams } from './Troubleshooting.utils.shared' export default async function TroubleshootingPage({ entry }: { entry: ITroubleshootingEntry }) { @@ -95,6 +95,19 @@ export default async function TroubleshootingPage({ entry }: { entry: ITroublesh )} + {entry.data.github_url && ( + <> +
+ + + View discussion on GitHub + + + )} diff --git a/apps/docs/features/docs/Troubleshooting.script.mjs b/apps/docs/features/docs/Troubleshooting.script.mjs index b4f03549c3c..e3a710b8747 100644 --- a/apps/docs/features/docs/Troubleshooting.script.mjs +++ b/apps/docs/features/docs/Troubleshooting.script.mjs @@ -7,6 +7,8 @@ * Discussions. */ +import _configureDotEnv from '../../scripts/utils/dotenv' + import { createAppAuth } from '@octokit/auth-app' import { Octokit } from '@octokit/core' import { createClient } from '@supabase/supabase-js' @@ -20,13 +22,12 @@ import { gfm } from 'micromark-extension-gfm' import { mdxjs } from 'micromark-extension-mdxjs' import { readFile, writeFile } from 'node:fs/promises' import { parse, stringify } from 'smol-toml' - import { getAllTroubleshootingEntriesInternal as getAllTroubleshootingEntries, getArticleSlug, } from './Troubleshooting.utils.common.mjs' -import 'dotenv/config' +const _ = _configureDotEnv const REPOSITORY_ID = 'MDEwOlJlcG9zaXRvcnkyMTQ1ODcxOTM=' const TROUBLESHOOTING_CATEGORY_ID = 'DIC_kwDODMpXOc4CUvEr' @@ -52,9 +53,9 @@ function octokit() { octokitInstance = new Octokit({ authStrategy: createAppAuth, auth: { - appId: process.env.SEARCH_GITHUB_APP_ID, - installationId: process.env.SEARCH_GITHUB_APP_INSTALLATION_ID, - privateKey: process.env.SEARCH_GITHUB_APP_PRIVATE_KEY, + appId: process.env.DOCS_GITHUB_APP_ID, + installationId: process.env.DOCS_GITHUB_APP_INSTALLATION_ID, + privateKey: process.env.DOCS_GITHUB_APP_PRIVATE_KEY, }, }) } diff --git a/apps/docs/generator/helpers.ts b/apps/docs/generator/helpers.ts index 30b8037d818..b0ab9705c03 100644 --- a/apps/docs/generator/helpers.ts +++ b/apps/docs/generator/helpers.ts @@ -1,5 +1,5 @@ import * as fs from 'fs' -import { mapValues, values } from 'lodash' +import { mapValues, values } from 'lodash-es' export const slugify = (text: string) => { if (!text) return '' diff --git a/apps/docs/generator/legacy.ts b/apps/docs/generator/legacy.ts index cf066ef1d0a..bc248b769a3 100644 --- a/apps/docs/generator/legacy.ts +++ b/apps/docs/generator/legacy.ts @@ -8,15 +8,15 @@ * tsx ReferenceGenerator.ts -o docs/client spec/supabase.yml */ +import * as fs from 'fs' +import * as yaml from 'js-yaml' +import { uniqBy } from 'lodash-es' +import { flattenSections } from '../lib/helpers' import Example from './legacy/components/Example' import Page from './legacy/components/Page' import Tab from './legacy/components/Tab' +import { OpenRef, TsDoc } from './legacy/definitions' import { slugify, tsDocCommentToMdComment, writeToDisk } from './legacy/lib/helpers' -import { TsDoc, OpenRef } from './legacy/definitions' -import { uniqBy } from 'lodash' -import * as fs from 'fs' -import * as yaml from 'js-yaml' -import { flattenSections } from '../lib/helpers' const commonDocSpecJson = JSON.parse( fs.readFileSync('spec/common-client-libs-sections.json', 'utf8') diff --git a/apps/docs/instrumentation-client.ts b/apps/docs/instrumentation-client.ts index 86fc0cd1a4b..7d9f53573e2 100644 --- a/apps/docs/instrumentation-client.ts +++ b/apps/docs/instrumentation-client.ts @@ -3,6 +3,7 @@ // https://docs.sentry.io/platforms/javascript/guides/nextjs/ import * as Sentry from '@sentry/nextjs' +import { hasConsented, IS_PLATFORM } from 'common' import { IS_DEV } from './lib/constants' if (!IS_DEV) { @@ -20,13 +21,12 @@ if (!IS_DEV) { ], beforeSend(event) { - const frames = event.exception?.values?.[0].stacktrace?.frames || [] + if (!IS_PLATFORM || !hasConsented()) { + return null + } - // Drop errors not originating from docs app static files as unactionable - if ( - frames && - !frames.some((frame) => frame.filename && frame.filename.startsWith('app:///_next')) - ) { + const frames = event.exception?.values?.[0].stacktrace?.frames || [] + if (isThirdPartyError(frames)) { return null } @@ -35,4 +35,24 @@ if (!IS_DEV) { }) } +// We want to ignore errors not originating from docs app static files +// (such as errors from browser extensions). Those errors come from files +// not starting with 'app:///_next'. +// +// However, there is a complication because the Sentry code that sends +// the error shows up in the stack trace, and that _does_ start with +// 'app:///_next'. It is always the first frame in the stack trace, +// and has a specific pre_context comment that we can use for filtering. +function isThirdPartyError(frames: Sentry.StackFrame[] | undefined) { + if (!frames) return false + + function isSentryFrame(frame: Sentry.StackFrame, index: number) { + return index === 0 && frame.pre_context?.[0]?.includes('sentry.javascript') + } + + return !frames.some((frame, index) => { + frame.abs_path?.startsWith('app:///_next') && !isSentryFrame(frame, index) + }) +} + export const onRouterTransitionStart = Sentry.captureRouterTransitionStart diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts index f377d56155c..bd0de078ead 100644 --- a/apps/docs/lib/refGenerator/helpers.ts +++ b/apps/docs/lib/refGenerator/helpers.ts @@ -1,9 +1,9 @@ import type { TsDoc } from '../../generator/legacy/definitions' -import { values, mapValues } from 'lodash' +import { mapValues, values } from 'lodash-es' import type { OpenAPIV3 } from 'openapi-types' -import { flattenSections } from '../helpers' import type { ICommonItem } from '~/components/reference/Reference.types' +import { flattenSections } from '../helpers' export function extractTsDocNode(nodeToFind: string, definition: any) { const nodePath = nodeToFind.split('.') diff --git a/apps/docs/lib/remotePatterns.js b/apps/docs/lib/remotePatterns.js index 2b06dc1c058..e30aa6d1294 100644 --- a/apps/docs/lib/remotePatterns.js +++ b/apps/docs/lib/remotePatterns.js @@ -1,4 +1,4 @@ -module.exports = [ +export default [ { protocol: 'https', hostname: 'avatars.githubusercontent.com', diff --git a/apps/docs/lib/supabase.ts b/apps/docs/lib/supabase.ts index 3d3ab8820f8..7c46ef9c993 100644 --- a/apps/docs/lib/supabase.ts +++ b/apps/docs/lib/supabase.ts @@ -2,6 +2,7 @@ import { createClient, type SupabaseClient } from '@supabase/supabase-js' import { type Database as DatabaseGenerated } from 'common' type Database = { + content: DatabaseGenerated['content'] graphql_public: DatabaseGenerated['graphql_public'] public: { Tables: DatabaseGenerated['public']['Tables'] diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index 400ac7c4b3f..cbea04fe398 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -34,13 +34,6 @@ const nextConfig = { // @ts-ignore remotePatterns, }, - // TODO: @next/mdx ^13.0.2 only supports experimental mdxRs flag. next ^13.0.2 will stop warning about this being unsupported. - // mdxRs: true, - modularizeImports: { - lodash: { - transform: 'lodash/{{member}}', - }, - }, webpack: (config) => { config.module.rules.push({ test: /\.include$/, diff --git a/apps/docs/package.json b/apps/docs/package.json index b98508a1c73..be764959be4 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -2,37 +2,38 @@ "name": "docs", "version": "0.0.0", "private": true, + "type": "module", "scripts": { - "preinstall": "npx only-allow pnpm", - "predev": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", - "dev": "concurrently --kill-others \"next dev --port 3001\" \"pnpm run dev:watch:troubleshooting\"", - "dev:watch:troubleshooting": "node ./scripts/troubleshooting/watch.mjs", - "dev:secrets:pull": "AWS_PROFILE=supabase-dev node ../../scripts/getSecrets.js -n local/docs", - "prebuild": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", "build": "next build", "build:analyze": "ANALYZE=true next build", - "build:sitemap": "tsx ./internals/generate-sitemap.ts", "build:llms": "tsx ./scripts/llms.ts", - "postbuild": "pnpm run build:sitemap && pnpm run build:llms && ./../../scripts/upload-static-assets.sh", - "start": "next start", + "build:sitemap": "tsx ./internals/generate-sitemap.ts", + "clean": "rimraf .next .turbo node_modules features/docs/generated examples __generated__", + "codegen:examples": "cp -r ../../examples ./examples", + "codegen:graphql": "tsx --conditions=react-server ./scripts/graphqlSchema.ts && graphql-codegen --config codegen.ts", + "codegen:references": "tsx features/docs/Reference.generated.script.ts", + "codemod:frontmatter": "node ./scripts/codemod/mdx-meta.mjs && prettier --write \"content/**/*.mdx\"", + "dev": "concurrently --kill-others \"next dev --port 3001\" \"pnpm run dev:watch:troubleshooting\"", + "dev:secrets:pull": "AWS_PROFILE=supabase-dev node ../../scripts/getSecrets.js -n local/docs", + "dev:watch:troubleshooting": "node ./scripts/troubleshooting/watch.mjs", + "embeddings": "tsx scripts/search/generate-embeddings.ts", + "embeddings:refresh": "pnpm run embeddings --refresh", + "last-changed": "tsx scripts/last-changed.ts", + "last-changed:reset": "pnpm run last-changed -- --reset", "lint": "next lint", "lint:mdx": "supa-mdx-lint content --config ../../supa-mdx-lint.config.toml", - "pretypecheck": "pnpm run codegen:graphql", - "typecheck": "tsc --noEmit", + "postbuild": "pnpm run build:sitemap && pnpm run build:llms && ./../../scripts/upload-static-assets.sh", + "prebuild": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", + "predev": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", + "preinstall": "npx only-allow pnpm", "pretest": "pnpm run codegen:examples", + "pretypecheck": "pnpm run codegen:graphql", + "start": "next start", "test": "pnpm supabase start && pnpm run test:local && pnpm supabase stop", "test:local": "vitest --exclude \"**/*.smoke.test.ts\"", "test:smoke": "pnpm run codegen:references && vitest -t \"prod smoke test\"", - "embeddings": "tsx scripts/search/generate-embeddings.ts", - "embeddings:refresh": "pnpm run embeddings --refresh", "troubleshooting:sync": "node features/docs/Troubleshooting.script.mjs", - "last-changed": "tsx scripts/last-changed.ts", - "last-changed:reset": "pnpm run last-changed -- --reset", - "codegen:examples": "cp -r ../../examples ./examples", - "codemod:frontmatter": "node ./scripts/codemod/mdx-meta.mjs && prettier --write \"content/**/*.mdx\"", - "codegen:graphql": "tsx --conditions=react-server ./scripts/graphqlSchema.ts && graphql-codegen --config codegen.ts", - "codegen:references": "tsx features/docs/Reference.generated.script.ts", - "clean": "rimraf .next .turbo node_modules features/docs/generated examples __generated__" + "typecheck": "tsc --noEmit" }, "dependencies": { "@har-sdk/openapi-sampler": "^2.2.0", @@ -70,7 +71,7 @@ "jsrsasign": "^11.0.0", "katex": "^0.16.21", "libpg-query": "15.2.0", - "lodash": "^4.17.21", + "lodash-es": "^4.17.21", "lucide-react": "*", "mdast": "^3.0.0", "mdast-util-from-markdown": "^1.2.0", @@ -125,6 +126,7 @@ "@types/graphql-validation-complexity": "^0.4.4", "@types/hast": "^2.3.4", "@types/jsrsasign": "^10.5.12", + "@types/lodash-es": "^4.17.12", "@types/mdast": "^3.0.0", "@types/node": "catalog:", "@types/react": "catalog:", diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.cjs similarity index 100% rename from apps/docs/postcss.config.js rename to apps/docs/postcss.config.cjs diff --git a/apps/docs/resources/error/errorModel.ts b/apps/docs/resources/error/errorModel.ts new file mode 100644 index 00000000000..ce9cb1d7c60 --- /dev/null +++ b/apps/docs/resources/error/errorModel.ts @@ -0,0 +1,74 @@ +import { ApiErrorGeneric, convertPostgrestToApiError, NoDataError } from '~/app/api/utils' +import { Result } from '~/features/helpers.fn' +import { supabase } from '~/lib/supabase' + +export const SERVICES = { + AUTH: { + value: 'AUTH', + }, + REALTIME: { + value: 'REALTIME', + }, + STORAGE: { + value: 'STORAGE', + }, +} as const + +type Service = keyof typeof SERVICES + +export class ErrorModel { + public code: string + public service: Service + public httpStatusCode?: number + public message?: string + + constructor({ + code, + service, + httpStatusCode: httpStatusCode, + message, + }: { + code: string + service: Service + httpStatusCode?: number + message?: string + }) { + this.code = code + this.service = service + this.httpStatusCode = httpStatusCode + this.message = message + } + + static async loadSingleError({ + code, + service, + }: { + code: string + service: Service + }): Promise> { + return new Result( + await supabase() + .schema('content') + .from('error') + .select('code, ...service(service:name), httpStatusCode:http_status_code, message') + .eq('code', code) + .eq('service.name', service) + .is('deleted_at', null) + .single<{ + code: string + service: Service + httpStatusCode?: number + message?: string + }>() + ) + .map((data) => { + return new ErrorModel(data) + }) + .mapError((error) => { + if (error.code === 'PGRST116') { + return new NoDataError('Error for given code and service does not exist', error) + } + return convertPostgrestToApiError(error) + }) + } +} diff --git a/apps/docs/resources/error/errorResolver.ts b/apps/docs/resources/error/errorResolver.ts new file mode 100644 index 00000000000..ef79e2d887b --- /dev/null +++ b/apps/docs/resources/error/errorResolver.ts @@ -0,0 +1,43 @@ +import { GraphQLError, GraphQLNonNull, GraphQLResolveInfo, GraphQLString } from 'graphql' +import { type RootQueryTypeErrorArgs } from '~/__generated__/graphql' +import { convertUnknownToApiError } from '~/app/api/utils' +import { Result } from '~/features/helpers.fn' +import { ErrorModel } from './errorModel' +import { + GRAPHQL_FIELD_ERROR_GLOBAL, + GraphQLEnumTypeService, + GraphQLObjectTypeError, +} from './errorSchema' + +async function resolveSingleError( + _parent: unknown, + args: RootQueryTypeErrorArgs, + _context: unknown, + _info: GraphQLResolveInfo +): Promise { + return ( + await Result.tryCatchFlat(ErrorModel.loadSingleError, convertUnknownToApiError, args) + ).match( + (data) => data, + (error) => { + console.error(`Error resolving ${GRAPHQL_FIELD_ERROR_GLOBAL}:`, error) + return new GraphQLError(error.isPrivate() ? 'Internal Server Error' : error.message) + } + ) +} + +export const errorRoot = { + [GRAPHQL_FIELD_ERROR_GLOBAL]: { + description: 'Get the details of an error code returned from a Supabase service', + args: { + code: { + type: new GraphQLNonNull(GraphQLString), + }, + service: { + type: new GraphQLNonNull(GraphQLEnumTypeService), + }, + }, + type: GraphQLObjectTypeError, + resolve: resolveSingleError, + }, +} diff --git a/apps/docs/resources/error/errorSchema.ts b/apps/docs/resources/error/errorSchema.ts new file mode 100644 index 00000000000..c752d705336 --- /dev/null +++ b/apps/docs/resources/error/errorSchema.ts @@ -0,0 +1,40 @@ +import { + GraphQLEnumType, + GraphQLInt, + GraphQLNonNull, + GraphQLObjectType, + GraphQLString, +} from 'graphql' +import { SERVICES } from './errorModel' + +export const GRAPHQL_FIELD_ERROR_GLOBAL = 'error' as const + +export const GraphQLEnumTypeService = new GraphQLEnumType({ + name: 'Service', + values: SERVICES, +}) + +export const GraphQLObjectTypeError = new GraphQLObjectType({ + name: 'Error', + description: 'An error returned by a Supabase service', + fields: { + code: { + type: new GraphQLNonNull(GraphQLString), + description: + 'The unique code identifying the error. The code is stable, and can be used for string matching during error handling.', + }, + service: { + type: new GraphQLNonNull(GraphQLEnumTypeService), + description: 'The Supabase service that returns this error.', + }, + httpStatusCode: { + type: GraphQLInt, + description: 'The HTTP status code returned with this error.', + }, + message: { + type: GraphQLString, + description: + 'A human-readable message describing the error. The message is not stable, and should not be used for string matching during error handling. Use the code instead.', + }, + }, +}) diff --git a/apps/docs/resources/rootSchema.ts b/apps/docs/resources/rootSchema.ts index 5c543d1e79f..02ea9cc9697 100644 --- a/apps/docs/resources/rootSchema.ts +++ b/apps/docs/resources/rootSchema.ts @@ -6,6 +6,7 @@ import { printSchema, } from 'graphql' import { RootQueryTypeResolvers } from '~/__generated__/graphql' +import { errorRoot } from './error/errorResolver' import { searchRoot } from './globalSearch/globalSearchResolver' import { GraphQLObjectTypeGuide } from './guide/guideSchema' import { GraphQLObjectTypeReferenceCLICommand } from './reference/referenceCLISchema' @@ -35,6 +36,7 @@ export const rootGraphQLSchema = new GraphQLSchema({ fields: { ...introspectRoot, ...searchRoot, + ...errorRoot, }, }), types: [ diff --git a/apps/docs/scripts/graphqlSchema.ts b/apps/docs/scripts/graphqlSchema.ts index 17b03215ed7..2f00e2fa79f 100644 --- a/apps/docs/scripts/graphqlSchema.ts +++ b/apps/docs/scripts/graphqlSchema.ts @@ -1,7 +1,10 @@ import { printSchema } from 'graphql' import fs from 'node:fs' import path from 'node:path' -import { rootGraphQLSchema } from '../resources/rootSchema' +import { fileURLToPath } from 'node:url' +import { rootGraphQLSchema } from '../resources/rootSchema.js' + +const __dirname = path.dirname(fileURLToPath(import.meta.url)) async function generateGraphQLSchema() { try { @@ -22,6 +25,6 @@ async function generateGraphQLSchema() { } } -if (require.main === module) { +if (process.argv[1] === fileURLToPath(import.meta.url)) { generateGraphQLSchema() } diff --git a/apps/docs/scripts/last-changed.ts b/apps/docs/scripts/last-changed.ts index 456f4d56804..d4892653beb 100644 --- a/apps/docs/scripts/last-changed.ts +++ b/apps/docs/scripts/last-changed.ts @@ -11,18 +11,21 @@ * the last Git commit date. */ -import 'dotenv/config' +import _configureDotEnv from './utils/dotenv' import { createClient, type SupabaseClient } from '@supabase/supabase-js' import matter from 'gray-matter' import { createHash } from 'node:crypto' import { readdirSync } from 'node:fs' import { readFile } from 'node:fs/promises' -import { join } from 'node:path' +import path, { join } from 'node:path' +import { fileURLToPath } from 'node:url' import { parseArgs } from 'node:util' import { SimpleGit, simpleGit } from 'simple-git' import { parse } from 'smol-toml' -import { type Section } from './helpers.mdx' +import { Section } from './helpers.mdx.js' + +const _ = _configureDotEnv interface Options { reset: boolean @@ -46,9 +49,11 @@ type SectionWithChecksum = Omit & const REQUIRED_ENV_VARS = { SUPABASE_URL: 'NEXT_PUBLIC_SUPABASE_URL', - SERVICE_ROLE_KEY: 'SUPABASE_SERVICE_ROLE_KEY', + SERVICE_ROLE_KEY: 'SUPABASE_SECRET_KEY', } as const +const __dirname = path.dirname(fileURLToPath(import.meta.url)) + async function main() { console.log('Updating content timestamps....') diff --git a/apps/docs/scripts/llms.ts b/apps/docs/scripts/llms.ts index 47a1b16b48b..abea8501c76 100644 --- a/apps/docs/scripts/llms.ts +++ b/apps/docs/scripts/llms.ts @@ -1,6 +1,8 @@ +import _configureDotEnv from './utils/dotenv' + import 'dotenv/config' import fs from 'node:fs/promises' - +import { fileURLToPath } from 'node:url' import { fetchCliLibReferenceSource, fetchCSharpLibReferenceSource, @@ -11,7 +13,9 @@ import { fetchPythonLibReferenceSource, fetchSwiftLibReferenceSource, type SearchSource, -} from './search/sources' +} from './search/sources/index.js' + +const _ = _configureDotEnv interface Source { title: string @@ -97,6 +101,6 @@ async function generateLlmsTxt() { } } -if (require.main === module) { +if (process.argv[1] === fileURLToPath(import.meta.url)) { generateLlmsTxt() } diff --git a/apps/docs/scripts/search/generate-embeddings.ts b/apps/docs/scripts/search/generate-embeddings.ts index dfb83112fac..66d7bb8f6e0 100644 --- a/apps/docs/scripts/search/generate-embeddings.ts +++ b/apps/docs/scripts/search/generate-embeddings.ts @@ -1,10 +1,13 @@ +import _configureDotenv from '../utils/dotenv' + import { createClient } from '@supabase/supabase-js' -import 'dotenv/config' import { parseArgs } from 'node:util' import { OpenAI } from 'openai' import { v4 as uuidv4 } from 'uuid' -import type { Json, Section } from '../helpers.mdx' -import { fetchAllSources } from './sources' +import type { Json, Section } from '../helpers.mdx.js' +import { fetchAllSources } from './sources/index.js' + +const _ = _configureDotenv const args = parseArgs({ options: { @@ -18,19 +21,20 @@ async function generateEmbeddings() { const shouldRefresh = Boolean(args.values.refresh) const requiredEnvVars = [ + 'DOCS_GITHUB_APP_ID', + 'DOCS_GITHUB_APP_INSTALLATION_ID', + 'DOCS_GITHUB_APP_PRIVATE_KEY', + 'NEXT_PUBLIC_MISC_ANON_KEY', + 'NEXT_PUBLIC_MISC_URL', 'NEXT_PUBLIC_SUPABASE_URL', - 'SUPABASE_SERVICE_ROLE_KEY', 'OPENAI_API_KEY', - 'NEXT_PUBLIC_MISC_USE_URL', - 'NEXT_PUBLIC_MISC_USE_ANON_KEY', - 'SEARCH_GITHUB_APP_ID', - 'SEARCH_GITHUB_APP_INSTALLATION_ID', - 'SEARCH_GITHUB_APP_PRIVATE_KEY', + 'SUPABASE_SECRET_KEY', ] - if (requiredEnvVars.some((name) => !process.env[name])) { + const missingEnvVars = requiredEnvVars.filter((name) => !process.env[name]) + if (missingEnvVars.length > 0) { throw new Error( - `Environment variables ${requiredEnvVars.join( + `Environment variables ${missingEnvVars.join( ', ' )} are required: skipping embeddings generation` ) @@ -38,8 +42,7 @@ async function generateEmbeddings() { const supabaseClient = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, - // eslint-disable-next-line turbo/no-undeclared-env-vars - process.env.SUPABASE_SERVICE_ROLE_KEY, + process.env.SUPABASE_SECRET_KEY, { auth: { persistSession: false, diff --git a/apps/docs/scripts/search/sources/base.ts b/apps/docs/scripts/search/sources/base.ts index 7416f8bdb67..32b5aad9e9c 100644 --- a/apps/docs/scripts/search/sources/base.ts +++ b/apps/docs/scripts/search/sources/base.ts @@ -1,4 +1,4 @@ -import type { Json, Section } from '../../helpers.mdx' +import type { Json, Section } from '../../helpers.mdx.js' export abstract class BaseLoader { type: string diff --git a/apps/docs/scripts/search/sources/github-discussion.ts b/apps/docs/scripts/search/sources/github-discussion.ts index 8eb158122e1..8c3b9a70adc 100644 --- a/apps/docs/scripts/search/sources/github-discussion.ts +++ b/apps/docs/scripts/search/sources/github-discussion.ts @@ -2,7 +2,7 @@ import { createAppAuth } from '@octokit/auth-app' import { Octokit } from '@octokit/core' import { paginateGraphql } from '@octokit/plugin-paginate-graphql' import crypto, { createHash } from 'node:crypto' -import { BaseLoader, BaseSource } from './base' +import { BaseLoader, BaseSource } from './base.js' export const ExtendedOctokit = Octokit.plugin(paginateGraphql) export type ExtendedOctokit = InstanceType @@ -25,11 +25,9 @@ export type DiscussionsResponse = { } } -const appId = process.env.SEARCH_GITHUB_APP_ID ?? process.env.DOCS_GITHUB_APP_ID -const installationId = - process.env.SEARCH_GITHUB_APP_INSTALLATION_ID ?? process.env.DOCS_GITHUB_APP_INSTALLATION_ID -const privateKey = - process.env.SEARCH_GITHUB_APP_PRIVATE_KEY ?? process.env.DOCS_GITHUB_APP_PRIVATE_KEY +const appId = process.env.DOCS_GITHUB_APP_ID +const installationId = process.env.DOCS_GITHUB_APP_INSTALLATION_ID +const privateKey = process.env.DOCS_GITHUB_APP_PRIVATE_KEY /** * Fetches GitHub discussions for a repository + category diff --git a/apps/docs/scripts/search/sources/index.ts b/apps/docs/scripts/search/sources/index.ts index 5d02b68421b..9f07c9c72be 100644 --- a/apps/docs/scripts/search/sources/index.ts +++ b/apps/docs/scripts/search/sources/index.ts @@ -4,9 +4,9 @@ import { GitHubDiscussionLoader, type GitHubDiscussionSource, fetchDiscussions, -} from './github-discussion' -import { MarkdownLoader, type MarkdownSource } from './markdown' -import { IntegrationLoader, type IntegrationSource, fetchPartners } from './partner-integrations' +} from './github-discussion.js' +import { MarkdownLoader, type MarkdownSource } from './markdown.js' +import { IntegrationLoader, type IntegrationSource, fetchPartners } from './partner-integrations.js' import { CliReferenceLoader, type CliReferenceSource, @@ -14,8 +14,8 @@ import { type ClientLibReferenceSource, OpenApiReferenceLoader, type OpenApiReferenceSource, -} from './reference-doc' -import { walk } from './util' +} from './reference-doc.js' +import { walk } from './util.js' const ignoredFiles = ['pages/404.mdx'] diff --git a/apps/docs/scripts/search/sources/markdown.ts b/apps/docs/scripts/search/sources/markdown.ts index a34e77c5a97..dcf2d1db722 100644 --- a/apps/docs/scripts/search/sources/markdown.ts +++ b/apps/docs/scripts/search/sources/markdown.ts @@ -1,6 +1,6 @@ import { readFile } from 'fs/promises' -import { processMdx } from '../../helpers.mdx' -import { BaseLoader, BaseSource } from './base' +import { processMdx } from '../../helpers.mdx.js' +import { BaseLoader, BaseSource } from './base.js' export class MarkdownLoader extends BaseLoader { type = 'markdown' as const diff --git a/apps/docs/scripts/search/sources/partner-integrations.ts b/apps/docs/scripts/search/sources/partner-integrations.ts index 76d78e172a2..742e1367990 100644 --- a/apps/docs/scripts/search/sources/partner-integrations.ts +++ b/apps/docs/scripts/search/sources/partner-integrations.ts @@ -1,17 +1,15 @@ import { type SupabaseClient, createClient } from '@supabase/supabase-js' -import { upperFirst } from 'lodash' - -import { BaseLoader, BaseSource } from './base' -import { processMdx } from '../../helpers.mdx' +import { upperFirst } from 'lodash-es' +import { processMdx } from '../../helpers.mdx.js' +import { BaseLoader, BaseSource } from './base.js' type PartnerData = { slug: string // The partner slug corresponding to the last part of the URL overview: string // The Markdown content for indexing } -const supabaseUrl = process.env.NEXT_PUBLIC_MISC_USE_URL ?? process.env.NEXT_PUBLIC_MISC_URL -const supabaseAnonKey = - process.env.NEXT_PUBLIC_MISC_USE_ANON_KEY ?? process.env.NEXT_PUBLIC_MISC_ANON_KEY +const supabaseUrl = process.env.NEXT_PUBLIC_MISC_URL +const supabaseAnonKey = process.env.NEXT_PUBLIC_MISC_ANON_KEY let supabaseClient: SupabaseClient function getSupabaseClient() { diff --git a/apps/docs/scripts/search/sources/reference-doc.ts b/apps/docs/scripts/search/sources/reference-doc.ts index 11315fd1c22..047017ace0f 100644 --- a/apps/docs/scripts/search/sources/reference-doc.ts +++ b/apps/docs/scripts/search/sources/reference-doc.ts @@ -7,12 +7,12 @@ import type { ICommonSection, IFunctionDefinition, ISpec, -} from '../../../components/reference/Reference.types' -import type { CliCommand, CliSpec } from '../../../generator/types/CliSpec' -import { flattenSections } from '../../../lib/helpers' -import { enrichedOperation, gen_v3 } from '../../../lib/refGenerator/helpers' -import type { Json } from '../../helpers.mdx' -import { BaseLoader, BaseSource } from './base' +} from '../../../components/reference/Reference.types.js' +import type { CliCommand, CliSpec } from '../../../generator/types/CliSpec.js' +import { flattenSections } from '../../../lib/helpers.js' +import { enrichedOperation, gen_v3 } from '../../../lib/refGenerator/helpers.js' +import type { Json } from '../../helpers.mdx.js' +import { BaseLoader, BaseSource } from './base.js' export abstract class ReferenceLoader extends BaseLoader { type = 'reference' as const diff --git a/apps/docs/scripts/tsconfig.json b/apps/docs/scripts/tsconfig.json index de1ecb67a32..821a210c5e5 100644 --- a/apps/docs/scripts/tsconfig.json +++ b/apps/docs/scripts/tsconfig.json @@ -1,6 +1,8 @@ // generator files need their own tsconfig.json because they don't like "module": "esnext" setting that nextjs requires in the main tsconfig { "compilerOptions": { + "module": "NodeNext", + "moduleResolution": "NodeNext", "incremental": true, "noImplicitAny": false, "esModuleInterop": true, diff --git a/apps/docs/scripts/utils/dotenv.ts b/apps/docs/scripts/utils/dotenv.ts new file mode 100644 index 00000000000..6a826531068 --- /dev/null +++ b/apps/docs/scripts/utils/dotenv.ts @@ -0,0 +1,5 @@ +import dotenv from 'dotenv' + +dotenv.config({ path: '.env.local' }) + +export default undefined diff --git a/apps/docs/spec/common-client-libs-sections.json b/apps/docs/spec/common-client-libs-sections.json index a9206ccf0c4..b7087b1ef69 100644 --- a/apps/docs/spec/common-client-libs-sections.json +++ b/apps/docs/spec/common-client-libs-sections.json @@ -791,6 +791,12 @@ "type": "category", "title": "Realtime", "items": [ + { + "id": "realtime-api", + "title": "Overview", + "slug": "realtime-api", + "type": "function" + }, { "id": "stream", "title": "Listen to database changes", diff --git a/apps/docs/spec/supabase_py_v2.yml b/apps/docs/spec/supabase_py_v2.yml index 90862db77d1..e582bcd3cce 100644 --- a/apps/docs/spec/supabase_py_v2.yml +++ b/apps/docs/spec/supabase_py_v2.yml @@ -97,7 +97,7 @@ functions: url: str = os.environ.get("SUPABASE_URL") key: str = os.environ.get("SUPABASE_KEY") supabase: Client = create_client( - url, + url, key, options=ClientOptions( postgrest_client_timeout=10, @@ -173,7 +173,7 @@ functions: ```python response = supabase.auth.sign_up( { - "email": "email@example.com", + "email": "email@example.com", "password": "password", } ) @@ -281,7 +281,7 @@ functions: ```python response = supabase.auth.sign_up( { - "phone": "123456789", + "phone": "123456789", "password": "password", } ) @@ -467,7 +467,7 @@ functions: ```python response = supabase.auth.sign_in_with_password( { - "email": "email@example.com", + "email": "email@example.com", "password": "example-password", } ) @@ -551,7 +551,7 @@ functions: ```python response = supabase.auth.sign_in_with_password( { - "phone": "+13334445555", + "phone": "+13334445555", "password": "some-password", } ) @@ -776,7 +776,7 @@ functions: ```python response = supabase.auth.sign_in_with_id_token( { - "provider": "google", + "provider": "google", "token": "your-id-token", } ) @@ -1000,8 +1000,8 @@ functions: ```python response = supabase.auth.verify_otp( { - "email": "email@example.com", - "token": "123456", + "email": "email@example.com", + "token": "123456", "type": "email", } ) @@ -1081,8 +1081,8 @@ functions: ```python response = supabase.auth.verify_otp( { - "phone": "+13334445555", - "token": "123456", + "phone": "+13334445555", + "token": "123456", "type": "sms", } ) @@ -1094,8 +1094,8 @@ functions: ```python response = supabase.auth.verify_otp( { - "email": "email@example.com", - "token_hash": "", + "email": "email@example.com", + "token_hash": "", "type": "email", } ) @@ -5531,8 +5531,8 @@ functions: supabase.table("texts") .select("content") .text_search( - "content", - "'eggs' & 'ham'", + "content", + "'eggs' & 'ham'", options={"config": "english"}, ) .execute() @@ -6650,7 +6650,7 @@ functions: code: | ```python response = supabase.functions.invoke( - "hello-world", + "hello-world", invoke_options={ "body": {"name": "Functions"}, }, @@ -6703,6 +6703,32 @@ functions: ) ``` + - id: realtime-api + title: 'Overview' + description: | + Realtime in Python only works with the asynchronous client. + You can initialize a new Supabase client using the `acreate_client()` method. + + - Some Realtime methods are asynchronous and must be awaited. Ensure these methods are called within an `async` function. + - In the following Realtime examples, certain methods are awaited. These should be enclosed within an `async` function. + - When an asynchronous method needs to be used within a synchronous context, such as the callback for `.subscribe()`, utilize `asyncio.create_task()` to schedule the coroutine. This is why the `acreate_client` example includes an import of `asyncio`. + examples: + - id: acreate-client + name: acreate_client() + code: | + ```python + import os + import asyncio + from supabase import acreate_client, AsyncClient + + url: str = os.environ.get("SUPABASE_URL") + key: str = os.environ.get("SUPABASE_KEY") + + async def create_supabase(): + supabase: AsyncClient = await acreate_client(url, key) + return supabase + ``` + - id: subscribe title: on().subscribe() notes: | @@ -6720,15 +6746,15 @@ functions: def on_subscribe(status, err): if status == RealtimeSubscribeStates.SUBSCRIBED: - channel.send_broadcast( - "cursor-pos", + asyncio.create_task(channel.send_broadcast( + "cursor-pos", {"x": random.random(), "y": random.random()} - ) + )) def handle_broadcast(payload): print("Cursor position received!", payload) - channel.on_broadcast(event="cursor-pos", callback=handle_broadcast).subscribe(on_subscribe) + await channel.on_broadcast(event="cursor-pos", callback=handle_broadcast).subscribe(on_subscribe) ``` - id: listen-to-presence-sync name: Listen to presence sync @@ -6739,12 +6765,12 @@ functions: def on_subscribe(status, err): if status == RealtimeSubscribeStates.SUBSCRIBED: - channel.track({"online_at": datetime.datetime.now().isoformat()}) + asyncio.create_task(channel.track({"online_at": datetime.datetime.now().isoformat()})) def handle_presence_sync(): print("Synced presence state: ", channel.presence.state) - channel.on_presence_sync(callback=handle_presence_sync).subscribe(on_subscribe) + await channel.on_presence_sync(callback=handle_presence_sync).subscribe(on_subscribe) ``` - id: listen-to-presence-join name: Listen to presence join @@ -6758,9 +6784,9 @@ functions: def on_subscribe(status, err): if status == RealtimeSubscribeStates.SUBSCRIBED: - channel.track({"online_at": datetime.datetime.now().isoformat()}) + asyncio.create_task(channel.track({"online_at": datetime.datetime.now().isoformat()})) - channel.on_presence_join(callback=handle_presence_join).subscribe(on_subscribe) + await channel.on_presence_join(callback=handle_presence_join).subscribe(on_subscribe) ``` - id: listen-to-presence-leave name: Listen to presence leave @@ -6774,10 +6800,10 @@ functions: def on_subscribe(status, err): if status == RealtimeSubscribeStates.SUBSCRIBED: - channel.track({"online_at": datetime.datetime.now().isoformat()}) - channel.untrack() + asyncio.create_task(channel.track({"online_at": datetime.datetime.now().isoformat()})) + asyncio.create_task(channel.untrack()) - channel.on_presence_leave(callback=handle_presence_leave).subscribe(on_subscribe) + await channel.on_presence_leave(callback=handle_presence_leave).subscribe(on_subscribe) ``` - id: listen-to-all-database-changes name: Listen to all database changes @@ -6785,7 +6811,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("*", schema="*", callback=handle_record_updated) .subscribe() ) @@ -6795,7 +6821,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("*", schema="public", table="countries", callback=handle_record_updated) .subscribe() ) @@ -6805,7 +6831,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("INSERT", schema="public", table="countries", callback=handle_record_inserted) .subscribe() ) @@ -6822,7 +6848,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("UPDATE", schema="public", table="countries", callback=handle_record_updated) .subscribe() ) @@ -6839,7 +6865,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("DELETE", schema="public", table="countries", callback=handle_record_deleted) .subscribe() ) @@ -6850,7 +6876,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("INSERT", schema="public", table="countries", callback=handle_record_inserted) .on_postgres_changes("DELETE", schema="public", table="countries", callback=handle_record_deleted) .subscribe() @@ -6864,7 +6890,7 @@ functions: code: | ```python response = ( - supabase.channel("room1") + await supabase.channel("room1") .on_postgres_changes("UPDATE", schema="public", table="countries", filter="id=eq.200", callback=handle_record_updated) .subscribe() ) @@ -6883,9 +6909,9 @@ functions: def on_subscribe(status, err): if status == RealtimeSubscribeStates.SUBSCRIBED: - channel.send_broadcast('cursor-pos', {"x": random.random(), "y": random.random()}) + asyncio.create_task(channel.send_broadcast('cursor-pos', {"x": random.random(), "y": random.random()})) - channel.subscribe(on_subscribe) + await channel.subscribe(on_subscribe) ``` response: | ``` @@ -6912,7 +6938,7 @@ functions: isSpotlight: true code: | ```python - supabase.remove_channel(myChannel) + await supabase.remove_channel(myChannel) ``` - id: remove-all-channels @@ -6925,7 +6951,7 @@ functions: isSpotlight: true code: | ```python - supabase.remove_all_channels() + await supabase.remove_all_channels() ``` - id: list-buckets @@ -7305,7 +7331,7 @@ functions: supabase.storage .from_("avatars") .move( - "public/avatar1.png", + "public/avatar1.png", "private/avatar2.png" ) ) @@ -7342,7 +7368,7 @@ functions: supabase.storage .from_("avatars") .copy( - "public/avatar1.png", + "public/avatar1.png", "private/avatar2.png" ) ) @@ -7391,7 +7417,7 @@ functions: supabase.storage .from_("avatars") .create_signed_urls( - ["folder/avatar1.png", "folder/avatar2.png"], + ["folder/avatar1.png", "folder/avatar2.png"], 60 ) ) @@ -7475,7 +7501,7 @@ functions: supabase.storage .from_("avatars") .create_signed_url( - "folder/avatar1.png", + "folder/avatar1.png", 60 ) ) @@ -7495,8 +7521,8 @@ functions: supabase.storage .from_("avatars") .create_signed_url( - "folder/avatar1.png", - 60, + "folder/avatar1.png", + 60, {"transform": {"width": 100, "height": 100}} ) ) @@ -7510,8 +7536,8 @@ functions: supabase.storage .from_("avatars") .create_signed_url( - "folder/avatar1.png", - 60, + "folder/avatar1.png", + 60, {"download": True} ) ) @@ -7691,7 +7717,7 @@ functions: supabase.storage .from_("avatars") .get_public_url( - "folder/avatar1.jpg", + "folder/avatar1.jpg", {"transform": {"width": 100, "height": 100}} ) ) @@ -7705,7 +7731,7 @@ functions: supabase.storage .from_("avatars") .get_public_url( - "folder/avatar1.jpg", + "folder/avatar1.jpg", {"download": True} ) ) diff --git a/apps/docs/turbo.json b/apps/docs/turbo.json index 3eed84d3fe6..41bf9f6455c 100644 --- a/apps/docs/turbo.json +++ b/apps/docs/turbo.json @@ -17,9 +17,7 @@ "NEXT_PUBLIC_SUPABASE_URL", "NEXT_PUBLIC_SUPABASE_ANON_KEY", "NEXT_PUBLIC_MISC_URL", - "NEXT_PUBLIC_MISC_USE_URL", "NEXT_PUBLIC_MISC_ANON_KEY", - "NEXT_PUBLIC_MISC_USE_ANON_KEY", "NODE_ENV", "NEXT_PUBLIC_API_URL", "NEXT_PUBLIC_BASE_PATH", @@ -48,9 +46,6 @@ "DOCS_REVALIDATION_OVERRIDE_KEYS", "FORCE_ASSET_CDN", "OPENAI_API_KEY", - "SEARCH_GITHUB_APP_ID", - "SEARCH_GITHUB_APP_INSTALLATION_ID", - "SEARCH_GITHUB_APP_PRIVATE_KEY", "SITE_NAME", "SUPABASE_SECRET_KEY" ], diff --git a/apps/docs/vitest.config.ts b/apps/docs/vitest.config.ts index b0047198db1..bbadb9591ec 100644 --- a/apps/docs/vitest.config.ts +++ b/apps/docs/vitest.config.ts @@ -1,9 +1,10 @@ -import { defineConfig } from 'vitest/config' import tsconfigPaths from 'vite-tsconfig-paths' +import { defineConfig } from 'vitest/config' export default defineConfig({ test: { exclude: ['examples/**/*', '**/node_modules/**'], + setupFiles: ['vitest.setup.ts'], }, plugins: [tsconfigPaths({ root: import.meta.dirname })], }) diff --git a/apps/docs/vitest.setup.ts b/apps/docs/vitest.setup.ts new file mode 100644 index 00000000000..ef03c799e6a --- /dev/null +++ b/apps/docs/vitest.setup.ts @@ -0,0 +1,24 @@ +import { afterAll, beforeAll, vi } from 'vitest' + +let oldEnv: NodeJS.ProcessEnv + +beforeAll(() => { + // Use local Supabase to run e2e tests + oldEnv = { ...process.env } + process.env = { + ...process.env, + NEXT_PUBLIC_SUPABASE_URL: 'http://localhost:54321', + NEXT_PUBLIC_SUPABASE_ANON_KEY: + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0', + } + + // Prevent errors about importing server-only modules from Client Components + vi.mock('server-only', () => { + return {} + }) +}) + +afterAll(() => { + process.env = oldEnv + vi.doUnmock('server-only') +}) diff --git a/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx b/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx index 0d9a97bad5f..5e33bcbc7a5 100644 --- a/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx +++ b/apps/studio/components/interfaces/Connect/content/remix/supabasejs/content.tsx @@ -21,7 +21,7 @@ const ContentFile = ({ projectKeys }: ContentFileProps) => { {` SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'} -SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'} +SUPABASE_ANON_KEY=${projectKeys.anonKey ?? 'your-anon-key'} `} diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx index 6a8dc557694..ae81db255ce 100644 --- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx @@ -1,6 +1,6 @@ import type { PostgresSchema } from '@supabase/postgres-meta' import { toPng, toSvg } from 'html-to-image' -import { Download, Loader2 } from 'lucide-react' +import { Check, Download, Loader2, Clipboard, Info } from 'lucide-react' import { useTheme } from 'next-themes' import { useEffect, useMemo, useState } from 'react' import ReactFlow, { Background, BackgroundVariant, MiniMap, useReactFlow } from 'reactflow' @@ -21,7 +21,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge import { SchemaGraphLegend } from './SchemaGraphLegend' import { getGraphDataFromTables, getLayoutedElementsViaDagre } from './Schemas.utils' import { TableNode } from './SchemaTableNode' - +import { copyToClipboard } from 'ui' // [Joshen] Persisting logic: Only save positions to local storage WHEN a node is moved OR when explicitly clicked to reset layout export const SchemaGraph = () => { @@ -30,6 +30,13 @@ export const SchemaGraph = () => { const { project } = useProjectContext() const { selectedSchema, setSelectedSchema } = useQuerySchemaState() + const [copied, setCopied] = useState(false) + useEffect(() => { + if (copied) { + setTimeout(() => setCopied(false), 2000) + } + }, [copied]) + const [isDownloading, setIsDownloading] = useState(false) const miniMapNodeColor = '#111318' @@ -160,6 +167,59 @@ export const SchemaGraph = () => { } } + function tablesToSQL(t: typeof tables) { + if (!Array.isArray(t)) return '' + const warning = + '-- WARNING: This schema is for context only and is not meant to be run.\n-- Table order and constraints may not be valid for execution.\n\n' + const sql = t + .map((table) => { + if (!table || !Array.isArray((table as any).columns)) return '' + + const columns = (table as { columns?: any[] }).columns ?? [] + const columnLines = columns.map((c) => { + let line = ` ${c.name} ${c.data_type}` + if (c.is_identity) { + line += ' GENERATED ALWAYS AS IDENTITY' + } + if (c.is_nullable === false) { + line += ' NOT NULL' + } + if (c.default_value !== null && c.default_value !== undefined) { + line += ` DEFAULT ${c.default_value}` + } + if (c.is_unique) { + line += ' UNIQUE' + } + if (c.check) { + line += ` CHECK (${c.check})` + } + return line + }) + + const constraints: string[] = [] + + if (Array.isArray(table.primary_keys) && table.primary_keys.length > 0) { + const pkCols = table.primary_keys.map((pk) => pk.name).join(', ') + constraints.push(` CONSTRAINT ${table.name}_pkey PRIMARY KEY (${pkCols})`) + } + + if (Array.isArray(table.relationships)) { + table.relationships.forEach((rel) => { + if (rel && rel.source_table_name === table.name) { + constraints.push( + ` CONSTRAINT ${rel.constraint_name} FOREIGN KEY (${rel.source_column_name}) REFERENCES ${rel.target_table_schema}.${rel.target_table_name}(${rel.target_column_name})` + ) + } + }) + } + + const allLines = [...columnLines, ...constraints] + return `CREATE TABLE ${table.schema}.${table.name} (\n${allLines.join(',\n')}\n);` + }) + .join('\n') + return warning + sql + } + useEffect(() => { if (isSuccessTables && isSuccessSchemas && tables.length > 0) { const schema = schemas.find((s) => s.name === selectedSchema) as PostgresSchema @@ -192,6 +252,40 @@ export const SchemaGraph = () => { onSelectSchema={setSelectedSchema} />
+ : } + onClick={() => { + if (tables) { + copyToClipboard(tablesToSQL(tables)) + setCopied(true) + } + }} + tooltip={{ + content: { + side: 'bottom', + text: ( +
+

Note

+

+ This schema is for context or debugging only. Table order and constraints + may be invalid. Not meant to be run as-is. +

+
+ ), + }, + }} + > + Copy as SQL +
+ } + onClick={() => downloadImage('png')} + tooltip={{ content: { side: 'bottom', text: 'Download current view as PNG' } }} + /> a.version.localeCompare(b.version)) + const availableVersions = versions.sort((a, b) => a.version.localeCompare(b.version)).reverse() const { postgresVersionSelection } = form.watch() useEffect(() => { diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx index 8bba8a7456b..7543a1a4111 100644 --- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx +++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx @@ -146,6 +146,9 @@ const SignInMfaForm = () => { }?`} )} +
  • + Force sign out and clear cookies +
  • = ({ const snap = useTableEditorStateSnapshot() const { selectedSchema } = useQuerySchemaState() - const { data: tableDefinition, isLoading: isTableDefinitionLoading } = useTableDefinitionQuery( - { - id: entity.id, - projectRef: project?.ref, - connectionString: project?.connectionString, - }, - { enabled: isTableLikeEntityListItem(entity) } - ) - // For tabs preview flag logic const isTableEditorTabsEnabled = useIsTableEditorTabsEnabled() const tabId = createTabId(entity.type, { id: entity.id }) @@ -307,17 +298,26 @@ const EntityListItem: ItemRenderer = ({ { e.stopPropagation() - if (!tableDefinition) return + const toastId = toast.loading('Getting table schema...') + + const tableDefinition = await getTableDefinition({ + id: entity.id, + projectRef: project?.ref, + connectionString: project?.connectionString, + }) + if (!tableDefinition) { + return toast.error('Failed to get table schema', { id: toastId }) + } + try { const formatted = formatSql(tableDefinition) await copyToClipboard(formatted) - toast.success('Table schema copied to clipboard', { id: 'copy-schema' }) + toast.success('Table schema copied to clipboard', { id: toastId }) } catch (err: any) { toast.error('Failed to copy schema: ' + (err.message || err), { - id: 'copy-schema', + id: toastId, }) } }} diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx index 32814c3cd0d..915edffb0c1 100644 --- a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx +++ b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.tsx @@ -379,7 +379,9 @@ const FileExplorerHeader = ({ snap.setView(option.key)}>

    {option.name}

    - {snap.view === option.key && } + {snap.view === option.key && ( + + )}
    ))} @@ -391,7 +393,9 @@ const FileExplorerHeader = ({ setSortBy(option.key)}>

    {option.name}

    - {sortBy === option.key && } + {sortBy === option.key && ( + + )}
    ))} @@ -405,7 +409,7 @@ const FileExplorerHeader = ({

    {option.name}

    {sortByOrder === option.key && ( - + )}
    diff --git a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx index 5f08ef14738..db92f12ed28 100644 --- a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx +++ b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx @@ -1,3 +1,4 @@ +import { useMemo } from 'react' import { PermissionAction } from '@supabase/shared-types/out/constants' import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events' import { useParams } from 'common' @@ -8,6 +9,8 @@ import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions' import { useFlag } from 'hooks/ui/useFlag' import { AlertCircle, Loader2 } from 'lucide-react' import { Input } from 'ui' +import { toast } from 'sonner' +import { useLastUsedAPIKeysLogQuery, getLastUsedAPIKeys } from './DisplayApiSettings.utils' const DisplayApiSettings = ({ legacy, @@ -42,6 +45,24 @@ const DisplayApiSettings = ({ // api keys should not be empty. However it can be populated with a delay on project creation const isApiKeysEmpty = apiKeys.length === 0 + const { isLoading: isLoadingLastUsed, logData: lastUsedLogData } = useLastUsedAPIKeysLogQuery( + projectRef! + ) + + const lastUsedAPIKeys = useMemo(() => { + if (apiKeys.length < 1 || !lastUsedLogData || lastUsedLogData.length < 1) { + return {} + } + + try { + return getLastUsedAPIKeys(apiKeys, lastUsedLogData) + } catch (e: any) { + toast.error('Failed to identify when the anon and service_role keys were last used') + console.error(e) + return {} + } + }, [lastUsedLogData, apiKeys]) + return ( <> + +
    + {lastUsedAPIKeys[x.api_key] + ? `Last request was ${lastUsedAPIKeys[x.api_key]} ago.` + : 'No requests in the past 24 hours.'} +
    )) )} diff --git a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts new file mode 100644 index 00000000000..2efcfa58841 --- /dev/null +++ b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts @@ -0,0 +1,55 @@ +import dayjs from 'dayjs' +import duration from 'dayjs/plugin/duration' +import relativeTime from 'dayjs/plugin/relativeTime' + +import useLogsQuery from 'hooks/analytics/useLogsQuery' + +dayjs.extend(duration) +dayjs.extend(relativeTime) + +export function useLastUsedAPIKeysLogQuery(projectRef: string, now: Date = new Date()) { + return useLogsQuery(projectRef, { + iso_timestamp_start: new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString(), + iso_timestamp_end: now.toISOString(), + sql: "-- last-used-anon--service_role-api-keys\nSELECT unix_millis(max(timestamp)) as timestamp, payload.role, payload.signature_prefix FROM edge_logs cross join unnest(metadata) as m cross join unnest(m.request) as request cross join unnest(request.sb) as sb cross join unnest(sb.jwt) as jwt cross join unnest(jwt.apikey) as apikey cross join unnest(apikey.payload) as payload WHERE apikey.invalid is null and payload.issuer = 'supabase' and payload.algorithm = 'HS256' and payload.role in ('anon', 'service_role') GROUP BY payload.role, payload.signature_prefix", + }) +} + +export function getLastUsedAPIKeys( + apiKeys: { + tags: string + api_key: string + }[], + logData: + | { + timestamp: number + role?: 'anon' | 'service_role' | string + signature_prefix?: string + }[] + | null +) { + if (apiKeys.length < 1 || !logData || logData.length < 1) { + return {} + } + + const now = dayjs() + + return apiKeys.reduce( + (a, i) => { + const entry = logData?.find( + ({ role, signature_prefix }) => + role && + signature_prefix && + i.tags.indexOf(role) >= 0 && + i.api_key.split('.')[2]?.startsWith(signature_prefix) + )?.timestamp + + if (entry) { + a[i.api_key] = dayjs.duration(now.diff(dayjs(entry))).humanize(false) + } + + return a + }, + {} as { [apikey: string]: string } + ) +} diff --git a/apps/studio/data/config/project-settings-v2-query.ts b/apps/studio/data/config/project-settings-v2-query.ts index fd575085cc9..b76d50f85f9 100644 --- a/apps/studio/data/config/project-settings-v2-query.ts +++ b/apps/studio/data/config/project-settings-v2-query.ts @@ -51,9 +51,11 @@ export const useProjectSettingsV2Query = ( ({ signal }) => getProjectSettings({ projectRef }, signal), { enabled: enabled && typeof projectRef !== 'undefined', - refetchInterval(data) { - const apiKeys = (data as ProjectSettings)?.service_api_keys ?? [] - const interval = canReadAPIKeys && apiKeys.length === 0 ? 2000 : 0 + refetchInterval(_data) { + const data = _data as ProjectSettings | undefined + const apiKeys = data?.service_api_keys ?? [] + const interval = + canReadAPIKeys && data?.status !== 'INACTIVE' && apiKeys.length === 0 ? 2000 : 0 return interval }, ...options, diff --git a/apps/studio/data/sql/execute-sql-query.ts b/apps/studio/data/sql/execute-sql-query.ts index b172ab00514..8e2b1536721 100644 --- a/apps/studio/data/sql/execute-sql-query.ts +++ b/apps/studio/data/sql/execute-sql-query.ts @@ -39,7 +39,11 @@ export async function executeSql( | 'isRoleImpersonationEnabled' >, signal?: AbortSignal, - headersInit?: HeadersInit + headersInit?: HeadersInit, + fetcherOverride?: ( + sql: string, + headers?: HeadersInit + ) => Promise<{ data: T } | { error: ResponseError }> ): Promise<{ result: T }> { if (!projectRef) throw new Error('projectRef is required') @@ -52,21 +56,37 @@ export async function executeSql( let headers = new Headers(headersInit) if (connectionString) headers.set('x-connection-encrypted', connectionString) - let { data, error } = await post('/platform/pg-meta/{ref}/query', { - signal, - params: { - header: { 'x-connection-encrypted': connectionString ?? '' }, - path: { ref: projectRef }, - // @ts-expect-error: This is just a client side thing to identify queries better - query: { - key: - queryKey?.filter((seg) => typeof seg === 'string' || typeof seg === 'number').join('-') ?? - '', + let data + let error + + if (fetcherOverride) { + const result = await fetcherOverride(sql, headers) + if ('data' in result) { + data = result.data + } else { + error = result.error + } + } else { + const result = await post('/platform/pg-meta/{ref}/query', { + signal, + params: { + header: { 'x-connection-encrypted': connectionString ?? '' }, + path: { ref: projectRef }, + // @ts-expect-error: This is just a client side thing to identify queries better + query: { + key: + queryKey + ?.filter((seg) => typeof seg === 'string' || typeof seg === 'number') + .join('-') ?? '', + }, }, - }, - body: { query: sql }, - headers, - }) + body: { query: sql }, + headers, + }) + + data = result.data + error = result.error + } if (error) { if ( diff --git a/apps/studio/data/storage/bucket-create-mutation.ts b/apps/studio/data/storage/bucket-create-mutation.ts index a585f4a7278..81dc63d8b17 100644 --- a/apps/studio/data/storage/bucket-create-mutation.ts +++ b/apps/studio/data/storage/bucket-create-mutation.ts @@ -28,7 +28,7 @@ export async function createBucket({ const payload: Partial = { id, public: isPublic } if (file_size_limit) payload.file_size_limit = file_size_limit - if (allowed_mime_types) payload.allowed_mime_types + if (allowed_mime_types) payload.allowed_mime_types = allowed_mime_types const { data, error } = await post('/platform/storage/{ref}/buckets', { params: { path: { ref: projectRef } }, diff --git a/apps/studio/lib/self-hosted.ts b/apps/studio/lib/self-hosted.ts new file mode 100644 index 00000000000..a87ca513c38 --- /dev/null +++ b/apps/studio/lib/self-hosted.ts @@ -0,0 +1,15 @@ +import { constructHeaders } from 'lib/api/apiHelpers' +import { post } from 'lib/common/fetch' +import { PG_META_URL } from 'lib/constants' +import type { ResponseError } from 'types' + +export async function queryPgMetaSelfHosted(sql: string, headersInit?: { [prop: string]: any }) { + const headers = constructHeaders(headersInit ?? {}) + const response = await post(`${PG_META_URL}/query`, { query: sql }, { headers }) + + if (response.error) { + return { error: response.error as ResponseError } + } else { + return { data: response.data } + } +} diff --git a/apps/studio/next-env.d.ts b/apps/studio/next-env.d.ts index 52e831b4342..a4a7b3f5cfa 100644 --- a/apps/studio/next-env.d.ts +++ b/apps/studio/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/apps/studio/pages/api/ai/edge-function/complete.ts b/apps/studio/pages/api/ai/edge-function/complete.ts index 193c3643fd8..4d6096da5f9 100644 --- a/apps/studio/pages/api/ai/edge-function/complete.ts +++ b/apps/studio/pages/api/ai/edge-function/complete.ts @@ -1,8 +1,10 @@ import { openai } from '@ai-sdk/openai' import pgMeta from '@supabase/pg-meta' import { streamText } from 'ai' +import { IS_PLATFORM } from 'common' import { executeSql } from 'data/sql/execute-sql-query' import apiWrapper from 'lib/api/apiWrapper' +import { queryPgMetaSelfHosted } from 'lib/self-hosted' import { NextApiRequest, NextApiResponse } from 'next' import { getTools } from '../sql/tools' @@ -65,7 +67,8 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) { { 'Content-Type': 'application/json', ...(authorization && { Authorization: authorization }), - } + }, + IS_PLATFORM ? undefined : queryPgMetaSelfHosted ) : { result: [] } diff --git a/apps/studio/pages/api/ai/sql/complete.ts b/apps/studio/pages/api/ai/sql/complete.ts index 9f51e9f2ff3..569831095e5 100644 --- a/apps/studio/pages/api/ai/sql/complete.ts +++ b/apps/studio/pages/api/ai/sql/complete.ts @@ -1,8 +1,10 @@ import { openai } from '@ai-sdk/openai' import pgMeta from '@supabase/pg-meta' import { streamText } from 'ai' +import { IS_PLATFORM } from 'common' import { executeSql } from 'data/sql/execute-sql-query' import apiWrapper from 'lib/api/apiWrapper' +import { queryPgMetaSelfHosted } from 'lib/self-hosted' import { NextApiRequest, NextApiResponse } from 'next' import { getTools } from '../sql/tools' @@ -56,7 +58,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) { { 'Content-Type': 'application/json', ...(authorization && { Authorization: authorization }), - } + }, + IS_PLATFORM ? undefined : queryPgMetaSelfHosted ) : { result: [] } diff --git a/apps/studio/pages/api/ai/sql/generate-v3.ts b/apps/studio/pages/api/ai/sql/generate-v3.ts index cbc45514430..9000ab3d469 100644 --- a/apps/studio/pages/api/ai/sql/generate-v3.ts +++ b/apps/studio/pages/api/ai/sql/generate-v3.ts @@ -3,8 +3,10 @@ import pgMeta from '@supabase/pg-meta' import { streamText } from 'ai' import { NextApiRequest, NextApiResponse } from 'next' +import { IS_PLATFORM } from 'common' import { executeSql } from 'data/sql/execute-sql-query' import apiWrapper from 'lib/api/apiWrapper' +import { queryPgMetaSelfHosted } from 'lib/self-hosted' import { getTools } from './tools' export const maxDuration = 30 @@ -59,7 +61,8 @@ async function handlePost(req: NextApiRequest, res: NextApiResponse) { 'Content-Type': 'application/json', ...(cookie && { cookie }), ...(authorization && { Authorization: authorization }), - } + }, + IS_PLATFORM ? undefined : queryPgMetaSelfHosted ) : { result: [] } diff --git a/apps/studio/pages/api/ai/sql/tools.ts b/apps/studio/pages/api/ai/sql/tools.ts index 77fbf78abda..54ea64f33a7 100644 --- a/apps/studio/pages/api/ai/sql/tools.ts +++ b/apps/studio/pages/api/ai/sql/tools.ts @@ -3,10 +3,12 @@ import { stripIndent } from 'common-tags' import { z } from 'zod' // import { processSql, renderSupabaseJs } from '@supabase/sql-to-rest' +import { IS_PLATFORM } from 'common' import { getDatabaseFunctions } from 'data/database-functions/database-functions-query' import { getDatabasePolicies } from 'data/database-policies/database-policies-query' import { getEntityDefinitionsSql } from 'data/database/entity-definitions-query' import { executeSql } from 'data/sql/execute-sql-query' +import { queryPgMetaSelfHosted } from 'lib/self-hosted' export const getTools = ({ projectRef, @@ -43,7 +45,8 @@ export const getTools = ({ sql: getEntityDefinitionsSql({ schemas }), }, undefined, - headers + headers, + IS_PLATFORM ? undefined : queryPgMetaSelfHosted ) : { result: [] } diff --git a/apps/studio/state/storage-explorer.tsx b/apps/studio/state/storage-explorer.tsx index c2adec58356..1c21979b077 100644 --- a/apps/studio/state/storage-explorer.tsx +++ b/apps/studio/state/storage-explorer.tsx @@ -177,17 +177,19 @@ function createStorageExplorerState({ }, sortBy, - setSortBy: (value: STORAGE_SORT_BY) => { + setSortBy: async (value: STORAGE_SORT_BY) => { state.sortBy = value state.updateExplorerPreference() state.setSelectedFilePreview(undefined) + await state.refetchAllOpenedFolders() }, sortByOrder, - setSortByOrder: (value: STORAGE_SORT_BY_ORDER) => { + setSortByOrder: async (value: STORAGE_SORT_BY_ORDER) => { state.sortByOrder = value state.updateExplorerPreference() state.setSelectedFilePreview(undefined) + await state.refetchAllOpenedFolders() }, isSearching: false, diff --git a/apps/www/_blog/2025-05-08-event-triggers-wo-superuser.mdx b/apps/www/_blog/2025-05-08-event-triggers-wo-superuser.mdx index 63e2bf3823d..54c976df382 100644 --- a/apps/www/_blog/2025-05-08-event-triggers-wo-superuser.mdx +++ b/apps/www/_blog/2025-05-08-event-triggers-wo-superuser.mdx @@ -4,8 +4,8 @@ description: Using Postgres Hooks to allow regular users to create event trigger author: steve_chavez author_url: https://github.com/steve-chavez author_image_url: https://github.com/steve-chavez.png -image: 2025-05-08-event-triggers-wo-superuser/cover-event-triggers.png -thumb: 2025-05-08-event-triggers-wo-superuser/cover-event-triggers.png +image: 2025-05-08-event-triggers-wo-superuser/cover-event-triggers-dark.png +thumb: 2025-05-08-event-triggers-wo-superuser/cover-event-triggers-dark.png categories: - postgres tags: @@ -24,7 +24,14 @@ In this blog post, we’ll explain how we do this in the `supautils` extension, ## Privileged Role -![utility hook](/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook.png) +Utility Hook The core of `supautils` is the “privileged role”, which is a role that serves as proxy to superuser. It provides a safe subset of superuser capabilities and it’s accessible to regular users. @@ -61,7 +68,14 @@ And once a superuser trips on the event trigger, it will fire with its privilege ## Skipping Event Triggers -![fmgr hook](/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook.png) +FMGR Hook A solution would be skipping user Event Triggers for superusers. diff --git a/apps/www/app/api-v2/ticket-og/route.tsx b/apps/www/app/api-v2/ticket-og/route.tsx deleted file mode 100644 index 478376b7179..00000000000 --- a/apps/www/app/api-v2/ticket-og/route.tsx +++ /dev/null @@ -1,446 +0,0 @@ -import React from 'react' -import { ImageResponse } from '@vercel/og' -import { createClient } from '@supabase/supabase-js' -import { themes } from '~/components/LaunchWeek/14/utils/ticketThemes' - -export const runtime = 'edge' // 'nodejs' is the default -export const dynamic = 'force-dynamic' // defaults to auto -export const fetchCache = 'force-no-store' -export const revalidate = 0 - -const corsHeaders = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type', -} - -const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL - -const STORAGE_URL = `${SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw14` - -// Load custom font -// const FONT_URL = `${STORAGE_URL}/assets/font/Nippo-Regular.otf` -// const MONO_FONT_URL = `${STORAGE_URL}/assets/font/DepartureMono-Regular.otf` - -const FONT_URL = '/fonts/launchweek/14/Nippo-Regular.otf' -const MONO_FONT_URL = '/fonts/launchweek/14/DepartureMono-Regular.otf' - -const LW_TABLE = 'tickets' -const LW_MATERIALIZED_VIEW = 'tickets_view' - -const usernameToLines = (username: string): string[] => { - const maxLineLength = 14 - - const nonBreakingReplacements = [ - { regexp: new RegExp(' ', 'g'), replacement: '\u00A0' }, // Space → Non-breaking space - { regexp: new RegExp('-', 'g'), replacement: '\u2011' }, // Hyphen → Non-breaking hyphen - { regexp: new RegExp('/', 'g'), replacement: '\u2060\u002F\u2060' }, // Slash with word joiners - { regexp: new RegExp('\\.', 'g'), replacement: '\u2024' }, // One dot leader (alternative to period) - ] - const allowList = [...nonBreakingReplacements.map((x) => x.regexp), new RegExp('\\w', 'g')] - .map((x) => x.source.replace('-', '\\-')) - .join('|') - const allowRegexp = new RegExp(`[^${allowList}]`, 'g') - const allowdUsername = username.replace(allowRegexp, '') - // Split only by spaces, keeping hyphenated words together - const words = allowdUsername.split(' ') - const lines: string[] = [] - let currentLine = '' - - // First try to break at word boundaries (spaces only) - for (const word of words) { - // If adding this word would exceed the line length and we already have content - if ( - currentLine.length + (currentLine ? 1 : 0) + word.length > maxLineLength && - currentLine.length > 0 - ) { - // Add current line to lines array and start a new line - lines.push(currentLine) - currentLine = word - } else { - // Add word to current line with a space if needed - currentLine = currentLine ? `${currentLine} ${word}` : word - } - } - - // Add the last line if it has content - if (currentLine) { - lines.push(currentLine) - } - - // If we still have too few lines but some are too long, split them by character - // but try to avoid splitting at hyphens - let finalLines: string[] = [] - for (const line of lines) { - if (line.length > maxLineLength) { - // For long words, try to find good break points - let remainingText = line - while (remainingText.length > 0) { - if (remainingText.length <= maxLineLength) { - finalLines.push(remainingText) - break - } - - // Try to find a good break point that's not a hyphen - let breakPoint = maxLineLength - - // Look for a hyphen in the potential break area (a few chars before maxLineLength) - const searchArea = remainingText.substring(Math.max(0, breakPoint - 5), breakPoint + 1) - const hyphenPos = searchArea.indexOf('-') - - // If we found a hyphen, adjust the break point to keep the hyphenated word together - if (hyphenPos >= 0) { - // Calculate the actual position in the original string - const actualHyphenPos = Math.max(0, breakPoint - 5) + hyphenPos - - // If hyphen is near the beginning, include the whole hyphenated word on next line - if (actualHyphenPos < maxLineLength / 2) { - breakPoint = actualHyphenPos - } - // If hyphen is near the end, include the whole hyphenated word on this line - else { - // Find the end of the hyphenated word - const spaceAfterHyphen = remainingText.indexOf(' ', actualHyphenPos) - if (spaceAfterHyphen > 0 && spaceAfterHyphen - actualHyphenPos < 10) { - // If the rest of the hyphenated word is reasonably short, keep it together - breakPoint = spaceAfterHyphen - } - } - } - - finalLines.push(remainingText.substring(0, breakPoint)) - remainingText = remainingText.substring(breakPoint).trim() - } - } else { - finalLines.push(line) - } - } - - // Limit to 3 lines maximum - if (finalLines.length > 3) { - finalLines = finalLines.slice(0, 2) - // Truncate the last line if needed and add ellipsis - let lastLine = finalLines[2] || '' - if (lastLine.length > 8) { - lastLine = lastLine.slice(0, 8) + '...' - } - finalLines.push(lastLine) - } - - finalLines = finalLines.map((line, index) => { - let result = line - nonBreakingReplacements.forEach(({ regexp, replacement }) => { - result = result.replace(regexp, replacement) - }) - - if (index < finalLines.length - 1) { - result = result.padEnd(maxLineLength, '\u00A0') - } - return result - }) - - // Ensure we don't have more than 3 lines - return finalLines.slice(0, 3) -} - -export async function GET(req: Request, res: Response) { - const url = new URL(req.url) - - // Just here to silence snyk false positives - // Verify that req.url is from an allowed domain - const username = url.searchParams.get('username') ?? url.searchParams.get('amp;username') - const userAgent = req.headers.get('user-agent') - - const font = fetch(new URL(FONT_URL, url)).then((res) => res.arrayBuffer()) - const mono_font = fetch(new URL(MONO_FONT_URL, url)).then((res) => res.arrayBuffer()) - - try { - if (!username) throw new Error('missing username param') - - const supabaseAdminClient = createClient( - process.env.NEXT_PUBLIC_SUPABASE_URL as string, - process.env.LIVE_SUPABASE_COM_SERVICE_ROLE_KEY as string - ) - - // Track social shares - if (userAgent?.toLocaleLowerCase().includes('twitter')) { - await supabaseAdminClient - .from(LW_TABLE) - .update({ shared_on_twitter: 'now' }) - .eq('launch_week', 'lw14') - .eq('username', username) - .is('shared_on_twitter', null) - } else if (userAgent?.toLocaleLowerCase().includes('linkedin')) { - await supabaseAdminClient - .from(LW_TABLE) - .update({ shared_on_linkedin: 'now' }) - .eq('launch_week', 'lw14') - .eq('username', username) - .is('shared_on_linkedin', null) - } - - // Get ticket data - const { data: user, error } = await supabaseAdminClient - .from(LW_MATERIALIZED_VIEW) - .select( - 'id, name, metadata, shared_on_twitter, shared_on_linkedin, platinum, secret, role, company, location, ticket_number' - ) - .eq('launch_week', 'lw14') - .eq('username', username) - .maybeSingle() - - if (error) console.log('Failed to fetch user. Inner error:', error.message) - if (!user) throw new Error(error?.message ?? 'user not found') - - const { - name, - secret, - platinum: isPlatinum, - shared_on_twitter: sharedOnTwitter, - shared_on_linkedin: sharedOnLinkedIn, - ticket_number, - } = user - - const platinum = isPlatinum ?? (!!sharedOnTwitter && !!sharedOnLinkedIn) ?? false - const platinumSecret = platinum && secret - - const seatCode = (466561 + (ticket_number || 0)).toString(36).toUpperCase() - - // Generate image and upload to storage. - const ticketType = secret - ? platinum - ? 'platinumSecret' - : 'secret' - : platinum - ? 'platinum' - : 'regular' - - const STYLING_CONFIG = () => ({ - TICKET_FOREGROUND: themes()[ticketType].TICKET_FOREGROUND, - }) - - const TICKET_THEME = { - regular: { - color: 'rgb(239, 239, 239)', - background: 'transparent', - }, - secret: { - color: 'rgba(44, 244, 148)', - background: 'rgba(44, 244, 148, 0.2)', - }, - platinum: { - color: 'rgba(255, 199, 58)', - background: 'rgba(255, 199, 58, 0.2)', - }, - platinumSecret: { - color: 'rgba(255, 199, 58)', - background: 'rgba(255, 199, 58, 0.2)', - }, - } - - const fontData = await font - const monoFontData = await mono_font - - const OG_WIDTH = 1200 - const OG_HEIGHT = 628 - const USERNAME_BOTTOM = 435 - - const BACKGROUND = () => ({ - regular: { - BACKGROUND_IMG: new URL(`/images/launchweek/14/og-14-regular.png`, url).href, - }, - platinum: { - BACKGROUND_IMG: new URL(`/images/launchweek/14/og-14-platinum.png`, url).href, - }, - platinumSecret: { - BACKGROUND_IMG: new URL(`/images/launchweek/14/og-14-platinum-secret.png`, url).href, - }, - secret: { - BACKGROUND_IMG: new URL(`/images/launchweek/14/og-14-secret.png`, url).href, - }, - }) - - const NOISE = new URL('/images/launchweek/14/noise-pattern.png', url).href - - const computeBackgroundWidth = (letters: number) => { - return 100 + (letters * 40 + (letters - 1) * 12) - } - const lines = usernameToLines(name ?? username) - - const secretStyles = { - background: 'linear-gradient(0deg, rgb(18 18 18 / 0.5) 50%, transparent 50%)', - backgroundSize: '100% 6px, 0px 100%', - } - - const testStyles = { - background: 'red', - backgroundSize: '100% 6px, 0px 100%', - } - - const secretTextStyles = { - textShadow: '0 0 15px rgba(52,211,153,0.8)', - } - - const platinumSecretTextStyles = { - textShadow: '0 0 15px rgba(255,199,58,0.8)', - } - - const generatedTicketImage = new ImageResponse( - ( - <> -
    - {/* Background */} - - {/* Seat number */} -
    - {seatCode} -
    - - {/* Render each username line */} - {lines.map((line, index) => ( -
    -

    - {line} -

    -
    - ))} - - {secret && ( -
    - )} - - {secret && ( - - )} -
    - - ), - { - width: OG_WIDTH, - height: OG_HEIGHT, - fonts: [ - { - name: 'Nippo-Regular', - data: fontData, - style: 'normal', - }, - { - name: 'DepartureMono-Regular', - data: monoFontData, - style: 'normal', - }, - ], - headers: { - 'content-type': 'image/png', - 'cache-control': 'public, max-age=31536000, s-maxage=31536000, no-transform, immutable', - 'cdn-cache-control': 'max-age=31536000', - }, - } - ) - - // [Note] Uncomment only for local testing to return the image directly and skip storage upload. - // return generatedTicketImage - - // Upload image to storage. - const { error: storageError } = await supabaseAdminClient.storage - .from('images') - .upload(`launch-week/lw14/og/${ticketType}/${username}.png`, generatedTicketImage.body!, { - contentType: 'image/png', - // cacheControl: `${60 * 60 * 24 * 7}`, - cacheControl: `0`, - // Update cached og image, people might need to update info - upsert: true, - }) - - if (storageError) throw new Error(`storageError: ${storageError.message}`) - - const NEW_TIMESTAMP = new Date() - - return await fetch(`${STORAGE_URL}/og/${ticketType}/${username}.png?t=${NEW_TIMESTAMP}`) - } catch (error: any) { - return new Response(JSON.stringify({ error: error.message }), { - headers: { ...corsHeaders, 'Content-Type': 'application/json' }, - status: 400, - }) - } -} diff --git a/apps/www/components/LaunchWeek/14/LwView.tsx b/apps/www/components/LaunchWeek/14/LwView.tsx deleted file mode 100644 index 26dd67446bd..00000000000 --- a/apps/www/components/LaunchWeek/14/LwView.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import Image from 'next/image' -import { ActionButton } from '~/components/LaunchWeek/14/ActionButton' -import { - TicketHeader, - TicketHeaderClaim, - TicketHeaderDate, - TicketHeaderRemainingTime, -} from '~/components/LaunchWeek/14/Header' -import TicketCanvas from '~/components/LaunchWeek/14/TicketCanvas' -import { - TicketClaim, - TicketClaimButtons, - TicketClaimContent, - TicketClaimMessage, -} from '~/components/LaunchWeek/14/TicketClaim' -import TicketCopy from '~/components/LaunchWeek/14/TicketCopy' -import { TicketLayout, TicketLayoutCanvas } from '~/components/LaunchWeek/14/TicketLayout' -import TicketShare from '~/components/LaunchWeek/14/TicketShare' -import { Tunnel } from '~/components/LaunchWeek/14/Tunnel' -import { TicketShareLayout } from '~/components/LaunchWeek/14/TicketShareLayout' -import { useRegistration } from '~/components/LaunchWeek/14/hooks/use-registration' -import useConfData from './hooks/use-conf-data' -import { cn } from 'ui' - -const dates = [new Date('2025-03-31T07:00:00.000-08:00')] - -export const LwView = () => { - const [state] = useConfData() - const register = useRegistration() - - return ( - - - - - {state.claimFormState === 'visible' && ( - -
    -
    -

    - - - Supabase - - LaunchWeek 14 - MAR 31 — APR 04 -

    - 7 AM PT -
    -
    - - - register.signIn()}> - CLAIM YOUR TICKET - - - - -
    -
    -
    - )} - {state.ticketVisibility && ( - <> - - - - - - )} - -
    - -
    -
    -
    - ) -} diff --git a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx index ed5415c0d2b..48964126ce5 100644 --- a/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx +++ b/apps/www/components/LaunchWeek/14/Releases/LWStickyNav.tsx @@ -150,14 +150,6 @@ const LWXStickyNav: FC = () => {
  • -
  • - - Ticket - -
  • diff --git a/apps/www/components/LaunchWeek/14/TicketCanvas.tsx b/apps/www/components/LaunchWeek/14/TicketCanvas.tsx deleted file mode 100644 index dc84059be6a..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketCanvas.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { cn } from 'ui' -import { useThreeJS } from './helpers' -import { useCallback, useEffect, useRef } from 'react' -import SceneRenderer from './utils/SceneRenderer' -import TicketScene from './scenes/TicketScene' -import useConfData from './hooks/use-conf-data' - -interface TicketCanvasProps { - className?: string - onUpgradeToSecret?: () => void - narrow: boolean -} - -const TicketCanvas = ({ className, onUpgradeToSecret, narrow }: TicketCanvasProps) => { - const sceneRef = useRef(null) - const initQueue = useRef<{ init: Promise; renderer: SceneRenderer }[]>([]) - const onUpgradeToSecretRef = useRef(onUpgradeToSecret) - const [state, dispatch] = useConfData() - const userData = state.userTicketData - const initialSceneDataRef = useRef({ - visible: state.ticketVisibility, - secret: state.userTicketData.secret, - platinum: state.userTicketData.platinum, - narrow: narrow, - user: { - id: state.userTicketData.id, - name: state.userTicketData.name ?? state.userTicketData.username, - ticketNumber: state.userTicketData.ticket_number, - }, - }) - - const setup = useCallback( - (container: HTMLElement) => { - const uuid = Math.random().toString(36).substring(7) - - const sceneRenderer = new SceneRenderer(container, initQueue.current, uuid) - - const initPromise = sceneRenderer.init(async () => { - dispatch({ type: 'TICKET_LOADING_START' }) - const scene = new TicketScene({ - defaultVisible: initialSceneDataRef.current.visible, - defaultSecret: initialSceneDataRef.current.secret, - defaultPlatinum: initialSceneDataRef.current.platinum, - narrow: initialSceneDataRef.current.narrow, - user: initialSceneDataRef.current.user, - onSeatChartButtonClicked: () => { - scene.showBackSide() - scene.upgradeToSecret() - onUpgradeToSecretRef.current?.() - }, - onGoBackButtonClicked: () => { - scene.showFrontSide() - }, - }) - - await sceneRenderer.activateScene(scene, true) - - sceneRef.current = scene - - dispatch({ type: 'TICKET_LOADING_SUCCESS' }) - }) - - initQueue.current.push({ init: initPromise, renderer: sceneRenderer }) - - return sceneRenderer - }, - [dispatch] - ) - - useEffect(() => { - async function updateTicket() { - if (sceneRef.current) { - sceneRef.current.setVisible(state.ticketVisibility) - sceneRef.current.setTicketNumber(state.userTicketData.ticket_number ?? 0) - sceneRef.current.setUserName( - state.userTicketData.name ?? state.userTicketData.username ?? '' - ) - - if (state.userTicketData.secret) await sceneRef.current.upgradeToSecret() - if (state.userTicketData.platinum) await sceneRef.current.upgradeToPlatinum() - - sceneRef.current.reloadTextures() - } - } - - if (sceneRef.current) { - void updateTicket() - } - }, [ - narrow, - state.ticketVisibility, - state.userTicketData.name, - state.userTicketData.platinum, - state.userTicketData.secret, - state.userTicketData.ticket_number, - state.userTicketData.username, - ]) - - useEffect(() => { - onUpgradeToSecretRef.current = onUpgradeToSecret - }, [onUpgradeToSecret]) - - const { containerRef } = useThreeJS(setup) - return ( -
    -
    { - sceneRef.current?.click(e.nativeEvent) - }} - /> -
    - ) -} - -export default TicketCanvas diff --git a/apps/www/components/LaunchWeek/14/TicketClaim.tsx b/apps/www/components/LaunchWeek/14/TicketClaim.tsx deleted file mode 100644 index 011a49021d1..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketClaim.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ReactNode } from 'react' -import useConfData from './hooks/use-conf-data' - -export const TicketClaim = ({ children, narrow }: { children: ReactNode; narrow?: boolean }) => { - return
    {children}
    -} - -export const TicketClaimContent = ({ children }: { children?: ReactNode }) => { - return
    {children}
    -} - -export const TicketClaimMessage = () => { - const [state] = useConfData() - return ( -
    -
    - Share your ticket for a chance to win swag -
    -
    - ) -} - -export const TicketClaimButtons = ({ children }: { children?: ReactNode }) => { - return ( -
    - {children} -
    - ) -} diff --git a/apps/www/components/LaunchWeek/14/TicketCopy.tsx b/apps/www/components/LaunchWeek/14/TicketCopy.tsx deleted file mode 100644 index 30bafa922c0..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketCopy.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { useState, useRef } from 'react' -import { LW14_URL } from '~/lib/constants' -import { Check, Copy } from 'lucide-react' -import useConfData from './hooks/use-conf-data' -import { cn } from 'ui' - -export default function TicketCopy({ className }: { className?: string }) { - const [state] = useConfData() - const userData = state.userTicketData - const { username } = userData - const [copied, setCopied] = useState(false) - const buttonRef = useRef(null) - const displayUrl = `.../launch-week/tickets/${username}` - const link = `${LW14_URL}/tickets/${username}` - - return ( - - ) -} diff --git a/apps/www/components/LaunchWeek/14/TicketLayout.tsx b/apps/www/components/LaunchWeek/14/TicketLayout.tsx deleted file mode 100644 index 8ba23e6b2fe..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketLayout.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ReactNode } from 'react' -import { cn } from 'ui' -import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' - -export const TicketLayout = ({ children }: { children: ReactNode }) => { - return ( - - {children} - - ) -} - -export const TicketLayoutCanvas = ({ children, narrow }: { children: ReactNode; narrow: true }) => { - return ( -
    - {children} -
    - ) -} diff --git a/apps/www/components/LaunchWeek/14/TicketShare.tsx b/apps/www/components/LaunchWeek/14/TicketShare.tsx deleted file mode 100644 index 61712dab331..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketShare.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useBreakpoint } from 'common' -import dayjs from 'dayjs' -import { Check } from 'lucide-react' -import { useTheme } from 'next-themes' -import Link from 'next/link' -import { useEffect, useRef, useState } from 'react' -import { Button } from 'ui' -import useConfData from './hooks/use-conf-data' -import { - LW14_TWEET_TEXT, - LW14_TWEET_TEXT_PLATINUM, - LW14_TWEET_TEXT_SECRET, - LW14_URL, -} from '~/lib/constants' -import supabase from './supabase' - -export default function TicketShare() { - const { resolvedTheme } = useTheme() - const [state] = useConfData() - const userData = state.userTicketData - const { platinum, username, metadata, secret: hasSecretTicket } = userData - const [_imgReady, setImgReady] = useState(false) - const [_loading, setLoading] = useState(false) - const isLessThanMd = useBreakpoint() - const downloadLink = useRef() - const link = `${LW14_URL}/tickets/${username}?t=${dayjs(new Date()).format('DHHmmss')}` - const permalink = encodeURIComponent(link) - const text = hasSecretTicket - ? LW14_TWEET_TEXT_SECRET - : platinum - ? LW14_TWEET_TEXT_PLATINUM - : LW14_TWEET_TEXT - const encodedText = encodeURIComponent(text) - const tweetUrl = `https://twitter.com/intent/tweet?url=${permalink}&text=${encodedText}` - const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${permalink}&text=${encodedText}` - const downloadUrl = `/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}` - const TICKETS_TABLE = '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') => { - setTimeout(async () => { - if (social === 'twitter') { - await supabase - .from(TICKETS_TABLE) - .update({ - shared_on_twitter: 'now', - metadata: { ...metadata, theme: resolvedTheme, hasSharedSecret: hasSecretTicket }, - }) - .eq('launch_week', 'lw14') - .eq('username', username) - } else if (social === 'linkedin') { - await supabase - .from(TICKETS_TABLE) - .update({ - shared_on_linkedin: 'now', - metadata: { ...metadata, theme: resolvedTheme, hasSharedSecret: hasSecretTicket }, - }) - .eq('launch_week', 'lw14') - .eq('username', username) - } - - if (userData.shared_on_linkedin && userData.shared_on_twitter) { - await fetch(`/api-v2/ticket-og?username=${username}&platinum=true`) - } - }) - } - - return ( -
    - - -
    - ) -} diff --git a/apps/www/components/LaunchWeek/14/TicketShareLayout.tsx b/apps/www/components/LaunchWeek/14/TicketShareLayout.tsx deleted file mode 100644 index d03964e6305..00000000000 --- a/apps/www/components/LaunchWeek/14/TicketShareLayout.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { ReactNode } from 'react' -import { cn } from 'ui' -import useLw14ConfData from './hooks/use-conf-data' - -export const TicketShareLayout = ({ - children, - narrow, -}: { - children?: ReactNode - narrow?: boolean -}) => { - const [{ userTicketData }] = useLw14ConfData() - - const userName = userTicketData.name ?? userTicketData.username - let userWelcomeText = userName ? , {userName}! : '!' - - return ( -
    - {narrow && ( - <> - {/* LW logo */} -
    - Good to see you{userWelcomeText} -
    - - )} -
    - Share your ticket for a chance to win swag -
    - {children} -
    - ) -} diff --git a/apps/www/components/LaunchWeek/14/effects/crt-shader.ts b/apps/www/components/LaunchWeek/14/effects/crt-shader.ts deleted file mode 100644 index 9a4cefe9972..00000000000 --- a/apps/www/components/LaunchWeek/14/effects/crt-shader.ts +++ /dev/null @@ -1,89 +0,0 @@ -export const CRTShader = { - uniforms: { - tDiffuse: { value: null }, - time: { value: 0 }, - scanlineIntensity: { value: 0.6 }, - scanlineCount: { value: 360 }, - vignetteIntensity: { value: 0.5 }, - noiseIntensity: { value: 0.01 }, - flickerIntensity: { value: 0.01 }, - rgbShiftAmount: { value: 0.0 }, - // Add intensity control - intensity: { value: 1.0 }, - }, - vertexShader: ` - varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - } - `, - fragmentShader: ` - uniform sampler2D tDiffuse; - uniform float time; - uniform float scanlineIntensity; - uniform float scanlineCount; - uniform float vignetteIntensity; - uniform float noiseIntensity; - uniform float flickerIntensity; - uniform float rgbShiftAmount; - uniform float intensity; - - varying vec2 vUv; - - // Random function - // https://stackoverflow.com/a/10625698 - float random(vec2 st) { - return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); - } - - void main() { - // Get original color - vec4 originalColor = texture2D(tDiffuse, vUv); - - // Skip effects if intensity is zero - if (intensity <= 0.0) { - gl_FragColor = originalColor; - return; - } - - // Scale effect parameters by intensity - float activeRGBShift = rgbShiftAmount * intensity; - float activeScanlineIntensity = scanlineIntensity * intensity; - float activeVignetteIntensity = vignetteIntensity * intensity; - float activeNoiseIntensity = noiseIntensity * intensity; - float activeFlickerIntensity = flickerIntensity * intensity; - - // RGB shift effect - more subtle to preserve detail - vec2 shiftR = vec2(activeRGBShift, 0.0); - vec2 shiftG = vec2(0.0, activeRGBShift); - - float r = texture2D(tDiffuse, vUv + shiftR).r; - float g = texture2D(tDiffuse, vUv + shiftG).g; - float b = texture2D(tDiffuse, vUv).b; - - vec4 shiftedColor = vec4(r, g, b, originalColor.a); - - // Scanline effect - thicker and more pronounced - float scanlineFreq = scanlineCount * 0.7; // Reduce frequency for thicker lines - float scanline = sin(vUv.y * scanlineFreq * 3.14159) * 0.5 + 0.5; - scanline = pow(scanline, 0.7) * activeScanlineIntensity * 1.5; // Increase intensity and make lines thicker with lower power - - // Apply scanline as a multiplicative overlay with stronger effect - vec4 scanlineColor = mix(shiftedColor, shiftedColor * (1.0 - scanline), activeScanlineIntensity * 1.2); - - // Vignette effect - vec2 center = vec2(0.5, 0.5); - float dist = distance(vUv, center); - float vignette = smoothstep(0.3, 0.85, dist) * activeVignetteIntensity; - - // Apply vignette as the final overlay effect - vec4 finalColor = scanlineColor * (1.0 - vignette * 0.7); - - // Blend between original and effect based on intensity - vec4 final = mix(originalColor, finalColor, intensity); - final.a = originalColor.a; - gl_FragColor = final; - } - `, -} diff --git a/apps/www/components/LaunchWeek/14/effects/glitch.ts b/apps/www/components/LaunchWeek/14/effects/glitch.ts deleted file mode 100644 index 703c8ee1dad..00000000000 --- a/apps/www/components/LaunchWeek/14/effects/glitch.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { - DataTexture, - FloatType, - MathUtils, - RedFormat, - ShaderMaterial, - UniformsUtils, - WebGLRenderer, - WebGLRenderTarget, -} from 'three' -import { Pass, FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass' -import { DigitalGlitch } from 'three/examples/jsm/shaders/DigitalGlitch' - -class GlitchPass extends Pass { - uniforms: typeof DigitalGlitch.uniforms - heightMap: DataTexture - material: ShaderMaterial - fsQuad: FullScreenQuad - goWild: boolean - curF: number - randX: number - intensity: number - - constructor(dt_size = 64) { - super() - - const shader = DigitalGlitch - - this.uniforms = UniformsUtils.clone(shader.uniforms) - - this.heightMap = this.generateHeightmap(dt_size) - - this.uniforms['tDisp'].value = this.heightMap - - this.material = new ShaderMaterial({ - uniforms: this.uniforms, - vertexShader: shader.vertexShader, - fragmentShader: shader.fragmentShader, - }) - - this.fsQuad = new FullScreenQuad(this.material) - - this.goWild = false - this.curF = 0 - this.randX = 0 - this.generateTrigger() - this.intensity = 0 - } - - render(renderer: WebGLRenderer, writeBuffer: WebGLRenderTarget, readBuffer: WebGLRenderTarget) { - this.uniforms['tDiffuse'].value = readBuffer.texture - this.uniforms['seed'].value = Math.random() //default seeding - this.uniforms['byp'].value = 0 - - if (this.curF % this.randX < this.randX / 10) { - this.uniforms['amount'].value = 0 * this.intensity - this.uniforms['angle'].value = Math.PI - this.uniforms['distortion_x'].value = MathUtils.randFloat(0, 0.05) * this.intensity - this.uniforms['distortion_y'].value = MathUtils.randFloat(0, 0.05) * this.intensity - this.uniforms['seed_x'].value = MathUtils.randFloat(-0.05, 0.05) * this.intensity - this.uniforms['seed_y'].value = MathUtils.randFloat(-0.05, 0.05) * this.intensity - this.curF = 0 - } - - this.curF++ - - if (this.renderToScreen) { - renderer.setRenderTarget(null) - this.fsQuad.render(renderer) - } else { - renderer.setRenderTarget(writeBuffer) - if (this.clear) renderer.clear() - this.fsQuad.render(renderer) - } - } - - generateTrigger() { - this.randX = MathUtils.randInt(200, 240) - } - - generateHeightmap(dt_size: number) { - const data_arr = new Float32Array(dt_size * dt_size) - const length = dt_size * dt_size - - for (let i = 0; i < length; i++) { - const val = MathUtils.randFloat(0, 1) - data_arr[i] = val - } - - const texture = new DataTexture(data_arr, dt_size, dt_size, RedFormat, FloatType) - texture.needsUpdate = true - return texture - } - - setIntensity(amount: number) { - this.intensity = amount < 0.01 ? 0 : amount / 4 - } - - enable(value: boolean) { - this.uniforms['byp'].value = value ? 0 : 1 - } - - dispose() { - this.material.dispose() - - this.heightMap.dispose() - - this.fsQuad.dispose() - } -} - -export { GlitchPass } diff --git a/apps/www/components/LaunchWeek/14/effects/helpers.ts b/apps/www/components/LaunchWeek/14/effects/helpers.ts deleted file mode 100644 index ae8d59d8793..00000000000 --- a/apps/www/components/LaunchWeek/14/effects/helpers.ts +++ /dev/null @@ -1,238 +0,0 @@ -export const shared = ` -vec3 mod289(vec3 x) { - return x - floor(x * (1.0 / 289.0)) * 289.0; -} - -vec4 mod289(vec4 x) { - return x - floor(x * (1.0 / 289.0)) * 289.0; -} - -vec4 permute(vec4 x) -{ - return mod289(((x*34.0)+1.0)*x); -} - -vec4 taylorInvSqrt(vec4 r) -{ - return 1.79284291400159 - 0.85373472095314 * r; -} - -` - -export const simplexNoise3d = ` -// -// Description : Array and textureless GLSL 2D/3D/4D simplex -// noise functions. -// Author : Ian McEwan, Ashima Arts. -// Maintainer : ijm -// Lastmod : 20110822 (ijm) -// License : Copyright (C) 2011 Ashima Arts. All rights reserved. -// Distributed under the MIT License. See LICENSE file. -// https://github.com/ashima/webgl-noise -// - -float snoise3D(vec3 v) - { - const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; - const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); - -// First corner - vec3 i = floor(v + dot(v, C.yyy) ); - vec3 x0 = v - i + dot(i, C.xxx) ; - -// Other corners - vec3 g = step(x0.yzx, x0.xyz); - vec3 l = 1.0 - g; - vec3 i1 = min( g.xyz, l.zxy ); - vec3 i2 = max( g.xyz, l.zxy ); - - // x0 = x0 - 0.0 + 0.0 * C.xxx; - // x1 = x0 - i1 + 1.0 * C.xxx; - // x2 = x0 - i2 + 2.0 * C.xxx; - // x3 = x0 - 1.0 + 3.0 * C.xxx; - vec3 x1 = x0 - i1 + C.xxx; - vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y - vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y - -// Permutations - i = mod289(i); - vec4 p = permute( permute( permute( - i.z + vec4(0.0, i1.z, i2.z, 1.0 )) - + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) - + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); - -// Gradients: 7x7 points over a square, mapped onto an octahedron. -// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) - float n_ = 0.142857142857; // 1.0/7.0 - vec3 ns = n_ * D.wyz - D.xzx; - - vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) - - vec4 x_ = floor(j * ns.z); - vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) - - vec4 x = x_ *ns.x + ns.yyyy; - vec4 y = y_ *ns.x + ns.yyyy; - vec4 h = 1.0 - abs(x) - abs(y); - - vec4 b0 = vec4( x.xy, y.xy ); - vec4 b1 = vec4( x.zw, y.zw ); - - //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0; - //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0; - vec4 s0 = floor(b0)*2.0 + 1.0; - vec4 s1 = floor(b1)*2.0 + 1.0; - vec4 sh = -step(h, vec4(0.0)); - - vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; - vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; - - vec3 p0 = vec3(a0.xy,h.x); - vec3 p1 = vec3(a0.zw,h.y); - vec3 p2 = vec3(a1.xy,h.z); - vec3 p3 = vec3(a1.zw,h.w); - -//Normalise gradients - vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); - p0 *= norm.x; - p1 *= norm.y; - p2 *= norm.z; - p3 *= norm.w; - -// Mix final noise value - vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); - m = m * m; - return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), - dot(p2,x2), dot(p3,x3) ) ); - } - -#pragma glslify: export(snoise) -` -export const periodicNoise3d = ` -// -// GLSL textureless classic 3D noise "cnoise", -// with an RSL-style periodic variant "pnoise". -// Author: Stefan Gustavson (stefan.gustavson@liu.se) -// Version: 2011-10-11 -// -// Many thanks to Ian McEwan of Ashima Arts for the -// ideas for permutation and gradient selection. -// -// Copyright (c) 2011 Stefan Gustavson. All rights reserved. -// Distributed under the MIT license. See LICENSE file. -// https://github.com/ashima/webgl-noise -// - - -vec3 fade(vec3 t) { - return t*t*t*(t*(t*6.0-15.0)+10.0); -} - -// Classic Perlin noise, periodic variant -float pnoise3D(vec3 P, vec3 rep) -{ - vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period - vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period - Pi0 = mod289(Pi0); - Pi1 = mod289(Pi1); - vec3 Pf0 = fract(P); // Fractional part for interpolation - vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0 - vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x); - vec4 iy = vec4(Pi0.yy, Pi1.yy); - vec4 iz0 = Pi0.zzzz; - vec4 iz1 = Pi1.zzzz; - - vec4 ixy = permute(permute(ix) + iy); - vec4 ixy0 = permute(ixy + iz0); - vec4 ixy1 = permute(ixy + iz1); - - vec4 gx0 = ixy0 * (1.0 / 7.0); - vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5; - gx0 = fract(gx0); - vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0); - vec4 sz0 = step(gz0, vec4(0.0)); - gx0 -= sz0 * (step(0.0, gx0) - 0.5); - gy0 -= sz0 * (step(0.0, gy0) - 0.5); - - vec4 gx1 = ixy1 * (1.0 / 7.0); - vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5; - gx1 = fract(gx1); - vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1); - vec4 sz1 = step(gz1, vec4(0.0)); - gx1 -= sz1 * (step(0.0, gx1) - 0.5); - gy1 -= sz1 * (step(0.0, gy1) - 0.5); - - vec3 g000 = vec3(gx0.x,gy0.x,gz0.x); - vec3 g100 = vec3(gx0.y,gy0.y,gz0.y); - vec3 g010 = vec3(gx0.z,gy0.z,gz0.z); - vec3 g110 = vec3(gx0.w,gy0.w,gz0.w); - vec3 g001 = vec3(gx1.x,gy1.x,gz1.x); - vec3 g101 = vec3(gx1.y,gy1.y,gz1.y); - vec3 g011 = vec3(gx1.z,gy1.z,gz1.z); - vec3 g111 = vec3(gx1.w,gy1.w,gz1.w); - - vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110))); - g000 *= norm0.x; - g010 *= norm0.y; - g100 *= norm0.z; - g110 *= norm0.w; - vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111))); - g001 *= norm1.x; - g011 *= norm1.y; - g101 *= norm1.z; - g111 *= norm1.w; - - float n000 = dot(g000, Pf0); - float n100 = dot(g100, vec3(Pf1.x, Pf0.yz)); - float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z)); - float n110 = dot(g110, vec3(Pf1.xy, Pf0.z)); - float n001 = dot(g001, vec3(Pf0.xy, Pf1.z)); - float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z)); - float n011 = dot(g011, vec3(Pf0.x, Pf1.yz)); - float n111 = dot(g111, Pf1); - - vec3 fade_xyz = fade(Pf0); - vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z); - vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y); - float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); - return 2.2 * n_xyz; -} - -#pragma glslify: export(pnoise) -` - -export const blendSoftLight = ` -// The MIT License (MIT) Copyright (c) 2015 Matt DesLauriers -// -// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -vec3 blendSoftLight(vec3 base, vec3 blend) { - return mix( - sqrt(base) * (2.0 * blend - 1.0) + 2.0 * base * (1.0 - blend), - 2.0 * base * blend + base * base * (1.0 - 2.0 * blend), - step(base, vec3(0.5)) - ); -} -` - -export const luma = ` -// This software is released under the MIT license: -// -// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -float luma(vec3 color) { - return dot(color, vec3(0.299, 0.587, 0.114)); -} - -float luma(vec4 color) { - return dot(color.rgb, vec3(0.299, 0.587, 0.114)); -} -` diff --git a/apps/www/components/LaunchWeek/14/effects/hud-shader.ts b/apps/www/components/LaunchWeek/14/effects/hud-shader.ts deleted file mode 100644 index b0cb8c1c8e2..00000000000 --- a/apps/www/components/LaunchWeek/14/effects/hud-shader.ts +++ /dev/null @@ -1,132 +0,0 @@ -import { blendSoftLight, luma, periodicNoise3d, shared, simplexNoise3d } from './helpers' - -export const HUDShader = { - vertexShader: ` -precision mediump float; - -varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); -} -`, - fragmentShader: ` - uniform sampler2D tDiffuse; - uniform vec2 resolution; - uniform float vignetteRadius; - uniform float vignetteSmoothness; - uniform float time; - - varying vec2 vUv; - varying vec2 screenPosition; - - ${shared} - ${periodicNoise3d} - ${simplexNoise3d} - ${blendSoftLight} - ${luma} - - // grain function - // The MIT License (MIT) Copyright (c) 2015 Matt DesLauriers - // Permission is hereby granted, free of charge, to any person obtaining a copy - // of this software and associated documentation files (the "Software"), to deal - // in the Software without restriction, including without limitation the rights - // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - // copies of the Software, and to permit persons to whom the Software is - // furnished to do so, subject to the following conditions: - // - // The above copyright notice and this permission notice shall be included in all - // copies or substantial portions of the Software. - // - // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - // SOFTWARE. - - float grain(vec2 texCoord, vec2 resolution, float frame, float multiplier) { - vec2 mult = texCoord * resolution; - float offset = snoise3D(vec3(mult / multiplier, frame)); - float n1 = pnoise3D(vec3(mult, offset), vec3(1.0/texCoord * resolution, 1.0)); - return n1 / 2.0 + 0.5; - } - - float grain(vec2 texCoord, vec2 resolution, float frame) { - return grain(texCoord, resolution, frame, 2.5); - } - - float grain(vec2 texCoord, vec2 resolution) { - return grain(texCoord, resolution, 0.0); - } - - // Vignette function - // MIT License - // - // Copyright (c) 2017 Tyler Lindberg - // - // Permission is hereby granted, free of charge, to any person obtaining a copy - // of this software and associated documentation files (the "Software"), to deal - // in the Software without restriction, including without limitation the rights - // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - // copies of the Software, and to permit persons to whom the Software is - // furnished to do so, subject to the following conditions: - // - // The above copyright notice and this permission notice shall be included in all - // copies or substantial portions of the Software. - // - // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - // SOFTWARE. - - float vignette(vec2 uv, float radius, float smoothness) { - float diff = radius - distance(uv, vec2(0.5, 0.5)); - return smoothstep(-smoothness, smoothness, diff); - } - - void main() { - // Sample the diffuse texture to get base color with alpha - - vec4 blackBase = vec4(0.0, 0.0, 0.0, 1.0); - - float v = vignette(vUv, vignetteRadius, vignetteSmoothness); - float invertedVignette = 1.0 - v; - - float minAlpha = 0.3; - blackBase.a *= mix(minAlpha, 1.0, invertedVignette); - - vec4 textureColor = texture2D(tDiffuse, vUv); - - vec4 stackedColor = vec4( - mix(blackBase.rgb, textureColor.rgb, textureColor.a), - mix(blackBase.a, max(blackBase.a, textureColor.a), 0.8) - ); - - float grainSize = 3.0 + 4.0 * sin(time); - vec3 g = vec3(grain(vUv, resolution / grainSize, time)); - - vec3 noiseColor = blendSoftLight(vec3(0.2,0.2,0.2), g); - - float grainStrength = 0.02; - stackedColor = vec4( - mix(stackedColor.rgb, noiseColor, grainStrength), - stackedColor.a - ); - - gl_FragColor = stackedColor; - } -`, - uniforms: { - tDiffuse: { value: null as any }, - time: { value: 0.0 }, - resolution: { value: [70.0, 100.0] }, // Adjusted for Lygia noise scale - vignetteSmoothness: { value: 0 }, - vignetteRadius: { value: 1 }, - }, -} diff --git a/apps/www/components/LaunchWeek/14/effects/transparent-bloom.ts b/apps/www/components/LaunchWeek/14/effects/transparent-bloom.ts deleted file mode 100644 index b63fd6f11cb..00000000000 --- a/apps/www/components/LaunchWeek/14/effects/transparent-bloom.ts +++ /dev/null @@ -1,437 +0,0 @@ -/** - * ISC License - * - * Copyright 2021 mbalex99 - * - * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, - * provided that the above copyright notice and this permission notice appear in all copies. - * - * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE - * INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE - * FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM - * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, - * ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. - */ - -import { - AdditiveBlending, - Color, - LinearFilter, - MeshBasicMaterial, - RGBAFormat, - ShaderMaterial, - Texture, - UniformsUtils, - Vector2, - Vector3, - WebGLRenderer, - WebGLRenderTarget, -} from 'three' - -import { Pass } from 'three/examples/jsm/postprocessing/Pass' - -// typescript definitions doesn't have FullScreenQuad -//@ts-ignore -import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass' - -import { CopyShader } from 'three/examples/jsm/shaders/CopyShader.js' -import { LuminosityHighPassShader } from 'three/examples/jsm/shaders/LuminosityHighPassShader.js' - -/** - * Thanks to https://github.com/mrdoob/three.js/issues/14104#issuecomment-429664412 for this fragmentShaderfix - * - * UnrealBloomPass is inspired by the bloom pass of Unreal Engine. It creates a - * mip map chain of bloom textures and blurs them with different radii. Because - * of the weighted combination of mips, and because larger blurs are done on - * higher mips, this effect provides good quality and performance. - * - * Reference: - * - https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/ - */ -class TransparentBloomPass extends Pass { - strength: number - radius: number - threshold: number - resolution: Vector2 - clearColor: Color - renderTargetsHorizontal: any[] - renderTargetsVertical: any[] - nMips: number - renderTargetBright: WebGLRenderTarget - highPassUniforms: any - materialHighPassFilter: ShaderMaterial - separableBlurMaterials: any[] - compositeMaterial: ShaderMaterial - bloomTintColors: Vector3[] - copyUniforms: any - materialCopy: ShaderMaterial - _oldClearColor: Color - oldClearAlpha: number - basic: MeshBasicMaterial - fsQuad: FullScreenQuad - static BlurDirectionX: any - static BlurDirectionY: any - constructor(resolution: Vector2, strength: number, radius: number, threshold: number) { - super() - - this.strength = strength !== undefined ? strength : 1 - this.radius = radius - this.threshold = threshold - this.resolution = - resolution !== undefined ? new Vector2(resolution.x, resolution.y) : new Vector2(256, 256) - - // create color only once here, reuse it later inside the render function - this.clearColor = new Color(0, 0, 0) - - // render targets - const pars = { - minFilter: LinearFilter, - magFilter: LinearFilter, - format: RGBAFormat, - } - this.renderTargetsHorizontal = [] - this.renderTargetsVertical = [] - this.nMips = 5 - let resx = Math.round(this.resolution.x / 2) - let resy = Math.round(this.resolution.y / 2) - - this.renderTargetBright = new WebGLRenderTarget(resx, resy, pars) - this.renderTargetBright.texture.name = 'UnrealBloomPass.bright' - this.renderTargetBright.texture.generateMipmaps = false - - for (let i = 0; i < this.nMips; i++) { - const renderTargetHorizonal = new WebGLRenderTarget(resx, resy, pars) - - renderTargetHorizonal.texture.name = 'UnrealBloomPass.h' + i - renderTargetHorizonal.texture.generateMipmaps = false - - this.renderTargetsHorizontal.push(renderTargetHorizonal) - - const renderTargetVertical = new WebGLRenderTarget(resx, resy, pars) - - renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i - renderTargetVertical.texture.generateMipmaps = false - - this.renderTargetsVertical.push(renderTargetVertical) - - resx = Math.round(resx / 2) - - resy = Math.round(resy / 2) - } - - // luminosity high pass material - - if (LuminosityHighPassShader === undefined) - console.error('THREE.UnrealBloomPass relies on LuminosityHighPassShader') - - const highPassShader = LuminosityHighPassShader - this.highPassUniforms = UniformsUtils.clone(highPassShader.uniforms) - - this.highPassUniforms['luminosityThreshold'].value = threshold - this.highPassUniforms['smoothWidth'].value = 0.01 - - this.materialHighPassFilter = new ShaderMaterial({ - uniforms: this.highPassUniforms, - vertexShader: highPassShader.vertexShader, - fragmentShader: highPassShader.fragmentShader, - defines: {}, - }) - - // Gaussian Blur Materials - this.separableBlurMaterials = [] - const kernelSizeArray = [3, 5, 7, 9, 11] - resx = Math.round(this.resolution.x / 2) - resy = Math.round(this.resolution.y / 2) - - for (let i = 0; i < this.nMips; i++) { - this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i])) - - this.separableBlurMaterials[i].uniforms['texSize'].value = new Vector2(resx, resy) - - resx = Math.round(resx / 2) - - resy = Math.round(resy / 2) - } - - // Composite material - this.compositeMaterial = this.getCompositeMaterial(this.nMips) - this.compositeMaterial.uniforms['blurTexture1'].value = this.renderTargetsVertical[0].texture - this.compositeMaterial.uniforms['blurTexture2'].value = this.renderTargetsVertical[1].texture - this.compositeMaterial.uniforms['blurTexture3'].value = this.renderTargetsVertical[2].texture - this.compositeMaterial.uniforms['blurTexture4'].value = this.renderTargetsVertical[3].texture - this.compositeMaterial.uniforms['blurTexture5'].value = this.renderTargetsVertical[4].texture - this.compositeMaterial.uniforms['bloomStrength'].value = strength - this.compositeMaterial.uniforms['bloomRadius'].value = 0.1 - this.compositeMaterial.needsUpdate = true - - const bloomFactors = [1.0, 0.8, 0.6, 0.4, 0.2] - this.compositeMaterial.uniforms['bloomFactors'].value = bloomFactors - this.bloomTintColors = [ - new Vector3(1, 1, 1), - new Vector3(1, 1, 1), - new Vector3(1, 1, 1), - new Vector3(1, 1, 1), - new Vector3(1, 1, 1), - ] - this.compositeMaterial.uniforms['bloomTintColors'].value = this.bloomTintColors - - // copy material - if (CopyShader === undefined) { - console.error('THREE.UnrealBloomPass relies on CopyShader') - } - - const copyShader = CopyShader - - this.copyUniforms = UniformsUtils.clone(copyShader.uniforms) - this.copyUniforms['opacity'].value = 1.0 - - this.materialCopy = new ShaderMaterial({ - uniforms: this.copyUniforms, - vertexShader: copyShader.vertexShader, - fragmentShader: copyShader.fragmentShader, - blending: AdditiveBlending, - depthTest: false, - depthWrite: false, - transparent: true, - }) - - this.enabled = true - this.needsSwap = false - - this._oldClearColor = new Color() - this.oldClearAlpha = 1 - - this.basic = new MeshBasicMaterial() - - this.fsQuad = new FullScreenQuad(undefined) - } - - dispose() { - for (let i = 0; i < this.renderTargetsHorizontal.length; i++) { - this.renderTargetsHorizontal[i].dispose() - } - - for (let i = 0; i < this.renderTargetsVertical.length; i++) { - this.renderTargetsVertical[i].dispose() - } - - this.renderTargetBright.dispose() - } - - setSize(width: number, height: number) { - let resx = Math.round(width / 2) - let resy = Math.round(height / 2) - - this.renderTargetBright.setSize(resx, resy) - - for (let i = 0; i < this.nMips; i++) { - this.renderTargetsHorizontal[i].setSize(resx, resy) - this.renderTargetsVertical[i].setSize(resx, resy) - - this.separableBlurMaterials[i].uniforms['texSize'].value = new Vector2(resx, resy) - - resx = Math.round(resx / 2) - resy = Math.round(resy / 2) - } - } - - render( - renderer: WebGLRenderer, - writeBuffer: any, - readBuffer: { texture: Texture }, - deltaTime: any, - maskActive: any - ) { - renderer.getClearColor(this._oldClearColor) - this.oldClearAlpha = renderer.getClearAlpha() - const oldAutoClear = renderer.autoClear - renderer.autoClear = false - - renderer.setClearColor(this.clearColor, 0) - - if (maskActive) renderer.state.buffers.stencil.setTest(false) - - // Render input to screen - - if (this.renderToScreen) { - this.fsQuad.material = this.basic - this.basic.map = readBuffer.texture - - renderer.setRenderTarget(null) - renderer.clear() - this.fsQuad.render(renderer) - } - - // 1. Extract Bright Areas - - this.highPassUniforms['tDiffuse'].value = readBuffer.texture - this.highPassUniforms['luminosityThreshold'].value = this.threshold - this.fsQuad.material = this.materialHighPassFilter - - renderer.setRenderTarget(this.renderTargetBright) - renderer.clear() - this.fsQuad.render(renderer) - - // 2. Blur All the mips progressively - - let inputRenderTarget = this.renderTargetBright - - for (let i = 0; i < this.nMips; i++) { - this.fsQuad.material = this.separableBlurMaterials[i] - - this.separableBlurMaterials[i].uniforms['colorTexture'].value = inputRenderTarget.texture - this.separableBlurMaterials[i].uniforms['direction'].value = - TransparentBloomPass.BlurDirectionX - renderer.setRenderTarget(this.renderTargetsHorizontal[i]) - renderer.clear() - this.fsQuad.render(renderer) - - this.separableBlurMaterials[i].uniforms['colorTexture'].value = - this.renderTargetsHorizontal[i].texture - this.separableBlurMaterials[i].uniforms['direction'].value = - TransparentBloomPass.BlurDirectionY - renderer.setRenderTarget(this.renderTargetsVertical[i]) - renderer.clear() - this.fsQuad.render(renderer) - - inputRenderTarget = this.renderTargetsVertical[i] - } - - // Composite All the mips - - this.fsQuad.material = this.compositeMaterial - this.compositeMaterial.uniforms['bloomStrength'].value = this.strength - this.compositeMaterial.uniforms['bloomRadius'].value = this.radius - this.compositeMaterial.uniforms['bloomTintColors'].value = this.bloomTintColors - - renderer.setRenderTarget(this.renderTargetsHorizontal[0]) - renderer.clear() - this.fsQuad.render(renderer) - - // Blend it additively over the input texture - - this.fsQuad.material = this.materialCopy - this.copyUniforms['tDiffuse'].value = this.renderTargetsHorizontal[0].texture - - if (maskActive) renderer.state.buffers.stencil.setTest(true) - - if (this.renderToScreen) { - renderer.setRenderTarget(null) - this.fsQuad.render(renderer) - } else { - renderer.setRenderTarget(readBuffer as any) - this.fsQuad.render(renderer) - } - - // Restore renderer settings - - renderer.setClearColor(this._oldClearColor, this.oldClearAlpha) - renderer.autoClear = oldAutoClear - } - - getSeperableBlurMaterial(kernelRadius: number) { - return new ShaderMaterial({ - defines: { - KERNEL_RADIUS: kernelRadius, - SIGMA: kernelRadius, - }, - - uniforms: { - colorTexture: { value: null }, - texSize: { value: new Vector2(0.5, 0.5) }, - direction: { value: new Vector2(0.5, 0.5) }, - }, - - vertexShader: `varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); - }`, - - fragmentShader: `#include - varying vec2 vUv; - uniform sampler2D colorTexture; - uniform vec2 texSize; - uniform vec2 direction; - - float gaussianPdf(in float x, in float sigma) { - return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma; - } - void main() {\n\ - vec2 invSize = 1.0 / texSize;\ - float fSigma = float(SIGMA);\ - float weightSum = gaussianPdf(0.0, fSigma);\ - float alphaSum = 0.0;\ - vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;\ - for( int i = 1; i < KERNEL_RADIUS; i ++ ) {\ - float x = float(i);\ - float w = gaussianPdf(x, fSigma);\ - vec2 uvOffset = direction * invSize * x;\ - vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);\ - vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);\ - diffuseSum += (sample1.rgb + sample2.rgb) * w;\ - alphaSum += (sample1.a + sample2.a) * w;\ - weightSum += 2.0 * w;\ - }\ - gl_FragColor = vec4(diffuseSum/weightSum, alphaSum/weightSum);\n\ - }`, - }) - } - - getCompositeMaterial(nMips: number) { - return new ShaderMaterial({ - defines: { - NUM_MIPS: nMips, - }, - - uniforms: { - blurTexture1: { value: null }, - blurTexture2: { value: null }, - blurTexture3: { value: null }, - blurTexture4: { value: null }, - blurTexture5: { value: null }, - dirtTexture: { value: null }, - bloomStrength: { value: 1.0 }, - bloomFactors: { value: null }, - bloomTintColors: { value: null }, - bloomRadius: { value: 0.0 }, - }, - - vertexShader: `varying vec2 vUv; - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); - }`, - - fragmentShader: `varying vec2 vUv; - uniform sampler2D blurTexture1; - uniform sampler2D blurTexture2; - uniform sampler2D blurTexture3; - uniform sampler2D blurTexture4; - uniform sampler2D blurTexture5; - uniform sampler2D dirtTexture; - uniform float bloomStrength; - uniform float bloomRadius; - uniform float bloomFactors[NUM_MIPS]; - uniform vec3 bloomTintColors[NUM_MIPS]; - - float lerpBloomFactor(const in float factor) { - float mirrorFactor = 1.2 - factor; - return mix(factor, mirrorFactor, bloomRadius); - } - - void main() { - gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) + - lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) + - lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) + - lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) + - lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) ); - }`, - }) - } -} - -TransparentBloomPass.BlurDirectionX = new Vector2(1.0, 0.0) -TransparentBloomPass.BlurDirectionY = new Vector2(0.0, 1.0) - -export { TransparentBloomPass as UnrealBloomPass, TransparentBloomPass } diff --git a/apps/www/components/LaunchWeek/14/helpers.ts b/apps/www/components/LaunchWeek/14/helpers.ts deleted file mode 100644 index b9bbb677ddd..00000000000 --- a/apps/www/components/LaunchWeek/14/helpers.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { useRef, useEffect } from 'react' -import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' - -/** - * Helper to simplifies controlling requestAnimationFrame - * @param callback Animation callback function - * @returns Object with start and stop functions - */ -export const createThreeAnimation = (callback: (time?: number) => void) => { - const requestRef = { current: undefined } as { current: number | undefined } - const previousTimeRef = { current: undefined } as { current: number | undefined } - - const animate = (time: number) => { - if (previousTimeRef.current !== undefined) { - callback(time) - } - previousTimeRef.current = time - requestRef.current = requestAnimationFrame(animate) - } - - const start = () => { - requestRef.current = requestAnimationFrame(animate) - } - - const stop = () => { - if (requestRef.current) { - cancelAnimationFrame(requestRef.current) - } - } - - return { start, stop } -} - -/** - * Helper function to load a GLTF model - * @param url URL of the GLTF model to load - * @returns Promise that resolves with the loaded model - */ -export const loadGLTFModel = (url: string) => { - return new Promise((resolve, reject) => { - const loader = new GLTFLoader() - loader.load( - url, - (gltf) => { - resolve(gltf) - }, - undefined, - (error) => reject(error) - ) - }) -} - -/** - * Custom hook for Three.js setup and animation - * @param setupCallback Callback function for setting up the scene - * @returns Object with containerRef - */ -export const useThreeJS = ( - setupCallback: (container: HTMLElement) => { - cleanup: () => void - animate: (time?: number) => void - } -) => { - const containerRef = useRef(null) - - useEffect(() => { - if (!containerRef.current) return - - const container = containerRef.current - const renderer = setupCallback(container) - - // Set up animation loop - const { start, stop } = createThreeAnimation(renderer.animate.bind(renderer)) - start() - - // Cleanup on unmount - return () => { - stop() - renderer.cleanup() - } - }, [setupCallback]) - - return { containerRef } -} - -export function colorObjToRgb(color: { rgb: number; alpha: number }) { - return `rgb(${(color.rgb >> 16) & 255} ${(color.rgb >> 8) & 255} ${(color.rgb >> 0) & 255} / ${color.alpha})` -} diff --git a/apps/www/components/LaunchWeek/14/scenes/TicketScene.ts b/apps/www/components/LaunchWeek/14/scenes/TicketScene.ts deleted file mode 100644 index af785a1b8f1..00000000000 --- a/apps/www/components/LaunchWeek/14/scenes/TicketScene.ts +++ /dev/null @@ -1,1210 +0,0 @@ -import * as THREE from 'three' -import { colorObjToRgb, loadGLTFModel } from '../helpers' -import SceneRenderer, { BaseScene } from '../utils/SceneRenderer' -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass' -import { Camera, Euler, MathUtils, Scene, Vector3 } from 'three' -import { GlitchPass } from '../effects/glitch' -import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass' -import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader' -import { CRTShader } from '../effects/crt-shader' -import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass' -import { TransparentBloomPass } from '../effects/transparent-bloom' - -interface TicketSceneState { - visible: boolean - secret: boolean - platinum: boolean - frontside: boolean - ticketNumber: number - narrow: boolean - texts: { - username: string - seatCode: string - date: string - } -} - -interface TicketSceneOptions { - defaultVisible?: boolean - defaultSecret?: boolean - defaultPlatinum?: boolean - user: { - id?: string - name?: string - ticketNumber?: number - } - narrow?: boolean - onSeatChartButtonClicked?: () => void - onWebsiteButtonClicked?: () => void - onGoBackButtonClicked?: () => void -} - -type AvailableTextures = (typeof TicketScene)['TEXTURE_NAMES'][number] - -interface TextureDescriptor { - url: string - cachedData: THREE.Texture | null -} - -class TicketScene implements BaseScene { - raycaster = new THREE.Raycaster() - sceneUrl = '/images/launchweek/14/ticket-model.glb' - - textureImages = { - basic: { - back: { - url: '/images/launchweek/14/back-basic-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - front: { - url: '/images/launchweek/14/front-basic-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - - bgColor: { rgb: 0x202020, alpha: 1 }, - textColor: { rgb: 0xffffff, alpha: 1 }, - textDimmedColor: { rgb: 0x515151, alpha: 1 }, - textNeonColor: { rgb: 0xffffff, alpha: 1 }, - textNeonDimmedColor: { rgb: 0x515151, alpha: 1 }, - transparentBg: { rgb: 0x000000, alpha: 0 }, - }, - secret: { - back: { - url: '/images/launchweek/14/back-secret-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - front: { - url: '/images/launchweek/14/front-secret-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - seat: { - url: '', - cachedData: null, - } as TextureDescriptor, - bgColor: { rgb: 0x050505, alpha: 1 }, - textColor: { rgb: 0xffffff, alpha: 1 }, - textDimmedColor: { rgb: 0x515151, alpha: 1 }, - textNeonColor: { rgb: 0x2cf494, alpha: 1 }, - textNeonDimmedColor: { rgb: 0x12623b, alpha: 1 }, - transparentBg: { rgb: 0x2cf494, alpha: 0.4 }, - seatPath: new Path2D( - 'M0.824219 0.661133H41.2231C48.5923 0.661133 54.5703 6.63925 54.5703 14.0084V41.06C54.5703 48.4292 48.5923 54.4072 41.2231 54.4072H0.824219V0.661133Z' - ), - }, - platinum: { - back: { - url: '/images/launchweek/14/back-platinum-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - front: { - url: '/images/launchweek/14/front-platinum-ticket-texture.png', - cachedData: null, - } as TextureDescriptor, - - bgColor: { rgb: 0x050505, alpha: 1 }, - textColor: { rgb: 0xffc73a, alpha: 1 }, - textDimmedColor: { rgb: 0xffc73a, alpha: 1 }, - textNeonColor: { rgb: 0xffc73a, alpha: 1 }, - textNeonDimmedColor: { rgb: 0xffc73a, alpha: 1 }, - transparentBg: { rgb: 0xffc73a, alpha: 0.4 }, - }, - } - - typography = { - main: { - family: 'Departure Mono', - relativeSize: 100 / 1400, - }, - ticketNumber: { - family: 'Nippo-Variable', - weight: 400, - relativeSize: 125 / 1400, - }, - } - - texts = { - user: { - x: 367 / 2000, - y: 533 / 1400, - }, - date: { - x: 1185 / 2000, - y: 255 / 1400, - }, - ticketNumber: { - x: 368 / 2000, - y: 1077.69 / 1400, - }, - ticketNumberBack: { - x: 368 / 2000, - y: 1070 / 1400, - }, - seatStart: { - x: 561.89 / 2000, - y: 739.4 / 1400, - }, - seatPositions: { - x: [ - 0 / 2000, - 99.82 / 2000, - 199.77 / 2000, - 389.84 / 2000, - 488.05 / 2000, - 588.25 / 2000, - 688.43 / 2000, - 788.63 / 2000, - ], - y: [0 / 1400, 71.61 / 1400, 163.5 / 1400, 235.54 / 1400], - }, - } - - fonts: ConstructorParameters[] = [ - [ - 'Departure Mono', - 'url("/fonts/launchweek/14/DepartureMono-Regular.woff2") format("woff2")', - { - weight: '400', - style: 'normal', - }, - ], - [ - 'Nippo-Variable', - 'url("/fonts/launchweek/14/Nippo-Variable.woff2") format("woff2")', - { - weight: '400 700', - style: 'normal', - }, - ], - ] - - state: TicketSceneState - - resolutions = { - 0: { - ticketPosition: new Vector3(0, 0, -1.6), - ticketScale: new Vector3(0.55, 0.55, 0.55), - }, - - 480: { - ticketPosition: new Vector3(0, 0, -1.5), - ticketScale: new Vector3(0.65, 0.65, 0.65), - }, - - 768: { - ticketPosition: new Vector3(0, 0, -0.5), - ticketScale: new Vector3(0.65, 0.65, 0.65), - }, - - // 784: { - // ticketPosition: new Vector3(0, 0, -0.5), - // ticketScale: new Vector3(0.85, 0.85, 0.85), - // }, - - 1024: { - ticketPosition: new Vector3(0, 0, -0.5), - ticketScale: new Vector3(1, 1, 1), - }, - } - - narrowResolutions = { - 0: { - ticketPosition: new Vector3(0, 0, -1.6), - ticketScale: new Vector3(0.65, 0.65, 0.65), - }, - - 480: { - ticketPosition: new Vector3(0, 0, -1.5), - ticketScale: new Vector3(0.65, 0.65, 0.65), - }, - - 768: { - ticketPosition: new Vector3(0, 0, -0.5), - ticketScale: new Vector3(0.65, 0.65, 0.65), - }, - - // 784: { - // ticketPosition: new Vector3(0, 0, -0.5), - // ticketScale: new Vector3(0.85, 0.85, 0.85), - // }, - - 1024: { - ticketPosition: new Vector3(3.0, 0, 0), - ticketScale: new Vector3(1.2, 1.2, 1.2), - }, - - 1280: { - ticketPosition: new Vector3(4.0, 0, 0), - ticketScale: new Vector3(1.4, 1.4, 1.4), - }, - } - - private _internalState = { - naturalRotation: new Vector3(0, 0, Math.PI), - naturalPosition: new Vector3(0, 0, -0.5), - naturalScale: new Vector3(1, 1, 1), - - fontsLoaded: false, - loadedTextureType: null as 'basic' | 'secret' | 'platinum' | null, - effectsIntensity: 0, - } - - private _sceneConfig = { - camera: { - position: new Vector3(0, 10, 0), - rotation: new Euler(MathUtils.degToRad(-90), 0, 0), - fov: 30, - }, - } - - private _sceneRenderer: SceneRenderer | null = null - - private _ticket: THREE.Scene | null = null - private _modelRenderPass: RenderPass | null = null - private static TEXTURE_NAMES = [ - 'TicketFront', - 'TicketBack', - 'TicketEdge', - 'TicketFrontWebsiteButton', - 'TicketFrontSeatChartButton', - 'TicketBackGoBackButton', - 'TicketBackWebsiteButton', - ] as const - private static TEXTURE_PIXEL_DENSITY_FACTOR = 400 - private texturePlaneMapping: { [key in AvailableTextures]?: 'back' | 'front' | 'edge' } = { - TicketFront: 'front', - TicketBack: 'back', - TicketEdge: 'edge', - TicketFrontWebsiteButton: 'front', - TicketFrontSeatChartButton: 'front', - TicketBackGoBackButton: 'back', - TicketBackWebsiteButton: 'back', - } - - private _textureCanvases: { - [key in AvailableTextures]?: { canvas: HTMLCanvasElement; context: CanvasRenderingContext2D } - } = {} - - private _namedMeshes: { [key in AvailableTextures]?: THREE.Mesh } = {} - - private _bloomPass: TransparentBloomPass | null = null - private _glitchPass: GlitchPass | null = null - private _crtPass: ShaderPass | null = null - private _effectsEnabled = false - private _fxaaPass: ShaderPass | null = null - - constructor(private options: TicketSceneOptions) { - this.state = { - visible: options.defaultVisible ?? false, - secret: options.defaultSecret || false, - platinum: options.defaultPlatinum || false, - frontside: true, - ticketNumber: options.user.ticketNumber || 0, - narrow: Boolean(options.narrow), - texts: { - username: options.user.name ?? '', - date: 'MAR 31—APR 4', - // Start assigning seats from A001 - seatCode: (466561 + (options.user.ticketNumber || 0)).toString(36), - }, - } - } - - getId(): string { - return 'TicketScene' - } - - async setup(context: SceneRenderer): Promise { - this._sceneRenderer = context - - // Load fonts before loading the model - await this._loadFonts() - await this._preloadAllTextureSets() - - const resolutionDescriptor = this.getResolutionDescriptor(window.innerWidth) - - this._internalState.naturalPosition.set( - resolutionDescriptor.ticketPosition.x, - resolutionDescriptor.ticketPosition.y, - resolutionDescriptor.ticketPosition.z - ) - - this._internalState.naturalScale.set( - resolutionDescriptor.ticketScale.x, - resolutionDescriptor.ticketScale.y, - resolutionDescriptor.ticketScale.z - ) - - const gltf = await loadGLTFModel(this.sceneUrl) - - this._ticket = gltf.scene.getObjectByName('Plane') as unknown as Scene - - if (!this.state.visible) this._ticket.scale.set(0, 0, 0) - this._ticket.rotation.setFromVector3(this._internalState.naturalRotation) - this._ticket.position.set( - this._internalState.naturalPosition.x, - this._internalState.naturalPosition.y, - this._internalState.naturalPosition.z - ) - - this._setCamera(context.camera) - this._modelRenderPass = new RenderPass(gltf.scene as unknown as Scene, context.camera) - - // Set up post-processing effects but keep them disabled initially - this._setupPostProcessingEffects(context) - - // Important: Don't set clear values for the render pass - // Let the renderer handle clearing - - // Set renderer clear color to make background transparent - context.renderer.setClearColor(0x000000, 0) - - // Keep everything in linear space until the end of the pipeline - // Don't set outputColorSpace here - context.renderer.autoClear = false - - // Add ambient light with increased intensity - const ambientLight = new THREE.AmbientLight(0xffffff, 1.0) - this._ticket.add(ambientLight) - - // Add directional light - const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5) - directionalLight.position.set(5, 5, 5) - gltf.scene.add(directionalLight) - - // Add a point light to better illuminate the placeholder - const pointLight = new THREE.PointLight(0xffffff, 1.0) - pointLight.position.set(0, 0, 5) - this._ticket.add(pointLight) - - this._setupNamedObjects() - this._setupTextureCanvases() - await this._loadTextures() - - context.composer.addPass(this._modelRenderPass) - - this._fxaaPass = new ShaderPass(FXAAShader) - this._fxaaPass.material.uniforms['resolution'].value.x = 1 / (window.innerWidth * 2) - this._fxaaPass.material.uniforms['resolution'].value.y = 1 / (window.innerHeight * 2) - - // Add the effects passes but with zero intensity - if (this._glitchPass) context.composer.addPass(this._glitchPass) - if (this._crtPass) context.composer.addPass(this._crtPass) - if (this._bloomPass) context.composer.addPass(this._bloomPass) - context.composer.addPass(new OutputPass()) - - context.composer.addPass(this._fxaaPass) - - return gltf.scene as unknown as Scene - } - - update(context: SceneRenderer, time?: number): void { - // Clear the renderer with transparent background before rendering - context.renderer.clear(true, true, true) - - const mainRenderPass = context.composer.passes[0] - if (mainRenderPass instanceof RenderPass) { - this._updateNaturalPosition() - this._updateTicketSize() - this._updateTicketPosition() - if (this._ticket) this._updateTicketToFollowMouse(this._ticket, time) - this._updatePasses(time) - } - } - - cleanup(): void {} - - resize(_ev: UIEvent): void { - const resolutionDescriptor = this.getResolutionDescriptor(window.innerWidth) - - this._internalState.naturalPosition.set( - resolutionDescriptor.ticketPosition.x, - resolutionDescriptor.ticketPosition.y, - resolutionDescriptor.ticketPosition.z - ) - - this._internalState.naturalScale.set( - resolutionDescriptor.ticketScale.x, - resolutionDescriptor.ticketScale.y, - resolutionDescriptor.ticketScale.z - ) - - if (this._sceneRenderer && this._fxaaPass) { - this._fxaaPass.material.uniforms['resolution'].value.x = 1 / (window.innerWidth * 2) - this._fxaaPass.material.uniforms['resolution'].value.y = 1 / (window.innerHeight * 2) - } - - return - } - - showFrontSide() { - this.state.frontside = true - } - - showBackSide() { - this.state.frontside = false - } - - async upgradeToSecret() { - this.state.secret = true - await this._loadTextures() - // Start enabling effects gradually - this._enableSecretEffects() - } - - async upgradeToPlatinum() { - this.state.platinum = true - await this._loadTextures() - } - - // In your click method - click(_e: MouseEvent) { - if (!this._sceneRenderer || !this._sceneRenderer.mousePositionState?.isWithinContainer) return - - const mousePosition = this._sceneRenderer.mousePositionState - - this.raycaster.setFromCamera( - new THREE.Vector2(mousePosition.containerX, mousePosition.containerY), - this._sceneRenderer.camera - ) - - // Get all meshes to check for intersection - const meshes = Object.values(this._namedMeshes).filter(Boolean) as THREE.Mesh[] - - // Check for intersections - const intersects = this.raycaster.intersectObjects(meshes, false) - // - for (const intersect of intersects) { - const clickedMesh = intersect.object as THREE.Mesh - - // Handle click based on which mesh was clicked - if (clickedMesh === this._namedMeshes.TicketFrontWebsiteButton) { - this.options.onWebsiteButtonClicked?.() - // Add your action here - } else if (clickedMesh === this._namedMeshes.TicketFrontSeatChartButton) { - this.options.onSeatChartButtonClicked?.() - // Add your action here - } else if (clickedMesh === this._namedMeshes.TicketBackGoBackButton) { - this.options.onGoBackButtonClicked?.() - } else if (clickedMesh === this._namedMeshes.TicketBackWebsiteButton) { - this.options.onWebsiteButtonClicked?.() - // Add your action here - } - } - } - - setVisible(value: boolean) { - this.state.visible = value - } - - setTicketNumber(ticketNumber: number) { - this.state.ticketNumber = ticketNumber - this.state.texts.seatCode = (466561 + ticketNumber).toString(36) - } - - setUserName(name: string) { - this.state.texts.username = name - } - - reloadTextures() { - this._loadTextures(true) - } - - devicePixelRatioChanged(newPixelRatio: number, oldPixelRatio: number): void { - // Update FXAA pass resolution values if it exists - if (this._fxaaPass) { - this._fxaaPass.material.uniforms['resolution'].value.x = - 1 / (window.innerWidth * newPixelRatio) - this._fxaaPass.material.uniforms['resolution'].value.y = - 1 / (window.innerHeight * newPixelRatio) - } - - // Regenerate texture canvases with new pixel ratio - this._setupTextureCanvases() - - // Reload textures to apply new pixel ratio - this._loadTextures(true) - - // Update bloom pass resolution if it exists - if (this._bloomPass && this._sceneRenderer) { - this._bloomPass.resolution.set( - this._sceneRenderer.container.clientWidth * newPixelRatio, - this._sceneRenderer.container.clientHeight * newPixelRatio - ) - } - } - - private _enableSecretEffects() { - if (this._effectsEnabled) return // Already enabled - - this._effectsEnabled = true - this._internalState.effectsIntensity = 0 - - // Enable all passes - if (this._glitchPass) this._glitchPass.enabled = true - if (this._crtPass) this._crtPass.enabled = true - if (this._bloomPass) this._bloomPass.enabled = true - } - - private _updatePasses(time?: number) { - if (!this._sceneRenderer) { - throw new Error('SceneRenderer not loaded') - } - - const mousePosition = this._sceneRenderer.mousePositionState - - // Update time-based uniforms for shader passes - if (this._crtPass && this._crtPass.uniforms['time']) { - this._crtPass.uniforms['time'].value = time - } - - // Update effect intensities if effects are enabled - if (this._effectsEnabled) { - // Gradually increase effect intensity over time - this._internalState.effectsIntensity = Math.min( - this._internalState.effectsIntensity + 0.01, - 1.0 - ) - - // Update glitch pass intensity - if (this._glitchPass) { - const glitchIntensity = mousePosition?.mouseIntensity ?? 1 - this._glitchPass.setIntensity(glitchIntensity * this._internalState.effectsIntensity * 4) - } - - // Update CRT shader intensity - if (this._crtPass && this._crtPass.uniforms['intensity']) { - this._crtPass.uniforms['intensity'].value = this._internalState.effectsIntensity * 1 // Scale to desired max (0.3) - } - - // Update bloom pass parameters based on secret version state - if (this._bloomPass) { - if (this.state.secret) { - // Gradually increase bloom strength from 0 to 3 without affecting transparency - const targetStrength = 3.0 - const currentStrength = this._bloomPass.strength || 0 - const newStrength = currentStrength + (targetStrength - currentStrength) * 0.05 - this._bloomPass.strength = newStrength - - // Gradually decrease threshold for more bloom - const targetThreshold = 0.2 - const currentThreshold = this._bloomPass.threshold || 1.0 - const newThreshold = currentThreshold - (currentThreshold - targetThreshold) * 0.05 - this._bloomPass.threshold = newThreshold - } else { - // Gradually reset bloom to initial values - this._bloomPass.strength = Math.max(0, (this._bloomPass.strength || 0) - 0.05) - this._bloomPass.threshold = Math.min(1.0, (this._bloomPass.threshold || 0.2) + 0.05) - } - } - } else { - // If effects are disabled, ensure all intensities are zero - this._internalState.effectsIntensity = 0 - - if (this._glitchPass) this._glitchPass.setIntensity(0) - if (this._crtPass && this._crtPass.uniforms['intensity']) - this._crtPass.uniforms['intensity'].value = 0 - if (this._bloomPass) { - this._bloomPass.strength = 0 - this._bloomPass.threshold = 1.0 - this._bloomPass.radius = 0.5 - } - } - } - - private _setupPostProcessingEffects(context: SceneRenderer) { - // Create glitch pass and disable it initially - const glitchPass = new GlitchPass(521) - glitchPass.enabled = false // Start disabled - glitchPass.uniforms.col_s.value = 0 - glitchPass.setIntensity(0) // Start with zero intensity - this._glitchPass = glitchPass - - // Create CRT pass with initial zero intensity - const crtPass = new ShaderPass(CRTShader) - crtPass.enabled = false // Start disabled - crtPass.uniforms.intensity.value = 0 // Start with zero intensity - this._crtPass = crtPass - - if (!this._ticket) throw new Error('Ticket not loaded') - if (!this._sceneRenderer) throw new Error('SceneRenderer not loaded') - - // Create bloom pass with initial zero intensity - const bloomPass = new TransparentBloomPass( - new THREE.Vector2(context.container.clientWidth, context.container.clientHeight), - 0, // Initial strength (0-3) - 0.5, // Initial radius - 1.0 // Initial threshold (higher = less bloom) - ) - - bloomPass.enabled = false // Start disabled - this._bloomPass = bloomPass - } - - private _updateTicketToFollowMouse(scene: THREE.Scene, dt?: number) { - if (!this._sceneRenderer) { - throw new Error('SceneRenderer not loaded') - } - - const mousePosition = this._sceneRenderer.mousePositionState - - if (mousePosition.isWithinContainer) { - // Get the scene's current position in world space - const scenePosition = new THREE.Vector3() - scene.getWorldPosition(scenePosition) - - // Convert scene position to normalized device coordinates (NDC) - const sceneNDC = scenePosition.clone() - sceneNDC.project(this._sceneRenderer.camera) - - // Calculate mouse position relative to the scene's position - // This gives us a vector from the scene center to the mouse - const relativeMouseX = mousePosition.containerX - sceneNDC.x - const relativeMouseY = mousePosition.containerY - sceneNDC.y - - // Scale the rotation based on distance from scene center - // The further from center, the more rotation - const distanceScale = Math.min( - 1.0, - Math.sqrt(relativeMouseX * relativeMouseX + relativeMouseY * relativeMouseY) * 2 - ) - - // Calculate rotation angles with distance scaling - // Limit the rotation angles to a reasonable range - const targetRotationX = MathUtils.clamp(relativeMouseY * -0.2 * distanceScale, -0.3, 0.3) - const targetRotationZ = MathUtils.clamp(relativeMouseX * -0.3 * distanceScale, -0.4, 0.4) - - // Apply smooth rotation with a smaller lerp factor - const lerpFactor = Math.min(dt ?? 0.05, 0.05) - scene.rotation.x = MathUtils.lerp( - scene.rotation.x, - this._internalState.naturalRotation.x + targetRotationX, - lerpFactor - ) - scene.rotation.z = MathUtils.lerp( - scene.rotation.z, - this._internalState.naturalRotation.z + targetRotationZ, - lerpFactor - ) - } else { - // Return to neutral position more slowly - const lerpFactor = Math.min(dt ?? 0.03, 0.03) - scene.rotation.x = MathUtils.lerp( - scene.rotation.x, - this._internalState.naturalRotation.x, - lerpFactor - ) - scene.rotation.z = MathUtils.lerp( - scene.rotation.z, - this._internalState.naturalRotation.z, - lerpFactor - ) - } - } - - private _updateNaturalPosition() { - if (this.state.frontside) { - this._internalState.naturalRotation.set(0, 0, Math.PI) - } else { - this._internalState.naturalRotation.set(0, 0, 0) - } - } - - private _setCamera(camera: Camera) { - camera.position.copy(this._sceneConfig.camera.position) - camera.rotation.copy(this._sceneConfig.camera.rotation) - - if (camera instanceof THREE.PerspectiveCamera) { - camera.fov = this._sceneConfig.camera.fov - camera.updateProjectionMatrix() - } - } - - _invisibleScaleVector = new Vector3(0, 0, 0) - - private _updateTicketSize() { - if (this.state.visible) { - this._ticket?.scale.lerp(this._internalState.naturalScale, 0.1) - } else { - this._ticket?.scale.lerp(this._invisibleScaleVector, 0.1) - } - - // Update world matrices after scaling to ensure raycaster works correctly - this._ticket?.updateMatrixWorld(true) - - // Update bounding boxes for all meshes after scaling - this._updateMeshBoundingBoxes() - } - - private _updateTicketPosition() { - this._ticket?.position.lerp(this._internalState.naturalPosition, 0.01) - } - - private _updateMeshBoundingBoxes() { - // Update bounding boxes for all named meshes - for (const meshName in this._namedMeshes) { - const mesh = this._namedMeshes[meshName as AvailableTextures] - if (mesh && mesh.geometry) { - // Ensure the geometry has a bounding box - if (!mesh.geometry.boundingBox) { - mesh.geometry.computeBoundingBox() - } - } - } - } - - private _setupTextureCanvases() { - for (const [name, mesh] of Object.entries(this._namedMeshes)) { - const planeType = this.texturePlaneMapping[name as AvailableTextures] - let referenceMesh: THREE.Mesh | undefined - if (planeType === 'front') { - referenceMesh = this._namedMeshes.TicketFront - } else if (planeType === 'back') { - referenceMesh = this._namedMeshes.TicketBack - } else if (planeType === 'edge') { - referenceMesh = this._namedMeshes.TicketEdge - } - - if (!referenceMesh) { - throw new Error(`Could not find reference mesh for texture ${name}`) - } - - const localBox = new THREE.Box3().setFromObject(referenceMesh) - const localSize = localBox.getSize(new THREE.Vector3()) - - // Get world scale - const worldScale = new THREE.Vector3() - mesh.matrixWorld.decompose(new THREE.Vector3(), new THREE.Quaternion(), worldScale) - - // Apply world scale to get world size - const worldSize = new THREE.Vector3( - localSize.x / Math.abs(worldScale.x), - localSize.y / Math.abs(worldScale.y), - localSize.z / Math.abs(worldScale.z) - ) - - const canvas = document.createElement('canvas') - const canvasWidth = worldSize.x * TicketScene.TEXTURE_PIXEL_DENSITY_FACTOR - const canvasHeight = Math.floor(canvasWidth * (localSize.z / localSize.x)) // Maintain aspect ratio - - canvas.width = canvasWidth - canvas.height = canvasHeight - - // Get canvas context and set up text rendering - const context = canvas.getContext('2d') - - if (!context) { - throw new Error(`Could not get 2D context for text "${name}"`) - } - - this._textureCanvases[name as AvailableTextures] = { - canvas, - context, - } - } - } - - private _setupNamedObjects() { - const mesh = this._ticket - - if (!mesh) { - throw new Error(`Ticket mesh not loaded`) - } - - for (const part of mesh.children) { - if (!(part instanceof THREE.Mesh)) { - continue - } - - if (!(part.material instanceof THREE.Material)) { - console.warn(`Material is not an instance of THREE.Material. Got:`, part.material) - continue - } - - if ((TicketScene.TEXTURE_NAMES as readonly string[]).includes(part.material.name)) { - part.material.dithering = true - this._namedMeshes[part.material.name as AvailableTextures] = part - } else { - console.warn(`Mesh ${part.material.name} is not a named texture`) - } - } - } - - private async _loadTextures(force?: boolean) { - // Load textures for each named mesh - // Create a texture loader - const textureLoader = new THREE.TextureLoader() - const loadingPromises: Promise[] = [] - - const textureSetKey = this.state.platinum ? 'platinum' : this.state.secret ? 'secret' : 'basic' - - if (!force) { - if (this._internalState.loadedTextureType === textureSetKey) { - return - } - } - - this._internalState.loadedTextureType = textureSetKey - - // Determine which texture set to use based on ticket type - const textureSet = this.textureImages[textureSetKey] - - // Map of which image to use for each mesh - const textureImageMap: Partial> = { - TicketFront: textureSet.front, - TicketBack: textureSet.back, - TicketFrontWebsiteButton: textureSet.front, - TicketBackGoBackButton: textureSet.back, - TicketFrontSeatChartButton: textureSet.front, - TicketBackWebsiteButton: textureSet.back, - // Add mappings for buttons if they have separate textures - // Or they can reuse the front/back textures with different UV coordinates - } - - const allMeshes = Object.entries(this._namedMeshes) - // Preload all textures and prepare canvases - for (const [name, mesh] of allMeshes) { - if (!mesh || !(mesh instanceof THREE.Mesh)) { - console.warn(`Mesh ${name} is not a THREE.Mesh`) - continue - } - if (!mesh.material || !(mesh.material instanceof THREE.MeshStandardMaterial)) { - console.warn(`Mesh ${name} has no material or is not a MeshStandardMaterial`) - continue - } - - const textureKey = name as AvailableTextures - const textureCanvas = this._textureCanvases[textureKey] - - if (!textureCanvas) { - console.warn(`No texture canvas found for texture ${textureKey}`) - continue - } - const { canvas, context } = textureCanvas - - // If we have an image for this texture - const textureDescriptor = textureImageMap[textureKey] - if (!textureDescriptor) { - continue - } - - if (textureDescriptor.cachedData === null) { - // Create a loading promise for this texture - await new Promise((resolve) => { - textureLoader.load( - textureDescriptor.url, - (loadedTexture) => { - // Create an image from the loaded texture - textureDescriptor.cachedData = loadedTexture - - // Fix: Set the correct color space to match the original model - loadedTexture.colorSpace = THREE.SRGBColorSpace - - resolve() - }, - undefined, // onProgress callback - (error) => { - console.error(`Error loading texture ${textureDescriptor.url}:`, error) - resolve() // Resolve anyway to not block other textures - } - ) - }) - } - - if (!textureDescriptor.cachedData) { - throw new Error(`Failed to load texture ${textureDescriptor.url}`) - } - - context.drawImage(textureDescriptor.cachedData.image, 0, 0, canvas.width, canvas.height) - - // For meshes without base images, just draw custom content - this._drawCustomContentOnTexture(textureKey, context, canvas) - - const texture = new THREE.CanvasTexture(canvas) - texture.flipY = false - // Set the correct color space for the texture - texture.colorSpace = THREE.SRGBColorSpace - texture.needsUpdate = true - - // Fix: Preserve the original material properties - const originalMaterial = mesh.material - const originalColor = mesh.material.color.clone() - const originalEmissive = mesh.material.emissive ? mesh.material.emissive.clone() : null - const originalEmissiveIntensity = mesh.material.emissiveIntensity - - mesh.material.map = texture - mesh.material.color = originalColor - if (originalEmissive) mesh.material.emissive = originalEmissive - if (originalEmissiveIntensity) mesh.material.emissiveIntensity = originalEmissiveIntensity - - // Ensure material properties are preserved - mesh.material.needsUpdate = true - } - - // Return a promise that resolves when all textures are loaded - return Promise.all(loadingPromises) - } - - // Method to draw custom content on each texture type - private _drawCustomContentOnTexture( - textureKey: AvailableTextures, - context: CanvasRenderingContext2D, - canvas: HTMLCanvasElement - ) { - // Use fallback fonts if custom fonts failed to load - const mainFontFamily = this._internalState.fontsLoaded - ? this.typography.main.family - : 'monospace' - - const ticketNumberFontFamily = this._internalState.fontsLoaded - ? this.typography.ticketNumber.family - : 'monospace' - - // Get the appropriate color scheme based on ticket type - const colors = this.state.platinum - ? this.textureImages.platinum - : this.state.secret - ? this.textureImages.secret - : this.textureImages.basic - - const isNeon = this.state.secret || this.state.platinum - - function getWrappedText({ - text, - maxChars, - maxLines, - }: { - text: string - maxChars: number - maxLines: number - }): string[] { - const lines: string[] = [] - let remainingText = text.trim() - - for (let i = 0; i < maxLines && remainingText.length > 0; i++) { - // If remaining text fits in one line - if (remainingText.length <= maxChars) { - lines.push(remainingText) - break - } - - // Check if we're on the last allowed line - if (i === maxLines - 1) { - // Add ellipsis for truncated text - lines.push(remainingText.substring(0, maxChars - 3) + '...') - break - } - - // Try to find a space to break at - let breakPos = remainingText.lastIndexOf(' ', maxChars) - - // If no space found or it's too early in the string, break at maxChars - if (breakPos <= 0 || breakPos < maxChars / 3) { - breakPos = maxChars - } - - // Add the line and update remaining text - lines.push(remainingText.substring(0, breakPos).trim()) - remainingText = remainingText.substring(breakPos).trim() - } - - return lines - } - - switch (textureKey) { - case 'TicketFront': { - const fontSize = this.typography.main.relativeSize * canvas.height - const usernameLines = getWrappedText({ - text: this.state.texts.username, - maxChars: 18, - maxLines: 4, - }) - - context.font = `400 ${fontSize}px ${mainFontFamily}` - context.textAlign = 'left' - context.textBaseline = 'top' - const lineHeight = fontSize * 1.2 - const padding = 4 - - // Calculate max line width for consistent background width - const maxLineWidth = Math.max( - ...usernameLines.map((line) => context.measureText(line).width) - ) - - // Draw username lines with background - usernameLines.forEach((line, index) => { - const x = this.texts.user.x * canvas.width - const y = this.texts.user.y * canvas.height + index * lineHeight - - const textWidth = context.measureText(line).width - const isLastLine = index === usernameLines.length - 1 - const backgroundWidth = isLastLine ? textWidth : maxLineWidth - - // Draw main background - context.fillStyle = colorObjToRgb(colors.bgColor) - context.fillRect( - x - padding, - y - padding, - backgroundWidth + padding * 2, - fontSize + padding * 2 - ) - - // Draw secondary background (glow effect) - context.fillStyle = colorObjToRgb(colors.transparentBg) - context.fillRect(x - 287, y + 4, backgroundWidth + 280, fontSize - 24) - - // Draw text - context.fillStyle = colorObjToRgb(isNeon ? colors.textNeonColor : colors.textColor) - context.fillText(line, x, y) - }) - - context.fillStyle = colorObjToRgb(isNeon ? colors.textDimmedColor : colors.textColor) - context.fillText( - this.state.texts.date, - this.texts.date.x * canvas.width, - this.texts.date.y * canvas.height - ) - - context.fillStyle = colorObjToRgb(isNeon ? colors.textNeonColor : colors.textDimmedColor) - const ticketNumberFontSize = this.typography.ticketNumber.relativeSize * canvas.height - context.font = `${this.typography.ticketNumber.weight} ${ticketNumberFontSize}px ${ticketNumberFontFamily}` - context.fillText( - this.state.texts.seatCode.toUpperCase(), - this.texts.ticketNumber.x * canvas.width, - this.texts.ticketNumber.y * canvas.height - ) - break - } - case 'TicketBack': { - context.textAlign = 'left' - context.textBaseline = 'top' - - const fontSize = this.typography.main.relativeSize * canvas.height - context.font = `400 ${fontSize}px ${mainFontFamily}` - context.fillStyle = colorObjToRgb(isNeon ? colors.textDimmedColor : colors.textColor) - context.fillText( - this.state.texts.date, - this.texts.date.x * canvas.width, - this.texts.date.y * canvas.height - ) - - context.fillStyle = colorObjToRgb(isNeon ? colors.textNeonColor : colors.textColor) - - // Draw ticket number with different font - const ticketNumberFontSize = this.typography.ticketNumber.relativeSize * canvas.height - context.font = `${this.typography.ticketNumber.weight} ${ticketNumberFontSize}px ${ticketNumberFontFamily}` - context.fillText( - this.state.texts.seatCode.toUpperCase(), - this.texts.ticketNumberBack.x * canvas.width, - this.texts.ticketNumberBack.y * canvas.height - ) - - const seatCoord = this.state.ticketNumber % 32 - const seatCol = seatCoord % 8 - const seatRow = Math.floor(seatCoord / 8) - - context.fillStyle = colorObjToRgb(colors.textNeonColor) - - // Save the current context state - context.save() - // Translate the context based on seat coordinates - // Adjust these multipliers to control spacing between seats - context.translate( - this.texts.seatStart.x * canvas.width + - (this.texts.seatPositions.x[seatCol] ?? 0) * canvas.width, - this.texts.seatStart.y * canvas.height + - (this.texts.seatPositions.y[seatRow] ?? 0) * canvas.height - ) - // Fill the path at the new position - context.fill(this.textureImages.secret.seatPath) - // Restore the context to its original state - context.restore() - - break - } - // Handle other texture types as needed - case 'TicketFrontWebsiteButton': - case 'TicketFrontSeatChartButton': - case 'TicketBackGoBackButton': - case 'TicketBackWebsiteButton': - // These might not need custom content if the base image is sufficient - break - } - } - - private async _loadFonts(): Promise { - try { - // Define the fonts to load - const fontFaces = this.fonts.map((f) => new FontFace(...f)) - // Load all fonts - await Promise.all( - fontFaces.map(async (font) => { - const loadedFont = await font.load() - // Add the loaded font to the document - document.fonts.add(loadedFont) - return loadedFont - }) - ) - - // All fonts loaded successfully - this._internalState.fontsLoaded = true - } catch (error) { - // Handle font loading errors - console.error('Failed to load fonts:', error) - // Still continue to not block rendering, but with a warning - this._internalState.fontsLoaded = false - } - } - - private async _preloadAllTextureSets() { - const textureLoader = new THREE.TextureLoader() - const allSets = ['basic', 'secret', 'platinum'] as const - - let promises: Promise[] = [] - for (const set of allSets) { - const textureSet = this.textureImages[set] - if (textureSet.front.cachedData === null) { - const promise = new Promise((resolve, reject) => { - textureLoader.load( - textureSet.front.url, - (texture) => { - textureSet.front.cachedData = texture - resolve() - }, - undefined, - reject - ) - }) - promises.push(promise) - } - if (textureSet.back.cachedData === null) { - const promise = new Promise((resolve, reject) => { - textureLoader.load( - textureSet.back.url, - (texture) => { - textureSet.back.cachedData = texture - resolve() - }, - undefined, - reject - ) - }) - - promises.push(promise) - } - } - - await Promise.all(promises) - } - - private getResolutionDescriptor(resolution: number) { - const resolutionBase = this.state.narrow ? this.narrowResolutions : this.resolutions - const resolutions = Object.keys(resolutionBase).map(Number) - const closestResolution = resolutions.reduce((prev, curr) => - resolution - curr >= 0 && resolution - curr < resolution - prev ? curr : prev - ) as keyof typeof this.resolutions - - return resolutionBase[closestResolution] - } -} - -export default TicketScene diff --git a/apps/www/components/LaunchWeek/14/utils/SceneRenderer.ts b/apps/www/components/LaunchWeek/14/utils/SceneRenderer.ts deleted file mode 100644 index bccfa39ec52..00000000000 --- a/apps/www/components/LaunchWeek/14/utils/SceneRenderer.ts +++ /dev/null @@ -1,295 +0,0 @@ -import { - ColorManagement, - HalfFloatType, - PerspectiveCamera, - Scene, - SRGBColorSpace, - WebGLRenderer, - WebGLRenderTarget, -} from 'three' -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer' - -export interface MousePositionState { - clientX: number - clientY: number - isWithinContainer: boolean - containerX: number - containerY: number - mouseIntensity: number -} - -export interface BaseScene { - getId(): string - /** - * Initialize the scene with the given context - */ - setup(context: SceneRenderer): Promise - - /** - * Update the scene for each animation frame - */ - update(context: SceneRenderer, dt?: number): void - - /** - * Clean up resources when the scene is destroyed - */ - cleanup(): void - - resize(ev: UIEvent): void - - /** - * Handle device pixel ratio changes - */ - devicePixelRatioChanged?(newPixelRatio: number, oldPixelRatio: number): void -} - -class SceneRenderer { - renderer: WebGLRenderer - composer: EffectComposer - camera: PerspectiveCamera - mainThreeJsScene: Scene | null = null - activeScenes: BaseScene[] = [] - cachedContainerBBox: DOMRect - mousePositionState: MousePositionState - mouseIntensityDecay = 0.98 - mouseIntensityGainRate = 0.003 - currentPixelRatio: number - - private _resizeHandler: ((ev: UIEvent) => void) | null = null - private _mouseMoveHandler: ((ev: MouseEvent) => void) | null = null - private _mediaQueryListHandler: ((ev: MediaQueryListEvent) => void) | null = null - private _isDisposed = false - private _isInitialized = false - - constructor( - public container: HTMLElement, - private waitFor?: { init: Promise; renderer: SceneRenderer }[], - private uuid?: string - ) { - this.renderer = new WebGLRenderer({ antialias: true, alpha: true }) - this.composer = new EffectComposer(this.renderer) - - this.camera = new PerspectiveCamera( - 75, - this.container.clientWidth / this.container.clientHeight, - 0.1, - 1000 - ) - - this.mousePositionState = { - clientX: 0, - clientY: 0, - isWithinContainer: false, - containerX: 0, - containerY: 0, - mouseIntensity: 0, - } - - this.cachedContainerBBox = this.container.getBoundingClientRect() - this.currentPixelRatio = window.devicePixelRatio - } - - async init(sceneInitializer: () => Promise) { - // console.log('SCENE RENDERER: Init call', this.waitFor?.length, this.uuid) - await Promise.allSettled( - this.waitFor?.filter((t) => t.renderer !== this).map((t) => t.init) || [] - ) - - if (this._isDisposed) { - // console.log('SCENE RENDERER: Already disposed before sceneInitializer', this.uuid) - return - } - - // console.log('SCENE RENDERER: Waited for all pending inits', this.waitFor?.length, this.uuid) - - await sceneInitializer() - - if (this._isDisposed) { - // console.log('SCENE RENDERER: Already disposed after sceneInitializer', this.uuid) - return - } - - this.renderer.setSize(this.container.clientWidth, this.container.clientHeight) - this.renderer.setPixelRatio(window.devicePixelRatio) - this.renderer.setClearColor(0x000000, 0) // Set transparent background - this.renderer.autoClear = false // Prevent automatic clearing - this.renderer.outputColorSpace = SRGBColorSpace - ColorManagement.enabled = true - - // Initialize composer with correct size and pixel ratio - this.composer.setSize(this.container.clientWidth, this.container.clientHeight) - this.composer.setPixelRatio(window.devicePixelRatio) - - this.container.appendChild(this.renderer.domElement) - - this._resizeHandler = this._resize.bind(this) - window.addEventListener('resize', this._resizeHandler) - - this._mouseMoveHandler = this._updateMousePosition.bind(this) - window.addEventListener('mousemove', this._mouseMoveHandler) - - // Disable it since it brakes Chrome browser - // // Add device pixel ratio change listener - // this._mediaQueryListHandler = this._handleDevicePixelRatioChange.bind(this) - // window - // .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`) - // .addEventListener('change', this._mediaQueryListHandler) - } - - async activateScene(scene: BaseScene, main?: boolean) { - if (this._isDisposed) { - // console.log('SCENE RENDERER: Already disposed before activateScene', this.uuid) - return - } - - const threeScene = await scene.setup(this) - - if (this._isDisposed) { - // console.log('SCENE RENDERER: Already disposed after activateScene', this.uuid) - return - } - - if (main && threeScene) { - this.mainThreeJsScene = threeScene - } - - const newId = scene.getId() - const existingSceneId = this.activeScenes.findIndex((s) => s.getId() === newId) - if (existingSceneId > -1) { - const sceneToRemove = this.activeScenes[existingSceneId] - this.activeScenes[existingSceneId] = scene - sceneToRemove.cleanup() - } else { - this.activeScenes.push(scene) - } - } - - animate(time?: number) { - // Clear the renderer before rendering - this.renderer.clear() - - this._decayMouseIntensity() - - for (const activeScene of this.activeScenes) { - activeScene.update(this, time) - } - this.composer.render(time) - } - - cleanup() { - // console.log('SCENE RENDERER: Cleanup', this.uuid) - - this._isDisposed = true - this.composer.dispose() - this.renderer.dispose() - - try { - this.container.removeChild(this.renderer.domElement) - } catch (e) { - console.warn(e) - } - - if (this._resizeHandler) { - window.removeEventListener('resize', this._resizeHandler) - this._resizeHandler = null - } - - if (this._mouseMoveHandler) { - window.removeEventListener('mousemove', this._mouseMoveHandler) - this._mouseMoveHandler = null - } - - if (this._mediaQueryListHandler) { - window - .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`) - .removeEventListener('change', this._mediaQueryListHandler) - this._mediaQueryListHandler = null - } - - if (this.waitFor) { - // Mutate array in place instead of replacing reference - this.waitFor.splice( - 0, - this.waitFor.length, - ...this.waitFor.filter((t) => t.renderer === this) - ) - } - } - - private _resize(ev: UIEvent) { - this.camera.aspect = this.container.clientWidth / this.container.clientHeight - this.camera.updateProjectionMatrix() - this.renderer.setSize(this.container.clientWidth, this.container.clientHeight) - this.composer.setSize(this.container.clientWidth, this.container.clientHeight) - this.cachedContainerBBox = this.container.getBoundingClientRect() - - for (const activeScene of this.activeScenes) { - activeScene.resize(ev) - } - } - - private _handleDevicePixelRatioChange(ev: MediaQueryListEvent) { - const oldPixelRatio = this.currentPixelRatio - const newPixelRatio = window.devicePixelRatio - - // Update renderer and composer pixel ratio - this.renderer.setPixelRatio(newPixelRatio) - this.composer.setPixelRatio(newPixelRatio) - - // Store the new pixel ratio - this.currentPixelRatio = newPixelRatio - - // Notify all active scenes about the pixel ratio change - for (const activeScene of this.activeScenes) { - if (typeof activeScene.devicePixelRatioChanged === 'function') { - activeScene.devicePixelRatioChanged(newPixelRatio, oldPixelRatio) - } - } - - // console.log( - // `SCENE RENDERER: Device pixel ratio changed from ${oldPixelRatio} to ${newPixelRatio}` - // ) - } - - private _decayMouseIntensity() { - if (this.mousePositionState.mouseIntensity > 0) { - this.mousePositionState.mouseIntensity *= this.mouseIntensityDecay - if (this.mousePositionState.mouseIntensity < 0.0000001) { - this.mousePositionState.mouseIntensity = 0 - } - } - } - - private _updateMousePosition(ev: MouseEvent) { - this.cachedContainerBBox = this.container.getBoundingClientRect() - const dx = ev.clientX - this.mousePositionState.clientX - const dy = ev.clientY - this.mousePositionState.clientY - const distance = Math.sqrt(dx * dx + dy * dy) - - // Update intensity based on movement (clamped between 0 and 1) - this.mousePositionState.mouseIntensity = Math.min( - 1.0, - Math.max(0, this.mousePositionState.mouseIntensity + distance * this.mouseIntensityGainRate) - ) - - // Update last position - this.mousePositionState.clientX = ev.clientX - this.mousePositionState.clientY = ev.clientY - - const rect = this.cachedContainerBBox - if (!rect) { - return - } - const isWithinContainer = - ev.clientX >= rect.left && - ev.clientX <= rect.right && - ev.clientY >= rect.top && - ev.clientY <= rect.bottom - - this.mousePositionState.isWithinContainer = isWithinContainer - this.mousePositionState.containerX = ((ev.clientX - rect.left) / rect.width) * 2 - 1 - this.mousePositionState.containerY = -((ev.clientY - rect.top) / rect.height) * 2 + 1 - } -} - -export default SceneRenderer diff --git a/apps/www/components/LaunchWeek/14/utils/ticketThemes.tsx b/apps/www/components/LaunchWeek/14/utils/ticketThemes.tsx deleted file mode 100644 index 7693a461b66..00000000000 --- a/apps/www/components/LaunchWeek/14/utils/ticketThemes.tsx +++ /dev/null @@ -1,14 +0,0 @@ -export const themes = () => ({ - regular: { - TICKET_FOREGROUND: '#1F1F1F', - }, - platinum: { - TICKET_FOREGROUND: '#1F1F1F', - }, - secret: { - TICKET_FOREGROUND: '#1F1F1F', - }, - platinumSecret: { - TICKET_FOREGROUND: '#1F1F1F', - }, -}) diff --git a/apps/www/data/features.tsx b/apps/www/data/features.tsx index 0555f654c37..bb147c2b314 100644 --- a/apps/www/data/features.tsx +++ b/apps/www/data/features.tsx @@ -1959,7 +1959,7 @@ This feature is essential for organizations aiming to maintain high security sta products: [ADDITIONAL_PRODUCTS.STUDIO], heroImage: '/images/features/security-and-performance-advisor.png', heroImageLight: '/images/features/security-and-performance-advisor-light.png', - docsUrl: 'https://supabase.com/blog/security-and-performance-advisor', + docsUrl: 'https://supabase.com/blog/security-performance-advisor', slug: 'security-and-performance-advisor', status: { stage: PRODUCT_STAGES.BETA, diff --git a/apps/www/package.json b/apps/www/package.json index 0256bb49737..6379e16f486 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -73,7 +73,6 @@ "remark-html": "^16.0.1", "shared-data": "workspace:*", "swiper": "^11.0.7", - "three": "^0.170.0", "typed.js": "^2.0.16", "typescript": "~5.5.0", "ui": "workspace:*", diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx index a2354e01c68..26376aa5640 100644 --- a/apps/www/pages/launch-week/index.tsx +++ b/apps/www/pages/launch-week/index.tsx @@ -1,6 +1,5 @@ import { NextSeo } from 'next-seo' import { LW14_DATE, LW14_TITLE, LW14_URL, SITE_ORIGIN } from '~/lib/constants' -import { LwView } from '~/components/LaunchWeek/14/LwView' import { useRouter } from 'next/router' import { Lw14ConfDataProvider } from '~/components/LaunchWeek/14/hooks/use-conf-data' import DefaultLayout from '~/components/Layouts/Default' @@ -52,7 +51,6 @@ const Lw14Page = () => { -
    diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx deleted file mode 100644 index 982ff7149d7..00000000000 --- a/apps/www/pages/launch-week/tickets/[username].tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { NextSeo } from 'next-seo' -import dayjs from 'dayjs' -import Error from 'next/error' -import { GetStaticPaths, GetStaticProps } from 'next' -import { LW14_DATE, LW14_TITLE, LW14_URL, SITE_ORIGIN } from '~/lib/constants' -import { LwView } from '~/components/LaunchWeek/14/LwView' -import { - Lw14ConfDataProvider, - UserTicketData, -} from '~/components/LaunchWeek/14/hooks/use-conf-data' -import { createClient } from '@supabase/supabase-js' -import DefaultLayout from '~/components/Layouts/Default' -import { Tunnel } from '~/components/LaunchWeek/14/Tunnel' - -interface Props { - user: UserTicketData - ogImageUrl: string -} - -const Lw14Page = ({ user, ogImageUrl }: Props) => { - const username = user?.username - const TITLE = `${LW14_TITLE} | ${LW14_DATE}` - const DESCRIPTION = 'Join us for a week of announcing new features, every day at 7 AM PT.' - const PAGE_URL = `${LW14_URL}/tickets/${username}` - - if (!username) { - return - } - - return ( - <> - - - - - - - - - ) -} - -export default Lw14Page - -export const getStaticProps: GetStaticProps = async ({ params }) => { - const username = params?.username?.toString() || null - let user - - const supabaseAdmin = createClient( - process.env.NEXT_PUBLIC_SUPABASE_URL!, - process.env.LIVE_SUPABASE_COM_SERVICE_ROLE_KEY! - ) - - // fetch the normal ticket - // stores the og images in supabase storage - fetch( - // @ts-ignore - `${SITE_ORIGIN}/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}` - ) - - // fetch a specific user - if (username) { - const { data, error } = await supabaseAdmin! - .from('tickets_view') - .select('name, username, ticket_number, metadata, platinum, secret, role, company, location') - .eq('launch_week', 'lw14') - .eq('username', username) - .single() - - user = data - } - - // fetch the platinum ticket - // stores the og images in supabase storage - if (user?.secret) { - fetch( - `${SITE_ORIGIN}/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}&secret=true` - ) - } else if (user?.platinum) { - // fetch /api-v2/ticket-og - fetch( - `${SITE_ORIGIN}/api-v2/ticket-og?username=${encodeURIComponent(username ?? '')}&platinum=true` - ) - } - - const ticketType = user?.secret - ? user?.platinum - ? 'platinumSecret' - : 'secret' - : user?.platinum - ? 'platinum' - : 'regular' - const ogImageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw14/og/${ticketType}/${username}.png?t=${dayjs(new Date()).format('DHHmmss')}` - - return { - props: { - user: { - ...user, - username, - }, - ogImageUrl, - key: username, - }, - revalidate: 5, - } -} - -export const getStaticPaths: GetStaticPaths = async () => { - return Promise.resolve({ - paths: [], - fallback: 'blocking', - }) -} diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-dark.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-dark.png new file mode 100644 index 00000000000..4380846473d Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-dark.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-light.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-light.png new file mode 100644 index 00000000000..c990cf5f175 Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers-light.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers.png deleted file mode 100644 index 0c1b0916883..00000000000 Binary files a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/cover-event-triggers.png and /dev/null differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-dark.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-dark.png new file mode 100644 index 00000000000..198752cfa8d Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-dark.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-light.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-light.png new file mode 100644 index 00000000000..c7aef0e80bf Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook-light.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook.png deleted file mode 100644 index b862e3718a2..00000000000 Binary files a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/fmgr-hook.png and /dev/null differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-dark.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-dark.png new file mode 100644 index 00000000000..da0ebd8faa4 Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-dark.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-light.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-light.png new file mode 100644 index 00000000000..405aa34561c Binary files /dev/null and b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook-light.png differ diff --git a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook.png b/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook.png deleted file mode 100644 index 9b90a72440e..00000000000 Binary files a/apps/www/public/images/blog/2025-05-08-event-triggers-wo-superuser/utility-hook.png and /dev/null differ diff --git a/apps/www/public/planetpg-steve_chavez-rss.xml b/apps/www/public/planetpg-steve_chavez-rss.xml index 0cf42092594..ed086a19ba2 100644 --- a/apps/www/public/planetpg-steve_chavez-rss.xml +++ b/apps/www/public/planetpg-steve_chavez-rss.xml @@ -5,9 +5,9 @@ https://supabase.com/blog Latest Postgres news from Steve Chavez at Supabase en - Fri, 16 Dec 2022 00:00:00 -0700 + Thu, 08 May 2025 00:00:00 -0700 - + https://supabase.com/blog/event-triggers-wo-superuser PostgreSQL Event Triggers without superuser access https://supabase.com/blog/event-triggers-wo-superuser diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml index ff71e142a6f..a90e31bf251 100644 --- a/apps/www/public/rss.xml +++ b/apps/www/public/rss.xml @@ -5,11 +5,18 @@ https://supabase.com Latest news from Supabase en - Fri, 04 Apr 2025 00:00:00 -0700 + Mon, 26 May 2025 00:00:00 -0700 + + https://supabase.com/blog/open-data-standards-postgres-otel-iceberg + Open Data Standards: Postgres, OTel, and Iceberg + https://supabase.com/blog/open-data-standards-postgres-otel-iceberg + Replace custom CRUD endpoints, reduce infrastructure complexity, and accelerate product delivery. + Mon, 26 May 2025 00:00:00 -0700 + https://supabase.com/blog/simplify-backend-with-data-api - Simplify back-end complexity with Supabase Data APIs + Simplifying back-end complexity with Supabase Data APIs https://supabase.com/blog/simplify-backend-with-data-api Replace custom CRUD endpoints, reduce infrastructure complexity, and accelerate product delivery. Sat, 17 May 2025 00:00:00 -0700 diff --git a/packages/common/database-types.ts b/packages/common/database-types.ts index 7941ad59978..8bdff5b8734 100644 --- a/packages/common/database-types.ts +++ b/packages/common/database-types.ts @@ -1,6 +1,98 @@ export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[] export type Database = { + content: { + Tables: { + error: { + Row: { + code: string + created_at: string | null + deleted_at: string | null + http_status_code: number | null + message: string | null + service: string + updated_at: string | null + } + Insert: { + code: string + created_at?: string | null + deleted_at?: string | null + http_status_code?: number | null + message?: string | null + service: string + updated_at?: string | null + } + Update: { + code?: string + created_at?: string | null + deleted_at?: string | null + http_status_code?: number | null + message?: string | null + service?: string + updated_at?: string | null + } + Relationships: [ + { + foreignKeyName: 'error_service_fkey' + columns: ['service'] + isOneToOne: false + referencedRelation: 'service' + referencedColumns: ['id'] + }, + ] + } + service: { + Row: { + created_at: string | null + deleted_at: string | null + id: string + name: string + updated_at: string | null + } + Insert: { + created_at?: string | null + deleted_at?: string | null + id?: string + name: string + updated_at?: string | null + } + Update: { + created_at?: string | null + deleted_at?: string | null + id?: string + name?: string + updated_at?: string | null + } + Relationships: [] + } + } + Views: { + [_ in never]: never + } + Functions: { + delete_error_codes_except: { + Args: { + skip_codes: Json + } + Returns: undefined + } + update_error_code: { + Args: { + code: string + service: string + http_status_code?: number + message?: string + } + Returns: boolean + } + } + Enums: { + [_ in never]: never + } + CompositeTypes: { + [_ in never]: never + } + } graphql_public: { Tables: { [_ in never]: never diff --git a/packages/common/gotrue.ts b/packages/common/gotrue.ts index 309dd3ab51d..414e3c219ff 100644 --- a/packages/common/gotrue.ts +++ b/packages/common/gotrue.ts @@ -9,17 +9,28 @@ export const AUTH_NAVIGATOR_LOCK_DISABLED_KEY = process.env.NEXT_PUBLIC_AUTH_NAVIGATOR_LOCK_KEY || 'supabase.dashboard.auth.navigatorLock.disabled' +/** + * Catches errors thrown when accessing localStorage. Safari with certain + * security settings throws when localStorage is accessed. + */ +function safeGetLocalStorage(key: string) { + try { + return globalThis?.localStorage?.getItem(key) + } catch { + return null + } +} + const debug = - process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && - globalThis?.localStorage?.getItem(AUTH_DEBUG_KEY) === 'true' + process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && safeGetLocalStorage(AUTH_DEBUG_KEY) === 'true' const persistedDebug = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && - globalThis?.localStorage?.getItem(AUTH_DEBUG_PERSISTED_KEY) === 'true' + safeGetLocalStorage(AUTH_DEBUG_PERSISTED_KEY) === 'true' const shouldEnableNavigatorLock = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' && - !(globalThis?.localStorage?.getItem(AUTH_NAVIGATOR_LOCK_DISABLED_KEY) === 'true') + !(safeGetLocalStorage(AUTH_NAVIGATOR_LOCK_DISABLED_KEY) === 'true') const shouldDetectSessionInUrl = process.env.NEXT_PUBLIC_AUTH_DETECT_SESSION_IN_URL ? process.env.NEXT_PUBLIC_AUTH_DETECT_SESSION_IN_URL === 'true' diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json index f440a4179c5..96634cff396 100644 --- a/packages/ui-patterns/package.json +++ b/packages/ui-patterns/package.json @@ -7,6 +7,7 @@ "scripts": { "preinstall": "npx only-allow pnpm", "test": "vitest", + "test:coverage": "vitest --run --coverage", "clean": "rimraf node_modules", "typecheck": "tsc --noEmit" }, @@ -15,6 +16,7 @@ "@monaco-editor/react": "^4.6.0", "@supabase/sql-to-rest": "^0.1.6", "@supabase/supabase-js": "catalog:", + "@vitest/coverage-v8": "^3.0.9", "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", "cmdk": "^1.0.0", diff --git a/packages/ui-patterns/vitest.config.ts b/packages/ui-patterns/vitest.config.ts index 8506bb4f23a..7327c096b39 100644 --- a/packages/ui-patterns/vitest.config.ts +++ b/packages/ui-patterns/vitest.config.ts @@ -4,5 +4,9 @@ export default defineConfig({ test: { environment: 'jsdom', setupFiles: ['./vitest.setup.ts'], + reporters: ['default', 'json'], + coverage: { + reporter: ['text', 'json', 'html'], + }, }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73835d32d72..23c192d81da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -203,7 +203,7 @@ importers: version: 1.6.0 tailwindcss: specifier: ^3.3.0 - version: 3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)) + version: 3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)) tsconfig: specifier: workspace:* version: link:../../packages/tsconfig @@ -324,7 +324,7 @@ importers: libpg-query: specifier: 15.2.0 version: 15.2.0(encoding@0.1.13)(supports-color@8.1.1) - lodash: + lodash-es: specifier: ^4.17.21 version: 4.17.21 lucide-react: @@ -484,6 +484,9 @@ importers: '@types/jsrsasign': specifier: ^10.5.12 version: 10.5.12 + '@types/lodash-es': + specifier: ^4.17.12 + version: 4.17.12 '@types/mdast': specifier: ^3.0.0 version: 3.0.15 @@ -982,7 +985,7 @@ importers: version: 4.4.2 '@vitest/coverage-v8': specifier: ^3.0.9 - version: 3.0.9(supports-color@8.1.1)(vitest@3.0.9) + version: 3.0.9(supports-color@8.1.1)(vitest@3.0.9(@types/node@20.12.11)(@vitest/ui@3.0.4)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.4.11(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5)) '@vitest/ui': specifier: ^3.0.0 version: 3.0.4(vitest@3.0.9) @@ -1253,7 +1256,7 @@ importers: version: 14.2.3 '@next/mdx': specifier: ^14.2.3 - version: 14.2.3(@mdx-js/loader@2.3.0(supports-color@8.1.1)(webpack@5.94.0(esbuild@0.25.2)))(@mdx-js/react@2.3.0(react@18.3.1)) + version: 14.2.3(@mdx-js/loader@2.3.0(supports-color@8.1.1))(@mdx-js/react@2.3.0(react@18.3.1)) '@octokit/auth-app': specifier: ^7.0.0 version: 7.1.5 @@ -1401,9 +1404,6 @@ importers: swiper: specifier: ^11.0.7 version: 11.0.7 - three: - specifier: ^0.170.0 - version: 0.170.0 typed.js: specifier: ^2.0.16 version: 2.0.16 @@ -1655,10 +1655,10 @@ importers: version: 0.1.9 '@tailwindcss/forms': specifier: ^0.5.0 - version: 0.5.6(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2))) + version: 0.5.6(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2))) '@tailwindcss/typography': specifier: ^0.5.9 - version: 0.5.10(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2))) + version: 0.5.10(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2))) deepmerge: specifier: ^4.2.2 version: 4.3.1 @@ -1671,10 +1671,10 @@ importers: devDependencies: tailwindcss: specifier: ^3.4.1 - version: 3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)) + version: 3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)) tailwindcss-animate: specifier: ^1.0.6 - version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2))) + version: 1.0.7(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2))) packages/eslint-config-supabase: dependencies: @@ -2018,6 +2018,9 @@ importers: '@supabase/supabase-js': specifier: 'catalog:' version: 2.49.3 + '@vitest/coverage-v8': + specifier: ^3.0.9 + version: 3.0.9(supports-color@8.1.1)(vitest@3.0.9(@types/node@20.12.11)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.7.3(@types/node@20.12.11)(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5)) class-variance-authority: specifier: ^0.6.0 version: 0.6.1 @@ -7691,6 +7694,9 @@ packages: '@types/katex@0.16.7': resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==} + '@types/lodash-es@4.17.12': + resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==} + '@types/lodash.template@4.5.0': resolution: {integrity: sha512-4LgHxK16IPbGR7TmXpPvNT7iNGsLCdQY6Rc0mi1a/JECt8et/D4hx6NMVAJej/d932sj1mJsg0QYHKL189O0Qw==} @@ -15133,9 +15139,6 @@ packages: thread-stream@3.1.0: resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==} - three@0.170.0: - resolution: {integrity: sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==} - throttle-debounce@3.0.1: resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==} engines: {node: '>=10'} @@ -18709,15 +18712,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@mdx-js/loader@2.3.0(supports-color@8.1.1)(webpack@5.94.0(esbuild@0.25.2))': - dependencies: - '@mdx-js/mdx': 2.3.0(supports-color@8.1.1) - source-map: 0.7.4 - webpack: 5.94.0(esbuild@0.25.2) - transitivePeerDependencies: - - supports-color - optional: true - '@mdx-js/loader@2.3.0(supports-color@8.1.1)(webpack@5.94.0)': dependencies: '@mdx-js/mdx': 2.3.0(supports-color@8.1.1) @@ -18885,11 +18879,11 @@ snapshots: dependencies: glob: 10.3.10 - '@next/mdx@14.2.3(@mdx-js/loader@2.3.0(supports-color@8.1.1)(webpack@5.94.0(esbuild@0.25.2)))(@mdx-js/react@2.3.0(react@18.3.1))': + '@next/mdx@14.2.3(@mdx-js/loader@2.3.0(supports-color@8.1.1))(@mdx-js/react@2.3.0(react@18.3.1))': dependencies: source-map: 0.7.4 optionalDependencies: - '@mdx-js/loader': 2.3.0(supports-color@8.1.1)(webpack@5.94.0(esbuild@0.25.2)) + '@mdx-js/loader': 2.3.0(supports-color@8.1.1)(webpack@5.94.0) '@mdx-js/react': 2.3.0(react@18.3.1) '@next/mdx@15.3.1(@mdx-js/loader@2.3.0(supports-color@8.1.1)(webpack@5.94.0))(@mdx-js/react@2.3.0(react@18.3.1))': @@ -22608,11 +22602,6 @@ snapshots: mini-svg-data-uri: 1.4.4 tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)) - '@tailwindcss/forms@0.5.6(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)))': - dependencies: - mini-svg-data-uri: 1.4.4 - tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)) - '@tailwindcss/typography@0.5.10(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)))': dependencies: lodash.castarray: 4.4.0 @@ -22621,14 +22610,6 @@ snapshots: postcss-selector-parser: 6.0.10 tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)) - '@tailwindcss/typography@0.5.10(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)))': - dependencies: - lodash.castarray: 4.4.0 - lodash.isplainobject: 4.0.6 - lodash.merge: 4.6.2 - postcss-selector-parser: 6.0.10 - tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)) - '@tanstack/directive-functions-plugin@1.114.12(@types/node@22.13.14)(jiti@2.4.2)(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5)': dependencies: '@babel/code-frame': 7.26.2 @@ -23547,9 +23528,13 @@ snapshots: '@types/katex@0.16.7': {} + '@types/lodash-es@4.17.12': + dependencies: + '@types/lodash': 4.17.16 + '@types/lodash.template@4.5.0': dependencies: - '@types/lodash': 4.17.5 + '@types/lodash': 4.17.16 '@types/lodash@4.17.16': {} @@ -23910,6 +23895,24 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitest/coverage-v8@3.0.9(supports-color@8.1.1)(vitest@3.0.9(@types/node@20.12.11)(@vitest/ui@3.0.4)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.4.11(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5))': + dependencies: + '@ampproject/remapping': 2.3.0 + '@bcoe/v8-coverage': 1.0.2 + debug: 4.4.0(supports-color@8.1.1) + istanbul-lib-coverage: 3.2.2 + istanbul-lib-report: 3.0.1 + istanbul-lib-source-maps: 5.0.6(supports-color@8.1.1) + istanbul-reports: 3.1.7 + magic-string: 0.30.17 + magicast: 0.3.5 + std-env: 3.8.1 + test-exclude: 7.0.1 + tinyrainbow: 2.0.0 + vitest: 3.0.9(@types/node@20.12.11)(@vitest/ui@3.0.4)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.4.11(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5) + transitivePeerDependencies: + - supports-color + '@vitest/coverage-v8@3.0.9(supports-color@8.1.1)(vitest@3.0.9(@types/node@20.12.11)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.7.3(@types/node@20.12.11)(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5))': dependencies: '@ampproject/remapping': 2.3.0 @@ -23946,24 +23949,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitest/coverage-v8@3.0.9(supports-color@8.1.1)(vitest@3.0.9)': - dependencies: - '@ampproject/remapping': 2.3.0 - '@bcoe/v8-coverage': 1.0.2 - debug: 4.4.0(supports-color@8.1.1) - istanbul-lib-coverage: 3.2.2 - istanbul-lib-report: 3.0.1 - istanbul-lib-source-maps: 5.0.6(supports-color@8.1.1) - istanbul-reports: 3.1.7 - magic-string: 0.30.17 - magicast: 0.3.5 - std-env: 3.8.1 - test-exclude: 7.0.1 - tinyrainbow: 2.0.0 - vitest: 3.0.9(@types/node@20.12.11)(@vitest/ui@3.0.4)(jiti@2.4.2)(jsdom@20.0.3(supports-color@8.1.1))(msw@2.4.11(typescript@5.5.2))(sass@1.72.0)(supports-color@8.1.1)(terser@5.39.0)(tsx@4.19.3)(yaml@2.4.5) - transitivePeerDependencies: - - supports-color - '@vitest/expect@3.0.9': dependencies: '@vitest/spy': 3.0.9 @@ -26102,7 +26087,7 @@ snapshots: debug: 4.4.0(supports-color@8.1.1) enhanced-resolve: 5.17.1 eslint: 8.57.0(supports-color@8.1.1) - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) fast-glob: 3.3.2 get-tsconfig: 4.7.2 @@ -26114,7 +26099,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1): + eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1): dependencies: debug: 3.2.7(supports-color@8.1.1) optionalDependencies: @@ -26141,7 +26126,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0(supports-color@8.1.1) eslint-import-resolver-node: 0.3.9(supports-color@8.1.1) - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1)(typescript@5.5.2))(eslint-import-resolver-node@0.3.9(supports-color@8.1.1))(eslint-plugin-import@2.29.1)(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1))(eslint@8.57.0(supports-color@8.1.1))(supports-color@8.1.1) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -32861,9 +32846,9 @@ snapshots: tailwind-merge@1.14.0: {} - tailwindcss-animate@1.0.7(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2))): + tailwindcss-animate@1.0.7(tailwindcss@3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2))): dependencies: - tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@22.13.14)(typescript@5.5.2)) + tailwindcss: 3.4.1(ts-node@10.9.2(@types/node@20.12.11)(typescript@5.5.2)) tailwindcss-radix@2.8.0: {} @@ -33011,8 +32996,6 @@ snapshots: dependencies: real-require: 0.2.0 - three@0.170.0: {} - throttle-debounce@3.0.1: {} throttleit@2.1.0: {} diff --git a/supa-mdx-lint/Rule003Spelling.toml b/supa-mdx-lint/Rule003Spelling.toml index e15c9961fa9..9ca43af1105 100644 --- a/supa-mdx-lint/Rule003Spelling.toml +++ b/supa-mdx-lint/Rule003Spelling.toml @@ -340,6 +340,7 @@ allow_list = [ "vecs", "vs", "watchOS", + "[Xx]min", ] prefixes = ["bi", "over", "pre", "un"] diff --git a/supabase/seed.sql b/supabase/seed.sql index 702adcfcd90..fa76ef7fb1e 100644 --- a/supabase/seed.sql +++ b/supabase/seed.sql @@ -6,3 +6,13 @@ values ('Singapore', 'Singapore', 'lw12', now(), true); insert into public.launch_weeks (id) values ('lw14'); + +-- Insert mock error codes for testing +insert into content.error (code, service, http_status_code, message) +values + ( + 'test_code', + (select id from content.service where name = 'AUTH'), + 500, + 'This is a test error message' + );