dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Chore/proper theme switcher (#17635)

Browse Source 
* Add theme switcher

* Update

* Update

* Fix docs

* Update

* Fix www

* Componentize ThemeToggle

* Remove unused TopBarRef, rename existing component

* Update apps/www/pages/launch-week/6/index.tsx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/www/pages/launch-week/index.tsx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/www/pages/launch-week/7/index.tsx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/www/pages/launch-week/tickets/[username].tsx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update always-on darkmode pages

* update

* Prettier

* Check resolved theme for images

* use resolved theme

* Fix customer stories

* Update apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>

---------

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
This commit is contained in:
Terry SuttonGreg RichardsonFrancesco Sansalvadore
 authored and GitHub committed 2023-09-26 16:27:45 +00:00
1 parent e7e990f757
commit 9910073432
92 files changed
+1461 -1883
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/Frameworks.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import ButtonCard from './ButtonCard'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
const Frameworks = () => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const frameworks = [
{
@@ -111,7 +111,7 @@ const Frameworks = () => {
to={x.href}
title={x.name}
// [Joshen] Nice to have: theming
icon={isDarkMode ? x.logo.dark : x.logo.light}
icon={theme === 'dark' ? x.logo.dark : x.logo.light}
/>
</div>
))}
apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
-6
View File
@@ -1,16 +1,10 @@
import { useTheme } from 'common/Providers'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { Badge, cn } from 'ui'
import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants'
import HomeMenuIconPicker from './HomeMenuIconPicker'
const NavigationMenuHome = () => {
const router = useRouter()
const { isDarkMode } = useTheme()
return (
<div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150">
<ul className="relative w-full flex flex-col gap-4 pb-5">
apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
@@ -29,7 +29,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
const router = useRouter()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const activeItem = props.subItem.url === router.asPath
const activeItemRef = useRef(null)
@@ -77,7 +77,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
<Image
alt={props.subItem.name + router.basePath}
src={
`${router.basePath}` + `${props.subItem.icon}${!isDarkMode ? '-light' : ''}.svg`
`${router.basePath}` +
`${props.subItem.icon}${theme !== 'dark' ? '-light' : ''}.svg`
}
width={15}
height={15}
apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+70 -103
View File
@@ -1,23 +1,16 @@
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useEffect, useState } from 'react'
import {
Button,
IconCommand,
IconMenu,
IconMoon,
IconSearch,
IconSun,
Listbox,
SearchButton,
} from 'ui'
import { FC, useState } from 'react'
import { Button, IconCommand, IconGitHub, IconSearch, SearchButton } from 'ui'
import { getPageType } from '~/lib/helpers'
import { REFERENCES } from './NavigationMenu.constants'
import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
const TopNavBar: FC = () => {
const { isDarkMode, toggleTheme } = useTheme()
const [mounted, setMounted] = useState(false)
const { theme } = useTheme()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const { asPath, push } = useRouter()
@@ -31,9 +24,12 @@ const TopNavBar: FC = () => {
? pathSegments[pathSegments.indexOf(library) + 1]
: versions[0]
useEffect(() => {
setMounted(true)
}, [isDarkMode])
const pageType = getPageType(asPath)
const pageLinks = [
{ text: 'Guides', key: 'docs', link: '/' },
{ text: 'Reference', key: 'reference', link: '/reference' },
]
const onSelectVersion = (version: string) => {
// [Joshen] Ideally we use <Link> but this works for now
@@ -56,104 +52,75 @@ const TopNavBar: FC = () => {
}
return (
<nav className="h-[60px] border-b px-4 backdrop-blur backdrop-filter bg-white-1200 bg-scale-200/90">
<div className="max-w-[1400px] grid grid-cols-12 mx-auto gap-4 px-5 h-full">
<div className="col-span-3 flex items-center">
<button className="mr-4 block stroke-2 lg:hidden" onClick={toggleMobileMenu}>
<IconMenu className="text-scale-1100" />
</button>
{mounted && (
<Link href="/">
<a className="flex items-center">
<Image
className="cursor-pointer"
src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
width={124}
height={24}
alt="Supabase Logo"
/>
</a>
</Link>
)}
{versions.length > 0 && (
<div className="ml-8">
<Listbox
size="small"
defaultValue={version}
style={{ width: '70px' }}
onChange={onSelectVersion}
>
{versions.map((version) => (
<Listbox.Option key={version} label={version} value={version}>
{version}
</Listbox.Option>
))}
</Listbox>
</div>
)}
<nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
<div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
<div className="lg:hidden">
<Link href="/">
<a className=" flex items-center gap-2">
<Image
className="cursor-pointer"
src={theme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
width={96}
height={24}
alt="Supabase Logo"
/>
<span className="font-mono text-sm font-medium text-brand">DOCS</span>
</a>
</Link>
</div>
<div className="col-span-5 flex items-center">
<div className="max-w-xl grow">
<SearchButton className="w-full">
<div
className="
<div className="flex items-center gap-6">
<SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
<div
className="
flex
group
items-center
justify-between
bg-scaleA-200
bg-surface-100
bg-opacity-75
hover:bg-surface-200
hover:bg-opacity-100
border
transition
hover:border-scale-600
hover:bg-scaleA-300
border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded"
>
<div className="flex items-center space-x-2">
<IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
<p className="text-scale-1100 text-sm group-hover:text-scale-1200 transition">
Search docs...
</p>
</div>
<div className="flex items-center space-x-1">
<div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
<IconCommand size={12} strokeWidth={1.5} />
<span className="text-[12px]">K</span>
</div>
border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
text-lighter
"
>
<div className="flex items-center space-x-2">
<IconSearch className="" size={18} strokeWidth={2} />
<p className="hidden md:flex text-sm">Search docs...</p>
</div>
<div className="hidden md:flex items-center space-x-1">
<div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
<IconCommand size={12} strokeWidth={1.5} />
<span className="text-[12px]">K</span>
</div>
</div>
</SearchButton>
</div>
</div>
</SearchButton>
</div>
<div className="col-span-4 flex items-center justify-end gap-3">
<Button type="outline" asChild>
<a
href="https://supabase.com/dashboard"
className="text-scale-1100 text-sm"
target="_blank"
rel="noreferrer noopener"
>
Go to Dashboard
<div className="hidden lg:flex grow items-center justify-end gap-3">
<Button type="text" asChild>
<a href="https://supabase.com" target="_blank" rel="noreferrer noopener">
Supabase.com
</a>
</Button>
<ul className="flex items-center">
<li className="px-4">
<div className="cursor-pointer" onClick={() => toggleTheme()}>
{isDarkMode ? (
<IconMoon
size={16}
strokeWidth={1}
className="text-scale-1100 hover:text-scale-1200 transition"
/>
) : (
<IconSun
size={16}
strokeWidth={1}
className="text-scale-1100 hover:text-scale-1200 transition"
/>
)}
</div>
</li>
</ul>
<Button type="text" asChild>
<a href="https://supabase.com/dashboard" target="_blank" rel="noreferrer noopener">
Dashboard
</a>
</Button>
<Link
href="https://github.com/supabase/supabase"
target="_blank"
rel="noreferrer noopener"
>
<a className="px-2.5 py-1" target="_blank">
<IconGitHub size={16} className="text-scale-1100 hover:text-scale-1200 transition" />
</a>
</Link>
<ThemeToggle />
</div>
</div>
</nav>
apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
-148
View File
@@ -1,148 +0,0 @@
import { useTheme } from 'common/Providers'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useEffect, useState } from 'react'
import { Button, IconCommand, IconGitHub, IconMoon, IconSearch, IconSun, SearchButton } from 'ui'
import { getPageType } from '~/lib/helpers'
import { REFERENCES } from './NavigationMenu.constants'
const TopNavBarRef: FC = () => {
const { isDarkMode, toggleTheme } = useTheme()
const [mounted, setMounted] = useState(false)
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const { asPath, push } = useRouter()
const pathSegments = asPath.split('/')
const library = pathSegments.length >= 3 ? pathSegments[2] : undefined
const libraryMeta = REFERENCES?.[library] ?? undefined
const versions = libraryMeta?.versions ?? []
const version = versions.includes(pathSegments[pathSegments.indexOf(library) + 1])
? pathSegments[pathSegments.indexOf(library) + 1]
: versions[0]
const pageType = getPageType(asPath)
useEffect(() => {
setMounted(true)
}, [isDarkMode])
const pageLinks = [
{ text: 'Guides', key: 'docs', link: '/' },
{ text: 'Reference', key: 'reference', link: '/reference' },
]
const onSelectVersion = (version: string) => {
// [Joshen] Ideally we use <Link> but this works for now
if (!library) return
if (version === versions[0]) {
push(`/reference/${library}`)
} else {
push(`/reference/${library}/${version}`)
}
}
// [Joshen] Kaizen: Use UI library's SidePanel for this
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen)
const sidebar = document.querySelector('.sidebar-menu-container')
const contentPane = document.querySelector('.main-content-pane')
sidebar.classList.toggle('hidden')
contentPane.classList.toggle('hidden')
}
return (
<nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
<div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
<div className={['lg:hidden'].join(' ')}>
<Link href="/">
<a className=" flex items-center gap-2">
<Image
className="cursor-pointer"
src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
width={96}
height={24}
alt="Supabase Logo"
/>
<span className="font-mono text-sm font-medium text-brand">DOCS</span>
</a>
</Link>
{/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
</div>
<div className="flex items-center gap-6">
<SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
<div
className="
flex
group
items-center
justify-between
bg-surface-100
bg-opacity-75
hover:bg-surface-200
hover:bg-opacity-100
border
transition
border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
text-lighter
"
>
<div className="flex items-center space-x-2">
<IconSearch className="" size={18} strokeWidth={2} />
<p className="hidden md:flex text-sm">Search docs...</p>
</div>
<div className="hidden md:flex items-center space-x-1">
<div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
<IconCommand size={12} strokeWidth={1.5} />
<span className="text-[12px]">K</span>
</div>
</div>
</div>
</SearchButton>
</div>
<div className="hidden lg:flex grow items-center justify-end gap-3">
<Button type="text" asChild>
<a href="https://supabase.com" target="_blank" rel="noreferrer noopener">
Supabase.com
</a>
</Button>
<Button type="text" asChild>
<a href="https://supabase.com/dashboard" target="_blank" rel="noreferrer noopener">
Dashboard
</a>
</Button>
<Link
href="https://github.com/supabase/supabase"
target="_blank"
rel="noreferrer noopener"
>
<a className="px-2.5 py-1" target="_blank">
<IconGitHub size={16} className="text-scale-1100 hover:text-scale-1200 transition" />
</a>
</Link>
<div className="cursor-pointer px-2.5 py-1" onClick={() => toggleTheme()}>
{isDarkMode ? (
<IconMoon
size={16}
strokeWidth={1}
className="text-scale-1100 hover:text-scale-1200 transition"
/>
) : (
<IconSun
size={16}
strokeWidth={1}
className="text-scale-1100 hover:text-scale-1200 transition"
/>
)}
</div>
</div>
</div>
</nav>
)
}
export default TopNavBarRef
apps/docs/layouts/SiteLayout.tsx
+5 -5
View File
@@ -1,8 +1,8 @@
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Link from 'next/link'
import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
import Head from 'next/head'
import { PropsWithChildren, memo } from 'react'
@@ -220,13 +220,13 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
})
const HeaderLogo = memo(function HeaderLogo() {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
return (
<Link href="/">
<a className="px-10 flex items-center gap-2">
<Image
className="cursor-pointer"
src={isDarkMode ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
src={theme === 'dark' ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'}
width={96}
height={24}
alt="Supabase Logo"
@@ -334,7 +334,7 @@ const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
<NavContainer />
<Container>
<div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
<TopNavBarRef />
<TopNavBar />
</div>
<div
className={[
apps/docs/pages/_app.tsx
+6 -1
View File
@@ -153,7 +153,12 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
<>
<Favicons />
<AuthContainer>
<ThemeProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<CommandMenuProvider site="docs">
<TabsProvider>
<SiteLayout>
apps/docs/pages/_document.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export default function Document() {
return (
<Html lang="en">
<Head />
<body className="dark">
<body>
<Main />
<NextScript />
</body>
apps/docs/public/sitemap.xml
+328 -29
View File
@@ -12,18 +12,6 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/handbook/contributing</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/handbook/introduction</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai</loc>
<changefreq>weekly</changefreq>
@@ -96,6 +84,18 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/handbook/contributing</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/handbook/introduction</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/reference/index</loc>
<changefreq>weekly</changefreq>
@@ -103,31 +103,119 @@
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/ai/choosing-compute-addon</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/concepts</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/engineering-for-scale</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/going-to-prod</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/google-colab</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/hugging-face</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/langchain</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/python-clients</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/structured-unstructured</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/vecs-python-client</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/vector-columns</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/vector-indexes</loc>
=======
<loc>https://supabase.com/docs/guides/api/api-keys</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/creating-routes</loc>
<loc>https://supabase.com/docs/guides/cli/customizing-email-templates</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/joins-and-nesting</loc>
<loc>https://supabase.com/docs/guides/cli/getting-started</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/quickstart</loc>
<loc>https://supabase.com/docs/guides/cli/local-development</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/securing-your-api</loc>
<loc>https://supabase.com/docs/guides/cli/managing-config</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/cli/managing-environments</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/cli/seeding-your-database</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/cli/testing-and-linting</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -295,6 +383,9 @@
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/database/arrays</loc>
=======
<loc>https://supabase.com/docs/guides/cli/customizing-email-templates</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -320,11 +411,14 @@
<url>
<loc>https://supabase.com/docs/guides/cli/managing-environments</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
=======
<loc>https://supabase.com/docs/guides/cli/seeding-your-database</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -343,6 +437,7 @@
</url>
<url>
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/database/column-encryption</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -446,6 +541,45 @@
<url>
<loc>https://supabase.com/docs/guides/database/webhooks</loc>
<<<<<<< HEAD
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/api-keys</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/creating-routes</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/joins-and-nesting</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/quickstart</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/securing-your-api</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/using-custom-schemas</loc>
=======
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -798,12 +932,6 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/self-hosting/docker</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/storage/access-control</loc>
<changefreq>weekly</changefreq>
@@ -840,6 +968,12 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/self-hosting/docker</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts</loc>
<changefreq>weekly</changefreq>
@@ -871,6 +1005,8 @@
</url>
<url>
<<<<<<< HEAD
=======
<loc>https://supabase.com/docs/guides/api/rest/auto-generated-docs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -889,6 +1025,7 @@
</url>
<url>
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/ai/examples/building-chatgpt-plugins</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -924,6 +1061,43 @@
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/ai/quickstarts/face-similarity</loc>
=======
<loc>https://supabase.com/docs/guides/ai/integrations/llamaindex</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/ai/quickstarts/generate-text-embeddings</loc>
=======
<loc>https://supabase.com/docs/guides/ai/quickstarts/face-similarity</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/ai/quickstarts/hello-world</loc>
=======
<loc>https://supabase.com/docs/guides/ai/quickstarts/generate-text-embeddings</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/ai/quickstarts/text-deduplication</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/integrations/llamaindex</loc>
<changefreq>weekly</changefreq>
@@ -931,18 +1105,14 @@
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/quickstarts/face-similarity</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/quickstarts/generate-text-embeddings</loc>
<loc>https://supabase.com/docs/guides/ai/vector-indexes/hnsw-indexes</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/ai/vector-indexes/ivf-indexes</loc>
=======
<loc>https://supabase.com/docs/guides/ai/quickstarts/hello-world</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -950,6 +1120,7 @@
<url>
<loc>https://supabase.com/docs/guides/ai/quickstarts/text-deduplication</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -1015,6 +1186,8 @@
</url>
<url>
<<<<<<< HEAD
=======
<loc>https://supabase.com/docs/guides/ai/vector-indexes/hnsw-indexes</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1027,6 +1200,7 @@
</url>
<url>
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/auth/quickstarts/nextjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1329,6 +1503,33 @@
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/api/graphql/graphiql</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/rest/auto-generated-docs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/rest/client-libs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/api/rest/generating-types</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
=======
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/database/postgres/cascade-deletes</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1383,12 +1584,15 @@
</url>
<url>
<<<<<<< HEAD
=======
<loc>https://supabase.com/docs/guides/platform/oauth-apps/build-a-supabase-integration</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/functions/examples/cloudflare-turnstile</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1449,6 +1653,75 @@
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/flutter</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/kotlin</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/nextjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/nuxtjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/reactjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/redwoodjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/refine</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/solidjs</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/vue</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/platform/oauth-apps/build-a-supabase-integration</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
=======
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/getting-started/tutorials/with-angular</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1540,6 +1813,8 @@
<url>
<loc>https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3</loc>
<<<<<<< HEAD
=======
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -1600,6 +1875,7 @@
<url>
<loc>https://supabase.com/docs/guides/getting-started/quickstarts/vue</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -1629,12 +1905,15 @@
</url>
<url>
<<<<<<< HEAD
=======
<loc>https://supabase.com/docs/guides/self-hosting/analytics/config</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
>>>>>>> @{-1}
<loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/amazon-rds</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1671,6 +1950,9 @@
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/self-hosting/analytics/config</loc>
=======
<loc>https://supabase.com/docs/guides/self-hosting/realtime/config</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
@@ -1678,6 +1960,7 @@
<url>
<loc>https://supabase.com/docs/guides/self-hosting/storage/config</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -1688,6 +1971,22 @@
<changefreq>0.5</changefreq>
</url>
<url>
<<<<<<< HEAD
<loc>https://supabase.com/docs/guides/self-hosting/realtime/config</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/self-hosting/storage/config</loc>
=======
<loc>https://supabase.com/docs/guides/database/extensions/wrappers/overview</loc>
>>>>>>> @{-1}
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/docs/guides/database/extensions/wrappers/overview</loc>
<changefreq>weekly</changefreq>
apps/www/components/AuthWidget/AuthWidgetSection.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import Image from 'next/image'
import { ColorSwatchIcon, MenuIcon } from '@heroicons/react/outline'
import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
const supabase = createClient(
'https://rsnibhkhsbfnncjmwnkj.supabase.co',
@@ -15,7 +15,7 @@ const supabase = createClient(
)
function AuthWidgetSection() {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { basePath } = useRouter()
const [radius, setRadius] = useState('4px')
const [brandColor, setBrandColor] = useState({
@@ -84,7 +84,7 @@ function AuthWidgetSection() {
<Auth
// @ts-ignore
socialLayout={layout}
theme={isDarkMode ? 'dark' : 'default'}
theme={theme === 'dark' ? 'dark' : 'default'}
providers={['google', 'facebook', 'twitter']}
supabaseClient={supabase}
localization={{
apps/www/components/CustomerStories/index.tsx
+1 -2
View File
@@ -8,8 +8,7 @@ import TextLink from '../TextLink'
const CustomerStories = ({ customerStories }: any) => {
const caseStudyThumbs = customerStories.map((blog: PostTypes, idx: number) => {
return {
logo: blog.logo,
logoInverse: blog.logo_inverse,
logo: blog.logo_inverse,
title: blog.title,
link: blog.url,
}
apps/www/components/DarkModeToggle.tsx
-38
View File
@@ -1,38 +0,0 @@
import { useTheme } from 'common/Providers'
import { IconSun, IconMoon } from 'ui'
function DarkModeToggle({ disabled = false }: { disabled?: boolean }) {
const { isDarkMode, toggleTheme } = useTheme()
return (
<div className={`flex items-center ${disabled && 'opacity-30'}`}>
<IconSun className="text-scale-900" strokeWidth={2} />
<button
type="button"
aria-pressed="false"
disabled={disabled}
className={`
relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
transition-colors duration-200 ease-in-out focus:outline-none ${
isDarkMode ? 'bg-scale-500' : 'bg-scale-900'
} ${disabled && '!cursor-not-allowed'} mx-5
`}
onClick={() => toggleTheme()}
>
<span className="sr-only">Toggle Themes</span>
<span
aria-hidden="true"
className={`
${
isDarkMode ? 'translate-x-5' : 'translate-x-0'
} dark:bg-scale-300 inline-block h-5 w-5
transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
`}
/>
</button>
<IconMoon className="text-scale-900" strokeWidth={2} />
</div>
)
}
export default DarkModeToggle
apps/www/components/Footer/index.tsx
+6 -5
View File
@@ -1,22 +1,23 @@
import FooterLinks from 'data/Footer.json'
import SectionContainer from '../Layouts/SectionContainer'
import DarkModeToggle from '../DarkModeToggle'
import Link from 'next/link'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { Badge } from 'ui'
import Image from 'next/image'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
interface Props {
className?: string
}
const Footer = (props: Props) => {
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const { pathname } = useRouter()
const isLaunchWeekPage = pathname.includes('launch-week') || pathname === '/'
return (
@@ -36,7 +37,7 @@ const Footer = (props: Props) => {
src={
isLaunchWeekPage
? supabaseLogoWordmarkDark
: isDarkMode
: resolvedTheme === 'dark'
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
@@ -149,7 +150,7 @@ const Footer = (props: Props) => {
</div>
<div className="border-scale-500 dark:border-scale-600 mt-32 flex justify-between border-t pt-8">
<small className="small">&copy; Supabase Inc</small>
<DarkModeToggle disabled={isLaunchWeekPage} />
<ThemeToggle forceDark={isLaunchWeekPage} />
</div>
</SectionContainer>
</footer>
apps/www/components/Globe.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import createGlobe from 'cobe'
import { useEffect, useRef } from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
const Globe = () => {
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const canvasRef = useRef<any>()
useEffect(() => {
@@ -18,7 +18,7 @@ const Globe = () => {
height: width * 2,
phi: 0,
theta: 0.3,
dark: isDarkMode ? 1 : 0,
dark: resolvedTheme === 'dark' ? 1 : 0,
diffuse: 3,
scale: 1,
opacity: 0.8,
@@ -55,7 +55,7 @@ const Globe = () => {
cobe.destroy()
window.removeEventListener('resize', onResize)
}
}, [isDarkMode])
}, [resolvedTheme])
return (
<canvas
apps/www/components/Nav/index.tsx
+9 -4
View File
@@ -13,14 +13,15 @@ import Developers from '~/components/Nav/Developers'
import ScrollProgress from '~/components/ScrollProgress'
import { useIsLoggedIn, useIsUserLoading, useTheme } from 'common'
import { useIsLoggedIn, useIsUserLoading } from 'common'
import { useTheme } from 'next-themes'
import TextLink from '../TextLink'
import Image from 'next/image'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
const Nav = () => {
const { isDarkMode } = useTheme()
const { theme, resolvedTheme } = useTheme()
const router = useRouter()
const [open, setOpen] = useState(false)
const [openProduct, setOpenProduct] = useState(false)
@@ -171,7 +172,7 @@ const Nav = () => {
border-transparent
px-1
text-sm font-medium
transition-colors`,
text-scale-1200 transition-colors`,
showLaunchWeekNavMode && '!text-white',
props.active ? 'text-brand' : 'hover:text-brand',
props.active,
@@ -225,7 +226,11 @@ const Nav = () => {
<Link href="/" as="/">
<a className="block w-auto h-6">
<Image
src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
src={
isLaunchWeekPage || resolvedTheme === 'dark' || isHomePage
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
width={124}
height={24}
alt="Supabase Logo"
apps/www/components/OpenSource/OSSHero.tsx
+4 -3
View File
@@ -1,7 +1,8 @@
import React from 'react'
import { motion } from 'framer-motion'
import { useWindowSize } from 'react-use'
import { useBreakpoint, useTheme } from 'common'
import { useBreakpoint } from 'common'
import { useTheme } from 'next-themes'
import { cn } from 'ui'
import styles from './hero.module.css'
@@ -29,12 +30,12 @@ const OSSHero = () => (
)
const HeroGrid = () => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { width } = useWindowSize()
const isSm = useBreakpoint(640)
const svgGridOptions = {
color: isDarkMode ? '#00d4ad' : '#015a42',
color: theme === 'dark' ? '#00d4ad' : '#015a42',
boxWidth: width ? width * 7 : 7500,
boxHeight: width ? width * 5 : 6000,
xLines: isSm ? 20 : 49,
apps/www/components/Pricing/ComputePricingModal.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { Fragment, useMemo } from 'react'
import { useRouter } from 'next/router'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { IconXCircle, Modal } from 'ui'
import pricingAddOn from '~/data/PricingAddOnTable.json'
import { IconPricingIncludedCheck, IconPricingMinus } from './PricingIcons'
@@ -13,7 +13,7 @@ interface Props {
export default function ComputePricingModal({ showComputeModal, setShowComputeModal }: Props) {
const { basePath } = useRouter()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const columnNames = useMemo(
() =>
pricingAddOn.database.rows.map((row) =>
@@ -41,7 +41,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
<img
className="w-6"
src={`${basePath}/images/pricing/compute-upgrade${
isDarkMode ? '-green' : ''
theme === 'dark' ? '-green' : ''
}.svg`}
/>
</div>
apps/www/components/Products/VectorAI/CustomersVisual.tsx
+171 -71
View File
@@ -1,10 +1,10 @@
import React, { useRef } from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { LazyMotion, domAnimation, m, motion, useInView } from 'framer-motion'
import { DEFAULT_EASE, INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
const CustomersVisual = () => {
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const ref = useRef<any>()
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -17,7 +17,7 @@ const CustomersVisual = () => {
className="absolute inset-0 mx-auto aspect-[5.13/1] h-full z-10"
style={{
background: `radial-gradient(50% 50% at 50% 50%, transparent, ${
isDarkMode ? 'var(--colors-scale1)' : 'var(--colors-scale3)'
resolvedTheme === 'dark' ? 'var(--colors-scale1)' : 'var(--colors-scale3)'
})`,
}}
/>
@@ -63,7 +63,7 @@ const CustomersVisual = () => {
cy="151.574"
rx="271.124"
ry="82.5656"
fill={isDarkMode ? '#161616' : '#F1F3F5'}
fill={resolvedTheme === 'dark' ? '#161616' : '#F1F3F5'}
/>
</g>
<path
@@ -102,13 +102,13 @@ const CustomersVisual = () => {
<g filter="url(#filter2_f_4353_100693)">
<path
d="M930.203 82.036C914.556 60.4668 890.905 48.1616 865.905 48.1616H865.057C840.76 48.1616 817.7 60.0178 802.035 80.564C818.898 64.5075 841.409 55.49 864.944 55.49H865.882C890.122 55.49 913.214 65.1309 930.203 82.036Z"
fill={isDarkMode ? '#1EC77C' : '#2AB377'}
fill={resolvedTheme === 'dark' ? '#1EC77C' : '#2AB377'}
/>
</g>
<g filter="url(#filter3_f_4353_100693)">
<path
d="M944.969 69.0081C925.715 47.439 896.616 35.1338 865.854 35.1338H864.811C834.915 35.1338 806.542 46.99 787.268 67.5362C808.016 51.4797 835.714 39.2051 864.673 39.2051H865.826C895.651 39.2051 924.064 52.1031 944.969 69.0081Z"
fill={isDarkMode ? '#232323' : '#E1E1E1'}
fill={resolvedTheme === 'dark' ? '#232323' : '#E1E1E1'}
/>
</g>
{/* logo bg rays */}
@@ -244,7 +244,7 @@ const CustomersVisual = () => {
rx="303.093"
ry="68.9323"
transform="matrix(1 -0.000779452 -0.000779452 -1 562 296.168)"
fill={isDarkMode ? '#161616' : '#F1F3F5'}
fill={resolvedTheme === 'dark' ? '#161616' : '#F1F3F5'}
/>
</g>
{/* coordinates */}
@@ -456,13 +456,17 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 138.208) rotate(92.2122) scale(263.179 749.441)"
>
<stop stopColor={isDarkMode ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="0.489999"
stopColor={isDarkMode ? '#414141' : '#5F5F5F'}
stopColor={resolvedTheme === 'dark' ? '#414141' : '#5F5F5F'}
stopOpacity="0.84"
/>
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'}
stopOpacity="0"
/>
</radialGradient>
<radialGradient
id="paint1_radial_4353_100693"
@@ -472,13 +476,17 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(859.159 136.974) rotate(-103.238) scale(44.3621 730.071)"
>
<stop stopColor={isDarkMode ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="0.489999"
stopColor={isDarkMode ? '#414141' : '#5F5F5F'}
stopColor={resolvedTheme === 'dark' ? '#414141' : '#5F5F5F'}
stopOpacity="0.84"
/>
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'}
stopOpacity="0"
/>
</radialGradient>
<radialGradient
id="paint2_radial_4353_100693"
@@ -488,13 +496,17 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(863.122 127.579) rotate(-92.6074) scale(137.882 462.616)"
>
<stop stopColor={isDarkMode ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="0.489999"
stopColor={isDarkMode ? '#414141' : '#5F5F5F'}
stopColor={resolvedTheme === 'dark' ? '#414141' : '#5F5F5F'}
stopOpacity="0.84"
/>
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'}
stopOpacity="0"
/>
</radialGradient>
<radialGradient
id="paint3_radial_4353_100693"
@@ -504,13 +516,17 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(861.752 133.22) rotate(-90) scale(115.815 675.283)"
>
<stop stopColor={isDarkMode ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="0.592292"
stopColor={isDarkMode ? '#414141' : '#5F5F5F'}
stopColor={resolvedTheme === 'dark' ? '#414141' : '#5F5F5F'}
stopOpacity="0.84"
/>
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'}
stopOpacity="0"
/>
</radialGradient>
<radialGradient
id="paint4_radial_4353_100693"
@@ -520,13 +536,17 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.511 138.502) rotate(105.433) scale(25.8224 489.043)"
>
<stop stopColor={isDarkMode ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="0.489999"
stopColor={isDarkMode ? '#414141' : '#A3A3A3'}
stopColor={resolvedTheme === 'dark' ? '#414141' : '#A3A3A3'}
stopOpacity="0.84"
/>
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} stopOpacity="0" />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'}
stopOpacity="0"
/>
</radialGradient>
<radialGradient
id="paint5_radial_4353_100693"
@@ -536,8 +556,8 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(862.32 54.7715) rotate(90) scale(193.44 193.44)"
>
<stop stopColor={isDarkMode ? '#161616' : '#ffffff'} />
<stop offset="1" stopColor={isDarkMode ? '#161616' : '#F1F3F500'} />
<stop stopColor={resolvedTheme === 'dark' ? '#161616' : '#ffffff'} />
<stop offset="1" stopColor={resolvedTheme === 'dark' ? '#161616' : '#F1F3F500'} />
</radialGradient>
<motion.linearGradient
animate={{
@@ -556,7 +576,11 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="transparent" stopOpacity="0" />
<stop offset="0.5" stopColor={isDarkMode ? '#60e7aa' : '#096e40'} stopOpacity="0.6" />
<stop
offset="0.5"
stopColor={resolvedTheme === 'dark' ? '#60e7aa' : '#096e40'}
stopOpacity="0.6"
/>
<stop offset="1" stopColor="transparent" stopOpacity="0" />
</motion.linearGradient>
<linearGradient
@@ -568,7 +592,7 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#3DCB8C" />
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F1F3F5'} />
<stop offset="1" stopColor={resolvedTheme === 'dark' ? '#171717' : '#F1F3F5'} />
</linearGradient>
<linearGradient
id="paint7_linear_4353_100693"
@@ -580,11 +604,11 @@ const CustomersVisual = () => {
>
<stop
offset="0.331593"
stopColor={isDarkMode ? '#151515' : '#EAE8E9'}
stopColor={resolvedTheme === 'dark' ? '#151515' : '#EAE8E9'}
stopOpacity="0"
/>
<stop offset="0.594681" stopColor={isDarkMode ? '#A3A3A3' : '#636363'} />
<stop offset="1" stopColor={isDarkMode ? '#171717' : '#F2F4F6'} />
<stop offset="0.594681" stopColor={resolvedTheme === 'dark' ? '#A3A3A3' : '#636363'} />
<stop offset="1" stopColor={resolvedTheme === 'dark' ? '#171717' : '#F2F4F6'} />
</linearGradient>
<linearGradient
id="paint8_linear_4353_100693"
@@ -594,9 +618,9 @@ const CustomersVisual = () => {
y2="236.32"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.0114691" stopColor={isDarkMode ? '#171717' : '#F1F3F5'} />
<stop offset="0.0114691" stopColor={resolvedTheme === 'dark' ? '#171717' : '#F1F3F5'} />
<stop offset="0.540433" stopColor="#3DCB8C" />
<stop offset="1" stopColor={isDarkMode ? '#161616' : '#F1F3F5'} />
<stop offset="1" stopColor={resolvedTheme === 'dark' ? '#161616' : '#F1F3F5'} />
</linearGradient>
<linearGradient
id="paint9_linear_4353_100693"
@@ -617,9 +641,13 @@ const CustomersVisual = () => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(864.407 138.314) rotate(90) scale(55.0818)"
>
<stop stopColor={isDarkMode ? '#343434' : '#C7C8C8'} stopOpacity="0" />
<stop offset="0.522658" stopColor={isDarkMode ? '#212121' : '#D3D3D3'} />
<stop offset="1" stopColor={isDarkMode ? '#232323' : '#CFD1D1'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#343434' : '#C7C8C8'} stopOpacity="0" />
<stop offset="0.522658" stopColor={resolvedTheme === 'dark' ? '#212121' : '#D3D3D3'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#232323' : '#CFD1D1'}
stopOpacity="0"
/>
</radialGradient>
<linearGradient
id="paint11_linear_4353_100693"
@@ -629,8 +657,12 @@ const CustomersVisual = () => {
y2="163.315"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#E2E2E2' : '#B1AFAF'} />
<stop offset="1" stopColor={isDarkMode ? '#202020' : '#F2F2F2'} stopOpacity="0.29" />
<stop stopColor={resolvedTheme === 'dark' ? '#E2E2E2' : '#B1AFAF'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#202020' : '#F2F2F2'}
stopOpacity="0.29"
/>
</linearGradient>
<linearGradient
id="paint12_linear_4353_100693"
@@ -640,7 +672,7 @@ const CustomersVisual = () => {
y2="163.788"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#151515'} />
<stop stopColor={resolvedTheme === 'dark' ? 'white' : '#151515'} />
<stop offset="1" stopColor="#4D4D4D" stopOpacity="0" />
</linearGradient>
<linearGradient
@@ -651,8 +683,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#333333'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#333333'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint14_linear_4353_100693"
@@ -662,8 +698,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#333333'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#333333'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint15_linear_4353_100693"
@@ -673,8 +713,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#333333'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#333333'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint16_linear_4353_100693"
@@ -684,8 +728,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#333333'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#333333'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint17_linear_4353_100693"
@@ -695,8 +743,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#A4A4A4'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#A4A4A4'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint18_linear_4353_100693"
@@ -706,8 +758,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#A4A4A4'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#A4A4A4'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint19_linear_4353_100693"
@@ -717,8 +773,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#A4A4A4'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#A4A4A4'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint20_linear_4353_100693"
@@ -728,8 +788,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#BFBFBF' : '#A4A4A4'} />
<stop offset="0.3125" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#BFBFBF' : '#A4A4A4'} />
<stop
offset="0.3125"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint21_linear_4353_100693"
@@ -739,8 +803,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#00FF8E' : '#727272'} />
<stop offset="0.15625" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? '#00FF8E' : '#727272'} />
<stop
offset="0.15625"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint22_linear_4353_100693"
@@ -750,8 +818,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#757575'} />
<stop offset="0.15625" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? 'white' : '#757575'} />
<stop
offset="0.15625"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint23_linear_4353_100693"
@@ -761,8 +833,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#757575'} />
<stop offset="0.15625" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? 'white' : '#757575'} />
<stop
offset="0.15625"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint24_linear_4353_100693"
@@ -772,8 +848,12 @@ const CustomersVisual = () => {
y2="105.061"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#757575'} />
<stop offset="0.15625" stopColor={isDarkMode ? '#232323' : 'white'} stopOpacity="0" />
<stop stopColor={resolvedTheme === 'dark' ? 'white' : '#757575'} />
<stop
offset="0.15625"
stopColor={resolvedTheme === 'dark' ? '#232323' : 'white'}
stopOpacity="0"
/>
</linearGradient>
<linearGradient
id="paint25_linear_4353_100693"
@@ -783,8 +863,12 @@ const CustomersVisual = () => {
y2="94.3999"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#49FFAA' : '#0c0c0c'} />
<stop offset="1" stopColor={isDarkMode ? '#49FFAA' : '#002313'} stopOpacity="1" />
<stop stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#0c0c0c'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#002313'}
stopOpacity="1"
/>
</linearGradient>
<linearGradient
id="paint26_linear_4353_100693"
@@ -794,8 +878,12 @@ const CustomersVisual = () => {
y2="203.949"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#49FFAA' : '#3D4943'} />
<stop offset="1" stopColor={isDarkMode ? '#49FFAA' : '#002313'} stopOpacity="1" />
<stop stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#3D4943'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#002313'}
stopOpacity="1"
/>
</linearGradient>
<linearGradient
id="paint27_linear_4353_100693"
@@ -805,8 +893,12 @@ const CustomersVisual = () => {
y2="185.046"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#49FFAA' : '#1a1a1a'} />
<stop offset="1" stopColor={isDarkMode ? '#49FFAA' : '#002313'} stopOpacity="1" />
<stop stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#1a1a1a'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#002313'}
stopOpacity="1"
/>
</linearGradient>
<linearGradient
id="paint28_linear_4353_100693"
@@ -816,8 +908,12 @@ const CustomersVisual = () => {
y2="237.781"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#49FFAA' : '#3D4943'} />
<stop offset="1" stopColor={isDarkMode ? '#49FFAA' : '#002313'} stopOpacity="1" />
<stop stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#3D4943'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#002313'}
stopOpacity="1"
/>
</linearGradient>
<linearGradient
id="paint29_linear_4353_100693"
@@ -827,8 +923,12 @@ const CustomersVisual = () => {
y2="74.8884"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#49FFAA' : '#3D4943'} />
<stop offset="1" stopColor={isDarkMode ? '#49FFAA' : '#002313'} stopOpacity="1" />
<stop stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#3D4943'} />
<stop
offset="1"
stopColor={resolvedTheme === 'dark' ? '#49FFAA' : '#002313'}
stopOpacity="1"
/>
</linearGradient>
</defs>
</m.svg>
apps/www/components/Products/VectorAI/DeployGlobally.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import React from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
function getRandomNumber(min: number, max: number) {
var range = max - min
@@ -9,12 +9,12 @@ function getRandomNumber(min: number, max: number) {
}
const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const ref = React.useRef<any>()
const states = ['1', '2', '3']
const colors = {
green: isDarkMode ? '#1CF7C3' : '#00B99F',
gray: isDarkMode ? '#151918' : '#D3D3D3',
green: theme === 'dark' ? '#1CF7C3' : '#00B99F',
gray: theme === 'dark' ? '#151918' : '#D3D3D3',
}
const transitionDuration = 250
apps/www/components/Products/VectorAI/IntegrationsImage.tsx
+6 -5
View File
@@ -1,12 +1,12 @@
import React, { useRef } from 'react'
import Image from 'next/image'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
import { useBreakpoint } from 'common'
const IntegrationsImage = () => {
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const isMobile = useBreakpoint(767)
const ref = useRef(null)
const isInView = useInView(ref, { margin: '-25%', once: true })
@@ -16,9 +16,10 @@ const IntegrationsImage = () => {
console.log('ismobile', isMobile)
const image = isDarkMode
? `/images/product/vector/vector-tools-dark${isMobile ? '-mobile' : ''}.svg`
: `/images/product/vector/vector-tools-light${isMobile ? '-mobile' : ''}.svg`
const image =
resolvedTheme === 'dark'
? `/images/product/vector/vector-tools-dark${isMobile ? '-mobile' : ''}.svg`
: `/images/product/vector/vector-tools-light${isMobile ? '-mobile' : ''}.svg`
return (
<LazyMotion features={domAnimation}>
apps/www/components/Products/VectorAI/OpenAIImage.tsx
+14 -14
View File
@@ -1,10 +1,10 @@
import Image from 'next/image'
import React from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const lineVariants = {
animate: {
@@ -23,17 +23,17 @@ const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => {
}
const colors = {
glow: isDarkMode ? '#009C77' : '#00FFD9',
rectStart: isDarkMode ? '#17FDDF' : '#49615E',
rectEnd: isDarkMode ? '#10FFE0' : '#202020',
cardBgStart: isDarkMode ? '#171717' : 'white',
cardBgEnd: isDarkMode ? '#171717' : 'white',
openAIStart: isDarkMode ? '#89FFCA' : '#4FD7B6',
openAIEnd: isDarkMode ? '#D0FAE6' : '#4F7362',
openAIStrokeStart: isDarkMode ? '#A5FFD6' : '#5F5F5F',
openAIStrokeEnd: isDarkMode ? '#D0FAE6' : '#D6D6D6',
openAIAltStart: isDarkMode ? '#00DBA7' : '#00DBA7',
openAIAltEnd: isDarkMode ? '#171717' : '#DFDFDF',
glow: theme === 'dark' ? '#009C77' : '#00FFD9',
rectStart: theme === 'dark' ? '#17FDDF' : '#49615E',
rectEnd: theme === 'dark' ? '#10FFE0' : '#202020',
cardBgStart: theme === 'dark' ? '#171717' : 'white',
cardBgEnd: theme === 'dark' ? '#171717' : 'white',
openAIStart: theme === 'dark' ? '#89FFCA' : '#4FD7B6',
openAIEnd: theme === 'dark' ? '#D0FAE6' : '#4F7362',
openAIStrokeStart: theme === 'dark' ? '#A5FFD6' : '#5F5F5F',
openAIStrokeEnd: theme === 'dark' ? '#D0FAE6' : '#D6D6D6',
openAIAltStart: theme === 'dark' ? '#00DBA7' : '#00DBA7',
openAIAltEnd: theme === 'dark' ? '#171717' : '#DFDFDF',
}
return (
@@ -41,7 +41,7 @@ const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => {
<div className="w-[44%] h-[44%] -translate-x-[2px] absolute z-10 inset-0 top-auto bottom-[16%] m-auto">
<Image
src={
isDarkMode
theme === 'dark'
? '/images/product/vector/openai-logo-dark.png'
: '/images/product/vector/openai-logo-light.png'
}
apps/www/components/Products/VectorAI/PGvectorImg.tsx
+16 -16
View File
@@ -1,27 +1,27 @@
import React, { useEffect, useRef } from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { DEFAULT_EASE } from '~/lib/animations'
import { LazyMotion, domAnimation, m } from 'framer-motion'
const PGvectorImg = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const svgRef = useRef<any>()
const colors = {
circles1: isDarkMode ? '#105C3B' : '#008B4F',
circles2: isDarkMode ? '#1A2520' : '#DDDFDE',
pgLogoStart: isDarkMode ? '#70F8BB' : '#7CDBC5',
pgLogoEnd: isDarkMode ? '#A3A3A3' : '#006136',
pgLogoBg: isDarkMode ? '#161616' : 'white',
radialBgStart: isDarkMode ? '#131313' : '#F1F3F5',
radialBgEnd: isDarkMode ? '#161616' : '#F8F9FA',
coordinatesStart: isDarkMode ? '#23FF98' : '#002313',
coordinatesEnd: isDarkMode ? '#49FFAA' : '#032C18',
rectStart: isDarkMode ? '#17FDDF' : '#49615E',
rectEnd: isDarkMode ? '#10FFE0' : '#202020',
arrow: isDarkMode ? '#02FF8F' : '#00542F',
asdfStart: isDarkMode ? '#23FF98' : '#002313',
asdfEnd: isDarkMode ? '#49FFAA' : '#032C18',
circles1: resolvedTheme === 'dark' ? '#105C3B' : '#008B4F',
circles2: resolvedTheme === 'dark' ? '#1A2520' : '#DDDFDE',
pgLogoStart: resolvedTheme === 'dark' ? '#70F8BB' : '#7CDBC5',
pgLogoEnd: resolvedTheme === 'dark' ? '#A3A3A3' : '#006136',
pgLogoBg: resolvedTheme === 'dark' ? '#161616' : 'white',
radialBgStart: resolvedTheme === 'dark' ? '#131313' : '#F1F3F5',
radialBgEnd: resolvedTheme === 'dark' ? '#161616' : '#F8F9FA',
coordinatesStart: resolvedTheme === 'dark' ? '#23FF98' : '#002313',
coordinatesEnd: resolvedTheme === 'dark' ? '#49FFAA' : '#032C18',
rectStart: resolvedTheme === 'dark' ? '#17FDDF' : '#49615E',
rectEnd: resolvedTheme === 'dark' ? '#10FFE0' : '#202020',
arrow: resolvedTheme === 'dark' ? '#02FF8F' : '#00542F',
asdfStart: resolvedTheme === 'dark' ? '#23FF98' : '#002313',
asdfEnd: resolvedTheme === 'dark' ? '#49FFAA' : '#032C18',
}
const transition = (type: string) => ({
apps/www/components/Products/VectorAI/SecureAndScalableImg.tsx
+18 -18
View File
@@ -1,19 +1,19 @@
import React, { useEffect, useRef } from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { DEFAULT_EASE } from '~/lib/animations'
const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const shieldsRef = useRef<any>()
const mainRef = useRef<any>()
const colors = {
shieldsStroke: isDarkMode ? '#494949' : '#D5D5D5',
cardBg: isDarkMode ? '#161616' : '#F8F9FA',
bgGlow: isDarkMode ? '#009C77' : '#00FFD9',
iconBg: isDarkMode ? '#112B25' : '#DCDCDC',
smallIcon: isDarkMode ? '#1DF7C3' : '#00826A',
cardLine: isDarkMode ? '#1DF7C3' : '#00826A',
shieldsStroke: theme === 'dark' ? '#494949' : '#D5D5D5',
cardBg: theme === 'dark' ? '#161616' : '#F8F9FA',
bgGlow: theme === 'dark' ? '#009C77' : '#00FFD9',
iconBg: theme === 'dark' ? '#112B25' : '#DCDCDC',
smallIcon: theme === 'dark' ? '#1DF7C3' : '#00826A',
cardLine: theme === 'dark' ? '#1DF7C3' : '#00826A',
}
useEffect(() => {
@@ -142,13 +142,13 @@ const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
/>
<path
d="M90.8516 115.565H193.852"
stroke={isDarkMode ? '#F3F3F3' : 'black'}
stroke={theme === 'dark' ? '#F3F3F3' : 'black'}
strokeOpacity="0.1"
strokeWidth="0.845575"
/>
<path
d="M97.6961 128.263H97.0285C96.9788 128.015 96.8888 127.785 96.7586 127.574C96.6308 127.361 96.4698 127.175 96.2757 127.017C96.0815 126.858 95.8614 126.735 95.6151 126.647C95.3689 126.56 95.1026 126.516 94.8161 126.516C94.3569 126.516 93.9378 126.636 93.559 126.875C93.1826 127.114 92.8808 127.465 92.6535 127.929C92.4286 128.391 92.3161 128.957 92.3161 129.627C92.3161 130.302 92.4286 130.87 92.6535 131.331C92.8808 131.793 93.1826 132.143 93.559 132.383C93.9378 132.619 94.3569 132.738 94.8161 132.738C95.1026 132.738 95.3689 132.694 95.6151 132.606C95.8614 132.519 96.0815 132.397 96.2757 132.241C96.4698 132.082 96.6308 131.896 96.7586 131.683C96.8888 131.47 96.9788 131.239 97.0285 130.991H97.6961C97.6369 131.324 97.5257 131.636 97.3623 131.924C97.2013 132.211 96.9954 132.462 96.7444 132.677C96.4958 132.893 96.2094 133.061 95.885 133.182C95.5607 133.302 95.2044 133.363 94.8161 133.363C94.2053 133.363 93.6632 133.21 93.1897 132.905C92.7162 132.597 92.3445 132.164 92.0747 131.605C91.8071 131.046 91.6734 130.387 91.6734 129.627C91.6734 128.867 91.8071 128.208 92.0747 127.649C92.3445 127.09 92.7162 126.658 93.1897 126.353C93.6632 126.045 94.2053 125.891 94.8161 125.891C95.2044 125.891 95.5607 125.951 95.885 126.072C96.2094 126.191 96.4958 126.359 96.7444 126.576C96.9954 126.792 97.2013 127.043 97.3623 127.329C97.5257 127.616 97.6369 127.927 97.6961 128.263ZM101.33 133.377C100.821 133.377 100.38 133.258 100.009 133.022C99.6371 132.783 99.3495 132.452 99.1459 132.031C98.9446 131.607 98.844 131.12 98.844 130.568C98.844 130.019 98.9446 129.531 99.1459 129.105C99.3495 128.676 99.63 128.341 99.9875 128.1C100.347 127.856 100.763 127.734 101.234 127.734C101.53 127.734 101.815 127.789 102.09 127.897C102.364 128.004 102.611 128.169 102.828 128.391C103.049 128.611 103.223 128.889 103.35 129.226C103.478 129.559 103.542 129.955 103.542 130.412V130.724H99.2808V130.167H102.896C102.896 129.816 102.825 129.501 102.683 129.222C102.543 128.94 102.348 128.718 102.097 128.554C101.848 128.391 101.561 128.309 101.234 128.309C100.888 128.309 100.584 128.402 100.321 128.586C100.059 128.771 99.8525 129.015 99.7034 129.318C99.5566 129.621 99.482 129.952 99.4797 130.312V130.646C99.4797 131.079 99.5542 131.458 99.7034 131.782C99.8549 132.104 100.069 132.354 100.346 132.532C100.623 132.709 100.951 132.798 101.33 132.798C101.588 132.798 101.814 132.758 102.008 132.677C102.205 132.597 102.369 132.489 102.502 132.354C102.637 132.217 102.738 132.066 102.807 131.903L103.407 132.098C103.324 132.328 103.188 132.54 102.999 132.734C102.812 132.928 102.577 133.084 102.296 133.203C102.016 133.319 101.694 133.377 101.33 133.377ZM104.935 133.263V127.809H105.549V128.647H105.596C105.705 128.372 105.894 128.151 106.164 127.983C106.436 127.812 106.744 127.727 107.087 127.727C107.139 127.727 107.197 127.728 107.261 127.731C107.325 127.733 107.378 127.735 107.421 127.738V128.38C107.392 128.376 107.343 128.369 107.272 128.359C107.201 128.35 107.124 128.345 107.041 128.345C106.757 128.345 106.504 128.405 106.281 128.526C106.061 128.644 105.887 128.809 105.759 129.02C105.631 129.23 105.567 129.471 105.567 129.741V133.263H104.935ZM110.99 127.809V128.359H108.387V127.809H110.99ZM109.2 126.502H109.836V131.839C109.836 132.066 109.875 132.245 109.953 132.375C110.031 132.503 110.133 132.594 110.258 132.649C110.384 132.701 110.517 132.727 110.66 132.727C110.742 132.727 110.813 132.722 110.873 132.713C110.932 132.701 110.984 132.689 111.029 132.677L111.164 133.249C111.102 133.273 111.026 133.294 110.937 133.313C110.847 133.334 110.735 133.345 110.603 133.345C110.371 133.345 110.147 133.294 109.932 133.192C109.718 133.09 109.543 132.939 109.406 132.738C109.269 132.536 109.2 132.287 109.2 131.988V126.502ZM112.432 133.263V127.809H113.068V133.263H112.432ZM112.756 126.871C112.625 126.871 112.514 126.827 112.422 126.74C112.329 126.65 112.283 126.542 112.283 126.417C112.283 126.291 112.329 126.185 112.422 126.097C112.514 126.007 112.625 125.962 112.756 125.962C112.886 125.962 112.997 126.007 113.089 126.097C113.182 126.185 113.228 126.291 113.228 126.417C113.228 126.542 113.182 126.65 113.089 126.74C112.997 126.827 112.886 126.871 112.756 126.871ZM116.984 127.809V128.359H114.303V127.809H116.984ZM115.141 133.263V127.01C115.141 126.716 115.209 126.469 115.343 126.267C115.481 126.066 115.66 125.914 115.88 125.809C116.1 125.705 116.333 125.653 116.579 125.653C116.745 125.653 116.882 125.667 116.991 125.696C117.102 125.722 117.19 125.748 117.254 125.774L117.069 126.328C117.022 126.314 116.964 126.297 116.895 126.278C116.827 126.259 116.74 126.25 116.636 126.25C116.361 126.25 116.15 126.327 116 126.481C115.851 126.634 115.777 126.855 115.777 127.141L115.773 133.263H115.141ZM118.253 133.263V127.809H118.888V133.263H118.253ZM118.576 126.871C118.446 126.871 118.334 126.827 118.242 126.74C118.15 126.65 118.104 126.542 118.104 126.417C118.104 126.291 118.15 126.185 118.242 126.097C118.334 126.007 118.446 125.962 118.576 125.962C118.706 125.962 118.817 126.007 118.91 126.097C119.00Line truncated
fill={isDarkMode ? 'white' : 'black'}
fill={theme === 'dark' ? 'white' : 'black'}
/>
<rect
x="177.543"
@@ -531,8 +531,8 @@ const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
y2="131.024"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? 'white' : '#1CB199'} />
<stop offset="1" stopColor={isDarkMode ? 'white' : '#494949'} stopOpacity="0" />
<stop stopColor={theme === 'dark' ? 'white' : '#1CB199'} />
<stop offset="1" stopColor={theme === 'dark' ? 'white' : '#494949'} stopOpacity="0" />
</linearGradient>
<linearGradient
id="paint1_linear_4346_100010"
@@ -542,8 +542,8 @@ const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
y2="155.033"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#1DF7C3' : '#3AFFE5'} stopOpacity="0.86" />
<stop offset="1" stopColor={isDarkMode ? '#161616' : '#38BBAA'} stopOpacity="0" />
<stop stopColor={theme === 'dark' ? '#1DF7C3' : '#3AFFE5'} stopOpacity="0.86" />
<stop offset="1" stopColor={theme === 'dark' ? '#161616' : '#38BBAA'} stopOpacity="0" />
</linearGradient>
<radialGradient
id="paint2_radial_4346_100010"
@@ -553,8 +553,8 @@ const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(144.569 41.4294) rotate(90) scale(84.0463 63.1218)"
>
<stop stopColor={isDarkMode ? '#3AFFE5' : '#109079'} />
<stop offset="1" stopColor={isDarkMode ? '#38BBAA' : '#3DCB8C'} stopOpacity="0" />
<stop stopColor={theme === 'dark' ? '#3AFFE5' : '#109079'} />
<stop offset="1" stopColor={theme === 'dark' ? '#38BBAA' : '#3DCB8C'} stopOpacity="0" />
</radialGradient>
<linearGradient
id="paint3_linear_4346_100010"
@@ -564,8 +564,8 @@ const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
y2="79.1828"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={isDarkMode ? '#1CF7C3' : '#109179'} />
<stop offset="1" stopColor={isDarkMode ? '#3DCB8C' : '#0B0B0B'} stopOpacity="0" />
<stop stopColor={theme === 'dark' ? '#1CF7C3' : '#109179'} />
<stop offset="1" stopColor={theme === 'dark' ? '#3DCB8C' : '#0B0B0B'} stopOpacity="0" />
</linearGradient>
</defs>
</svg>
apps/www/components/Sections/CustomerQuotesSection.tsx
+5 -3
View File
@@ -2,7 +2,7 @@ import { useRef } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { IconArrowUpRight } from 'ui'
import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
@@ -40,8 +40,10 @@ const CustomerQuotesSection = (props: Props) => {
const isInView = useInView(ref, { margin: '-25%', once: true })
const Card = ({ customer, index }: Card) => {
const { isDarkMode } = useTheme()
const logo = `/images/customers/logos/${!isDarkMode ? '' : 'light/'}${customer.customer}.png`
const { resolvedTheme } = useTheme()
const logo = `/images/customers/logos/${resolvedTheme !== 'dark' ? '' : 'light/'}${
customer.customer
}.png`
const initial = INITIAL_BOTTOM
const animate = getAnimation({ delay: index * 0.1 })
apps/www/data/products/vector/pageData.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export default {
},
{
icon: `M6 2C4.89543 2 4 2.89543 4 4V9.52779C5.06151 8.57771 6.46329 8 8 8C11.3137 8 14 10.6863 14 14C14 15.5367 13.4223 16.9385 12.4722 18H14C15.1046 18 16 17.1046 16 16V7.41421C16 6.88378 15.7893 6.37507 15.4142 6L12 2.58579C11.6249 2.21071 11.1162 2 10.5858 2H6Z
M4 14C4 11.7909 5.79086 10 8 10C10.2091 10 12 11.7909 12 14C12 16.2091 10.2091 18 8 18C7.25862 18 6.56362 17.7977 5.96818 17.446L4.70711 18.7071C4.31658 19.0976 3.68342 19.0976 3.29289 18.7071C2.90237 18.3166 2.90237 17.6834 3.29289 17.2929L4.55397 16.0318C4.20229 15.4364 4 14.7414 4 14ZM8 12C6.89543 12 6 12.8954 6 14C6 14.5526 6.22276 15.0512 6.58579 15.4142C6.94881 15.7772 7.44744 16 8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12Z
`,
title: 'Hybrid search',
apps/www/pages/404.tsx
+3 -3
View File
@@ -5,14 +5,14 @@ import { Button } from 'ui'
import DefaultLayout from '../components/Layouts/Default'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
const Error404 = () => {
const [show404, setShow404] = useState<boolean>(false)
const { isDarkMode } = useTheme()
const { theme } = useTheme()
useEffect(() => {
setTimeout(() => {
@@ -29,7 +29,7 @@ const Error404 = () => {
<div className="flex w-full items-center justify-between md:w-auto">
<a href="/">
<Image
src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
src={theme === 'dark' ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
alt="supabase logo"
height={24}
width={120}
apps/www/pages/_app.tsx
+10 -2
View File
@@ -57,7 +57,9 @@ export default function App({ Component, pageProps }: AppProps) {
}, [router.isReady, consentValue])
const site_title = `${APP_NAME} | The Open Source Firebase Alternative`
const { basePath } = useRouter()
const { basePath, pathname } = useRouter()
const forceDarkMode = pathname === '/' || router.pathname.startsWith('/launch-week')
return (
<>
@@ -88,7 +90,13 @@ export default function App({ Component, pageProps }: AppProps) {
}}
/>
<AuthProvider>
<ThemeProvider detectSystemColorPreference={false}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
forcedTheme={forceDarkMode ? 'dark' : undefined}
>
<PortalToast />
<Component {...pageProps} />
</ThemeProvider>
apps/www/pages/_document.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default class MyDocument extends Document {
return (
<Html lang="en">
<Head></Head>
<body className="dark">
<body>
<Main />
<NextScript />
</body>
apps/www/pages/careers/index.tsx
+8 -6
View File
@@ -8,7 +8,7 @@ import { Badge, Button, IconCheck } from 'ui'
import Globe from '~/components/Globe'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import career from '~/data/career.json'
import Styles from './career.module.css'
@@ -76,7 +76,7 @@ export async function getStaticProps() {
}
const CareerPage: NextPage = ({ jobs, contributors }: any) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { basePath } = useRouter()
const meta_title = 'Careers | Supabase'
@@ -282,7 +282,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
<div className="relative w-full h-full mx-auto">
<Image
src={`/images/career/icons/${human.icon}${
isDarkMode ? '-dark' : '-light'
theme === 'dark' ? '-dark' : '-light'
}.svg`}
className="w-12 h-12 sm:w-10 sm:h-10 lg:w-12 lg:h-12"
alt={`${human.icon} icon`}
@@ -306,7 +306,9 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
<div className="w-14 h-14 rounded-lg flex items-center mx-auto mb-6">
<div className="relative w-full h-full mx-auto">
<Image
src={`/images/career/icons/open_source${isDarkMode ? '-dark' : '-light'}.svg`}
src={`/images/career/icons/open_source${
theme === 'dark' ? '-dark' : '-light'
}.svg`}
alt="open source icon"
layout="fill"
objectFit="cover"
@@ -395,7 +397,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
<div className="relative w-full h-full mx-auto">
<Image
src={`/images/career/icons/${benefits.icon}${
isDarkMode ? '-dark' : '-light'
theme === 'dark' ? '-dark' : '-light'
}.svg`}
alt={`${benefits.icon} icon`}
layout="fill"
@@ -421,7 +423,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
<div className="w-14 h-14 rounded-lg flex items-center mx-auto mb-6">
<div className="relative w-full h-full mx-auto">
<Image
src={`/images/career/icons/jobs${isDarkMode ? '-dark' : '-light'}.svg`}
src={`/images/career/icons/jobs${theme === 'dark' ? '-dark' : '-light'}.svg`}
alt="jobs icon"
layout="fill"
objectFit="cover"
apps/www/pages/index.tsx
-15
View File
@@ -1,9 +1,6 @@
import { useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
import PostTypes from '~/types/post'
import { getSortedPosts } from '~/lib/posts'
import { useTheme } from 'common'
import content from '~/data/home/content'
import Layout from '~/components/Layouts/Default'
import Hero from '~/components/Hero/Hero'
@@ -22,18 +19,6 @@ const TwitterSocialSection = dynamic(() => import('~/components/TwitterSocialSec
type Props = { customerStories: PostTypes[] }
const Index = ({ customerStories }: Props) => {
const { isDarkMode, toggleTheme } = useTheme()
const [initialDarkMode] = useState(isDarkMode)
useEffect(() => {
toggleTheme(true)
document.body.className = 'dark'
return () => {
document.body.className = ''
toggleTheme(initialDarkMode)
}
}, [])
return (
<Layout>
<Hero />
apps/www/pages/launch-week/6/index.tsx
+26 -35
View File
@@ -10,7 +10,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
import { createClient, SupabaseClient } from '@supabase/supabase-js'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useTheme } from 'ui'
import { useTheme } from 'next-themes'
import classNames from 'classnames'
import { SITE_ORIGIN } from '~/lib/constants'
import { Accordion, Badge, IconExternalLink } from 'ui'
@@ -34,7 +34,7 @@ const constellation = [
]
export default function launchweek() {
const { isDarkMode, toggleTheme } = useTheme()
const { theme, setTheme } = useTheme()
const title = 'Launch Week 6'
const description = 'Supabase Launch Week 6 | 12-18 Dec 2022'
const liveDay = null
@@ -63,15 +63,6 @@ export default function launchweek() {
}
}, [supabase])
useEffect(() => {
toggleTheme(true)
document.body.className = 'bg-[#121212]'
return () => {
document.body.className = ''
isDarkMode ? toggleTheme(true) : toggleTheme(false)
}
}, [])
async function getCreators() {
try {
// setLoading(true)
@@ -319,7 +310,7 @@ export default function launchweek() {
className="absolute group-hover/day1:scale-105 opacity-60 group-hover/day1:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(650px 150px at 50% 100%, ${
isDarkMode ? '#103633' : '#b8e8e7'
theme === 'dark' ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
@@ -365,7 +356,7 @@ export default function launchweek() {
className="top-0 absolute group-hover/2:scale-105 opacity-60 group-hover/2:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(90% 130px at 80% 0px, ${
isDarkMode ? '#103633' : '#b8e8e7'
theme === 'dark' ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
@@ -384,7 +375,7 @@ export default function launchweek() {
className="top-0 absolute group-hover/3:scale-105 opacity-60 group-hover/3:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(90% 130px at 50% 0px, ${
isDarkMode ? '#103633' : '#b8e8e7'
theme === 'dark' ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
@@ -423,7 +414,7 @@ export default function launchweek() {
<div className="absolute top-0 right-0 w-full h-full -z-20 ">
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/mfa-dark.png'
: '/images/launchweek/mfa-light.png'
}
@@ -482,7 +473,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/wrappers-visual.svg'
: '/images/launchweek/wrappers-visual-light.svg'
}
@@ -498,7 +489,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/wrappers-visual-hover.svg'
: '/images/launchweek/wrappers-visual-hover-light.svg'
}
@@ -549,7 +540,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/vault-visual.svg'
: '/images/launchweek/vault-visual-light.svg'
}
@@ -565,7 +556,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/vault-visual-hover.svg'
: '/images/launchweek/vault-visual-hover-light.svg'
}
@@ -589,7 +580,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/TCE-visual.svg'
: '/images/launchweek/TCE-visual-light.svg'
}
@@ -605,7 +596,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/TCE-visual-hover.svg'
: '/images/launchweek/TCE-visual-hover-light.svg'
}
@@ -634,7 +625,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/community-visual.svg'
: '/images/launchweek/community-visual-light.svg'
}
@@ -650,7 +641,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/community-visual-hover.svg'
: '/images/launchweek/community-visual-light-hover.svg'
}
@@ -739,7 +730,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PgGraphql-visual.svg'
: '/images/launchweek/PgGraphql-visual-light.svg'
}
@@ -755,7 +746,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PgGraphql-visual-hover.svg'
: '/images/launchweek/PgGraphql-visual-hover-light.svg'
}
@@ -782,7 +773,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/custom-domains-visual.svg'
: '/images/launchweek/custom-domains-visual-light.svg'
}
@@ -798,7 +789,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/custom-domains-visual-hover.svg'
: '/images/launchweek/custom-domains-visual-hover-light.svg'
}
@@ -825,7 +816,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PITR-visual.svg'
: '/images/launchweek/PITR-visual-light.svg'
}
@@ -841,7 +832,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PITR-visual-hover.svg'
: '/images/launchweek/PITR-visual-hover-light.svg'
}
@@ -868,7 +859,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/pg_crdt-visual.svg'
: '/images/launchweek/pg_crdt-visual-light.svg'
}
@@ -884,7 +875,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/pg_crdt-visual-hover.svg'
: '/images/launchweek/pg_crdt-visual-hover-light.svg'
}
@@ -911,7 +902,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/postgres-visual.svg'
: '/images/launchweek/postgres-visual-light.svg'
}
@@ -927,7 +918,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/postgres-visual-hover.svg'
: '/images/launchweek/postgres-visual-hover-light.svg'
}
@@ -954,7 +945,7 @@ export default function launchweek() {
<div className={`absolute top-0 right-0 w-full h-full -z-20`}>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PostgREST11-visual.svg'
: '/images/launchweek/PostgREST11-visual-light.svg'
}
@@ -970,7 +961,7 @@ export default function launchweek() {
>
<Image
src={
isDarkMode
theme === 'dark'
? '/images/launchweek/PostgREST11-visual-hover.svg'
: '/images/launchweek/PostgREST11-visual-hover-light.svg'
}
apps/www/pages/launch-week/7/index.tsx
+2 -11
View File
@@ -11,7 +11,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer'
import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader'
import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
import LW7BgGraphic from '~/components/LaunchWeek/7/LW7BgGraphic'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
const LW7Releases = dynamic(() => import('~/components/LaunchWeek/7/Releases'))
const LaunchWeekPrizeSection = dynamic(
@@ -32,21 +32,12 @@ const supabaseAdmin = createClient(
process.env.NEXT_PUBLIC_MISC_USE_ANON_KEY!
)
export default function TicketHome({ users }: Props) {
const { isDarkMode, toggleTheme } = useTheme()
const { theme, setTheme } = useTheme()
const TITLE = 'Supabase LaunchWeek 7'
const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023'
const OG_IMAGE = `${SITE_ORIGIN}/images/launchweek/seven/launch-week-7-teaser.jpg`
useEffect(() => {
toggleTheme(true)
document.body.className = 'bg-[#1C1C1C]'
return () => {
document.body.className = ''
isDarkMode ? toggleTheme(true) : toggleTheme(false)
}
}, [])
return (
<>
<NextSeo
apps/www/pages/launch-week/7/tickets/[username].tsx
+3 -3
View File
@@ -14,7 +14,7 @@ import TicketBrickWall from '~/components/LaunchWeek/7/LaunchSection/TicketBrick
import { UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
import LW7BgGraphic from '~/components/LaunchWeek/7/LW7BgGraphic'
import CTABanner from '~/components/CTABanner'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
interface Props {
user: UserData
@@ -28,7 +28,7 @@ const supabaseAdmin = createClient(
)
export default function UsernamePage({ user, users, ogImageUrl }: Props) {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { username, ticketNumber, name, golden, referrals, bg_image_id } = user
const TITLE = `${name ? name + '’s' : 'Get your'} #SupaLaunchWeek Ticket`
const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023 | Generate your ticket. Win swag.'
@@ -46,7 +46,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
document.body.className = '!dark bg-[#1C1C1C]'
return () => {
document.body.className = isDarkMode ? 'dark' : 'light'
document.body.className = theme === 'dark' ? 'dark' : 'light'
}
}, [])
apps/www/pages/launch-week/7/tickets/index.tsx
+3 -3
View File
@@ -14,7 +14,7 @@ import { debounce } from 'lodash'
import TicketsGrid from '~/components/LaunchWeek/7/TicketsGrid'
import { Button } from 'ui'
import Link from 'next/link'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
interface Props {
users: UserData[]
@@ -41,7 +41,7 @@ export default function TicketsPage({ users }: Props) {
const DESCRIPTION = 'Supabase Launch Week 7 | 10–14 April 2023'
const OG_IMAGE = `${SITE_ORIGIN}/images/launchweek/seven/launch-week-7-teaser.jpg`
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [isLoading, setIsLoading] = useState(false)
const [offset, setOffset] = useState(1)
const [isLast, setIsLast] = useState(false)
@@ -86,7 +86,7 @@ export default function TicketsPage({ users }: Props) {
window.addEventListener('scroll', handleDebouncedScroll)
return () => {
document.body.className = isDarkMode ? 'dark' : 'light'
document.body.className = theme === 'dark' ? 'dark' : 'light'
window.removeEventListener('scroll', handleDebouncedScroll)
}
}, [])
apps/www/pages/launch-week/index.tsx
+8 -7
View File
@@ -15,7 +15,7 @@ import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHe
import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
import LW8CalloutsSection from '~/components/LaunchWeek/8/LW8CalloutsSection'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import 'swiper/swiper.min.css'
@@ -53,8 +53,8 @@ export default function TicketHome({ users, meetups }: Props) {
const bgImageId = query.bgImageId?.toString()
const [supabase, setSupabase] = useState<SupabaseClient | null>(null)
const [session, setSession] = useState<Session | null>(null)
const { isDarkMode, toggleTheme } = useTheme()
const [initialDarkMode] = useState(isDarkMode)
const [initialDarkMode] = useState('dark')
const defaultUserData = {
id: query.id?.toString(),
@@ -93,11 +93,12 @@ export default function TicketHome({ users, meetups }: Props) {
}, [supabase])
useEffect(() => {
toggleTheme(true)
document.body.className = 'dark bg-[#020405]'
document.body.classList.add('bg-[#020405]')
return () => {
document.body.className = ''
toggleTheme(initialDarkMode)
if (document.body.classList.contains('bg-[#020405]')) {
document.body.classList.remove('bg-[#020405]')
}
}
}, [])
apps/www/pages/launch-week/tickets/[username].tsx
+3 -12
View File
@@ -5,7 +5,7 @@ import Image from 'next/image'
import Error from 'next/error'
import dynamic from 'next/dynamic'
import { Session, SupabaseClient, createClient } from '@supabase/supabase-js'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -41,8 +41,8 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
const [supabase, setSupabase] = useState<SupabaseClient | null>(null)
const [session, setSession] = useState<Session | null>(null)
const { isDarkMode, toggleTheme } = useTheme()
const [initialDarkMode] = useState(isDarkMode)
const { theme, setTheme } = useTheme()
const [initialDarkMode] = useState(theme === 'dark')
const [pageState, setPageState] = useState<PageState>('ticket')
@@ -61,15 +61,6 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
}
}, [])
useEffect(() => {
toggleTheme(true)
document.body.className = 'dark bg-[#020405]'
return () => {
document.body.className = ''
toggleTheme(initialDarkMode)
}
}, [])
return (
<>
<NextSeo
apps/www/pages/launch-week/tickets/index.tsx
+5 -5
View File
@@ -9,7 +9,7 @@ import { createClient } from '@supabase/supabase-js'
import { debounce } from 'lodash'
import { SITE_ORIGIN, SITE_URL } from '~/lib/constants'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -42,8 +42,8 @@ export default function TicketsPage({ users }: Props) {
const DESCRIPTION = 'Supabase Launch Week 8 | 7–11 August 2023'
const OG_IMAGE = `${SITE_ORIGIN}/images/launchweek/8/lw8-og.jpg`
const { isDarkMode, toggleTheme } = useTheme()
const [initialDarkMode] = useState(isDarkMode)
const { theme, setTheme } = useTheme()
const [initialDarkMode] = useState(theme === 'dark')
const [isLoading, setIsLoading] = useState(false)
const [offset, setOffset] = useState(1)
const [isLast, setIsLast] = useState(false)
@@ -92,11 +92,11 @@ export default function TicketsPage({ users }: Props) {
}, [])
useEffect(() => {
toggleTheme(true)
setTheme('dark')
document.body.className = 'dark bg-[#020405]'
return () => {
document.body.className = ''
toggleTheme(initialDarkMode)
setTheme('dark')
}
}, [])
apps/www/pages/pricing/index.tsx
+7 -5
View File
@@ -10,7 +10,7 @@ import DefaultLayout from '~/components/Layouts/Default'
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/Pricing/PricingTableRow'
import { pricing } from 'shared-data/pricing'
import pricingFaq from '~/data/PricingFAQ.json'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import ComputePricingModal from '~/components/Pricing/ComputePricingModal'
import { plans } from 'shared-data/plans'
import { ArrowNarrowRightIcon } from '@heroicons/react/outline'
@@ -19,7 +19,7 @@ import AnnouncementBadge from '../../components/Announcement/Badge'
export default function IndexPage() {
const router = useRouter()
const { basePath, asPath } = useRouter()
const { isDarkMode } = useTheme()
const { resolvedTheme } = useTheme()
const [showComputeModal, setShowComputeModal] = useState(false)
const [activeMobilePlan, setActiveMobilePlan] = useState('Free')
@@ -345,7 +345,7 @@ export default function IndexPage() {
<img
className="w-full"
src={`${basePath}/images/pricing/${addon.heroImg}${
isDarkMode ? '' : '-light'
resolvedTheme === 'dark' ? '' : '-light'
}.png`}
/>
</div>
@@ -354,7 +354,7 @@ export default function IndexPage() {
<div className="flex items-center gap-2 mt-2">
<img
src={`${basePath}/images/pricing/${addon.icon}${
isDarkMode ? '' : '-light'
resolvedTheme === 'dark' ? '' : '-light'
}.svg`}
className="file:"
alt="Compute"
@@ -421,7 +421,9 @@ export default function IndexPage() {
<div>
<img
className="w-full"
src={`${basePath}/images/pricing/spend-cap${isDarkMode ? '' : '-light'}.png`}
src={`${basePath}/images/pricing/spend-cap${
resolvedTheme === 'dark' ? '' : '-light'
}.png`}
/>
</div>
</div>
apps/www/public/customers-rss.xml
+11 -11
View File
@@ -5,77 +5,77 @@
<link>https://supabase.com</link>
<description>Latest news from Supabase</description>
<language>en</language>
<lastBuildDate>Thu, 05 Oct 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Thu, 05 Oct 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/customers/chatbase</guid>
<title>Bootstrapped founder builds an AI app with Supabase and scales to $1M in 5 months</title>
<link>https://supabase.com/customers/chatbase</link>
<description>How Yasser leveraged Supabase to build Chatbase and became one of the most successful single-founder AI products.</description>
<pubDate>Thu, 05 Oct 2023 22:00:00 GMT</pubDate>
<pubDate>Thu, 05 Oct 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/quivr</guid>
<title>Quivr launch 5,000 Vector databases on Supabase.</title>
<link>https://supabase.com/customers/quivr</link>
<description>Learn how one of the most popular Generative AI projects uses Supabase as their Vector Store.</description>
<pubDate>Wed, 04 Oct 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 04 Oct 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/berriai</guid>
<title>Berri AI boosts productivity by migrating from AWS RDS to Supabase Vector</title>
<link>https://supabase.com/customers/berriai</link>
<description>Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.</description>
<pubDate>Mon, 05 Jun 2023 22:00:00 GMT</pubDate>
<pubDate>Mon, 05 Jun 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/markprompt</guid>
<title>Markprompt and Supabase - GDPR-compliant AI chatbots for docs and websites.</title>
<link>https://supabase.com/customers/markprompt</link>
<description>AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase&apos;s secure and privacy-focused vector database and authentication solutions.</description>
<pubDate>Tue, 16 May 2023 22:00:00 GMT</pubDate>
<pubDate>Tue, 16 May 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/mendableai</guid>
<title>Mendable switches from Pinecone to Supabase Vector for PostgreSQL vector embeddings.</title>
<link>https://supabase.com/customers/mendableai</link>
<description>How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase Vector.</description>
<pubDate>Thu, 04 May 2023 22:00:00 GMT</pubDate>
<pubDate>Thu, 04 May 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/happyteams</guid>
<title>HappyTeams unlocks better performance and reduces cost with Supabase.</title>
<link>https://supabase.com/customers/happyteams</link>
<description>How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back.</description>
<pubDate>Wed, 15 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Wed, 15 Feb 2023 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/xendit</guid>
<title>Xendit use Supabase and create a full solution shipped to production in less than one week.</title>
<link>https://supabase.com/customers/xendit</link>
<description>As a payment processor, Xendit are responsible for verifying that all transactions are legal.</description>
<pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Mon, 13 Feb 2023 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/replenysh</guid>
<title>Replenysh uses Supabase to implement OTP in less than 24 hours.</title>
<link>https://supabase.com/customers/replenysh</link>
<description>With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.</description>
<pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Mon, 13 Feb 2023 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/mobbin</guid>
<title>How Mobbin migrated 200,000 users from Firebase for a better authentication experience.</title>
<link>https://supabase.com/customers/mobbin</link>
<description>Mobbin helps over 200,000 creators globally search and view the latest design patterns from well-known apps.</description>
<pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Mon, 13 Feb 2023 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/customers/epsilon3</guid>
<title>Epsilon3 digitize paper-based procedures in the space industry using telemetry data, simplifying testing and operations.</title>
<link>https://supabase.com/customers/epsilon3</link>
<description>Epsilon3 uses Supabase to help teams execute secure and reliable operations in an industry where project spend runs into the billions.</description>
<pubDate>Mon, 13 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Mon, 13 Feb 2023 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-angelico_de_los_reyes-rss.xml
+5 -5
View File
@@ -5,35 +5,35 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Angelico de los Reyes at Supabase</description>
<language>en</language>
<lastBuildDate>Thu, 15 Dec 2022 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Thu, 15 Dec 2022 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-angelico_de_los_reyes-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/postgres-point-in-time-recovery</guid>
<title>Point in Time Recovery is now available for Pro projects</title>
<link>https://supabase.com/blog/postgres-point-in-time-recovery</link>
<description>We&apos;re making PITR available for more projects, with a new Dashboard UI that makes it simple to use.</description>
<pubDate>Thu, 15 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Thu, 15 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/continuous-postgresql-backup-walg</guid>
<title>Continuous PostgreSQL Backups using WAL-G</title>
<link>https://supabase.com/blog/continuous-postgresql-backup-walg</link>
<description>Have you ever wanted to restore your database&apos;s state to a particular moment in time? This post explains how, using WAL-G.</description>
<pubDate>Sat, 01 Aug 2020 22:00:00 GMT</pubDate>
<pubDate>Sun, 02 Aug 2020 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgresql-templates</guid>
<title>What are PostgreSQL Templates?</title>
<link>https://supabase.com/blog/postgresql-templates</link>
<description>What are PostgreSQL templates and what are they used for?</description>
<pubDate>Wed, 08 Jul 2020 22:00:00 GMT</pubDate>
<pubDate>Thu, 09 Jul 2020 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgresql-physical-logical-backups</guid>
<title>Physical vs Logical Backups in PostgreSQL</title>
<link>https://supabase.com/blog/postgresql-physical-logical-backups</link>
<description>What are physical and logical backups in Postgres?</description>
<pubDate>Mon, 06 Jul 2020 22:00:00 GMT</pubDate>
<pubDate>Tue, 07 Jul 2020 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-ant_wilson-rss.xml
+2 -2
View File
@@ -5,14 +5,14 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Ant Wilson at Supabase</description>
<language>en</language>
<lastBuildDate>Fri, 26 Feb 2021 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Sat, 27 Feb 2021 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-ant_wilson-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/cracking-postgres-interview</guid>
<title>Cracking PostgreSQL Interview Questions</title>
<link>https://supabase.com/blog/cracking-postgres-interview</link>
<description>Understand the top PostgreSQL Interview Questions</description>
<pubDate>Fri, 26 Feb 2021 23:00:00 GMT</pubDate>
<pubDate>Sat, 27 Feb 2021 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-bo_lu-rss.xml
+2 -2
View File
@@ -5,14 +5,14 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Bo Lu at Supabase</description>
<language>en</language>
<lastBuildDate>Wed, 14 Dec 2022 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Wed, 14 Dec 2022 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-bo_lu-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</guid>
<title>Supabase Wrappers, a Postgres FDW framework written in Rust</title>
<link>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</link>
<description>A framework for building Postgres Foreign Data Wrappers which connects to Stripe, Firebase, Clickhouse, and more.</description>
<pubDate>Wed, 14 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Wed, 14 Dec 2022 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-burggraf-rss.xml
+3 -3
View File
@@ -5,21 +5,21 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Mark Burggraf at Supabase</description>
<language>en</language>
<lastBuildDate>Wed, 23 Nov 2022 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Wed, 23 Nov 2022 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-burggraf-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/sql-or-nosql-both-with-postgresql</guid>
<title>SQL or NoSQL? Why not use both (with PostgreSQL)?</title>
<link>https://supabase.com/blog/sql-or-nosql-both-with-postgresql</link>
<description>How to turn Postgres into an easy-to-use NoSQL database that retains all the power of SQL</description>
<pubDate>Wed, 23 Nov 2022 23:00:00 GMT</pubDate>
<pubDate>Wed, 23 Nov 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-wasm</guid>
<title>Postgres WASM by Snaplet and Supabase</title>
<link>https://supabase.com/blog/postgres-wasm</link>
<description>We&apos;re open sourcing postgres-wasm, a PostgresQL server that runs inside a browser, with our friends at Snaplet.</description>
<pubDate>Sun, 02 Oct 2022 22:00:00 GMT</pubDate>
<pubDate>Sun, 02 Oct 2022 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-egor_romanov-rss.xml
+3 -3
View File
@@ -5,21 +5,21 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Egor Romanov at Supabase</description>
<language>en</language>
<lastBuildDate>Wed, 02 Aug 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Wed, 02 Aug 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-egor_romanov-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
<title>pgvector: Fewer dimensions are better</title>
<link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
<description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
<pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 02 Aug 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/pgvector-performance</guid>
<title>pgvector 0.4.0 performance</title>
<link>https://supabase.com/blog/pgvector-performance</link>
<description>There&apos;s been a lot of talk about pgvector performance lately, so we took some datasets and pushed pgvector to the limits to find out its strengths and limitations.</description>
<pubDate>Wed, 12 Jul 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 12 Jul 2023 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-gregnr-rss.xml
+4 -4
View File
@@ -5,28 +5,28 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Greg Richardson at Supabase</description>
<language>en</language>
<lastBuildDate>Tue, 05 Sep 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Tue, 05 Sep 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-gregnr-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/increase-performance-pgvector-hnsw</guid>
<title>pgvector v0.5.0: Faster semantic search with HNSW indexes</title>
<link>https://supabase.com/blog/increase-performance-pgvector-hnsw</link>
<description>Increase performance in pgvector using HNSW indexes</description>
<pubDate>Tue, 05 Sep 2023 22:00:00 GMT</pubDate>
<pubDate>Tue, 05 Sep 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
<title>pgvector: Fewer dimensions are better</title>
<link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
<description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
<pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 02 Aug 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/openai-embeddings-postgres-vector</guid>
<title>Storing OpenAI embeddings in Postgres with pgvector</title>
<link>https://supabase.com/blog/openai-embeddings-postgres-vector</link>
<description>An example of how to build an AI-powered search engine using OpenAI&apos;s embeddings and PostgreSQL.</description>
<pubDate>Sun, 05 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Sun, 05 Feb 2023 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-michel-rss.xml
+3 -3
View File
@@ -5,21 +5,21 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Michel Pelletier at Supabase</description>
<language>en</language>
<lastBuildDate>Thu, 15 Dec 2022 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Thu, 15 Dec 2022 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-michel-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/vault-now-in-beta</guid>
<title>Supabase Vault is now in Beta</title>
<link>https://supabase.com/blog/vault-now-in-beta</link>
<description>A Postgres extension to store encrypted secrets and encrypt data.</description>
<pubDate>Thu, 15 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Thu, 15 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/transparent-column-encryption-with-postgres</guid>
<title>Transparent Column Encryption with Postgres</title>
<link>https://supabase.com/blog/transparent-column-encryption-with-postgres</link>
<description>Using pgsodium&apos;s Transparent Column Encryption to encrypt data and provide your users with row-level encryption.</description>
<pubDate>Wed, 30 Nov 2022 23:00:00 GMT</pubDate>
<pubDate>Wed, 30 Nov 2022 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-oli_rice-rss.xml
+8 -8
View File
@@ -5,56 +5,56 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Oliver Rice at Supabase</description>
<language>en</language>
<lastBuildDate>Wed, 02 Aug 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Wed, 02 Aug 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-oli_rice-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
<title>pgvector: Fewer dimensions are better</title>
<link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
<description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
<pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 02 Aug 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/whats-new-in-pg-graphql-v1-2</guid>
<title>What&apos;s New in pg_graphql v1.2</title>
<link>https://supabase.com/blog/whats-new-in-pg-graphql-v1-2</link>
<description>New Features in the v1.2 release of pg_graphql</description>
<pubDate>Thu, 20 Apr 2023 22:00:00 GMT</pubDate>
<pubDate>Thu, 20 Apr 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/type-constraints-in-65-lines-of-sql</guid>
<title>Type Constraints in 65 lines of SQL</title>
<link>https://supabase.com/blog/type-constraints-in-65-lines-of-sql</link>
<description>Creating validated data types in Postgres</description>
<pubDate>Thu, 16 Feb 2023 23:00:00 GMT</pubDate>
<pubDate>Thu, 16 Feb 2023 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/pg-graphql-v1</guid>
<title>pg_graphql v1.0</title>
<link>https://supabase.com/blog/pg-graphql-v1</link>
<description>Announcing the v1.0 release of pg_graphql</description>
<pubDate>Thu, 15 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Thu, 15 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</guid>
<title>Supabase Wrappers, a Postgres FDW framework written in Rust</title>
<link>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</link>
<description>A framework for building Postgres Foreign Data Wrappers which connects to Stripe, Firebase, Clickhouse, and more.</description>
<pubDate>Wed, 14 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Wed, 14 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/pg-jsonschema-a-postgres-extension-for-json-validation</guid>
<title>pg_jsonschema: JSON Schema support for Postgres</title>
<link>https://supabase.com/blog/pg-jsonschema-a-postgres-extension-for-json-validation</link>
<description>Today we&apos;re releasing pg_jsonschema, a Postgres extension for JSON validation.</description>
<pubDate>Thu, 18 Aug 2022 22:00:00 GMT</pubDate>
<pubDate>Thu, 18 Aug 2022 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-audit</guid>
<title>Postgres Auditing in 150 lines of SQL</title>
<link>https://supabase.com/blog/postgres-audit</link>
<description>PostgreSQL has a robust set of features which we can leverage to create a generic auditing solution in 150 lines of SQL.</description>
<pubDate>Mon, 07 Mar 2022 23:00:00 GMT</pubDate>
<pubDate>Mon, 07 Mar 2022 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-paul_copplestone-rss.xml
+7 -7
View File
@@ -5,49 +5,49 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Paul Copplestone at Supabase</description>
<language>en</language>
<lastBuildDate>Sun, 30 Apr 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Sun, 30 Apr 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-paul_copplestone-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/postgres-pluggable-strorage</guid>
<title>Next steps for Postgres pluggable storage</title>
<link>https://supabase.com/blog/postgres-pluggable-strorage</link>
<description>Exploring history of Postgres pluggable storage and the possibility of landing it in the Postgres core.</description>
<pubDate>Sun, 30 Apr 2023 22:00:00 GMT</pubDate>
<pubDate>Sun, 30 Apr 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</guid>
<title>Supabase Wrappers, a Postgres FDW framework written in Rust</title>
<link>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</link>
<description>A framework for building Postgres Foreign Data Wrappers which connects to Stripe, Firebase, Clickhouse, and more.</description>
<pubDate>Wed, 14 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Wed, 14 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-crdt</guid>
<title>pg_crdt - an experimental CRDT extension for Postgres</title>
<link>https://supabase.com/blog/postgres-crdt</link>
<description>Embedding Yjs and Automerge into Postgres for collaborative applications.</description>
<pubDate>Fri, 09 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Fri, 09 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/partial-postgresql-data-dumps-with-rls</guid>
<title>Partial data dumps using Postgres Row Level Security</title>
<link>https://supabase.com/blog/partial-postgresql-data-dumps-with-rls</link>
<description>Using RLS to create seed files for local PostgreSQL testing.</description>
<pubDate>Mon, 27 Jun 2022 22:00:00 GMT</pubDate>
<pubDate>Mon, 27 Jun 2022 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgres-as-a-cron-server</guid>
<title>Postgres as a CRON Server</title>
<link>https://supabase.com/blog/postgres-as-a-cron-server</link>
<description>Running repetitive tasks with your Postgres database.</description>
<pubDate>Thu, 04 Mar 2021 23:00:00 GMT</pubDate>
<pubDate>Fri, 05 Mar 2021 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgresql-views</guid>
<title>Postgres Views</title>
<link>https://supabase.com/blog/postgresql-views</link>
<description>Creating and using a view in PostgreSQL.</description>
<pubDate>Tue, 17 Nov 2020 23:00:00 GMT</pubDate>
<pubDate>Wed, 18 Nov 2020 03:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-pavel-rss.xml
+4 -4
View File
@@ -5,28 +5,28 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Pavel Borisov at Supabase</description>
<language>en</language>
<lastBuildDate>Wed, 12 Jul 2023 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Wed, 12 Jul 2023 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-pavel-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/pgvector-performance</guid>
<title>pgvector 0.4.0 performance</title>
<link>https://supabase.com/blog/pgvector-performance</link>
<description>There&apos;s been a lot of talk about pgvector performance lately, so we took some datasets and pushed pgvector to the limits to find out its strengths and limitations.</description>
<pubDate>Wed, 12 Jul 2023 22:00:00 GMT</pubDate>
<pubDate>Wed, 12 Jul 2023 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/new-in-postgres-15</guid>
<title>What&apos;s new in Postgres 15?</title>
<link>https://supabase.com/blog/new-in-postgres-15</link>
<description>Describes the release of Postgres 15, new features and reasons to use it</description>
<pubDate>Thu, 15 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Thu, 15 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/postgresql-commitfest</guid>
<title>What is PostgreSQL commitfest and how to contribute</title>
<link>https://supabase.com/blog/postgresql-commitfest</link>
<description>A time-tested method for contributing to the core Postgres code</description>
<pubDate>Wed, 26 Oct 2022 22:00:00 GMT</pubDate>
<pubDate>Wed, 26 Oct 2022 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-steve_chavez-rss.xml
+3 -3
View File
@@ -5,21 +5,21 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Steve Chavez at Supabase</description>
<language>en</language>
<lastBuildDate>Thu, 15 Dec 2022 23:00:00 GMT</lastBuildDate>
<lastBuildDate>Thu, 15 Dec 2022 03:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-steve_chavez-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/postgrest-11-prerelease</guid>
<title>PostgREST 11 pre-release</title>
<link>https://supabase.com/blog/postgrest-11-prerelease</link>
<description>Describes new features of PostgREST 11 pre-release</description>
<pubDate>Thu, 15 Dec 2022 23:00:00 GMT</pubDate>
<pubDate>Thu, 15 Dec 2022 03:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/roles-postgres-hooks</guid>
<title>Protecting reserved roles with PostgreSQL Hooks</title>
<link>https://supabase.com/blog/roles-postgres-hooks</link>
<description>Using Postgres Hooks to protect functionality in your Postgres database.</description>
<pubDate>Thu, 01 Jul 2021 22:00:00 GMT</pubDate>
<pubDate>Thu, 01 Jul 2021 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/planetpg-victor-rss.xml
+4 -4
View File
@@ -5,28 +5,28 @@
<link>https://supabase.com/blog</link>
<description>Latest Postgres news from Victor at Supabase</description>
<language>en</language>
<lastBuildDate>Thu, 13 Oct 2022 22:00:00 GMT</lastBuildDate>
<lastBuildDate>Thu, 13 Oct 2022 02:30:00 GMT</lastBuildDate>
<atom:link href="https://supabase.com/planetpg-victor-rss.xml" rel="self" type="application/rss+xml"/>
<item>
<guid>https://supabase.com/blog/postgres-full-text-search-vs-the-rest</guid>
<title>Postgres Full Text Search vs the rest</title>
<link>https://supabase.com/blog/postgres-full-text-search-vs-the-rest</link>
<description>Comparing one of the most popular Postgres features against alternatives</description>
<pubDate>Thu, 13 Oct 2022 22:00:00 GMT</pubDate>
<pubDate>Thu, 13 Oct 2022 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/choosing-a-postgres-primary-key</guid>
<title>Choosing a Postgres Primary Key</title>
<link>https://supabase.com/blog/choosing-a-postgres-primary-key</link>
<description>Turns out the question of which identifier to use as a Primary Key is complicated -- we&apos;re going to dive into some of the complexity and inherent trade-offs, and figure things out</description>
<pubDate>Wed, 07 Sep 2022 22:00:00 GMT</pubDate>
<pubDate>Wed, 07 Sep 2022 02:30:00 GMT</pubDate>
</item>
<item>
<guid>https://supabase.com/blog/seen-by-in-postgresql</guid>
<title>Implementing &quot;seen by&quot; functionality with Postgres</title>
<link>https://supabase.com/blog/seen-by-in-postgresql</link>
<description>Different approaches for tracking visitor counts with PostgreSQL.</description>
<pubDate>Sun, 17 Jul 2022 22:00:00 GMT</pubDate>
<pubDate>Sun, 17 Jul 2022 02:30:00 GMT</pubDate>
</item>
</channel>
apps/www/public/rss.xml
+216 -209
View File
File diff suppressed because it is too large. Load diff
apps/www/public/sitemap_www.xml
+155 -785
View File
@@ -49,13 +49,13 @@
</url>
<url>
<loc>https://supabase.com/blog/</loc>
<loc>https://supabase.com/auth</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/auth</loc>
<loc>https://supabase.com/blog/</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -97,13 +97,13 @@
</url>
<url>
<loc>https://supabase.com/realtime</loc>
<loc>https://supabase.com/vector/Vector</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/vector/Vector</loc>
<loc>https://supabase.com/realtime</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -897,7 +897,7 @@
</url>
<url>
<loc>https://supabase.com/blog/flutter-authentication-and-authorization-with-rls</loc>
<loc>https://supabase.com/blog/flutter-authorization-with-rls</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
@@ -1220,12 +1220,156 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/native-mobile-auth</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-beta-update-june-2023</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/postgrest-11-1-release</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/pgvector-performance</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/flutter-authentication</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-lw8-hackathon</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/react-native-storage</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/beta-update-july-2023</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/why-supabase-remote</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/hugging-face-supabase</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-local-dev</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-studio-3-0</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-integrations-marketplace</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/using-supabase-with-vercel</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/launch-week-8-community-highlights</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supabase-soc2-hipaa</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/supavisor-1-million</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/launch-week-8-hackathon-winners</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/organization-based-billing</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/increase-performance-pgvector-hnsw</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/blog/beta-update-august-2023</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/customers/berriai</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/customers/chatbase</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/customers/epsilon3</loc>
<changefreq>weekly</changefreq>
@@ -1256,6 +1400,12 @@
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/customers/quivr</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/customers/replenysh</loc>
<changefreq>weekly</changefreq>
@@ -1279,784 +1429,4 @@
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/antstack</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/appsmith</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/arceptive</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/arengu</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/authsignal</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/basedash</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/buildlab</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/clerk</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/clutch</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/codesandbox</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/dashibase</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/deepnote</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/dhiwise</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/directus</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/doppler</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/draftbit</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/drapcode</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/dronahq</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/enginedigital</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/estuary</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/feelantera</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/fezto</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/flutterflow</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/forestadmin</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/getstream_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/illa</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/infisical</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/internalio</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/jetadmin</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/keyri</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/morrow</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/n8n</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/nextauth</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/nuxt</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/onesignal</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/ory</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/passageidentity</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/pgmustard</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/picket</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/plasmic</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/polyscale</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/prisma</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/quinence</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/readyset</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/refine_dev</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/replibyte</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/replicache</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/retool</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/sequin_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/snaplet</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/solid_software</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/streamlit</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/stytch</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/supertokens</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/teta</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/tinloof</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/trevor_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/uncommonpurpose</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/vercel</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/voltapp</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/voypost</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/weweb</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/yepcode</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/zapp_run</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/integrations/zuplo</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/antstack</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/appsmith</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/arceptive</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/arengu</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/authsignal</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/basedash</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/buildlab</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/clerk</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/clutch</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/codesandbox</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/dashibase</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/deepnote</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/dhiwise</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/directus</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/doppler</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/draftbit</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/drapcode</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/dronahq</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/enginedigital</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/estuary</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/feelantera</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/fezto</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/flutterflow</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/forestadmin</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/getstream_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/illa</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/infisical</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/internalio</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/jetadmin</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/keyri</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/morrow</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/n8n</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/nextauth</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/nuxt</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/onesignal</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/ory</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/passageidentity</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/pgmustard</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/picket</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/plasmic</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/polyscale</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/prisma</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/quinence</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/readyset</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/refine_dev</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/replibyte</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/replicache</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/retool</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/sequin_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/snaplet</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/solid_software</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/streamlit</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/stytch</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/supertokens</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/teta</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/tinloof</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/trevor_io</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/uncommonpurpose</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/vercel</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/voltapp</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/voypost</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/weweb</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/yepcode</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/zapp_run</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
<url>
<loc>https://supabase.com/partners/experts/zuplo</loc>
<changefreq>weekly</changefreq>
<changefreq>0.5</changefreq>
</url>
</urlset>
package-lock.json
Generated
+13
View File
@@ -15,6 +15,9 @@
"tests",
"packages/*"
],
"dependencies": {
"next-themes": "^0.2.1"
},
"devDependencies": {
"eslint": "^8.41.0",
"eslint-config-custom": "*",
@@ -30641,6 +30644,16 @@
"react-dom": ">=16.0.0"
}
},
"node_modules/next-themes": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
"integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
"peerDependencies": {
"next": "*",
"react": "*",
"react-dom": "*"
}
},
"node_modules/next-tick": {
"version": "1.1.0",
"license": "ISC"
package.json
+3
View File
@@ -64,5 +64,8 @@
],
"volta": {
"node": "18.17.1"
},
"dependencies": {
"next-themes": "^0.2.1"
}
}
packages/common/Providers.tsx
+4 -74
View File
@@ -1,76 +1,6 @@
import { createContext, useContext, useEffect, useState } from 'react'
import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
export interface UseThemeProps {
isDarkMode: boolean
/**
* Toggle between dark mode and light mode.
*
* If `darkMode` left `undefined`, toggles between modes.
*
* If `darkMode` set, forces
* dark mode if `true` and light mode if `false`.
*/
toggleTheme: (darkMode?: boolean) => void
}
interface ThemeProviderProps {
children?: any
detectSystemColorPreference?: boolean
}
export const ThemeContext = createContext<UseThemeProps>({
isDarkMode: true,
toggleTheme: () => {},
})
export const useTheme = () => useContext(ThemeContext)
export const ThemeProvider = ({
detectSystemColorPreference = true,
children,
}: ThemeProviderProps) => {
const [isDarkMode, setIsDarkMode] = useState(true)
useEffect(() => {
const key = localStorage.getItem('supabaseDarkMode')
// If no localStorage is set
// and detectSystemColorPreference is false
// default to dark mode
const hasNoKey = key === null
const shouldBeDarkMode = hasNoKey || key === 'true'
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
hasNoKey && detectSystemColorPreference
? toggleTheme(prefersDark)
: toggleTheme(shouldBeDarkMode)
}, [])
const toggleTheme: UseThemeProps['toggleTheme'] = (darkMode) => {
const newMode = typeof darkMode === 'boolean' ? darkMode : !isDarkMode
localStorage.setItem('supabaseDarkMode', newMode.toString())
const newTheme = newMode ? 'dark' : 'light'
document.body.classList.remove('light', 'dark')
document.body.classList.add(newTheme)
// Color scheme must be applied to document element (`<html>`)
document.documentElement.style.colorScheme = newTheme
setIsDarkMode(newMode)
}
return (
<>
<ThemeContext.Provider
value={{
isDarkMode,
toggleTheme,
}}
>
{children}
</ThemeContext.Provider>
</>
)
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
packages/ui/index.tsx
+3
View File
@@ -81,6 +81,9 @@ export * from './src/layout/ai-icon-animation'
// utilities
export * from './src/lib/utils'
// theme switcher
export * from './src/components/ThemeProvider/ThemeToggle'
// animated ui
// shadcn
packages/ui/src/components/CodeBlock/CodeBlock.tsx
+5 -6
View File
@@ -1,5 +1,4 @@
import * as React from 'react'
import { Children, FC } from 'react'
import { Children } from 'react'
import * as CopyToClipboard from 'react-copy-to-clipboard'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import { monokaiCustomTheme } from './CodeBlock.utils'
@@ -16,7 +15,7 @@ import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
import kotlin from 'react-syntax-highlighter/dist/cjs/languages/hljs/kotlin'
import { useState } from 'react'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
export interface CodeBlockProps {
title?: string
@@ -39,8 +38,8 @@ export const CodeBlock = ({
hideCopy = false,
hideLineNumbers = false,
}: CodeBlockProps) => {
const { isDarkMode } = useTheme()
const monokaiTheme = monokaiCustomTheme(isDarkMode)
const { theme } = useTheme()
const monokaiTheme = monokaiCustomTheme(theme === 'dark')
const [copied, setCopied] = useState(false)
@@ -137,7 +136,7 @@ export const CodeBlock = ({
<div
className={[
'absolute right-2',
`${isDarkMode ? 'dark' : ''}`,
`${theme === 'dark' ? 'dark' : ''}`,
`${!title ? 'top-2' : 'top-[3.25rem]'}`,
].join(' ')}
>
packages/ui/src/components/Command/CommandMenuProvider.tsx
-9
View File
@@ -1,4 +1,3 @@
import { useTheme, UseThemeProps } from 'common'
import dynamic from 'next/dynamic'
import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
@@ -12,7 +11,6 @@ export interface CommandMenuContextValue {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
isLoading: boolean
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
actions: CommandMenuActions
search: string
setSearch: React.Dispatch<React.SetStateAction<string>>
pages: string[]
@@ -47,10 +45,6 @@ export const useCommandMenu = () => {
return context
}
export interface CommandMenuActions {
toggleTheme: UseThemeProps['toggleTheme']
}
export interface CommandMenuProviderProps {
site: 'studio' | 'docs'
projectRef?: string
@@ -87,10 +81,8 @@ const CommandMenuProvider = ({
const [isLoading, setIsLoading] = useState(false)
const [search, setSearch] = useState('')
const [pages, setPages] = useState<string[]>([])
const { toggleTheme } = useTheme()
const currentPage = pages[pages.length - 1]
const actions: CommandMenuActions = { toggleTheme }
const project = projectRef !== undefined ? { ref: projectRef, apiKeys, apiUrl } : undefined
useKeyboardEvents({ setIsOpen, currentPage, setSearch, setPages })
@@ -102,7 +94,6 @@ const CommandMenuProvider = ({
setIsOpen,
isLoading,
setIsLoading,
actions,
setSearch,
search,
pages,
packages/ui/src/components/Command/ThemeOptions.tsx
+14 -4
View File
@@ -1,15 +1,25 @@
import { CommandGroup } from 'cmdk-supabase'
import { useCommandMenu } from './CommandMenuProvider'
import ChildItem from './ChildItem'
import { useTheme } from 'next-themes'
const ThemeOptions = ({ isSubItem = false }) => {
const { setIsOpen, actions } = useCommandMenu()
const { setIsOpen } = useCommandMenu()
const { setTheme } = useTheme()
return (
<CommandGroup>
<ChildItem
isSubItem={isSubItem}
onSelect={() => {
actions.toggleTheme(true)
setTheme('system')
setIsOpen(false)
}}
>
Change Theme to the system default
</ChildItem>
<ChildItem
isSubItem={isSubItem}
onSelect={() => {
setTheme('dark')
setIsOpen(false)
}}
>
@@ -18,7 +28,7 @@ const ThemeOptions = ({ isSubItem = false }) => {
<ChildItem
isSubItem={isSubItem}
onSelect={() => {
actions.toggleTheme(false)
setTheme('light')
setIsOpen(false)
}}
>
packages/ui/src/components/GlassPanel/GlassPanel.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import * as React from 'react'
import Image from 'next/image'
@@ -29,8 +29,8 @@ const GlassPanel = ({
showLink = false,
showIconBg = false,
}: Props) => {
const { isDarkMode } = useTheme()
const showLogoInverse = logoInverse && isDarkMode
const { resolvedTheme } = useTheme()
const showLogoInverse = logoInverse && resolvedTheme === 'dark'
const showLogo = !showLogoInverse && logo
const IconBackground: React.FC = (props) => (
@@ -106,7 +106,7 @@ const GlassPanel = ({
<img
className="w-5"
alt={title}
src={`${icon}${hasLightIcon && !isDarkMode ? '-light' : ''}.svg`}
src={`${icon}${hasLightIcon && resolvedTheme !== 'dark' ? '-light' : ''}.svg`}
/>
</IconBackground>
) : (
packages/ui/src/components/IconPanel/IconPanel.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import * as React from 'react'
import { ChevronRight } from 'react-feather'
import ReactTooltip from 'react-tooltip'
@@ -30,7 +30,7 @@ const IconPanel = ({
showLink = false,
hideArrow = false,
}: Props) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const IconContainer: React.FC = (props) => {
return (
@@ -69,7 +69,7 @@ const IconPanel = ({
<IconContainer>
<img
className={iconSize === 'lg' ? 'w-8' : 'w-5'}
src={`${icon}${hasLightIcon && !isDarkMode ? '-light' : ''}.svg`}
src={`${icon}${hasLightIcon && theme !== 'dark' ? '-light' : ''}.svg`}
alt={
title !== undefined
? `${title} Icon`
@@ -88,7 +88,7 @@ const IconPanel = ({
{!hideArrow && (
<div
className="
transition-all ease-out -ml-1 opacity-0
transition-all ease-out -ml-1 opacity-0
text-scale-800
group-hover:opacity-100
group-hover:ml-0"
@@ -104,8 +104,8 @@ const IconPanel = ({
</div>
<div
className="
absolute transition-all ease-in
-z-10 -inset-3 rounded-2xl
absolute transition-all ease-in
-z-10 -inset-3 rounded-2xl
bg-scale-200 dark:bg-whiteA-300 opacity-0 peer-hover:opacity-100"
></div>
</div>
packages/ui/src/components/ThemeProvider/ThemeToggle.tsx
+55
View File
@@ -0,0 +1,55 @@
import { useTheme } from 'next-themes'
import { useState } from 'react'
import {
DropdownMenuGroup_Shadcn_,
DropdownMenuRadioGroup_Shadcn_,
DropdownMenuRadioItem_Shadcn_,
DropdownMenu_Shadcn_,
DropdownMenuContent_Shadcn_,
IconMoon,
IconSun,
DropdownMenuTrigger_Shadcn_,
} from 'ui'
interface ThemeToggleProps {
forceDark?: boolean
}
const ThemeToggle = ({ forceDark = false }: ThemeToggleProps) => {
const { theme, setTheme } = useTheme()
const [open, setOpen] = useState(false)
// Conditionally force the theme to 'dark' when disabled is true
const currentTheme = forceDark ? 'dark' : theme
return (
<DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
<DropdownMenuTrigger_Shadcn_ asChild disabled={forceDark}>
<button
id="user-settings-dropdown"
className="flex items-center justify-center h-7 w-7 text"
>
<IconSun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<IconMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</button>
</DropdownMenuTrigger_Shadcn_>
<DropdownMenuContent_Shadcn_ align="end" className="w-60">
<DropdownMenuGroup_Shadcn_>
<DropdownMenuRadioGroup_Shadcn_
value={currentTheme} // Use the currentTheme variable here
onValueChange={(value) => {
setTheme(value)
}}
>
<DropdownMenuRadioItem_Shadcn_ value={'system'}>System</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value={'dark'}>Dark</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value={'light'}>Light</DropdownMenuRadioItem_Shadcn_>
</DropdownMenuRadioGroup_Shadcn_>
</DropdownMenuGroup_Shadcn_>
</DropdownMenuContent_Shadcn_>
</DropdownMenu_Shadcn_>
)
}
export default ThemeToggle
studio/components/interfaces/App/AppBannerWrapper.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import { useMonaco } from '@monaco-editor/react'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import IncidentBanner from 'components/layouts/AppLayout/IncidentBanner'
import { getTheme } from 'components/ui/CodeEditor'
import { useFlag } from 'hooks'
@@ -7,15 +7,15 @@ import { PropsWithChildren, useEffect } from 'react'
const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
const monaco = useMonaco()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const ongoingIncident = useFlag('ongoingIncident')
useEffect(() => {
if (monaco) {
const theme: any = getTheme(isDarkMode)
monaco.editor.defineTheme('supabase', theme)
if (monaco && theme) {
const mode: any = getTheme(theme)
monaco.editor.defineTheme('supabase', mode)
}
}, [isDarkMode, monaco])
}, [theme, monaco])
return (
<div className="min-h-full flex flex-col">
studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import HCaptcha from '@hcaptcha/react-hcaptcha'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useCallback, useEffect, useState } from 'react'
import { Modal } from 'ui'
@@ -27,7 +27,7 @@ const AddNewPaymentMethodModal = ({
onConfirm,
}: AddNewPaymentMethodModalProps) => {
const { ui } = useStore()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [intent, setIntent] = useState<any>()
const selectedOrganization = useSelectedOrganization()
@@ -90,7 +90,7 @@ const AddNewPaymentMethodModal = ({
const options = {
clientSecret: intent ? intent.client_secret : '',
appearance: { theme: isDarkMode ? 'night' : 'flat', labels: 'floating' },
appearance: { theme: theme === 'dark' ? 'night' : 'flat', labels: 'floating' },
} as any
const onLocalCancel = () => {
studio/components/interfaces/BillingV2/Subscription/AddOns/AddOns.tsx
+13 -8
View File
@@ -1,4 +1,5 @@
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import dayjs from 'dayjs'
import Link from 'next/link'
import { useMemo } from 'react'
@@ -33,7 +34,7 @@ import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
import { getAddons } from '../Subscription.utils'
const AddOns = () => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { ref: projectRef } = useParams()
const snap = useSubscriptionPageStateSnapshot()
const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
@@ -139,10 +140,10 @@ const AddOns = () => {
src={
computeInstance !== undefined
? `${BASE_PATH}/img/optimized-compute-on${
isDarkMode ? '' : '--light'
theme === 'dark' ? '' : '--light'
}.png`
: `${BASE_PATH}/img/optimized-compute-off${
isDarkMode ? '' : '--light'
theme === 'dark' ? '' : '--light'
}.png`
}
/>
@@ -308,8 +309,8 @@ const AddOns = () => {
height={96}
src={
pitr !== undefined
? `${BASE_PATH}/img/pitr-on${isDarkMode ? '' : '--light'}.png?v=2`
: `${BASE_PATH}/img/pitr-off${isDarkMode ? '' : '--light'}.png?v=2`
? `${BASE_PATH}/img/pitr-on${theme === 'dark' ? '' : '--light'}.png?v=2`
: `${BASE_PATH}/img/pitr-off${theme === 'dark' ? '' : '--light'}.png?v=2`
}
/>
</div>
@@ -368,8 +369,12 @@ const AddOns = () => {
height={96}
src={
customDomain !== undefined
? `${BASE_PATH}/img/custom-domain-on${isDarkMode ? '' : '--light'}.png`
: `${BASE_PATH}/img/custom-domain-off${isDarkMode ? '' : '--light'}.png`
? `${BASE_PATH}/img/custom-domain-on${
theme === 'dark' ? '' : '--light'
}.png`
: `${BASE_PATH}/img/custom-domain-off${
theme === 'dark' ? '' : '--light'
}.png`
}
/>
</div>
studio/components/interfaces/BillingV2/Subscription/CostControl/CostControl.tsx
+9 -4
View File
@@ -1,4 +1,5 @@
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import ProjectUpdateDisabledTooltip from 'components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
@@ -15,7 +16,7 @@ const CostControl = ({}: CostControlProps) => {
const { ref: projectRef } = useParams()
const snap = useSubscriptionPageStateSnapshot()
const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { data: subscription, isLoading } = useProjectSubscriptionV2Query({ projectRef })
@@ -100,8 +101,12 @@ const CostControl = ({}: CostControlProps) => {
height={96}
src={
isUsageBillingEnabled
? `${BASE_PATH}/img/spend-cap-off${isDarkMode ? '' : '--light'}.png?v=3`
: `${BASE_PATH}/img/spend-cap-on${isDarkMode ? '' : '--light'}.png?v=3`
? `${BASE_PATH}/img/spend-cap-off${
theme === 'dark' ? '' : '--light'
}.png?v=3`
: `${BASE_PATH}/img/spend-cap-on${
theme === 'dark' ? '' : '--light'
}.png?v=3`
}
/>
</div>
studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx
+4 -3
View File
@@ -1,6 +1,7 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import clsx from 'clsx'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import Table from 'components/to-be-cleaned/Table'
import { useProjectSubscriptionUpdateMutation } from 'data/subscriptions/project-subscription-update-mutation'
import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
@@ -38,7 +39,7 @@ const SpendCapSidePanel = () => {
const { ui } = useStore()
const router = useRouter()
const { ref: projectRef } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [showUsageCosts, setShowUsageCosts] = useState(false)
const [selectedOption, setSelectedOption] = useState<'on' | 'off'>()
@@ -250,7 +251,7 @@ const SpendCapSidePanel = () => {
)}
width={160}
height={96}
src={isDarkMode ? option.imageUrl : option.imageUrlLight}
src={theme === 'dark' ? option.imageUrl : option.imageUrlLight}
/>
<p
studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+7 -6
View File
@@ -18,7 +18,7 @@ import ReactFlow, {
} from 'reactflow'
import { PostgresTable } from '@supabase/postgres-meta'
import { useTheme } from 'common/Providers'
import { useTheme } from 'next-themes'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { useTablesQuery } from 'data/tables/tables-query'
import 'reactflow/dist/style.css'
@@ -301,11 +301,12 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
}
const TablesGraph = ({ tables }: { tables: PostgresTable[] }) => {
const { isDarkMode } = useTheme()
const backgroundPatternColor = isDarkMode ? '#2e2e2e' : '#e6e8eb'
const edgeStrokeColor = isDarkMode ? '#ededed' : '#111318'
const { theme } = useTheme()
const backgroundPatternColor = theme === 'dark' ? '#2e2e2e' : '#e6e8eb'
const edgeStrokeColor = theme === 'dark' ? '#ededed' : '#111318'
const miniMapNodeColor = '#111318'
const miniMapMaskColor = isDarkMode ? 'rgb(17, 19, 24, .8)' : 'rgb(237, 237, 237, .8)'
const miniMapMaskColor = theme === 'dark' ? 'rgb(17, 19, 24, .8)' : 'rgb(237, 237, 237, .8)'
const reactFlowInstance = useReactFlow()
const nodeTypes = useMemo(
@@ -321,7 +322,7 @@ const TablesGraph = ({ tables }: { tables: PostgresTable[] }) => {
reactFlowInstance.setEdges(edges)
setTimeout(() => reactFlowInstance.fitView({})) // it needs to happen during next event tick
})
}, [tables, isDarkMode])
}, [tables, theme])
return (
<>
studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
+7 -6
View File
@@ -5,15 +5,15 @@ import Link from 'next/link'
import { useState } from 'react'
import { Button, IconExternalLink } from 'ui'
import { useTheme } from 'common'
import { useParams } from 'common/hooks'
import { useTheme } from 'next-themes'
import { useCheckPermissions, useStore } from 'hooks'
import { useParams } from 'common/hooks'
import { BASE_PATH } from 'lib/constants'
const WrappersDisabledState = () => {
const { ui, meta } = useStore()
const { ref } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const wrappersExtension = meta.extensions.byId('wrappers')
const vaultExtension = meta.extensions.byId('supabase_vault')
const isNotAvailable = wrappersExtension === undefined || vaultExtension === undefined
@@ -71,9 +71,10 @@ const WrappersDisabledState = () => {
style={{
backgroundSize: '45%',
backgroundPosition: '105% 40%',
backgroundImage: isDarkMode
? `url("${BASE_PATH}/img/wrappers-dark.png")`
: `url("${BASE_PATH}/img/wrappers-light.png")`,
backgroundImage:
theme === 'dark'
? `url("${BASE_PATH}/img/wrappers-dark.png")`
: `url("${BASE_PATH}/img/wrappers-light.png")`,
}}
>
<div className="w-3/5 space-y-8">
studio/components/interfaces/Home/ExampleProject.tsx
+6 -6
View File
@@ -1,6 +1,6 @@
import Link from 'next/link'
import { IconChevronRight, useTheme } from 'ui'
import { IconChevronRight } from 'ui'
import { useTheme } from 'next-themes'
import { BASE_PATH } from 'lib/constants'
interface ExampleProjectProps {
@@ -11,7 +11,7 @@ interface ExampleProjectProps {
}
const ExampleProject = ({ framework, title, description, url }: ExampleProjectProps) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
return (
<Link href={url}>
@@ -30,7 +30,7 @@ const ExampleProject = ({ framework, title, description, url }: ExampleProjectPr
className="transition-all group-hover:scale-110"
src={`${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
['expo', 'nextjs'].includes(framework.toLowerCase())
? isDarkMode
? theme === 'dark'
? '-dark'
: ''
: ''
@@ -50,8 +50,8 @@ const ExampleProject = ({ framework, title, description, url }: ExampleProjectPr
right-4
top-3
text-scale-900
transition-all
duration-200
transition-all
duration-200
group-hover:right-3
group-hover:text-foreground
"
studio/components/interfaces/Organization/BillingSettingsV2/CostControl/CostControl.tsx
+9 -4
View File
@@ -1,6 +1,7 @@
import Link from 'next/link'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import {
ScaffoldSection,
ScaffoldSectionContent,
@@ -20,7 +21,7 @@ export interface CostControlProps {}
const CostControl = ({}: CostControlProps) => {
const { slug } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const snap = useOrgSettingsPageStateSnapshot()
const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
@@ -117,8 +118,12 @@ const CostControl = ({}: CostControlProps) => {
height={96}
src={
isUsageBillingEnabled
? `${BASE_PATH}/img/spend-cap-off${isDarkMode ? '' : '--light'}.png?v=3`
: `${BASE_PATH}/img/spend-cap-on${isDarkMode ? '' : '--light'}.png?v=3`
? `${BASE_PATH}/img/spend-cap-off${
theme === 'dark' ? '' : '--light'
}.png?v=3`
: `${BASE_PATH}/img/spend-cap-on${
theme === 'dark' ? '' : '--light'
}.png?v=3`
}
/>
</div>
studio/components/interfaces/Organization/BillingSettingsV2/CostControl/SpendCapSidePanel.tsx
+4 -3
View File
@@ -1,6 +1,7 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import clsx from 'clsx'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import Table from 'components/to-be-cleaned/Table'
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
@@ -38,7 +39,7 @@ const SpendCapSidePanel = () => {
const { ui } = useStore()
const router = useRouter()
const { slug } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [showUsageCosts, setShowUsageCosts] = useState(false)
const [selectedOption, setSelectedOption] = useState<'on' | 'off'>()
@@ -254,7 +255,7 @@ const SpendCapSidePanel = () => {
)}
width={160}
height={96}
src={isDarkMode ? option.imageUrl : option.imageUrlLight}
src={theme === 'dark' ? option.imageUrl : option.imageUrlLight}
/>
<p
studio/components/interfaces/Settings/Addons/Addons.tsx
+15 -8
View File
@@ -2,7 +2,8 @@ import dayjs from 'dayjs'
import Link from 'next/link'
import { useMemo } from 'react'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import { getAddons } from 'components/interfaces/BillingV2/Subscription/Subscription.utils'
import ProjectUpdateDisabledTooltip from 'components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip'
import {
@@ -38,7 +39,7 @@ import {
import { ComputeInstanceSidePanel, CustomDomainSidePanel, PITRSidePanel } from './'
const Addons = () => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { ref: projectRef, panel } = useParams()
const snap = useSubscriptionPageStateSnapshot()
const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
@@ -174,10 +175,10 @@ const Addons = () => {
src={
computeInstance !== undefined
? `${BASE_PATH}/img/optimized-compute-on${
isDarkMode ? '' : '--light'
theme === 'dark' ? '' : '--light'
}.png`
: `${BASE_PATH}/img/optimized-compute-off${
isDarkMode ? '' : '--light'
theme === 'dark' ? '' : '--light'
}.png`
}
/>
@@ -368,8 +369,10 @@ const Addons = () => {
height={96}
src={
pitr !== undefined
? `${BASE_PATH}/img/pitr-on${isDarkMode ? '' : '--light'}.png?v=2`
: `${BASE_PATH}/img/pitr-off${isDarkMode ? '' : '--light'}.png?v=2`
? `${BASE_PATH}/img/pitr-on${theme === 'dark' ? '' : '--light'}.png?v=2`
: `${BASE_PATH}/img/pitr-off${
theme === 'dark' ? '' : '--light'
}.png?v=2`
}
/>
</div>
@@ -458,8 +461,12 @@ const Addons = () => {
height={96}
src={
customDomain !== undefined
? `${BASE_PATH}/img/custom-domain-on${isDarkMode ? '' : '--light'}.png`
: `${BASE_PATH}/img/custom-domain-off${isDarkMode ? '' : '--light'}.png`
? `${BASE_PATH}/img/custom-domain-on${
theme === 'dark' ? '' : '--light'
}.png`
: `${BASE_PATH}/img/custom-domain-off${
theme === 'dark' ? '' : '--light'
}.png`
}
/>
</div>
studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
+4 -3
View File
@@ -5,7 +5,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { setProjectStatus } from 'data/projects/projects-query'
import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon-remove-mutation'
@@ -46,7 +47,7 @@ const ComputeInstanceSidePanel = () => {
const { ui } = useStore()
const router = useRouter()
const { ref: projectRef } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { project: selectedProject } = useProjectContext()
const organization = useSelectedOrganization()
const isOrgBilling = !!organization?.subscription_id
@@ -235,7 +236,7 @@ const ComputeInstanceSidePanel = () => {
)}
width={160}
height={96}
src={isDarkMode ? option.imageUrl : option.imageUrlLight}
src={theme === 'dark' ? option.imageUrl : option.imageUrlLight}
/>
<p
studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
+4 -3
View File
@@ -4,7 +4,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon-remove-mutation'
import { useProjectAddonUpdateMutation } from 'data/subscriptions/project-addon-update-mutation'
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
@@ -40,7 +41,7 @@ const PITRSidePanel = () => {
const { ui } = useStore()
const router = useRouter()
const { ref: projectRef } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const organization = useSelectedOrganization()
const isOrgBilling = !!organization?.subscription_id
@@ -206,7 +207,7 @@ const PITRSidePanel = () => {
)}
width={160}
height={96}
src={isDarkMode ? option.imageUrl : option.imageUrlLight}
src={theme === 'dark' ? option.imageUrl : option.imageUrlLight}
/>
<p
studio/components/interfaces/Settings/Vault/VaultToggle.tsx
+7 -5
View File
@@ -1,6 +1,7 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import { observer } from 'mobx-react-lite'
import Link from 'next/link'
import { useState } from 'react'
@@ -12,7 +13,7 @@ import { BASE_PATH } from 'lib/constants'
const VaultToggle = () => {
const { meta, ui } = useStore()
const { ref } = useParams()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [isEnabling, setIsEnabling] = useState(false)
const canToggleVault = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'extensions')
@@ -63,9 +64,10 @@ const VaultToggle = () => {
style={{
backgroundSize: isNotAvailable ? '50%' : '40%',
backgroundPosition: '100% 24%',
backgroundImage: isDarkMode
? `url("${BASE_PATH}/img/vault-dark.png")`
: `url("${BASE_PATH}/img/vault-light.png")`,
backgroundImage:
theme === 'dark'
? `url("${BASE_PATH}/img/vault-dark.png")`
: `url("${BASE_PATH}/img/vault-light.png")`,
}}
>
<div className="w-3/5 space-y-8">
studio/components/interfaces/TableGridEditor/TableDefinition.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import Editor from '@monaco-editor/react'
import { useParams, useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useParams } from 'common'
import { observer } from 'mobx-react-lite'
import { useMemo, useRef } from 'react'
import { format } from 'sql-formatter'
@@ -22,7 +23,7 @@ const TableDefinition = ({ id }: TableDefinitionProps) => {
const { ref } = useParams()
const editorRef = useRef(null)
const monacoRef = useRef(null)
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const entityType = useEntityType(id)
const { project } = useProjectContext()
@@ -112,7 +113,7 @@ const TableDefinition = ({ id }: TableDefinitionProps) => {
</Link>
<Editor
className="monaco-editor"
theme={isDarkMode ? 'vs-dark' : 'vs'}
theme={theme === 'dark' ? 'vs-dark' : 'vs'}
onMount={handleEditorOnMount}
defaultLanguage="pgsql"
value={formattedDefinition}
studio/components/layouts/APIAuthorizationLayout.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import Head from 'next/head'
import Image from 'next/image'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { PropsWithChildren } from 'react'
import { BASE_PATH } from 'lib/constants'
import Divider from 'components/ui/Divider'
@@ -8,7 +8,7 @@ import Divider from 'components/ui/Divider'
export interface APIAuthorizationLayoutProps {}
const APIAuthorizationLayout = ({ children }: PropsWithChildren<APIAuthorizationLayoutProps>) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
return (
<>
<Head>
@@ -23,7 +23,7 @@ const APIAuthorizationLayout = ({ children }: PropsWithChildren<APIAuthorization
<span className="sr-only">Supabase</span>
<Image
src={
isDarkMode
theme === 'dark'
? `${BASE_PATH}/img/supabase-dark.svg`
: `${BASE_PATH}/img/supabase-light.svg`
}
studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
+5 -5
View File
@@ -2,7 +2,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useFlag } from 'hooks'
import { useSignOut } from 'lib/auth'
import { useProfile } from 'lib/profile'
@@ -28,7 +28,7 @@ const UserSettingsDropdown = () => {
const { profile } = useProfile()
const showAuditLogs = useFlag('auditLogs')
const { setIsOpen: setCommandMenuOpen } = useCommandMenu()
const { isDarkMode, toggleTheme } = useTheme()
const { theme, setTheme } = useTheme()
const onClickLogout = async () => {
await signOut()
@@ -98,12 +98,12 @@ const UserSettingsDropdown = () => {
<DropdownMenuSeparator_Shadcn_ />
<DropdownMenuLabel_Shadcn_>Theme</DropdownMenuLabel_Shadcn_>
<DropdownMenuRadioGroup_Shadcn_
value={isDarkMode ? 'dark' : 'light'}
value={theme}
onValueChange={(x) => {
const dark = x === 'dark'
toggleTheme(Boolean(dark))
setTheme(x)
}}
>
<DropdownMenuRadioItem_Shadcn_ value={'system'}>System</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value={'dark'}>Dark</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value={'light'}>Light</DropdownMenuRadioItem_Shadcn_>
</DropdownMenuRadioGroup_Shadcn_>
studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+8 -7
View File
@@ -1,9 +1,9 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { isUndefined } from 'lodash'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useTheme } from 'next-themes'
import { useFlag } from 'hooks'
import { IS_PLATFORM } from 'lib/constants'
import { detectOS } from 'lib/helpers'
@@ -34,7 +34,7 @@ import NavigationIconButton from './NavigationIconButton'
const NavigationBar = () => {
const router = useRouter()
const { isDarkMode, toggleTheme } = useTheme()
const { theme, setTheme } = useTheme()
const { ref: projectRef } = useParams()
const os = detectOS()
@@ -161,11 +161,12 @@ const NavigationBar = () => {
<DropdownMenuLabel_Shadcn_>Theme</DropdownMenuLabel_Shadcn_>
<DropdownMenuRadioGroup_Shadcn_
key="theme"
value={isDarkMode ? 'dark' : 'light'}
onValueChange={(e) => toggleTheme(e === 'dark')}
value={theme === 'dark' ? 'dark' : 'light'}
onValueChange={(value: string) => setTheme(value)}
>
{/* [Joshen] Removing system default for now, needs to be supported in useTheme from common packages */}
{/* <DropdownMenuRadioItem_Shadcn_ value="system">System default</DropdownMenuRadioItem_Shadcn_> */}
<DropdownMenuRadioItem_Shadcn_ value="system">
System default
</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value="dark">Dark</DropdownMenuRadioItem_Shadcn_>
<DropdownMenuRadioItem_Shadcn_ value="light">Light</DropdownMenuRadioItem_Shadcn_>
</DropdownMenuRadioGroup_Shadcn_>
studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { BASE_PATH } from 'lib/constants'
import { observer } from 'mobx-react-lite'
import Image from 'next/image'
@@ -19,7 +19,7 @@ const ForgotPasswordLayout = ({
showHeadings = true,
children,
}: PropsWithChildren<ForgotPasswordLayoutProps>) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
return (
<div className="flex-1 bg-scale-200 flex flex-col gap-8 lg:gap-16 xl:gap-32">
@@ -31,7 +31,7 @@ const ForgotPasswordLayout = ({
<a>
<Image
src={
isDarkMode
theme === 'dark'
? `${BASE_PATH}/img/supabase-dark.svg`
: `${BASE_PATH}/img/supabase-light.svg`
}
studio/components/layouts/SignInLayout/SignInLayout.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { useQueryClient } from '@tanstack/react-query'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useFlag } from 'hooks'
import { usePushNext } from 'hooks/misc/useAutoAuthRedirect'
import { BASE_PATH } from 'lib/constants'
@@ -29,7 +29,7 @@ const SignInLayout = ({
const router = useRouter()
const pushNext = usePushNext()
const queryClient = useQueryClient()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const ongoingIncident = useFlag('ongoingIncident')
// This useEffect redirects the user to MFA if they're already halfway signed in
@@ -103,7 +103,7 @@ const SignInLayout = ({
<a>
<Image
src={
isDarkMode
theme === 'dark'
? `${BASE_PATH}/img/supabase-dark.svg`
: `${BASE_PATH}/img/supabase-light.svg`
}
studio/components/ui/CodeEditor/CodeEditor.utils.ts
+7 -7
View File
@@ -9,22 +9,22 @@ export const alignEditor = (editor: any) => {
})
}
export const getTheme = (isDarkTheme: boolean) => {
export const getTheme = (theme: string) => {
// [TODO] Probably need better theming for light mode
return {
base: isDarkTheme ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black
base: theme === 'dark' ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black
inherit: true, // can also be false to completely replace the builtin rules
rules: [
{ background: isDarkTheme ? '1f1f1f' : 'f0f0f0' },
{ background: theme === 'dark' ? '1f1f1f' : 'f0f0f0' },
{
token: '',
background: isDarkTheme ? '1f1f1f' : 'f0f0f0',
foreground: isDarkTheme ? 'd4d4d4' : '444444',
background: theme === 'dark' ? '1f1f1f' : 'f0f0f0',
foreground: theme === 'dark' ? 'd4d4d4' : '444444',
},
{ token: 'string.sql', foreground: '24b47e' },
{ token: 'comment', foreground: '666666' },
{ token: 'predefined.sql', foreground: isDarkTheme ? 'D4D4D4' : '444444' },
{ token: 'predefined.sql', foreground: theme === 'dark' ? 'D4D4D4' : '444444' },
],
colors: { 'editor.background': isDarkTheme ? '#1f1f1f' : '#f0f0f0' },
colors: { 'editor.background': theme === 'dark' ? '#1f1f1f' : '#f0f0f0' },
}
}
studio/pages/404.tsx
+3 -4
View File
@@ -3,12 +3,11 @@ import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { Button } from 'ui'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { BASE_PATH } from 'lib/constants'
const Error404: NextPage = ({}) => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [show404, setShow404] = useState<boolean>(false)
useEffect(() => {
@@ -27,7 +26,7 @@ const Error404: NextPage = ({}) => {
<a>
<Image
src={
isDarkMode
theme === 'dark'
? `${BASE_PATH}/img/supabase-dark.svg`
: `${BASE_PATH}/img/supabase-light.svg`
}
studio/pages/500.tsx
+3 -3
View File
@@ -6,11 +6,11 @@ import { Button } from 'ui'
import { observer } from 'mobx-react-lite'
import { useSignOut } from 'lib/auth'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
const Error500: NextPage = () => {
const router = useRouter()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const signOut = useSignOut()
const onClickLogout = async () => {
@@ -29,7 +29,7 @@ const Error500: NextPage = () => {
<a>
<Image
src={
isDarkMode
theme === 'dark'
? `${router.basePath}/img/supabase-dark.svg`
: `${router.basePath}/img/supabase-light.svg`
}
studio/pages/_app.tsx
+6 -1
View File
@@ -184,7 +184,12 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
<PageTelemetry>
<TooltipProvider>
<RouteValidationWrapper>
<ThemeProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<CommandMenuWrapper>
<AppBannerWrapper>
{getLayout(<Component {...pageProps} />)}
studio/pages/_document.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ class MyDocument extends Document {
/>
<link rel="stylesheet" type="text/css" href={`${BASE_PATH}/css/fonts.css`} />
</Head>
<body className="dark">
<body>
<Main />
<NextScript />
</body>
studio/pages/account/me.tsx
+8 -8
View File
@@ -1,7 +1,8 @@
import { observer } from 'mobx-react-lite'
import Link from 'next/link'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { AccountLayout } from 'components/layouts'
import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
import AlertError from 'components/ui/AlertError'
@@ -171,24 +172,23 @@ const Profile = ({ profile }: { profile?: ProfileType }) => {
}
const ThemeSettings = observer(() => {
const { isDarkMode, toggleTheme } = useTheme()
const { theme, setTheme } = useTheme()
return (
<Panel title={<h5 key="panel-title">Theme</h5>}>
<Panel.Content>
<Listbox
value={isDarkMode ? 'dark' : 'light'}
value={theme}
label="Interface theme"
descriptionText="Choose a theme preference"
layout="horizontal"
style={{ width: '50%' }}
icon={isDarkMode ? <IconMoon /> : <IconSun />}
onChange={(themeOption: any) => toggleTheme(themeOption === 'dark')}
icon={theme ? <IconMoon /> : <IconSun />}
onChange={(value: string) => setTheme(value)}
>
{/* [Joshen] Removing system default for now, needs to be supported in useTheme from common packages */}
{/* <Listbox.Option label="System default" value="system">
<Listbox.Option label="System default" value="system">
System default
</Listbox.Option> */}
</Listbox.Option>
<Listbox.Option label="Dark" value="dark">
Dark
</Listbox.Option>
studio/pages/new/index.tsx
+4 -3
View File
@@ -1,7 +1,8 @@
import HCaptcha from '@hcaptcha/react-hcaptcha'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { useParams, useTheme } from 'common'
import { useParams } from 'common'
import { useTheme } from 'next-themes'
import { observer } from 'mobx-react-lite'
import { useCallback, useEffect, useState } from 'react'
@@ -18,7 +19,7 @@ const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
* No org selected yet, create a new one
*/
const Wizard: NextPageWithLayout = () => {
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const [intent, setIntent] = useState<any>()
const captchaLoaded = useIsHCaptchaLoaded()
@@ -42,7 +43,7 @@ const Wizard: NextPageWithLayout = () => {
const options = {
clientSecret: intent ? intent.client_secret : '',
appearance: { theme: isDarkMode ? 'night' : 'flat', labels: 'floating' },
appearance: { theme: theme === 'dark' ? 'night' : 'flat', labels: 'floating' },
} as any
const loadPaymentForm = async () => {
studio/pages/project/[ref]/api/graphiql.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
import { observer } from 'mobx-react-lite'
import { useEffect, useMemo } from 'react'
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useParams } from 'common/hooks'
import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
@@ -17,8 +17,8 @@ import { NextPageWithLayout } from 'types'
const GraphiQLPage: NextPageWithLayout = () => {
const { ref: projectRef } = useParams()
const { ui, meta } = useStore()
const { isDarkMode } = useTheme()
const theme = isDarkMode ? 'dark' : 'light'
const { theme } = useTheme()
const currentTheme = theme === 'dark' ? 'dark' : 'light'
const isExtensionsLoading = meta.extensions.isLoading
const pgGraphqlExtension = meta.extensions.byId('pg_graphql')
@@ -79,7 +79,7 @@ const GraphiQLPage: NextPageWithLayout = () => {
)
}
return <GraphiQL fetcher={fetcher} theme={theme} accessToken={anonKey} />
return <GraphiQL fetcher={fetcher} theme={currentTheme} accessToken={anonKey} />
}
GraphiQLPage.getLayout = (page) => <DocsLayout title="GraphiQL">{page}</DocsLayout>
studio/pages/project/[ref]/editor/[id].tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useTheme } from 'common'
import { useTheme } from 'next-themes'
import { useParams } from 'common/hooks'
import { TableGridEditor } from 'components/interfaces'
import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
@@ -10,7 +10,7 @@ import { NextPageWithLayout } from 'types'
const TableEditorPage: NextPageWithLayout = () => {
const router = useRouter()
const { isDarkMode } = useTheme()
const { theme } = useTheme()
const { id: _id, ref: projectRef } = useParams()
const id = _id ? Number(_id) : undefined
@@ -21,7 +21,7 @@ const TableEditorPage: NextPageWithLayout = () => {
<TableGridEditor
isLoadingSelectedTable={isLoading}
selectedTable={selectedTable}
theme={isDarkMode ? 'dark' : 'light'}
theme={theme === 'dark' ? 'dark' : 'light'}
/>
<DeleteConfirmationDialogs
projectRef={projectRef}