vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

chore: upgrade next 13 + react 18 (#17839)

Browse Source 
* update deps + image codemod (studio)

* update next links (studio)

* update deps

* update links (ui)

* remove next-transpile-modules

* move next-themes dependency

* chore: update ConfirmDialog

* chore: remove old ConfirmModal js file. migrated to TS

* dependency wrangling

* remove empty page

* update next links (www)

* First run bump react-data-grid-v7 beta 4

* fix package-lock.json

* more deps wrangling

* update recharts

* update sentry options

* fix some broken things in www

* studio fixes

* fix graphiql

* fix studio build

* fix menu hydration

* small build error

* update turbo

* fix www typescript errors

* docs image codemod

* links codemod docs

* fix docs typescript errors

* move useConsent to ui to prevent circular deps

* Fix links

* Fix homepage

* Fix links

* move studio/ to apps/

* Revert "move studio/ to apps/"

This reverts commit 1b0a985fcb7569f29c8a6dd05b9c3063152547b9.

* disable outputFileTracingRoot

* remove outputFileTracingRoot

* fix homepage product cards

* fix PrivacySettings links

* Fix links

* Fix the build for www.

* Minor fixes for JWTGenerator.

* Fix the docs and ui tests.

* Revert codehike back to 0.8.3

* remove ConfirmAlert()

* reenable babel because mobx hates me

* fix blog image and comparison page avatar

* Fix svg errors

* update image synthax

* Fix code hike

* Move the button in a div so that it doesn't inherit its parent height and make the button look weird.

* When components are defined in a component, they get recreated on each render. This makes them unstable in certain cases and causes infinite rerenders.

* Replace the next/head usage with next/script.

* Chore/upgrade next 13 fix table editor (#18431)

* fix table editor styling and fix row deletion logic

* Fix deleting selected rows from header, and fix checkboxes not clearing up

* Fix deleting all rows when filter applied, and fix deleting all rows

* Fix grid size styling issue

* Fix TS error

* Hydration errors

* studio org pages fixes

* fix more studio links

* audit logs fixes

* dropdown icon styling fixes

* fix some images in www

* upgrade to next 14

* try new sentry wrapper for api

* see if this is even invoked

* Revert "see if this is even invoked"

This reverts commit 86c3973ffa7f8ef5e1eb6d95a5809156cebf217b.

* Revert "try new sentry wrapper for api"

This reverts commit f67623ebad0f241d7e9fe275d50f7707bf64c474.

* Revert "upgrade to next 14"

This reverts commit a24dd6131eaff475a90ef991c2f832a64e4aaa2b.

* chore: allow node version 19/20

* Try to fix the LogTable so that it renders with the newer "react-data-grid" version.

* Fix type errors in the log renderer code.

* Fix the replication screen.

* Add the CSS for the GraphiQL.

* Fix SQL editor results rendering

* Lint

* Fix SQL editor results height issue

* Fix auth RLS not invalidating RQ when toggling RLS

* Fix database tables new/edit column regressed

* Fix migrations page empty state if migrations schema not yet created

* Fix API side panel docs temp remove postgrest text for column description PK and FK

* Fix + improve timeout handling in SQL editor

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
This commit is contained in:
Alaister Young
2023-10-31 16:51:46 +11:00
committed by GitHub
parent 1a8be4ac96
commit 8057309e51
488 changed files with 22750 additions and 28088 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/docs/components/AuthProviders.tsx
View File

@@ -9,10 +9,13 @@ export default function AuthProviders({ type }: { type: string }) {
<>
<div className="grid grid-cols-12 gap-10 not-prose py-8">
{filterProviders.map((x) => (
<Link href={`${x.href}`} key={x.name} passHref>
<a className="col-span-6 lg:col-span-4 xl:col-span-3">
<IconPanel title={x.name} icon={x.logo} hasLightIcon={x.hasLightIcon} />
</a>
<Link
href={`${x.href}`}
key={x.name}
passHref
className="col-span-6 lg:col-span-4 xl:col-span-3"
>
<IconPanel title={x.name} icon={x.logo} hasLightIcon={x.hasLightIcon} />
</Link>
))}
</div>

59
apps/docs/components/ButtonCard.tsx
View File

@@ -1,6 +1,6 @@
import React, { FC, ReactNode } from 'react'
import Image from 'next/legacy/image'
import Link from 'next/link'
import Image from 'next/image'
import { FC } from 'react'
interface Props {
title: string
@@ -20,34 +20,33 @@ const ButtonCard: FC<Props> = ({
layout = 'vertical',
}) => {
return (
<Link href={to}>
<a
className={[
'h-full block shadow-none bg-scale-300 rounded transition',
'border border-transparent hover:border-scale-600',
].join(' ')}
>
{children ? (
children
) : (
<div
className={[
'px-6 py-4 gap-x-4 gap-y-2 flex',
`${layout === 'vertical' ? 'flex-col' : 'items-center'}`,
].join(' ')}
>
{icon && typeof icon == 'string' ? (
<div className="w-[24px] h-[24px]">
<Image className="m-0" src={icon} width={24} height={24} alt={title} />
</div>
) : (
icon
)}
<h3 className="my-0 text-base text-scale-1200">{title}</h3>
<p className="my-0 text-sm">{description}</p>
</div>
)}
</a>
<Link
href={to}
className={[
'h-full block shadow-none bg-scale-300 rounded transition',
'border border-transparent hover:border-scale-600',
].join(' ')}
>
{children ? (
children
) : (
<div
className={[
'px-6 py-4 gap-x-4 gap-y-2 flex',
`${layout === 'vertical' ? 'flex-col' : 'items-center'}`,
].join(' ')}
>
{icon && typeof icon == 'string' ? (
<div className="w-[24px] h-[24px]">
<Image className="m-0" src={icon} width={24} height={24} alt={title} />
</div>
) : (
icon
)}
<h3 className="my-0 text-base text-scale-1200">{title}</h3>
<p className="my-0 text-sm">{description}</p>
</div>
)}
</Link>
)
}

2
apps/docs/components/CustomHTMLElements/Heading.tsx
View File

@@ -28,7 +28,7 @@ interface Props {
* need to parse the <a> and generate anchors. Custom anchors are used in tsx files.
* (see: /pages/guides/cli/config.tsx)
*/
const Heading: React.FC<Props> = ({ tag, customAnchor, children }) => {
const Heading: React.FC<React.PropsWithChildren<Props>> = ({ tag, customAnchor, children }) => {
const HeadingTag = `${tag}` as any
const anchor = customAnchor ? customAnchor : getAnchor(children)
const link = `#${anchor}`

18
apps/docs/components/Extensions.tsx
View File

@@ -105,14 +105,16 @@ export default function Extensions() {
filters.length === 0 ? x : x.tags.some((item) => filters.includes(item))
)
.map((extension) => (
<Link passHref href={extension.link}>
<a target={getLinkTarget(extension.link)} className="no-underline">
<GlassPanel title={extension.name} background={false} key={extension.name}>
<p className="mt-4">
{extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
</p>
</GlassPanel>
</a>
<Link
href={extension.link}
target={getLinkTarget(extension.link)}
className="no-underline"
>
<GlassPanel title={extension.name} background={false} key={extension.name}>
<p className="mt-4">
{extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
</p>
</GlassPanel>
</Link>
// <div className="my-2 px-2 relative" key={extension.name}>
// <div className="border rounded-sm p-4">

4
apps/docs/components/Flag/FlagProvider.tsx
View File

@@ -1,8 +1,8 @@
import { FC, useEffect, useState } from 'react'
import { FC, PropsWithChildren, useEffect, useState } from 'react'
// import createConfigCatClient from 'configcat-js'
import FlagContext from './FlagContext'
const FlagProvider: FC = ({ children }) => {
const FlagProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
const [store, setStore] = useState({})
const { Provider } = FlagContext

16
apps/docs/components/HomePageCover.tsx
View File

@@ -84,15 +84,13 @@ const HomePageCover = (props) => {
</div>
<div className="flex shrink-0 flex-wrap md:grid md:grid-cols-5 gap-2 sm:gap-3">
{frameworks.map((framework, i) => (
<Link key={i} href={framework.href} passHref>
<a className="no-underline">
<IconPanel
iconSize={iconSize}
hideArrow
tooltip={framework.tooltip}
icon={framework.icon}
/>
</a>
<Link key={i} href={framework.href} passHref className="no-underline">
<IconPanel
iconSize={iconSize}
hideArrow
tooltip={framework.tooltip}
icon={framework.icon}
/>
</Link>
))}
</div>

8
apps/docs/components/JwtGenerator.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import KJUR from 'jsrsasign'
import { Button, Select, Input, CodeBlock } from 'ui'
import { useState } from 'react'
import { Button, CodeBlock, Input, Select } from 'ui'
const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
const now = new Date()
@@ -44,7 +44,7 @@ export default function JwtGenerator({}) {
return (
<div>
<div className="grid mb-8">
<label for="secret">JWT Secret:</label>
<label htmlFor="secret">JWT Secret:</label>
<Input
id="secret"
type="text"
@@ -63,7 +63,7 @@ export default function JwtGenerator({}) {
</div>
<div className="grid mb-8">
<label for="token">Payload:</label>
<label htmlFor="token">Payload:</label>
<Input.TextArea
id="token"
type="text"

30
apps/docs/components/LinkCard.tsx
View File

@@ -1,5 +1,4 @@
import Link from 'next/link'
import { ReactElement } from 'react'
export default function LinkCard({
title,
@@ -13,20 +12,21 @@ export default function LinkCard({
link: string
}) {
return (
<Link href={link || '#'}>
<a className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
{description ? (
<>
<h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
<p className="text-scale-1100 m-0 p-0">{description}</p>
</>
) : (
<div className="flex">
{icon}
<p className="text-scale-1200 m-0 p-0">{title}</p>
</div>
)}
</a>
<Link
href={link || '#'}
className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5"
>
{description ? (
<>
<h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
<p className="text-scale-1100 m-0 p-0">{description}</p>
</>
) : (
<div className="flex">
{icon}
<p className="text-scale-1200 m-0 p-0">{title}</p>
</div>
)}
</Link>
)
}

19
apps/docs/components/Navigation/Footer.tsx
View File

@@ -28,10 +28,13 @@ const Footer = () => (
)}
{Icon && <Icon width={16} height={16} />}
<p>{text}</p>
<Link href={url} passHref>
<a className="text-brand hover:underline" target="_blank" rel="noreferrer noopener">
{ctaLabel}
</a>
<Link
href={url}
className="text-brand hover:underline"
target="_blank"
rel="noreferrer noopener"
>
{ctaLabel}
</Link>
</li>
))}
@@ -40,14 +43,14 @@ const Footer = () => (
<hr className="border-border my-6"></hr>
<div className="flex gap-4 items-center justify-between">
<div className="flex flex-col lg:flex-row gap-3 ">
<Link href="https://supabase.com/">
<a className="text-xs text-lighter">&copy; Supabase Inc</a>
<Link href="https://supabase.com/" className="text-xs text-lighter">
&copy; Supabase Inc
</Link>
<span className="text-xs text-lighter">—</span>
{secondaryLinks.map(({ component: Component, ...item }) =>
item.url ? (
<Link href={item.url} key={item.url}>
<a className="text-xs text-lighter hover:underline">{item.title}</a>
<Link href={item.url} key={item.url} className="text-xs text-lighter hover:underline">
{item.title}
</Link>
) : (
Component && (

30
apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
View File

@@ -35,22 +35,20 @@ const NavigationMenuHome = () => {
} else {
return (
<Link href={link.href} passHref key={link.label}>
<a>
<li
className={[
'group flex items-center gap-2',
'text-sm transition-all duration-150 text-scale-1100 hover:text-scale-1200 hover:cursor-pointer ',
].join(' ')}
>
{link?.icon && <HomeMenuIconPicker icon={link.icon} />}
{link.label}
{link.community && (
<Badge size="small" color="scale">
Community
</Badge>
)}
</li>
</a>
<li
className={[
'group flex items-center gap-2',
'text-sm transition-all duration-150 text-scale-1100 hover:text-scale-1200 hover:cursor-pointer ',
].join(' ')}
>
{link?.icon && <HomeMenuIconPicker icon={link.icon} />}
{link.label}
{link.community && (
<Badge size="small" color="scale">
Community
</Badge>
)}
</li>
</Link>
)
}

4
apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx
View File

@@ -313,8 +313,8 @@ export function IconMenuPlatform({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M6.7156 1.77258C7.58712 1.14341 8.76326 1.14175 9.63655 1.76846L12.0629 3.50974C12.7162 3.97855 12.8569 4.83994 12.4888 5.4786L13.0896 5.9098C13.7748 6.4015 13.8962 7.32509 13.4579 7.97059L14.1753 8.4882C15.0124 9.09219 15.0035 10.3415 14.1578 10.9335L9.42209 14.2484C8.5592 14.8524 7.41031 14.8508 6.54911 14.2444L1.83872 10.9276C0.999787 10.3368 0.988308 9.09703 1.81616 8.49086L2.80076 7.76992C2.50724 7.14639 2.66597 6.35556 3.27999 5.91229L3.88264 5.47721C3.51614 4.83981 3.65602 3.98138 4.30587 3.51223L6.7156 1.77258ZM5.00242 5.21218C4.95761 5.16341 4.90473 5.12529 4.84735 5.09839C4.61595 4.88922 4.62987 4.51169 4.8912 4.32303L7.30093 2.58337C7.82385 2.20587 8.52953 2.20487 9.0535 2.5809L11.4799 4.32218C11.7403 4.50906 11.7564 4.88309 11.5302 5.09348C11.4651 5.12213 11.4054 5.16499 11.3562 5.22122L9.03905 6.84318C8.52132 7.20559 7.83199 7.20462 7.31527 6.84078L5.00242 5.21218ZM4.62864 6.17202L3.86532 6.72308C3.58687 6.92411 3.58931 7.33956 3.87012 7.53729L7.31263 9.96135C7.82935 10.3252 8.51869 10.3262 9.03642 9.96376L12.5018 7.53808C12.7841 7.34045 12.7866 6.92317 12.5066 6.72224L11.7408 6.17267L9.6125 7.66242C8.74962 8.26643 7.60073 8.26482 6.73953 7.65841L4.62864 6.17202ZM3.49834 8.49855L2.40694 9.29769C2.13099 9.49975 2.13482 9.91301 2.41446 10.1099L7.12485 13.4268C7.64157 13.7906 8.3309 13.7916 8.84864 13.4292L13.5844 10.1143C13.8663 9.91694 13.8692 9.50049 13.5902 9.29916L12.674 8.63814L9.60987 10.783C8.74698 11.387 7.59809 11.3854 6.7369 10.779L3.49834 8.49855Z"
fill="currentColor"
/>

36
apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
View File

@@ -22,11 +22,12 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
}) => {
return (
<li key={id} className="function-link-item text-scale-1000 leading-3">
<Link href={`#${id}`} passHref>
<a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3">
{icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
{title}
</a>
<Link
href={`#${id}`}
className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3"
>
{icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
{title}
</Link>
</li>
)
@@ -96,20 +97,19 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
].join(' ')}
>
<div className={'w-full flex flex-col gap-0 sticky top-8'}>
<Link href={`${menu.parent ?? '/'}`} passHref>
<a
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<Link
href={`${menu.parent ?? '/'}`}
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<span>Back to menu</span>
</a>
</div>
<span>Back to menu</span>
</Link>
<div className="flex items-center gap-3 my-3">
<img

96
apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
View File

@@ -1,5 +1,5 @@
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Image from 'next/legacy/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React, { useEffect, useRef } from 'react'
@@ -35,8 +35,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
const LinkContainer = (props) => {
return (
<Link href={props.url} passHref>
<a className={props.className}>{props.children}</a>
<Link href={props.url} className={props.className}>
{props.children}
</Link>
)
}
@@ -93,17 +93,16 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
{props.subItem.items.map((subSubItem) => {
return (
<li key={props.subItem.name}>
<Link href={`${subSubItem.url}`} passHref>
<a
className={[
'cursor-pointer transition text-sm',
subSubItem.url === router.asPath
? 'text-brand'
: 'hover:text-brand text-scale-1000',
].join(' ')}
>
{subSubItem.name}
</a>
<Link
href={`${subSubItem.url}`}
className={[
'cursor-pointer transition text-sm',
subSubItem.url === router.asPath
? 'text-brand'
: 'hover:text-brand text-scale-1000',
].join(' ')}
>
{subSubItem.name}
</Link>
</li>
)
@@ -120,25 +119,19 @@ const ContentLink = React.memo(function ContentLink(props: any) {
return (
<li className="mb-1.5">
<Link href={props.url} passHref>
<a
className={[
'cursor-pointer transition text-sm',
props.url === router.asPath
? 'text-brand'
: 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
].join(' ')}
>
{props.icon && (
<Image
alt={props.icon}
width={12}
height={12}
src={`${router.basePath}${props.icon}`}
/>
)}
{props.name}
</a>
<Link
href={props.url}
className={[
'cursor-pointer transition text-sm',
props.url === router.asPath
? 'text-brand'
: 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
].join(' ')}
>
{props.icon && (
<Image alt={props.icon} width={12} height={12} src={`${router.basePath}${props.icon}`} />
)}
{props.name}
</Link>
</li>
)
@@ -149,29 +142,26 @@ const Content = (props) => {
return (
<ul className={['relative w-full flex flex-col gap-0 pb-5'].join(' ')}>
<Link href={`${menu.parent ?? '/'}`} passHref>
<a
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<Link
href={`${menu.parent ?? '/'}`}
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<span>Back to Home</span>
</a>
</div>
<span>Back to Home</span>
</Link>
<Link href={menu.url ?? ''} passHref>
<a>
<div className="flex items-center gap-3 my-3 text-brand">
<HomeMenuIconPicker icon={menu.icon} />
<HeaderLink title={menu.title} url={menu.url} id={id} />
</div>
</a>
<Link href={menu.url ?? ''}>
<div className="flex items-center gap-3 my-3 text-brand">
<HomeMenuIconPicker icon={menu.icon} />
<HeaderLink title={menu.title} url={menu.url} id={id} />
</div>
</Link>
{menu.items.map((x) => {

27
apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
View File

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
import { IconChevronLeft, IconChevronUp, cn } from 'ui'
import * as NavItems from './NavigationMenu.constants'
import Image from 'next/image'
import Image from 'next/legacy/image'
import RevVersionDropdown from '~/components/RefVersionDropdown'
import { useMenuActiveRefId } from '~/hooks/useMenuState'
@@ -176,20 +176,19 @@ const NavigationMenuRefListItems = ({
return (
<div className={'w-full flex flex-col gap-0 sticky top-8'}>
<Link href="/" passHref>
<a
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<Link
href="/"
className={[
'flex items-center gap-1 text-xs group mb-3',
'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
].join(' ')}
>
<div className="relative w-2">
<div className="transition-all ease-out ml-0 group-hover:-ml-1">
<IconChevronLeft size={10} strokeWidth={3} />
</div>
<span>Back to Main Menu</span>
</a>
</div>
<span>Back to Main Menu</span>
</Link>
<div className="flex items-center gap-3 my-3">
<HomeMenuIconPicker icon={menu.icon} width={21} height={21} />

31
apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
View File

@@ -1,5 +1,5 @@
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Image from 'next/legacy/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useState } from 'react'
@@ -55,19 +55,17 @@ const TopNavBar: FC = () => {
<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={
resolvedTheme === '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 href="/" className=" flex items-center gap-2">
<Image
className="cursor-pointer"
src={
resolvedTheme === '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>
</Link>
</div>
@@ -117,10 +115,9 @@ const TopNavBar: FC = () => {
href="https://github.com/supabase/supabase"
target="_blank"
rel="noreferrer noopener"
className="px-2.5 py-1"
>
<a className="px-2.5 py-1" target="_blank">
<IconGitHub size={16} className="text-scale-1100 hover:text-scale-1200 transition" />
</a>
<IconGitHub size={16} className="text-scale-1100 hover:text-scale-1200 transition" />
</Link>
<ThemeToggle />
</div>

94
apps/docs/components/Navigation/SideBar.tsx
View File

@@ -1,5 +1,5 @@
import Link from 'next/link'
import Image from 'next/image'
import Image from 'next/legacy/image'
import { useRouter } from 'next/router'
import { IconChevronRight, IconArrowLeft } from '~/../../packages/ui'
import { REFERENCES } from './NavigationMenu/NavigationMenu.constants'
@@ -49,12 +49,10 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
{isInReferencePages && (
<>
<Link href="/reference">
<a>
<div className="flex items-center space-x-4 opacity-75 hover:opacity-100 transition">
<IconArrowLeft size={16} strokeWidth={2} className="text-scale-1200" />
<span className="text-sm text-scale-1200">All Reference Docs</span>
</div>
</a>
<div className="flex items-center space-x-4 opacity-75 hover:opacity-100 transition">
<IconArrowLeft size={16} strokeWidth={2} className="text-scale-1200" />
<span className="text-sm text-scale-1200">All Reference Docs</span>
</div>
</Link>
{referenceMeta !== undefined && (
<div className="my-5 flex items-center space-x-4">
@@ -76,21 +74,19 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
<div className="my-2">
{menuItems[0].items.map((item) => (
<Link key={item.name} href={item.url}>
<a>
<div
key={item.name}
className={[
'py-1.5 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{item.name}
</div>
</a>
<div
key={item.name}
className={[
'py-1.5 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{item.name}
</div>
</Link>
))}
</div>
@@ -118,20 +114,18 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
if (section.items.length === 0) {
return (
<Link href={section.url} key={section.name}>
<a>
<div
className={[
'py-1.5 px-5 rounded text-sm transition',
`${
section.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{section.name}
</div>
</a>
<div
className={[
'py-1.5 px-5 rounded text-sm transition',
`${
section.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{section.name}
</div>
</Link>
)
} else {
@@ -157,21 +151,19 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
<Accordion.Content className="my-2 data-open:animate-slide-down data-closed:animate-slide-up">
{section.items.map((item: NavMenuSection) => (
<Link key={item.name} href={item.url}>
<a>
<div
key={item.name}
className={[
'py-1.5 ml-4 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{item.name}
</div>
</a>
<div
key={item.name}
className={[
'py-1.5 ml-4 px-5 rounded text-sm transition',
`${
item.url === asPath
? 'bg-scale-200 text-brand'
: 'text-scale-1100 hover:text-scale-1200'
}`,
].join(' ')}
>
{item.name}
</div>
</Link>
))}
</Accordion.Content>

4
apps/docs/components/Options.tsx
View File

@@ -1,4 +1,4 @@
import { FC, useState } from 'react'
import { FC, PropsWithChildren, useState } from 'react'
import { IconXCircle } from '~/../../packages/ui'
interface IOptions {
@@ -11,7 +11,7 @@ type OptionsSubComponents = {
Option: IOption
}
const Options: FC<IOptions> & OptionsSubComponents = (props) => {
const Options: FC<PropsWithChildren<IOptions>> & OptionsSubComponents = (props) => {
const [open, setOpen] = useState(false)
return (
<div className="mt-0">

42
apps/docs/components/Pagination.tsx
View File

@@ -11,39 +11,37 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
return (
<ul className="flex justify-center space-x-1 text-xs font-medium">
<li>
<Link href={`/discussions?page=${currentPage - 1}`}>
<a className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border">
<IconArrowLeft
className="stroke-2 transition group-hover:-translate-x-1"
height={12.5}
/>
</a>
<Link
href={`/discussions?page=${currentPage - 1}`}
className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border"
>
<IconArrowLeft className="stroke-2 transition group-hover:-translate-x-1" height={12.5} />
</Link>
</li>
{pages.map((page: number, i: number) => {
i = i + 1
return (
<li key={i}>
<Link href={`/discussions?page=${page}`}>
<a
className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
currentPage === page ? 'bg-brand' : 'bg-scale-300'
}`}
>
{page}
</a>
<Link
href={`/discussions?page=${page}`}
className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
currentPage === page ? 'bg-brand' : 'bg-scale-300'
}`}
>
{page}
</Link>
</li>
)
})}
<li>
<Link href={`/discussions?page=${currentPage + 1}`}>
<a className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border">
<IconArrowRight
className="stroke-2 transition group-hover:-translate-x-1"
height={12.5}
/>
</a>
<Link
href={`/discussions?page=${currentPage + 1}`}
className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border"
>
<IconArrowRight
className="stroke-2 transition group-hover:-translate-x-1"
height={12.5}
/>
</Link>
</li>
</ul>

22
apps/docs/components/Params.tsx
View File

@@ -1,16 +1,12 @@
import { FC } from 'react'
type IParamProps = any
const Param: FC<IParamProps> = (paramItem) => {
const Param = ({ name, isOptional, type, description, children }: IParamProps) => {
return (
<li className="border-t border-b py-5 flex flex-col gap-3">
<div className="border-t border-b py-5 flex flex-col gap-3 debugger">
<div className="flex gap-3 items-center">
<span className="text-sm text-scale-1200 font-mono font-medium">
{paramItem.name ?? 'no-name'}
</span>
<span className="text-sm text-scale-1200 font-mono font-medium">{name ?? 'no-name'}</span>
<span>
{paramItem.isOptional ? (
{isOptional ? (
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
) : (
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
@@ -18,13 +14,11 @@ const Param: FC<IParamProps> = (paramItem) => {
</div>
)}
</span>
<span className="text-scale-900 text-xs">{paramItem.type ?? 'no type'}</span>
<span className="text-scale-900 text-xs">{type ?? 'no type'}</span>
</div>
{paramItem.description && (
<p className="text-sm text-scale-1000 m-0">{paramItem.description} </p>
)}
{paramItem.children}
</li>
{description && <p className="text-sm text-scale-1000 m-0">{description} </p>}
{children}
</div>
)
}

10
apps/docs/components/StepHikeCompact/index.tsx
View File

@@ -1,5 +1,5 @@
//import { Step } from 'next-seo/lib/types'
import { FC } from 'react'
import { FC, PropsWithChildren } from 'react'
import { cn } from 'ui'
interface IStep {
@@ -23,14 +23,14 @@ interface IStepHikeCompact {
title: string
}
const StepHikeCompact: FC<IStepHikeCompact> & IStepHikeCompactSubcomponents = ({
const StepHikeCompact: FC<PropsWithChildren<IStepHikeCompact>> & IStepHikeCompactSubcomponents = ({
children,
title,
}) => {
return <div className="py-8">{children}</div>
}
const Step: FC<IStep> = ({ children, title, step }) => {
const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
return (
<div className="relative pb-8 [&_div]:[&_div]:last:bg-transparent">
<div
@@ -77,7 +77,7 @@ const Step: FC<IStep> = ({ children, title, step }) => {
)
}
const Details: FC<IDetails> = ({ children, title, fullWidth = false }) => {
const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth = false }) => {
return (
<div className={cn(fullWidth ? 'col-span-12' : 'col-span-5', 'ml-12', 'lg:ml-0')}>
<h3 className="mt-0 text-scale-1200 text-base">{title}</h3>
@@ -86,7 +86,7 @@ const Details: FC<IDetails> = ({ children, title, fullWidth = false }) => {
)
}
const Code: FC<ICode> = ({ children }) => {
const Code: FC<PropsWithChildren<ICode>> = ({ children }) => {
return <div className="col-span-7 not-prose">{children}</div>
}

9
apps/docs/components/reference/OldVersionAlert.tsx
View File

@@ -26,10 +26,11 @@ const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
<Admonition type="caution">
You&apos;re viewing an older version of this library.
<br />
<Link href={latestVersionUrl}>
<a className="underline decoration-brand-400 underline-offset-4 decoration-1">
Switch to the latest
</a>
<Link
href={latestVersionUrl}
className="underline decoration-brand-400 underline-offset-4 decoration-1"
>
Switch to the latest
</Link>
.
</Admonition>

7
apps/docs/components/reference/RefDetailCollapse.tsx
View File

@@ -2,10 +2,9 @@ import * as Accordion from '@radix-ui/react-accordion'
import React from 'react'
import { IconChevronRight } from '~/../../packages/ui'
const RefDetailCollapse: React.FC<{ id: string; label: string; defaultOpen?: boolean }> = ({
defaultOpen = true,
...props
}) => {
const RefDetailCollapse: React.FC<
React.PropsWithChildren<{ id: string; label: string; defaultOpen?: boolean }>
> = ({ defaultOpen = true, ...props }) => {
return (
<Accordion.Root
className="AccordionRoot"

2
apps/docs/components/reference/RefHeaderSection.tsx
View File

@@ -3,7 +3,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
interface Props {}
const RefHeaderSection: React.FC<Props> = (props) => {
const RefHeaderSection: React.FC<React.PropsWithChildren<Props>> = (props) => {
return (
<>
<RefSubLayout.EducationRow>

8
apps/docs/docs/ref/csharp/introduction.mdx
View File

@@ -19,11 +19,9 @@ hideTitle: true
{/* prettier-ignore */}
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>
The C# client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
</p>
<p>
The C# client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
Huge thanks to official maintainer, [Joseph Schultz](https://github.com/acupofjose), and to [Ben Randall](https://github.com/veleek) and [Rhuan Barros](https://github.com/rhuanbarros) for their help.
</p>
</div>

4
apps/docs/docs/ref/kotlin/introduction.mdx
View File

@@ -61,8 +61,8 @@ Supported targets:
</div>
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
<p>Huge thanks to official maintainer, [jan-tennert](https://github.com/jan-tennert).</p>
Huge thanks to official maintainer, [jan-tennert](https://github.com/jan-tennert).
</div>

13
apps/docs/docs/ref/python/introduction.mdx
View File

@@ -21,12 +21,11 @@ hideTitle: true
</div>
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The Python client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>
Huge thanks to official maintainers, [anand2312](https://github.com/anand2312/), [dreinon](https://github.com/dreinon), [J0](https://github.com/j0), and [Leynier](https://github.com/leynier).
</p>
<p>
Shoutout to [timkpaine](https://github.com/timkpaine) for maintaining our Conda libraries as well.
</p>
The Python client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
Huge thanks to official maintainers, [anand2312](https://github.com/anand2312/), [dreinon](https://github.com/dreinon), [J0](https://github.com/j0), and [Leynier](https://github.com/leynier).
Shoutout to [timkpaine](https://github.com/timkpaine) for maintaining our Conda libraries as well.
</div>

12
apps/docs/docs/ref/swift/introduction.mdx
View File

@@ -14,17 +14,17 @@ hideTitle: true
{/* prettier-ignore */}
<div className="max-w-xl">
<p>
This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
</p>
<p>
We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
</p>
</div>
{/* prettier-ignore */}
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
Huge thanks to official maintainer, [Maail](https://github.com/maail).
<p>Huge thanks to official maintainer, [Maail](https://github.com/maail).</p>
</div>

2
apps/docs/jest.config.mjs
View File

@@ -6,7 +6,7 @@ const createJestConfig = nextJest({
})
const config = {
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jsdom',
}

1
apps/docs/jest.setup.js Normal file
View File

@@ -0,0 +1 @@
import '@testing-library/jest-dom'

11
apps/docs/layouts/DefaultLayout.tsx
View File

@@ -2,7 +2,7 @@ import { MDXProvider } from '@mdx-js/react'
import { NextSeo } from 'next-seo'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { FC, PropsWithChildren } from 'react'
import components from '~/components'
import TableOfContents from '~/components/TableOfContents'
@@ -64,7 +64,7 @@ const Layout: FC<Props> = (props: Props) => {
<div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
<article className="prose dark:prose-dar max-w-none">
<h1>{props.meta.title}</h1>
<MDXProvider components={components} children={props.children} />
<MDXProvider components={components}>{props.children}</MDXProvider>
</article>
</div>
{hasTableOfContents && !props.meta?.hide_table_of_contents && (
@@ -82,8 +82,9 @@ const Layout: FC<Props> = (props: Props) => {
)
}
export const LayoutMainContent: FC<{ className?: string }> = ({ className, children }) => (
<div className={['max-w-7xl px-5 mx-auto py-16', className].join(' ')}>{children}</div>
)
export const LayoutMainContent: FC<PropsWithChildren<{ className?: string }>> = ({
className,
children,
}) => <div className={['max-w-7xl px-5 mx-auto py-16', className].join(' ')}>{children}</div>
export default Layout

2
apps/docs/layouts/HomeLayout.tsx
View File

@@ -65,7 +65,7 @@ const HomeLayout: FC<Props> = (props: Props) => {
<LayoutMainContent>
<div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
<article className="prose dark:prose-dar max-w-none">
<MDXProvider components={components} children={props.children} />
<MDXProvider components={components}>{props.children}</MDXProvider>
</article>
</div>
{hasTableOfContents && !props.meta?.hide_table_of_contents && (

24
apps/docs/layouts/SiteLayout.tsx
View File

@@ -1,5 +1,5 @@
import { useTheme } from 'next-themes'
import Image from 'next/image'
import Image from 'next/legacy/image'
import Link from 'next/link'
import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
@@ -235,22 +235,20 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
const HeaderLogo = memo(function HeaderLogo() {
const { resolvedTheme } = useTheme()
return (
<Link href="/">
<a className="px-10 flex items-center gap-2">
<Image
className="cursor-pointer"
src={resolvedTheme === '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 href="/" className="px-10 flex items-center gap-2">
<Image
className="cursor-pointer"
src={resolvedTheme === '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>
</Link>
)
})
const Container = memo(function Container(props) {
const Container = memo(function Container(props: PropsWithChildren) {
const mobileMenuOpen = useMenuMobileOpen()
return (

28
apps/docs/layouts/ref/RefSubLayout.tsx
View File

@@ -1,10 +1,10 @@
import { useInView } from 'react-intersection-observer'
import { FC } from 'react'
import { FC, PropsWithChildren } from 'react'
import { highlightSelectedNavItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
import { useRouter } from 'next/router'
import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
import { menuState } from '~/hooks/useMenuState'
import Image from 'next/image'
import Image from 'next/legacy/image'
interface ISectionContainer {
id: string
@@ -17,9 +17,9 @@ interface ISectionContainer {
}
type RefSubLayoutSubComponents = {
Section: FC<ISectionContainer>
EducationSection: FC<IEducationSection>
EducationRow: FC<IEducationRow>
Section: FC<PropsWithChildren<ISectionContainer>>
EducationSection: FC<PropsWithChildren<IEducationSection>>
EducationRow: FC<PropsWithChildren<IEducationRow>>
Details: FC<ISectionDetails>
Examples: FC<ISectionExamples>
}
@@ -50,7 +50,9 @@ interface IEducationSection {
interface ISectionDetails {}
interface ISectionExamples {}
const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) => {
const RefSubLayout: FC<PropsWithChildren<RefSubLayoutType>> & RefSubLayoutSubComponents = (
props
) => {
return (
<div className="flex flex-col w-full divide-y px-5 max-w-7xl mx-auto py-16">
{props.children}
@@ -58,7 +60,7 @@ const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) =
)
}
const Section: FC<ISectionContainer> = (props) => {
const Section: FC<PropsWithChildren<ISectionContainer>> = (props) => {
return (
<article
key={props.id + 'section'}
@@ -131,11 +133,11 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
)
}
const Details: FC<ISectionDetails> = (props) => {
const Details: FC<PropsWithChildren<ISectionDetails>> = (props) => {
return <div className="relative w-full">{props.children}</div>
}
const Examples: FC<ISectionExamples> = (props) => {
const Examples: FC<PropsWithChildren<ISectionExamples>> = (props) => {
return (
<div className="w-full">
<div className="sticky top-24">{props.children}</div>
@@ -143,7 +145,7 @@ const Examples: FC<ISectionExamples> = (props) => {
)
}
const EducationRow: FC<IEducationRow> = (props) => {
const EducationRow: FC<PropsWithChildren<IEducationRow>> = (props) => {
return (
<div className={['grid lg:grid-cols-2 gap-8 lg:gap-16', props.className].join(' ')}>
{props.children}
@@ -151,7 +153,11 @@ const EducationRow: FC<IEducationRow> = (props) => {
)
}
const EducationSection: FC<IEducationSection> = ({ icon, hideTitle = false, ...props }) => {
const EducationSection: FC<PropsWithChildren<IEducationSection>> = ({
icon,
hideTitle = false,
...props
}) => {
return (
<article
key={props.id + 'education'}

13
apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx
View File

@@ -1,5 +1,5 @@
import { useInView } from 'react-intersection-observer'
import { FC } from 'react'
import { FC, PropsWithChildren } from 'react'
import { highlightSelectedNavItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
import { useRouter } from 'next/router'
import { useNavigationMenuContext } from '~/components/Navigation/NavigationMenu/NavigationMenu.Context'
@@ -30,13 +30,12 @@ type StickyHeader = {
type RefSubLayoutNonFuncType = {}
const RefSubLayoutNonFunc: FC<RefSubLayoutNonFuncType> & RefSubLayoutNonFuncSubComponents = (
props
) => {
const RefSubLayoutNonFunc: FC<PropsWithChildren<RefSubLayoutNonFuncType>> &
RefSubLayoutNonFuncSubComponents = (props) => {
return <div className="flex flex-col w-full divide-y">{props.children}</div>
}
const Section: FC<ISectionContainer> = (props) => {
const Section: FC<PropsWithChildren<ISectionContainer>> = (props) => {
return (
<article
key={props.id}
@@ -93,13 +92,13 @@ const StickyHeader: FC<StickyHeader> = (props) => {
interface ISectionDetails {}
const Details: FC<ISectionDetails> = (props) => {
const Details: FC<PropsWithChildren<ISectionDetails>> = (props) => {
return <div>{props.children}</div>
}
interface ISectionExamples {}
const Examples: FC<ISectionExamples> = (props) => {
const Examples: FC<PropsWithChildren<ISectionExamples>> = (props) => {
return (
<div className="w-full">
<div className="sticky top-24">{props.children}</div>

4
apps/docs/lib/mdx/getComponents.tsx
View File

@@ -1,4 +1,4 @@
import Image from 'next/image'
import Image from 'next/legacy/image'
import LinkCard from '~/components/LinkCard'
import LinkCardsWrapper from '~/components/LinkCardsWrapper'
@@ -23,10 +23,12 @@ function getComponents(type: any) {
' '
)}
layout="fill"
alt=""
/>
</div>
)
}
// eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
return <img {...props} />
},
}

22
apps/docs/next.config.mjs
View File

@@ -4,7 +4,6 @@ import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import { remarkCodeHike } from '@code-hike/mdx'
import withTM from 'next-transpile-modules'
import withYaml from 'next-plugin-yaml'
import configureBundleAnalyzer from '@next/bundle-analyzer'
@@ -54,15 +53,14 @@ const nextConfig = {
'obuldanrptloktxcffvn.supabase.co',
],
},
experimental: {
// TODO: @next/mdx ^13.0.2 only supports experimental mdxRs flag. next ^13.0.2 will stop warning about this being unsupported.
// mdxRs: true,
modularizeImports: {
lodash: {
transform: 'lodash/{{member}}',
},
// TODO: @next/mdx ^13.0.2 only supports experimental mdxRs flag. next ^13.0.2 will stop warning about this being unsupported.
// mdxRs: true,
modularizeImports: {
lodash: {
transform: 'lodash/{{member}}',
},
},
transpilePackages: ['ui', 'common', 'mermaid', 'mdx-mermaid', 'dayjs', 'shared-data'],
async headers() {
return [
{
@@ -124,12 +122,8 @@ const nextConfig = {
}
const configExport = () => {
const plugins = [
withTM(['ui', 'common', 'mermaid', 'mdx-mermaid', 'dayjs', 'shared-data']),
withMDX,
withYaml,
withBundleAnalyzer,
]
const plugins = [withMDX, withYaml, withBundleAnalyzer]
// @ts-ignore
return plugins.reduce((acc, next) => next(acc), nextConfig)
}

33
apps/docs/package.json
View File

@@ -44,15 +44,15 @@
"gen:analytics:usage": "ts-node ./generator/index.ts gen --type api --input ../../spec/transforms/analytics_v0_openapi_deparsed.json --output ./docs/reference/analytics/generated/usage.mdx"
},
"dependencies": {
"@code-hike/mdx": "^0.8.3",
"@code-hike/mdx": "^0.9.0",
"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/bundle-analyzer": "^13.4.0",
"@next/mdx": "^12.3.2",
"@mdx-js/react": "^2.3.0",
"@next/bundle-analyzer": "^13.5.3",
"@next/mdx": "^13.5.3",
"@octokit/auth-app": "^4.0.9",
"@octokit/core": "^4.2.0",
"@octokit/plugin-paginate-graphql": "^2.0.1",
"@radix-ui/react-accordion": "^1.1.0",
"@radix-ui/react-accordion": "^1.1.2",
"@supabase/auth-helpers-react": "^0.4.2",
"@supabase/supabase-js": "^2.38.2",
"common": "*",
@@ -73,14 +73,15 @@
"mdx-mermaid": "2.0.0-rc3",
"mermaid": "^10.0.2",
"micromark-extension-mdxjs": "^1.0.0",
"next": "^12.3.2",
"next-mdx-remote": "^4.1.0",
"next": "^13.5.3",
"next-mdx-remote": "^4.4.1",
"next-plugin-yaml": "^1.0.1",
"next-seo": "^5.14.1",
"openai": "^3.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intersection-observer": "^9.4.0",
"next-themes": "^0.2.1",
"openai": "^3.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intersection-observer": "^9.5.2",
"react-markdown": "^8.0.3",
"rehype-slug": "^5.1.0",
"remark": "^14.0.2",
@@ -90,15 +91,15 @@
"unist-builder": "^3.0.1",
"unist-util-filter": "^4.0.1",
"unist-util-visit": "^4.1.2",
"uuid": "^9.0.0",
"valtio": "^1.7.6"
"uuid": "^9.0.1",
"valtio": "^1.11.2"
},
"devDependencies": {
"@aws-sdk/client-secrets-manager": "^3.410.0",
"@types/hast": "^2.3.4",
"@types/minimist": "^1.2.2",
"@types/node": "^17.0.24",
"@types/react": "17.0.39",
"@types/react": "^18.2.24",
"@types/unist": "^2.0.6",
"config": "*",
"dotenv": "^16.0.3",
@@ -109,10 +110,10 @@
"next-transpile-modules": "^9.0.0",
"npm-run-all": "^4.1.5",
"openapi-types": "^12.0.2",
"sass": "^1.55.0",
"sass": "^1.68.0",
"ts-node": "^10.9.1",
"tsconfig": "*",
"tsx": "^3.12.2",
"typescript": "^5.0.4"
"typescript": "^5.2.2"
}
}

5
apps/docs/pages/_app.tsx
View File

@@ -1,6 +1,7 @@
import '../../../packages/ui/build/css/themes/dark.css'
import '../../../packages/ui/build/css/themes/light.css'
import '@code-hike/mdx/styles'
import 'config/code-hike.scss'
import '../styles/main.scss?v=1.0.0'
import '../styles/new-docs.scss'
@@ -8,11 +9,11 @@ import '../styles/prism-okaidia.scss'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
import { createClient } from '@supabase/supabase-js'
import { AuthProvider, ThemeProvider, useConsent, useTelemetryProps } from 'common'
import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useState } from 'react'
import { AppPropsWithLayout } from 'types'
import { CommandMenuProvider } from 'ui'
import { CommandMenuProvider, useConsent } from 'ui'
import { TabsProvider } from 'ui/src/components/Tabs'
import PortalToast from 'ui/src/layout/PortalToast'
import Favicons from '~/components/Favicons'

16
apps/docs/pages/guides/ai.mdx
View File

@@ -26,11 +26,9 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
{examples.map((x) => (
<div className="col-span-4" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</Link>
</div>
))}
@@ -76,9 +74,7 @@ export const examples = [
{integrations.map((x) => (
<div className="col-span-4" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}
@@ -116,9 +112,7 @@ export const integrations = [
{customers.map((x) => (
<div className="col-span-4" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}

33
apps/docs/pages/guides/auth/native-mobile-login.mdx
View File

@@ -8,7 +8,7 @@ export const meta = {
description: 'Logging in with native mobile identity providers like Apple & Google.',
}
Some native mobile operating systems, like iOS and Android, offer a built-in identity provider for convenient user authentication.
Some native mobile operating systems, like iOS and Android, offer a built-in identity provider for convenient user authentication.
For iOS, apps that use a third-party or social login service to set up or authenticate the user’s primary account with the app must also offer Sign in with Apple as an equivalent option.
@@ -25,28 +25,27 @@ There are several reasons why you might want to add social login to your applica
## Set up a native social login with Supabase Auth
<div className="grid grid-cols-12 gap-10 not-prose py-8">
{NativeMobileLoginItems.map((item) => (
<Link href={`${item.url}`} key={item.name} passHref>
<a className="col-span-6 lg:col-span-4 xl:col-span-3">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</IconPanel>
</a>
{NativeMobileLoginItems.map((item) => (
<Link href={`${item.url}`} key={item.name} passHref className="col-span-6 lg:col-span-4 xl:col-span-3">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</IconPanel>
</Link>
))}
</div>
## Provider Tokens
Just like with Oauth, you will receive a copy of the provider token in case you need to use it further. For example, you can use the Google provider token to access Google APIs on behalf of your user.
Provider tokens are intentionally not stored in your project's database, however. This is because provider tokens give access to potentially sensitive user data in third-party systems. Different applications have different needs, and one application's OAuth scopes may be significantly more permissive than another. If you do want to use the provider token outside of the browser that completed the OAuth flow, you will have to send it manually to a secure server under your control.
export const Page = ({ children }) => <Layout meta={meta} children={children} />

22
apps/docs/pages/guides/auth/phone-login.mdx
View File

@@ -32,18 +32,16 @@ Supabase supports Phone Login with several communications platforms. Follow the
<div className="grid grid-cols-12 gap-10 not-prose py-8">
{PhoneLoginsItems.map((item) => (
<Link href={`${item.url}`} key={item.name} passHref>
<a className="col-span-4">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.linkDescription}
</IconPanel>
</a>
<Link href={`${item.url}`} key={item.name} passHref className="col-span-4">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.linkDescription}
</IconPanel>
</Link>
))}

26
apps/docs/pages/guides/auth/social-login.mdx
View File

@@ -26,24 +26,22 @@ There are several reasons why you might want to add social login to your applica
Supabase supports a suite of social providers. Follow these guides to configure a social provider for your platform.
<div className="grid grid-cols-12 gap-10 not-prose py-8">
{SocialLoginItems.map((item) => (
<Link href={`${item.url}`} key={item.name} passHref>
<a className="col-span-6 lg:col-span-4 xl:col-span-3">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</IconPanel>
</a>
{SocialLoginItems.map((item) => (
<Link href={`${item.url}`} key={item.name} passHref className="col-span-6 lg:col-span-4 xl:col-span-3">
<IconPanel
title={item.name}
span="col-span-6"
icon={item.icon}
isDarkMode={item.isDarkMode}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</IconPanel>
</Link>
))}
</div>
## Provider Tokens
You can use the provider token and provider refresh token returned to make API calls to the OAuth provider. For example, you can use the Google provider token to access Google APIs on behalf of your user.

8
apps/docs/pages/guides/cli.mdx
View File

@@ -18,11 +18,9 @@ The Supabase CLI provides tools to develop your project locally, deploy to the S
{integrations.map((x) => (
<div className="col-span-6" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</Link>
</div>
))}

8
apps/docs/pages/guides/functions.mdx
View File

@@ -30,11 +30,9 @@ Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree
{examples.map((x) => (
<div className="col-span-4" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</Link>
</div>
))}

70
apps/docs/pages/guides/getting-started.mdx
View File

@@ -18,13 +18,12 @@ export const meta = {
<Link
href={`${resource.href}`}
key={resource.title}
className={'col-span-12 md:col-span-4'}
passHref
>
<a className={'col-span-12 md:col-span-4'}>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</a>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</Link>
)
@@ -41,18 +40,16 @@ export const meta = {
<div className="grid lg:grid-cols-12 gap-6 not-prose">
{useCases.map((item) => {
return (
<Link href={`${item.href}`} key={item.title} passHref>
<a className={'col-span-4'}>
<GlassPanel
title={item.title}
span="col-span-6"
background={false}
icon={item.icon}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</GlassPanel>
</a>
<Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
<GlassPanel
title={item.title}
span="col-span-6"
background={false}
icon={item.icon}
hasLightIcon={item.hasLightIcon}
>
{item.description}
</GlassPanel>
</Link>
)
})}
@@ -63,12 +60,10 @@ export const meta = {
<div className="grid lg:grid-cols-12 gap-6 not-prose">
{quickstarts.map((item) => {
return (
<Link href={`${item.href}`} key={item.title} passHref>
<a className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</a>
<Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</Link>
)
})}
@@ -79,15 +74,16 @@ export const meta = {
<div className="grid lg:grid-cols-12 gap-6 not-prose">
{webapps.map((item) => {
return (
<Link href={`${item.href}`} key={item.title} passHref>
<a className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</a>
<Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</Link>
)
})}
})}
</div>
### Mobile Tutorials
@@ -95,15 +91,15 @@ export const meta = {
<div className="grid lg:grid-cols-12 gap-6 not-prose">
{mobile.map((item) => {
return (
<Link href={`${item.href}`} key={item.title} passHref>
<a className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</a>
<Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}>
<GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
{item.description}
</GlassPanel>
</Link>
)
})}
})}
</div>
export const useCases = [

8
apps/docs/pages/guides/realtime.mdx
View File

@@ -80,9 +80,7 @@ called `supabase_realtime`, and by managing this publication you can control whi
{examples.map((x) => (
<div className="col-span-12" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}
@@ -104,9 +102,7 @@ Find the source code and documentation in the Supabase GitHub repository.
{resources.map((x) => (
<div className="col-span-6" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}

27
apps/docs/pages/guides/resources.mdx
View File

@@ -17,13 +17,12 @@ export const meta = {
<Link
href={`${resource.href}`}
key={resource.title}
className={'col-span-12 md:col-span-4'}
passHref
>
<a className={'col-span-12 md:col-span-4'}>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</a>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</Link>
)
@@ -46,13 +45,12 @@ export const meta = {
<Link
href={`${product.href}`}
key={product.title}
className={product.span ?? 'col-span-6 md:col-span-3'}
passHref
>
<a className={product.span ?? 'col-span-6 md:col-span-3'}>
<IconPanel {...product} background={true} showIconBg={true} showLink={true}>
{product.description}
</IconPanel>
</a>
<IconPanel {...product} background={true} showIconBg={true} showLink={true}>
{product.description}
</IconPanel>
</Link>
)
@@ -75,13 +73,12 @@ export const meta = {
<Link
href={`${resource.href}`}
key={resource.title}
className={'col-span-12 md:col-span-4'}
passHref
>
<a className={'col-span-12 md:col-span-4'}>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</a>
<GlassPanel {...resource} background={false} showIconBg={true}>
{resource.description}
</GlassPanel>
</Link>
)

12
apps/docs/pages/guides/self-hosting.mdx
View File

@@ -14,9 +14,7 @@ There are several ways to host Supabase on your own computer, server, or cloud.
{official.map((x) => (
<div className="md:col-span-6 xl:col-span-3" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}
@@ -46,9 +44,7 @@ There are several community-driven projects to help you deploy Supabase. We enco
{community.map((x) => (
<div className="md:col-span-6 xl:col-span-3" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}
@@ -85,9 +81,7 @@ The following third-party providers have shown consistent support for the self-h
{external.map((x) => (
<div className="md:col-span-6" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}

12
apps/docs/pages/guides/storage.mdx
View File

@@ -22,11 +22,9 @@ Check out all of the Storage [templates and examples](https://github.com/supabas
{examples.map((x) => (
<div className="col-span-12" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</a>
<GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
{x.description}
</GlassPanel>
</Link>
</div>
))}
@@ -49,9 +47,7 @@ Find the source code and documentation in the Supabase GitHub repository.
{integrations.map((x) => (
<div className="col-span-6" key={x.href}>
<Link href={x.href} passHref>
<a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</a>
<GlassPanel title={x.name}>{x.description}</GlassPanel>
</Link>
</div>
))}

68
apps/docs/pages/index.mdx
View File

@@ -28,12 +28,10 @@ export const meta = {
<div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
{products.map((product) => {
return (
<Link href={product.href} key={product.title} passHref>
<a className={product.span ?? 'col-span-12 md:col-span-4'}>
<GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
{product.description}
</GlassPanel>
</a>
<Link href={product.href} key={product.title} passHref className={product.span ?? 'col-span-12 md:col-span-4'}>
<GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
{product.description}
</GlassPanel>
</Link>
)
})}
@@ -57,18 +55,16 @@ export const meta = {
<div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
{clientLibraries.map((product) => {
return (
<Link href={product.href} key={product.title} passHref>
<a className={product.span ?? 'col-span-6 md:col-span-4'}>
<IconPanel
{...product}
icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />}
background={true}
showIconBg={true}
showLink={false}
>
{product.description}
</IconPanel>
</a>
<Link href={product.href} key={product.title} passHref className={product.span ?? 'col-span-6 md:col-span-4'}>
<IconPanel
{...product}
icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />}
background={true}
showIconBg={true}
showLink={false}
>
{product.description}
</IconPanel>
</Link>
)
})}
@@ -82,9 +78,7 @@ export const meta = {
## Migrate to Supabase
<p className="text-scale-1100 text-sm p-0 m-0">
Bring your existing data, auth and storage to Supabase following our migration guides.
</p>
<p className="text-scale-1100 text-sm p-0 m-0">Bring your existing data, auth and storage to Supabase following our migration guides.</p>
<TextLink
label="Explore more resources"
@@ -99,13 +93,12 @@ export const meta = {
<Link
href={product.href}
key={product.title}
className={product.span ?? 'col-span-6 md:col-span-4'}
passHref
>
<a className={product.span ?? 'col-span-6 md:col-span-4'}>
<IconPanel {...product} background={true} showIconBg={true} showLink={false}>
{product.description}
</IconPanel>
</a>
<IconPanel {...product} background={true} showIconBg={true} showLink={false}>
{product.description}
</IconPanel>
</Link>
)
})}
@@ -129,13 +122,13 @@ export const meta = {
<Link
href={product.href}
key={product.title}
className={product.span ?? 'col-span-12 md:col-span-6 lg:col-span-3'}
passHref
>
<a className={product.span ?? 'col-span-12 md:col-span-6 lg:col-span-3'}>
<GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={false}>
{product.description}
</GlassPanel>
</a>
<GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={false}>
{product.description}
</GlassPanel>
</Link>
)
})}
@@ -154,9 +147,7 @@ export const meta = {
</IconBackground>
### Self-Hosting
</div>
<p className="text-scale-1100 text-sm">
Get started with self-hosting Supabase.
</p>
<p className="text-scale-1100 text-sm">Get started with self-hosting Supabase.</p>
<TextLink
label="More on Self-Hosting"
url="/guides/self-hosting"
@@ -173,13 +164,12 @@ export const meta = {
<Link
href={product.href}
key={product.title}
className={product.span ?? 'col-span-6'}
passHref
>
<a className={product.span ?? 'col-span-6'}>
<IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
{product.description}
</IconPanel>
</a>
<IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
{product.description}
</IconPanel>
</Link>
)
})}

10
apps/www/components/AdminAccess/index.tsx
View File

@@ -1,18 +1,10 @@
import React, { useState } from 'react'
import Tabs from 'components/AdminAccess/tabs'
import SectionHeader from 'components/UI/SectionHeader'
import { useRouter } from 'next/router'
import React from 'react'
import SectionContainer from '../Layouts/SectionContainer'
import ImageCarousel from '../Carousels/ImageCarousel'
import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
import AdminAccessData from 'data/home/admin-access.json'
const AdminAccess = () => {
const { basePath } = useRouter()
const [tabId, setTabId] = useState('tabTableEditor')
return (
<SectionContainer>
<div className="mb-16">

68
apps/www/components/AdminAccess/tabs.tsx
View File

@@ -1,68 +0,0 @@
import TabMarkup from 'data/AdminAccess.json'
import { Tabs as SBTabs, Button } from 'ui'
type Props = {
tabId: string
setTabId: Function
}
function Tabs(props: Props) {
const { tabId, setTabId } = props
function handleTabChange(id: string) {
return setTabId(id)
}
return (
<div className="-mt-20 flex w-full justify-between sm:relative lg:mt-0">
<div>
<div className="">
<SBTabs
onClick={(id: string) => handleTabChange(id)}
activeId={tabId}
type="underlined"
size="large"
block
>
<SBTabs.Panel id="tabTableEditor" label="Table Editor">
<div className="mt-5">
<h3>{TabMarkup['tabTableEditor'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabTableEditor'].description}</p>
</dd>
</div>
<a href={TabMarkup['tabTableEditor'].url}>
<Button className="mt-8">{TabMarkup['tabTableEditor'].cta}</Button>
</a>
</SBTabs.Panel>
<SBTabs.Panel id="tabSqlEditor" label=" SQL Editor">
<div className="mt-5">
<h3>{TabMarkup['tabSqlEditor'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabSqlEditor'].description}</p>
</dd>
</div>
<a href={TabMarkup['tabSqlEditor'].url}>
<Button className="mt-8">{TabMarkup['tabSqlEditor'].cta}</Button>
</a>
</SBTabs.Panel>
<SBTabs.Panel id="tabAuthRules" label="Auth Rules">
<div className="mt-5">
<h3>{TabMarkup['tabAuthRules'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabAuthRules'].description}</p>
</dd>
</div>
<a href={TabMarkup['tabAuthRules'].url}>
<Button className="mt-8">{TabMarkup['tabAuthRules'].cta}</Button>
</a>
</SBTabs.Panel>
</SBTabs>
</div>
</div>
</div>
)
}
export default Tabs

4
apps/www/components/Announcement/Announcement.tsx
View File

@@ -69,9 +69,7 @@ const Announcement = ({
</div>
)}
{children}
<Link href={link ?? announcement.link}>
<a className="absolute inset-0 z-40" />
</Link>
<Link href={link ?? announcement.link} className="absolute inset-0 z-40"></Link>
</div>
)
}

35
apps/www/components/Announcement/Badge.tsx
View File

@@ -26,10 +26,10 @@ const AnnouncementBadge = ({
className
)}
>
<Link href={url}>
<a
target={target}
className="
<Link
href={url}
target={target}
className="
group/announcement
relative
flex flex-row
@@ -49,18 +49,18 @@ const AnnouncementBadge = ({
overflow-hidden
focus-visible:outline-none focus-visible:ring-brand-600 focus-visible:ring-2 focus-visible:rounded-full
"
>
{badge && (
<Badge color="brandAlt" size="large" className="py-1">
{badge}
</Badge>
)}
<span className="text-foreground">{announcement}</span>
{hasArrow && (
<ArrowNarrowRightIcon className="h-4 ml-2 -translate-x-1 transition-transform group-hover/announcement:translate-x-0" />
)}
<div
className="absolute inset-0 -z-10 bg-gradient-to-br
>
{badge && (
<Badge color="brandAlt" size="large" className="py-1">
{badge}
</Badge>
)}
<span className="text-foreground">{announcement}</span>
{hasArrow && (
<ArrowNarrowRightIcon className="h-4 ml-2 -translate-x-1 transition-transform group-hover/announcement:translate-x-0" />
)}
<div
className="absolute inset-0 -z-10 bg-gradient-to-br
opacity-70
group-hover/announcement:opacity-100
transition-opacity
@@ -69,8 +69,7 @@ const AnnouncementBadge = ({
to-background-surface-300
backdrop-blur-md
"
/>
</a>
/>
</Link>
</div>
)

57
apps/www/components/AuthWidget/AuthWidgetSection.tsx
View File

@@ -6,15 +6,15 @@ import { useRouter } from 'next/router'
import Image from 'next/image'
import { ColorSwatchIcon, MenuIcon } from '@heroicons/react/outline'
import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { useTheme } from 'next-themes'
const supabase = createClient(
'https://rsnibhkhsbfnncjmwnkj.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxNDE1MywiZXhwIjoxOTMwNzkwMTUzfQ.OQEbAaTfgDdLCCht251P2JRD3QDnui6nsU8N-tZA_Mc'
)
function AuthWidgetSection() {
const supabase = createClient(
'https://rsnibhkhsbfnncjmwnkj.supabase.co',
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxNDE1MywiZXhwIjoxOTMwNzkwMTUzfQ.OQEbAaTfgDdLCCht251P2JRD3QDnui6nsU8N-tZA_Mc'
)
const { resolvedTheme } = useTheme()
const { basePath } = useRouter()
const [radius, setRadius] = useState('4px')
@@ -85,9 +85,6 @@ function AuthWidgetSection() {
theme={resolvedTheme === 'dark' ? 'dark' : 'default'}
providers={['google', 'facebook', 'twitter']}
supabaseClient={supabase}
localization={{
lang: 'en',
}}
appearance={{
theme: ThemeSupa,
variables: {
@@ -119,12 +116,12 @@ function AuthWidgetSection() {
match your brand and aesthetic
</p>
<div className="mb-4 flex items-center space-x-2">
<div className="m-0 w-8 flex items-center">
<div className="relative m-0 w-8 flex items-center">
<Image
src={`${basePath}/images/product/auth/react-icon.svg`}
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
<small>React only. Other frameworks coming soon.</small>
@@ -210,20 +207,20 @@ function AuthWidgetSection() {
: '',
].join(' ')}
>
<div className="m-0 w-4 items-center hidden text-red-900 dark:flex">
<div className="relative m-0 w-4 items-center hidden text-red-900 dark:flex">
<Image
src="/images/auth-ui/small--light.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
<div className="m-0 w-4 items-center flex text-red-900 dark:hidden">
<div className="relative m-0 w-4 items-center flex text-red-900 dark:hidden">
<Image
src="/images/auth-ui/small--dark.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
</button>
@@ -236,20 +233,20 @@ function AuthWidgetSection() {
: '',
].join(' ')}
>
<div className="m-0 w-4 items-center hidden text-red-900 dark:flex">
<div className="relative m-0 w-4 items-center hidden text-red-900 dark:flex">
<Image
src="/images/auth-ui/medium--light.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
<div className="m-0 w-4 items-center flex text-red-900 dark:hidden">
<div className="relative m-0 w-4 items-center flex text-red-900 dark:hidden">
<Image
src="/images/auth-ui/medium--dark.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
</button>
@@ -262,20 +259,20 @@ function AuthWidgetSection() {
: '',
].join(' ')}
>
<div className="m-0 w-4 items-center flex text-red-900 dark:hidden">
<div className="relative m-0 w-4 items-center flex text-red-900 dark:hidden">
<Image
src="/images/auth-ui/large--light.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
<div className="m-0 w-4 items-center hidden text-red-900 dark:flex">
<div className="relative m-0 w-4 items-center hidden text-red-900 dark:flex">
<Image
src="/images/auth-ui/large--dark.svg"
alt="react icon"
width="100%"
height="100%"
layout="fill"
className="w-full"
/>
</div>
</button>

100
apps/www/components/Blog/BlogListItem.tsx
View File

@@ -25,62 +25,58 @@ const BlogListItem = ({ post }: Props) => {
return (
<div>
<Link href={post.path}>
<a className="group inline-block min-w-full">
<div className="flex flex-col space-y-6">
<div className="flex flex-col space-y-3">
<div
className={`border-scale-300 relative mb-4 h-60 w-full overflow-auto rounded-lg border shadow-sm`}
>
<Image
layout="fill"
src={
!post.thumb
? `/images/blog/blog-placeholder.png`
: post.type === 'casestudy'
? post.thumb
: `/images/blog/${post.thumb}`
}
objectFit="cover"
className="scale-100 transform duration-100 ease-in group-hover:scale-105"
alt="case study thumbnail"
/>
</div>
<Link href={post.path} className="group inline-block min-w-full">
<div className="flex flex-col space-y-6">
<div className="flex flex-col space-y-3">
<div className="border-scale-300 relative mb-4 h-60 w-full overflow-hidden rounded-lg border shadow-sm">
<Image
fill
src={
!post.thumb
? `/images/blog/blog-placeholder.png`
: post.type === 'casestudy'
? post.thumb
: `/images/blog/${post.thumb}`
}
className="object-cover scale-100 transform duration-100 ease-in group-hover:scale-105"
alt={post.title}
/>
</div>
<h3 className="text-foreground max-w-sm text-xl">{post.title}</h3>
<p className="text-light max-w-sm text-base">{post.description}</p>
{post.date && (
<div className="text-muted flex items-center space-x-1.5 text-sm">
<p>{post.date}</p>
{post.readingTime && (
<>
<p>•</p>
<p>{post.readingTime}</p>
</>
<h3 className="text-foreground max-w-sm text-xl">{post.title}</h3>
<p className="text-light max-w-sm text-base">{post.description}</p>
{post.date && (
<div className="text-muted flex items-center space-x-1.5 text-sm">
<p>{post.date}</p>
{post.readingTime && (
<>
<p>•</p>
<p>{post.readingTime}</p>
</>
)}
</div>
)}
</div>
<div className="flex items-center -space-x-2">
{author.map((author: any, i: number) => {
return (
<div
className="relative dark:ring-scale-200 w-10 h-10 rounded-full ring-2 ring-white"
key={i}
>
{author.author_image_url && (
<Image
src={author.author_image_url}
className="dark:border-dark rounded-full border w-full h-full"
alt={`${author.author} avatar`}
layout="fill"
/>
)}
</div>
)}
</div>
<div className="flex items-center -space-x-2">
{author.map((author: any, i: number) => {
return (
<div className="dark:ring-background w-10 rounded-full ring-2 ring-white" key={i}>
{author.author_image_url && (
<Image
src={author.author_image_url}
className="dark:border-dark rounded-full border"
alt={`${author.author} avatar`}
width="100%"
height="100%"
layout="responsive"
/>
)}
</div>
)
})}
</div>
)
})}
</div>
</a>
</div>
</Link>
</div>
)

21
apps/www/components/Blog/ShareArticleActions.tsx
View File

@@ -4,29 +4,26 @@ import { IconLinkedinSolid, IconTwitterX, IconYCombinator } from 'ui'
const ShareArticleActions = ({ title, slug }: { title: string; slug: string }) => (
<div className="mt-4 flex items-center space-x-4">
<Link
passHref
href={`https://twitter.com/share?text=${title}&url=https://supabase.com/blog/${slug}`}
target="_blank"
className="text-lighter hover:text-foreground"
>
<a target="_blank" className="text-lighter hover:text-foreground">
<IconTwitterX size={24} />
</a>
<IconTwitterX size={24} />
</Link>
<Link
passHref
href={`https://www.linkedin.com/shareArticle?url=https://supabase.com/blog/${slug}&title=${title}`}
target="_blank"
className="text-lighter hover:text-foreground"
>
<a target="_blank" className="text-lighter hover:text-foreground">
<IconLinkedinSolid size={24} />
</a>
<IconLinkedinSolid size={24} />
</Link>
<Link
passHref
href={`https://news.ycombinator.com/submitlink?u=https://supabase.com/blog/${slug}&t=${title}`}
target="_blank"
className="text-lighter hover:text-foreground"
>
<a target="_blank" className="text-lighter hover:text-foreground">
<IconYCombinator size={24} />
</a>
<IconYCombinator size={24} />
</Link>
</div>
)

31
apps/www/components/BuiltWithSupabase/index.tsx
View File

@@ -15,24 +15,19 @@ const BuiltExamples = () => {
<h3 className="h2">What can you build with Supabase?</h3>
<p className="p">There are many example apps and starter projects to get you started.</p>
<div className="flex justify-center gap-2 py-4">
<Link href="/docs/guides/examples" as="/docs/guides/examples" passHref>
<a>
<Button type="default" size="small" className="h-full">
View all examples
</Button>
</a>
</Link>
<Link
href="https://github.com/supabase/supabase/tree/master/examples"
as="https://github.com/supabase/supabase/tree/master/examples"
passHref
>
<a>
<Button type="default" icon={<IconGitHub />} size="small">
Official GitHub library
</Button>
</a>
</Link>
<Button asChild type="default" size="small" className="h-full">
<Link href="/docs/guides/examples" as="/docs/guides/examples">
View all examples
</Link>
</Button>
<Button asChild type="default" icon={<IconGitHub />} size="small">
<Link
href="https://github.com/supabase/supabase/tree/master/examples"
as="https://github.com/supabase/supabase/tree/master/examples"
>
Official GitHub library
</Link>
</Button>
</div>
</div>
<div className="mt-16 grid grid-cols-12 gap-5">

2
apps/www/components/Button.tsx
View File

@@ -1,5 +1,3 @@
import Link from 'next/link'
type Props = {
type?: 'primary' | 'secondary'
text: string

10
apps/www/components/Carousels/SplitCodeBlockCarousel.tsx
View File

@@ -124,11 +124,11 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
<p className="p mb-6 block">{extension.detail_text}</p>
<Space className="justify-between">
{extension.url && (
<Link href={extension.url} as={extension.url}>
<a className="ml-px">
<Button type="default">View documentation</Button>
</a>
</Link>
<Button asChild type="default">
<Link href={extension.url} as={extension.url} className="ml-px">
View documentation
</Link>
</Button>
)}
<div>
<p className="p mr-4">{extension.badges_label}</p>

8
apps/www/components/Container.tsx
View File

@@ -1,10 +1,8 @@
import { ReactNode, FunctionComponent } from 'react'
import { PropsWithChildren } from 'react'
type Props = {
children?: ReactNode
}
type Props = {}
const Container: FunctionComponent = ({ children }: Props) => {
const Container = ({ children }: PropsWithChildren<Props>) => {
return <div>{children}</div>
}

26
apps/www/components/CustomerStories/index.tsx
View File

@@ -28,18 +28,20 @@ const CustomerStories = ({ customerStories }: any) => {
</div>
<div className="mx-auto mt-5 grid grid-cols-12 gap-8 lg:gap-12">
{caseStudyThumbs.map((caseStudy: any, i: number) => (
<Link href={`${caseStudy.link}`} key={caseStudy.title} passHref>
<a className="col-span-12 md:col-span-4">
<GlassPanel
{...caseStudy}
background={true}
showIconBg={true}
showLink={true}
hasLightIcon
>
{caseStudy.description}
</GlassPanel>
</a>
<Link
href={`${caseStudy.link}`}
key={caseStudy.title}
className="col-span-12 md:col-span-4"
>
<GlassPanel
{...caseStudy}
background={true}
showIconBg={true}
showLink={true}
hasLightIcon
>
{caseStudy.description}
</GlassPanel>
</Link>
))}
</div>

44
apps/www/components/ExampleCard.tsx
View File

@@ -43,16 +43,16 @@ function ExampleCard(props: any) {
border-b border-r border-l
border-t-0 p-5"
>
<Link href={props.repo_url} as={props.repo_url} passHref>
<a
className="text-light hover:text-foreground flex flex-row items-center text-sm"
target="_blank"
>
<span>{props.repo_name}</span>
<span className="ml-1 inline-block">
<IconGitHub size={14} />
</span>
</a>
<Link
href={props.repo_url}
as={props.repo_url}
className="text-light hover:text-foreground flex flex-row items-center text-sm"
target="_blank"
>
<span>{props.repo_name}</span>
<span className="ml-1 inline-block">
<IconGitHub size={14} />
</span>
</Link>
<div className="mt-3 flex items-stretch gap-2 h-[26px]">
@@ -62,22 +62,18 @@ function ExampleCard(props: any) {
</a>
)}
{props.demo_url && (
<Link href={props.demo_url} as={props.demo_url}>
<a target="_blank" tabIndex={-1}>
<Button size="tiny" type="default" iconRight={<IconArrowUpRight />}>
Launch Demo
</Button>
</a>
</Link>
<Button asChild size="tiny" type="default" iconRight={<IconArrowUpRight />}>
<Link href={props.demo_url} as={props.demo_url} target="_blank" tabIndex={-1}>
Launch Demo
</Link>
</Button>
)}
{!props.demo_url && (
<Link href={props.repo_url} as={props.repo_url}>
<a target="_blank" tabIndex={-1}>
<Button size="tiny" type="default" iconRight={<IconArrowUpRight />}>
View Code
</Button>
</a>
</Link>
<Button asChild size="tiny" type="default" iconRight={<IconArrowUpRight />}>
<Link href={props.repo_url} as={props.repo_url} target="_blank" tabIndex={-1}>
View Code
</Link>
</Button>
)}
</div>
</div>

36
apps/www/components/Footer/index.tsx
View File

@@ -30,8 +30,8 @@ const Footer = (props: Props) => {
<SectionContainer className="grid grid-cols-2 md:flex items-center justify-between md:justify-center gap-8 md:gap-16 xl:gap-28 !py-6 md:!py-10 text-sm">
<div className="flex flex-col md:flex-row gap-2 md:items-center">
We protect your data.
<Link href="/security">
<a className="text-brand hover:underline">More on Security</a>
<Link href="/security" className="text-brand hover:underline">
More on Security
</Link>
</div>
<ul className="flex flex-col md:flex-row gap-2 md:gap-8 justify-center md:items-center">
@@ -50,21 +50,19 @@ const Footer = (props: Props) => {
<SectionContainer className="py-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="space-y-8 xl:col-span-1">
<Link href="#" as="/">
<a className="w-40">
<Image
src={
isLaunchWeekPage
? supabaseLogoWordmarkDark
: resolvedTheme === 'dark'
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
width={160}
height={30}
alt="Supabase"
/>
</a>
<Link href="#" as="/" className="w-40">
<Image
src={
isLaunchWeekPage
? supabaseLogoWordmarkDark
: resolvedTheme === 'dark'
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
width={160}
height={30}
alt="Supabase"
/>
</Link>
<div className="flex space-x-5">
<a
@@ -133,8 +131,8 @@ const Footer = (props: Props) => {
link.url.startsWith('https') ? (
<a href={link.url}>{children}</a>
) : (
<Link href={link.url}>
<a>{children}</a>
<Link href={link.url} legacyBehavior>
{children}
</Link>
)
) : (

32
apps/www/components/Hero/Hero.tsx
View File

@@ -49,30 +49,26 @@ const Hero = () => {
</p>
</div>
<div className="flex items-center gap-2">
<Link
href="https://supabase.com/dashboard"
as="https://supabase.com/dashboard"
passHref
>
<a
<Button asChild size="medium" className="text-white">
<Link
href="https://supabase.com/dashboard"
as="https://supabase.com/dashboard"
onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}
tabIndex={-1}
>
<Button size="medium" className="text-white">
Start your project
</Button>
</a>
</Link>
<Link href="/docs" as="/docs" passHref>
<a
Start your project
</Link>
</Button>
<Button asChild size="medium" type="default" icon={<IconBookOpen />}>
<Link
href="/docs"
as="/docs"
onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}
tabIndex={-1}
>
<Button size="medium" type="default" icon={<IconBookOpen />}>
Documentation
</Button>
</a>
</Link>
Documentation
</Link>
</Button>
</div>
<HeroFrameworks className="mt-4 lg:mt-6" />

33
apps/www/components/Hero/HeroFrameworks.tsx
View File

@@ -67,24 +67,23 @@ const HeroFrameworks = ({ className }: { className?: string }) => {
<small className="small !text-light">Works seamlessly with 20+ frameworks</small>
<div className="w-full sm:max-w-lg mt-4 md:mt-3 lg:ml-0 flex flex-wrap items-center justify-center gap-1 xs:gap-2 sm:flex-nowrap">
{frameworks.map((framework) => (
<Link href={framework.docs} key={framework.name}>
<a
key={framework.name}
className="block focus:outline-none focus:border-none focus:ring-brand-600 focus:ring-2 focus:rounded-lg"
data-tip={framework.name}
aria-label={framework.name}
onClick={() => sendTelemetryEvent(framework.gaEvent)}
<Link
href={framework.docs}
key={framework.name}
className="block focus:outline-none focus:border-none focus:ring-brand-600 focus:ring-2 focus:rounded-lg"
data-tip={framework.name}
aria-label={framework.name}
onClick={() => sendTelemetryEvent(framework.gaEvent)}
>
<svg
width={isXs ? 35 : 45}
height={isXs ? 35 : 45}
viewBox="0 0 61 61"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg
width={isXs ? 35 : 45}
height={isXs ? 35 : 45}
viewBox="0 0 61 61"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d={framework.icon} fill="#7E7E7E" />
</svg>
</a>
<path d={framework.icon} fill="#7E7E7E" />
</svg>
</Link>
))}
<ReactTooltip

6
apps/www/components/LaunchWeek/5/ScheduleInfo.tsx
View File

@@ -22,9 +22,9 @@ export function ScheduleInfo() {
</p>
</div>
<div className="px-10">
<Link href="/launch-week-register">
<Button type="default">Get a ticket</Button>
</Link>
<Button asChild type="default">
<Link href="/launch-week-register">Get a ticket</Link>
</Button>
</div>
<img src="/images/launchweek/gold-ticket.svg" className="w-full" />
</div>

16
apps/www/components/LaunchWeek/6/HackathonSection.tsx
View File

@@ -17,16 +17,14 @@ export default function LaunchHero() {
</div>
<div className="flex gap-3">
<Link href="https://www.madewithsupabase.com/tag/Launch%20Week%205">
<Button type="primary" size="small" className="text-white">
<Button asChild type="primary" size="small" className="text-white">
<Link href="https://www.madewithsupabase.com/tag/Launch%20Week%205">
view projects
</Button>
</Link>
<Link href="/blog/launch-week-5-hackathon">
<Button type="default" size="small">
Learn more
</Button>
</Link>
</Link>
</Button>
<Button asChild type="default" size="small">
<Link href="/blog/launch-week-5-hackathon">Learn more</Link>
</Button>
</div>
</div>

16
apps/www/components/LaunchWeek/6/LaunchHero.tsx
View File

@@ -14,16 +14,12 @@ export default function LaunchHero() {
</h2>
</div>
<div className="flex gap-3">
<Link href="#launch-week-5-day-5">
<Button type="primary" size="small" className="text-white">
Latest release
</Button>
</Link>
<Link href="#launch-week--hackathon">
<Button type="default" size="small">
Join the Hackathon
</Button>
</Link>
<Button asChild type="primary" size="small" className="text-white">
<Link href="#launch-week-5-day-5">Latest release</Link>
</Button>
<Button asChild type="default" size="small">
<Link href="#launch-week--hackathon">Join the Hackathon</Link>
</Button>
</div>
</div>
)

11
apps/www/components/LaunchWeek/6/PreLaunchTeaser.tsx
View File

@@ -61,8 +61,9 @@ export function PreLaunchTeaser() {
key={author.author_id + ' profile image'}
src={author.author_image_url}
className="dark:border-dark rounded-lg border"
width="54px"
height="54px"
width={54}
height={54}
alt="Author profile image"
/>
)
})}
@@ -87,9 +88,9 @@ export function PreLaunchTeaser() {
</p>
</div>
<div>
<Link href="/blog/supabase-series-b">
<Button type="default">Read more</Button>
</Link>
<Button asChild type="default">
<Link href="/blog/supabase-series-b">Read more</Link>
</Button>
</div>
</div>
</div>

66
apps/www/components/LaunchWeek/7/BlogLinks.tsx
View File

@@ -39,46 +39,44 @@ const StepCard = ({ step }: { step: any }) => (
href={
(step.blog || step.github || step.hackernews || step.blog || step.docs || '#') as string
}
>
<a
className={`
className={`
flex flex-col flex-1 gap-3 items-start justify-center border rounded-xl h-full relative overflow-hidden
p-6 lg:p-10 text-2xl bg-[#1C1C1C]
before:absolute before:w-full before:h-full before:top-52 before:right-0 before:bottom-0 before:left-0
before:border-[#1f3536] before:-z-10
`}
>
<div className="relative z-10 flex items-center text-lg flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
<div
className={[
'text-transparent bg-clip-text bg-gradient-to-r text-base from-[#F4FFFA] to-[#B7B2C9] drop-shadow-lg',
step.break_thumb_title && 'max-w-[240px]',
].join(' ')}
>
{step.title}
</div>
</div>
{step.thumb && (
<motion.div className="absolute inset-0 w-full h-full z-0" variants={hoverVariant}>
<Image
src={step.thumb}
className={`
absolute
w-full h-full -z-10 transition-all duration-300
`}
layout="fill"
objectPosition="100% 50%"
objectFit="cover"
/>
</motion.div>
)}
>
<div className="relative z-10 flex items-center text-lg flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
<div
className={`absolute opacity-10 w-full h-full -z-10 transition-all duration-300`}
style={{
background: `radial-gradient(650px 150px at 50% 100%, #4635A730, transparent)`,
}}
/>
</a>
className={[
'text-transparent bg-clip-text bg-gradient-to-r text-base from-[#F4FFFA] to-[#B7B2C9] drop-shadow-lg',
step.break_thumb_title && 'max-w-[240px]',
].join(' ')}
>
{step.title}
</div>
</div>
{step.thumb && (
<motion.div className="absolute inset-0 w-full h-full z-0" variants={hoverVariant}>
<Image
src={step.thumb}
className={`
absolute
w-full h-full -z-10 transition-all duration-300
`}
layout="fill"
objectPosition="100% 50%"
objectFit="cover"
alt=""
/>
</motion.div>
)}
<div
className={`absolute opacity-10 w-full h-full -z-10 transition-all duration-300`}
style={{
background: `radial-gradient(650px 150px at 50% 100%, #4635A730, transparent)`,
}}
/>
</Link>
</motion.div>
)

1
apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx
View File

@@ -38,6 +38,7 @@ export default function LW7BgGraphic() {
quality={100}
unoptimized
priority
alt="Launch Week 7"
/>
</motion.div>
</div>

20
apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
View File

@@ -4,19 +4,13 @@ import { Article } from '../../types'
const ArticleButtonListItem = (props: Article) => {
return (
<Link href={props.url}>
<a className="group mr-2 mb-2">
<div className="flex flex-row">
<div>
<div className="flex flex-col">
<span className="text-foreground group-hover:text-brand text-left text-base transition">
{props.title}
</span>
<p className="text-light text-left text-sm transition">{props.description}</p>
</div>
</div>
</div>
</a>
<Link href={props.url} className="group mr-2 mb-2">
<div className="flex flex-col">
<span className="text-foreground group-hover:text-brand text-left text-base transition">
{props.title}
</span>
<p className="text-light text-left text-sm transition">{props.description}</p>
</div>
</Link>
)
}

1
apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx
View File

@@ -21,6 +21,7 @@ export function LaunchWeekLogoHeader() {
src="/images/launchweek/seven/lw7-seven.svg"
width={isMobile ? 36 : 40}
height={isMobile ? 36 : 40}
alt="Launch Week 7"
/>
</span>
</h1>

1
apps/www/components/LaunchWeek/7/LaunchSection/TicketBrick.tsx
View File

@@ -38,6 +38,7 @@ export function TicketBrick({ user }: Props) {
isLoading ? 'grayscale blur-2xl scale-110' : 'grayscale-0 blur-0 scale-100',
].join(' ')}
onLoadingComplete={() => setLoading(false)}
alt=""
/>
<div className="z-20 relative">
<TicketHeader size="small" />

21
apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWall.tsx
View File

@@ -35,18 +35,15 @@ export default function TicketBrickWall({ users }: Props) {
{isMobile && <TicketBrickWallSlider users={users.slice(11, 17)} speed={16000} />}
</div>
<div className="flex justify-center w-full mx-auto mt-2 lg:mt-4">
<Link href="/launch-week/7/tickets">
<a>
<Button
type="outline"
size="medium"
onClick={() => window.scrollTo(0, 0)}
className="text-white"
>
View all tickets
</Button>
</a>
</Link>
<Button
asChild
type="outline"
size="medium"
onClick={() => window.scrollTo(0, 0)}
className="text-white"
>
<Link href="/launch-week/7/tickets">View all tickets</Link>
</Button>
</div>
</div>
</div>

34
apps/www/components/LaunchWeek/7/LaunchSection/TicketBrickWallSlider.tsx
View File

@@ -65,23 +65,25 @@ export function TicketBrickWallSlider({ users, reverse, speed = 10000 }: Props)
>
{users.map((user, i) => (
<SwiperSlide key={user.username}>
<Link href={`/launch-week/7/tickets/${user.username}`} key={user.username}>
<a className="relative !w-[230px] md:w-[450px] !h-[200px] rounded-md md:rounded-lg transition-transform">
<div className="relative w-full pt-[50%] transform rounded-md md:rounded-lg overflow-hidden bg-gradient-to-b from-[#ffffff60] to-[#ffffff10]">
<div className="absolute inset-[1px] w-full h-full rounded-md md:rounded-lg overflow-hidden p-[1px]">
<Image
src={getOgUrl(user.username!, !!user.golden)}
alt={user.username}
layout="fill"
objectFit="cover"
objectPosition="center"
placeholder="blur"
blurDataURL="/images/blur.png"
className="absolute inset-[1px] rounded-md md:rounded-lg"
/>
</div>
<Link
href={`/launch-week/7/tickets/${user.username}`}
key={user.username}
className="relative !w-[230px] md:w-[450px] !h-[200px] rounded-md md:rounded-lg transition-transform"
>
<div className="relative w-full pt-[50%] transform rounded-md md:rounded-lg overflow-hidden bg-gradient-to-b from-[#ffffff60] to-[#ffffff10]">
<div className="absolute inset-[1px] w-full h-full rounded-md md:rounded-lg overflow-hidden p-[1px]">
<Image
src={getOgUrl(user.username!, !!user.golden)}
alt={user.username ?? ''}
layout="fill"
objectFit="cover"
objectPosition="center"
placeholder="blur"
blurDataURL="/images/blur.png"
className="absolute inset-[1px] rounded-md md:rounded-lg"
/>
</div>
</a>
</div>
</Link>
</SwiperSlide>
))}

1
apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx
View File

@@ -59,6 +59,7 @@ export default function LaunchWeekPrizeCard({
layout="fill"
objectFit="cover"
objectPosition={imgObjectPosition}
alt=""
/>
</div>
<div className="p-4">{content && content}</div>

91
apps/www/components/LaunchWeek/7/Releases/Day5.tsx
View File

@@ -84,6 +84,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -109,9 +110,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'commandK' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[0].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[0].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center md:text-left justify-between flex-col md:flex-row lg:justify-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[0].title}</CartTitle>
<div className="flex gap-2">
@@ -143,6 +145,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isMobile ? '50% 50%' : '80% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -159,9 +162,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'wrappers' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[1].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[1].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center md:text-left justify-between flex-col md:items-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[1].title}</CartTitle>
<div className="flex gap-2">
@@ -191,6 +195,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isMobile ? '50% 50%' : '80% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -207,9 +212,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'nullable' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[2].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[2].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex flex-col items-center text-center gap-3 text-white">
<CartTitle>{day.steps[1].steps[2].title}</CartTitle>
<div className="flex gap-2">
@@ -241,6 +247,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={isMobile ? '50% 70%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -257,9 +264,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'apiAutodocs' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[3].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[3].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center flex-col gap-3 text-white">
<CartTitle>{day.steps[1].steps[3].title}</CartTitle>
<div className="flex gap-2">
@@ -291,6 +299,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={isMobile ? '50% 90%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -307,9 +316,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'pgRoles' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[4].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[4].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center lg:text-left justify-between flex-col lg:flex-row lg:justify-start gap-3 lg:gap-2 text-white">
<CartTitle>{day.steps[1].steps[4].title}</CartTitle>
<div className="flex gap-2">
@@ -341,6 +351,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -357,9 +368,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'casDeletes' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[5].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[5].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center lg:text-left justify-between flex-col lg:flex-row lg:justify-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[5].title}</CartTitle>
<div className="flex gap-2">
@@ -391,6 +403,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -407,9 +420,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'graphiQL' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[6].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[6].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center md:text-left justify-between flex-col md:flex-row md:justify-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[6].title}</CartTitle>
<div className="flex gap-2">
@@ -441,6 +455,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={isMobile ? '0% 50%' : isDesktop ? '100% 50%' : '0% 50%'}
objectFit={isMobile ? 'cover' : isDesktop ? 'contain' : 'cover'}
quality={100}
alt=""
/>
</motion.div>
)
@@ -457,9 +472,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'dbWebhooks' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[7].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[7].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center lg:text-left justify-between flex-col lg:flex-row lg:justify-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[7].title}</CartTitle>
<div className="flex gap-2">
@@ -491,6 +507,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -507,9 +524,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'viewsTables' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[9].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[9].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center flex-col gap-3 text-white">
<CartTitle>{day.steps[1].steps[8].title}</CartTitle>
<div className="flex gap-2">
@@ -541,6 +559,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -557,9 +576,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'JSONsupport' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[9].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[9].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center flex-col gap-3 text-white">
<CartTitle>{day.steps[1].steps[9].title}</CartTitle>
<div className="flex gap-2">
@@ -591,6 +611,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -607,9 +628,10 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
whileHover="hover"
style={{ gridArea: 'insights' }}
>
<Link href={`${day.steps[1].blog}${day.steps[1].steps[10].url}`}>
<a className="absolute inset-0 z-10" />
</Link>
<Link
href={`${day.steps[1].blog}${day.steps[1].steps[10].url}`}
className="absolute inset-0 z-10"
/>
<div className="flex items-center text-center lg:text-left justify-between flex-col lg:flex-row lg:justify-start gap-3 text-white">
<CartTitle>{day.steps[1].steps[10].title}</CartTitle>
<div className="flex gap-2">
@@ -641,6 +663,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -687,6 +710,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
objectPosition={!!layer.mobileImg && isMobile ? '50% 50%' : '80% 50%'}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -729,6 +753,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
}
objectFit={i == 1 && !!layer.mobileImg && isMobile ? 'contain' : 'cover'}
quality={100}
alt=""
/>
</motion.div>
)

21
apps/www/components/LaunchWeek/7/Releases/components/index.tsx
View File

@@ -198,17 +198,16 @@ export const ChipLink = ({
{children}
</span>
) : !!href ? (
<Link href={href}>
<a
target={target ?? '_self'}
rel="noopener"
className={[
'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
className,
].join(' ')}
>
{children}
</a>
<Link
href={href}
target={target ?? '_self'}
rel="noopener"
className={[
'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
className,
].join(' ')}
>
{children}
</Link>
) : null

6
apps/www/components/LaunchWeek/7/Releases/index.tsx
View File

@@ -332,6 +332,7 @@ export default function LW7Releases() {
layout="fill"
objectPosition={i === 2 && isTablet ? '50% 60%' : '80% 50%'}
objectFit={i === 2 && isTablet ? 'contain' : 'cover'}
alt=""
/>
</motion.div>
)
@@ -383,6 +384,7 @@ export default function LW7Releases() {
layout="fill"
objectPosition="50% 50%"
objectFit="cover"
alt=""
/>
</motion.div>
)
@@ -470,6 +472,7 @@ export default function LW7Releases() {
}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -557,6 +560,7 @@ export default function LW7Releases() {
}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)
@@ -644,6 +648,7 @@ export default function LW7Releases() {
}
objectFit={!!layer.mobileImg && isTablet ? 'contain' : 'cover'}
quality={100}
alt=""
/>
</motion.div>
)
@@ -729,6 +734,7 @@ export default function LW7Releases() {
}
objectFit="cover"
quality={100}
alt=""
/>
</motion.div>
)

2
apps/www/components/LaunchWeek/7/Ticket/TicketVisual.tsx
View File

@@ -108,6 +108,7 @@ export default function TicketVisual({
placeholder="blur"
blurDataURL="/images/blur.png"
className="absolute inset-[1px] z-[1]"
alt=""
/>
)}
<Image
@@ -122,6 +123,7 @@ export default function TicketVisual({
imageIsLoading ? 'grayscale blur-xl scale-110' : 'scale-100 grayscale-0 blur-0',
].join(' ')}
onLoadingComplete={() => setImageIsLoading(false)}
alt=""
/>
</div>
</div>

4
apps/www/components/LaunchWeek/7/TicketsGrid.tsx
View File

@@ -39,6 +39,8 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
href={`/launch-week/7/tickets/${user.username}`}
key={`${user.username}-000${i}`}
onClick={() => window.scrollTo(0, 0)}
legacyBehavior
passHref
>
<motion.a
className="relative w-full p-[1px] rounded-lg sm:rounded-xl overflow-hidden hover:cursor-pointer bg-gradient-to-b from-[#ffffff60] to-[#ffffff10]"
@@ -57,7 +59,7 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
<div className="relative inset-0 w-full pt-[50%] bg-[#2f2e2e] overflow-hidden rounded-lg sm:rounded-xl">
<Image
src={getOgUrl(user.username!, !!user.golden)}
alt={user.username}
alt={user.username ?? ''}
layout="fill"
objectFit="cover"
objectPosition="center"

72
apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
View File

@@ -9,48 +9,48 @@ const LW8CalloutsSection = () => {
<SectionContainer className="!py-0 w-full !px-0 !max-w-none">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
<SmallCard className="hover:from-scale-900 hover:to-scale-900">
<Link href="https://twitter.com/supabase/status/1688544202643111936">
<a
target="_blank"
className="flex flex-row justify-between items-center w-full h-full gap-2"
>
<div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
<div className="flex flex-col gap-1 sm:pl-4">
<span className="text-white">Twitter Spaces</span>
<span className="">Replay recordings</span>
</div>
<Link
href="https://twitter.com/supabase/status/1688544202643111936"
target="_blank"
className="flex flex-row justify-between items-center w-full h-full gap-2"
>
<div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
<div className="flex flex-col gap-1 sm:pl-4">
<span className="text-white">Twitter Spaces</span>
<span className="">Replay recordings</span>
</div>
<div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
<Image
src="/images/launchweek/8/twitter-spaces-thumb.svg"
alt="twitter spaces thumbnail"
layout="fill"
objectFit="cover"
/>
</div>
</a>
</div>
<div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
<Image
src="/images/launchweek/8/twitter-spaces-thumb.svg"
alt="twitter spaces thumbnail"
layout="fill"
objectFit="cover"
/>
</div>
</Link>
</SmallCard>
<SmallCard className="hover:from-scale-900 hover:to-scale-900">
<Link href="/blog/supabase-lw8-hackathon">
<a className="flex flex-row justify-between items-center w-full h-full gap-2">
<div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
<div className="flex flex-col gap-1 sm:pl-4">
<div className="flex items-center gap-3">
<span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
</div>
<span className="">Finished</span>
<Link
href="/blog/supabase-lw8-hackathon"
className="flex flex-row justify-between items-center w-full h-full gap-2"
>
<div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
<div className="flex flex-col gap-1 sm:pl-4">
<div className="flex items-center gap-3">
<span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
</div>
<span className="">Finished</span>
</div>
<div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
<Image
src="/images/launchweek/8/lw8-hackathon-thumb.svg"
alt="hackathon thumbnail"
layout="fill"
objectFit="cover"
/>
</div>
</a>
</div>
<div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
<Image
src="/images/launchweek/8/lw8-hackathon-thumb.svg"
alt="hackathon thumbnail"
layout="fill"
objectFit="cover"
/>
</div>
</Link>
</SmallCard>
</div>

67
apps/www/components/LaunchWeek/8/LW8Meetups.tsx
View File

@@ -59,41 +59,38 @@ const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
meets
?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
.map(({ display_info, link, isLive, title }: Meetup) => (
<Link href={link ?? '#'}>
<a
target="_blank"
className={[
'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl xl:text-4xl border-b border-[#111718]',
'hover:text-foreground',
isLive ? 'text-light' : 'text-[#56646B]',
!link && 'pointer-events-none',
].join(' ')}
>
<div className="flex items-center gap-2 md:gap-4 py-2 md:py-0">
<span>{title}</span>
{isLive && <Badge>Live now</Badge>}
<span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
<svg
width="47"
height="47"
viewBox="0 0 47 47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
</div>
{display_info && (
<span className="text-sm text-right flex-1">{display_info}</span>
)}
</a>
<Link
href={link ?? '#'}
target="_blank"
className={[
'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl xl:text-4xl border-b border-[#111718]',
'hover:text-foreground',
isLive ? 'text-light' : 'text-[#56646B]',
!link && 'pointer-events-none',
].join(' ')}
>
<div className="flex items-center gap-2 md:gap-4 py-2 md:py-0">
<span>{title}</span>
{isLive && <Badge>Live now</Badge>}
<span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
<svg
width="47"
height="47"
viewBox="0 0 47 47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</span>
</div>
{display_info && <span className="text-sm text-right flex-1">{display_info}</span>}
</Link>
))}
</div>

1
apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx
View File

@@ -60,6 +60,7 @@ export default function LaunchWeekPrizeCard({
objectFit="cover"
quality={100}
objectPosition={imgObjectPosition}
alt=""
/>
</div>
<div className="p-4 flex flex-col gap-2 items-start">{content && content}</div>

9
apps/www/components/LaunchWeek/8/Releases/LWAnnouncement.tsx
View File

@@ -68,10 +68,11 @@ const LWAnnouncement = ({
}
/>
) : ( */}
<Link href="/launch-week">
<a className="flex flex-row justify-between items-center w-full h-full gap-2 text-left">
{announcement}
</a>
<Link
href="/launch-week"
className="flex flex-row justify-between items-center w-full h-full gap-2 text-left"
>
{announcement}
</Link>
{/* )} */}
</SmallCard>

21
apps/www/components/LaunchWeek/8/Releases/components/index.tsx
View File

@@ -328,17 +328,16 @@ export const ChipLink = ({
{children}
</span>
) : !!href ? (
<Link href={href}>
<a
target={target ?? '_self'}
rel="noopener"
className={[
'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444460] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191990] hover:border-scale-800 backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
className,
].join(' ')}
>
{children}
</a>
<Link
href={href}
target={target ?? '_self'}
rel="noopener"
className={[
'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444460] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191990] hover:border-scale-800 backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
className,
].join(' ')}
>
{children}
</Link>
) : null

59
apps/www/components/LaunchWeek/8/Releases/index.tsx
View File

@@ -91,6 +91,7 @@ export default function LW8Releases() {
layout="fill"
objectPosition="100%"
objectFit="cover"
alt=""
/>
</div>
)
@@ -134,6 +135,7 @@ export default function LW8Releases() {
layout="fill"
objectPosition="20% 50%"
objectFit="cover"
alt=""
/>
</div>
)
@@ -173,6 +175,7 @@ export default function LW8Releases() {
isTablet ? '50%' : isDesktop ? '100% 50%' : '30% 50%'
}
objectFit="contain"
alt=""
/>
</div>
)
@@ -209,10 +212,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day1.steps[0].blog!}>
<a className="m-0">
<CartTitle>{day1.steps[0].title}</CartTitle>
</a>
<Link href={day1.steps[0].blog!} className="m-0">
<CartTitle>{day1.steps[0].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day1.steps[0]?.description}</p>
</div>
@@ -233,6 +234,7 @@ export default function LW8Releases() {
layout="fill"
objectPosition={isTablet ? '50%' : '90% 50%'}
objectFit="contain"
alt=""
/>
</div>
)
@@ -268,10 +270,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day2.steps[0].blog!}>
<a className="m-0">
<CartTitle>{day2.steps[0].title}</CartTitle>
</a>
<Link href={day2.steps[0].blog!} className="m-0">
<CartTitle>{day2.steps[0].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day2.steps[0]?.description}</p>
</div>
@@ -291,6 +291,7 @@ export default function LW8Releases() {
`}
layout="fill"
objectFit="cover"
alt=""
/>
</div>
)
@@ -326,10 +327,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day3.steps[0].blog!}>
<a className="m-0">
<CartTitle>{day3.steps[0].title}</CartTitle>
</a>
<Link href={day3.steps[0].blog!} className="m-0">
<CartTitle>{day3.steps[0].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day3.steps[0]?.description}</p>
<ul className="flex flex-row flex-wrap lg:flex-col gap-2 text-sm md:text-base justify-center">
@@ -361,6 +360,7 @@ export default function LW8Releases() {
layout="fill"
objectPosition={isTablet ? '50%' : '100% 50%'}
objectFit={i == 1 && isTablet ? 'contain' : 'cover'}
alt=""
/>
</div>
)
@@ -396,10 +396,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day4.steps[0].blog!}>
<a className="m-0">
<CartTitle>{day4.steps[0].title}</CartTitle>
</a>
<Link href={day4.steps[0].blog!} className="m-0">
<CartTitle>{day4.steps[0].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day4.steps[0]?.description}</p>
</div>
@@ -417,6 +415,7 @@ export default function LW8Releases() {
layout="fill"
objectPosition={isTablet ? '50%' : '100% 50%'}
objectFit={i == 1 && isTablet ? 'contain' : 'cover'}
alt=""
/>
</div>
)
@@ -435,10 +434,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day4.steps[1].blog!}>
<a className="m-0">
<CartTitle>{day4.steps[1].title}</CartTitle>
</a>
<Link href={day4.steps[1].blog!} className="m-0">
<CartTitle>{day4.steps[1].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day4.steps[1]?.description}</p>
</div>
@@ -455,6 +452,7 @@ export default function LW8Releases() {
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
layout="fill"
objectFit="cover"
alt=""
/>
</div>
)
@@ -490,10 +488,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day5.steps[0].blog!}>
<a className="m-0">
<CartTitle>{day5.steps[0].title}</CartTitle>
</a>
<Link href={day5.steps[0].blog!} className="m-0">
<CartTitle>{day5.steps[0].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day5.steps[0]?.description}</p>
</div>
@@ -510,6 +506,7 @@ export default function LW8Releases() {
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
layout="fill"
objectFit="cover"
alt=""
/>
</div>
)
@@ -529,10 +526,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day5.steps[1].blog!}>
<a className="m-0">
<CartTitle>{day5.steps[1].title}</CartTitle>
</a>
<Link href={day5.steps[1].blog!} className="m-0">
<CartTitle>{day5.steps[1].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day5.steps[1]?.description}</p>
</div>
@@ -549,6 +544,7 @@ export default function LW8Releases() {
className="absolute opacity-90 w-full h-full -z-10 transition-all duration-300"
layout="fill"
objectFit="cover"
alt=""
/>
</div>
)
@@ -568,10 +564,8 @@ export default function LW8Releases() {
}}
/>
<div className="flex flex-col items-center lg:items-start gap-2 min-w-[300px] w-full text-center lg:text-left">
<Link href={day5.steps[2].blog!}>
<a className="m-0">
<CartTitle>{day5.steps[2].title}</CartTitle>
</a>
<Link href={day5.steps[2].blog!} className="m-0">
<CartTitle>{day5.steps[2].title}</CartTitle>
</Link>
<p className="text-sm text-slate-900">{day5.steps[2]?.description}</p>
</div>
@@ -589,6 +583,7 @@ export default function LW8Releases() {
layout="fill"
objectFit="cover"
objectPosition={isTablet ? '50%' : '100% 50%'}
alt=""
/>
</div>
)

8
apps/www/components/LaunchWeek/8/Ticket/TicketContainer.tsx
View File

@@ -114,8 +114,8 @@ export default function TicketContainer({ user, sharePage, referrals, supabase }
) : (
<p>
Customize your ticket and boost your chances of winning{' '}
<Link href="#lw8-prizes">
<a className="underline hover:text-foreground">limited edition awards</a>
<Link href="#lw8-prizes" className="underline hover:text-foreground">
limited edition awards
</Link>{' '}
by sharing it with the community.
</p>
@@ -124,8 +124,8 @@ export default function TicketContainer({ user, sharePage, referrals, supabase }
<>
<p>
Generate and share your own custom ticket for a chance to win{' '}
<Link href="#lw8-prizes">
<a className="underline hover:text-foreground">awesome swag</a>
<Link href="#lw8-prizes" className="underline hover:text-foreground">
awesome swag
</Link>
.
</p>

21
apps/www/components/LaunchWeek/8/TicketBrickWall.tsx
View File

@@ -34,18 +34,15 @@ export default function TicketBrickWall({ users }: Props) {
{isMobile && <TicketBrickWallSlider users={users.slice(11, 17)} speed={6000} />}
</div>
<div className="flex justify-center w-full mx-auto mt-2 lg:mt-4">
<Link href="/launch-week/tickets">
<a>
<Button
type="outline"
size="medium"
onClick={() => window.scrollTo(0, 0)}
className="text-white"
>
View all tickets
</Button>
</a>
</Link>
<Button
asChild
type="outline"
size="medium"
onClick={() => window.scrollTo(0, 0)}
className="text-white"
>
<Link href="/launch-week/tickets">View all tickets</Link>
</Button>
</div>
</div>
</div>

40
apps/www/components/LaunchWeek/8/TicketBrickWallSlider.tsx
View File

@@ -51,26 +51,28 @@ export function TicketBrickWallSlider({ users, reverse, speed = 50000, animate }
>
{users.map((user, i) => (
<SwiperSlide key={user.username}>
<Link href={`/launch-week/tickets/${user.username}`} key={user.username}>
<a className="relative !w-[230px] md:w-[450px] !h-[200px] rounded-md md:rounded-lg transition-transform">
<div className="relative w-full pt-[50%] transform rounded-md md:rounded-lg overflow-hidden bg-gradient-to-b from-[#22282a] to-[#030A0C]">
<div className="absolute inset-[1px] w-[calc(100%-2px)] h-[calc(100%-2px)] rounded-md md:rounded-lg overflow-hidden p-[1px]">
<Image
src={
getOgUrl(user.username!, !!user.golden) ??
'/images/launchweek/8/lw8-ticket-empty.jpg'
}
alt={user.username}
layout="fill"
objectFit="cover"
objectPosition="center"
placeholder="blur"
blurDataURL="/images/launchweek/8/lw8-ticket-empty.jpg"
className="absolute inset-[1px] rounded-md md:rounded-lg"
/>
</div>
<Link
href={`/launch-week/tickets/${user.username}`}
key={user.username}
className="relative !w-[230px] md:w-[450px] !h-[200px] rounded-md md:rounded-lg transition-transform"
>
<div className="relative w-full pt-[50%] transform rounded-md md:rounded-lg overflow-hidden bg-gradient-to-b from-[#22282a] to-[#030A0C]">
<div className="absolute inset-[1px] w-[calc(100%-2px)] h-[calc(100%-2px)] rounded-md md:rounded-lg overflow-hidden p-[1px]">
<Image
src={
getOgUrl(user.username!, !!user.golden) ??
'/images/launchweek/8/lw8-ticket-empty.jpg'
}
alt={user.username ?? ''}
layout="fill"
objectFit="cover"
objectPosition="center"
placeholder="blur"
blurDataURL="/images/launchweek/8/lw8-ticket-empty.jpg"
className="absolute inset-[1px] rounded-md md:rounded-lg"
/>
</div>
</a>
</div>
</Link>
</SwiperSlide>
))}

4
apps/www/components/LaunchWeek/8/TicketsGrid.tsx
View File

@@ -41,6 +41,8 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
href={`/launch-week/tickets/${user.username}`}
key={`${user.username}-000${i}`}
onClick={() => window.scrollTo(0, 0)}
legacyBehavior
passHref
>
<motion.a
className="relative w-full p-[1px] rounded-lg sm:rounded-xl overflow-hidden hover:cursor-pointer bg-gradient-to-b from-[#58585860] to-[#ffffff10]"
@@ -63,7 +65,7 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
<div className="relative inset-0 w-full pt-[50%] bg-[#2f2e2e] overflow-hidden rounded-lg sm:rounded-xl">
<Image
src={imgUrl}
alt={user.username}
alt={user.username ?? ''}
layout="fill"
objectFit="cover"
objectPosition="center"

35
apps/www/components/MagnifiedProducts.tsx
View File

@@ -79,24 +79,23 @@ function Product({
initial={initial}
animate={isInView ? animate : initial}
>
<Link href={product.url}>
<a className="flex w-full flex-col items-center text-center">
<motion.div
style={isMobile ? (undefined as any) : { width, willChange: 'width' }}
className="relative w-[50px] aspect-square will-change-transform"
>
<Image
src={product.icon}
priority
layout="fill"
objectFit="contain"
lazyBoundary="100px"
/>
</motion.div>
<div className="text-brand-600 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
<span>{product.name}</span>
</div>
</a>
<Link href={product.url} className="flex w-full flex-col items-center text-center">
<motion.div
style={isMobile ? (undefined as any) : { width, willChange: 'width' }}
className="relative w-[50px] aspect-square will-change-transform"
>
<Image
src={product.icon}
priority
layout="fill"
objectFit="contain"
lazyBoundary="100px"
alt=""
/>
</motion.div>
<div className="text-brand-600 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
<span>{product.name}</span>
</div>
</Link>
</motion.div>
)

49
apps/www/components/Nav/DevelopersDropdown.tsx
View File

@@ -24,15 +24,16 @@ const DevelopersDropdown = () => (
<ul className="flex flex-col gap-4">
{column.links.map(({ icon: Icon, ...link }: Props) => (
<li key={link.text}>
<Link href={link.url!}>
<a className="flex group items-center gap-2 text-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none focus-visible:rounded focus-visible:ring-foreground-lighter">
{Icon && <Icon size={16} strokeWidth={1.2} />}
<span>{link.text}</span>
<IconChevronRight
strokeWidth={2}
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
/>
</a>
<Link
href={link.url!}
className="flex group items-center gap-2 text-light text-sm hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:outline-none focus-visible:rounded focus-visible:ring-foreground-lighter"
>
{Icon && <Icon size={16} strokeWidth={1.2} />}
<span>{link.text}</span>
<IconChevronRight
strokeWidth={2}
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
/>
</Link>
</li>
))}
@@ -42,24 +43,26 @@ const DevelopersDropdown = () => (
</div>
<div className="bg-overlay flex flex-col w-[550px] xl:w-[480px] border-t xl:border-t-0 xl:border-l">
<div className="flex-col gap-2 py-8 px-10">
<Link href="/blog">
<a className="group flex items-center gap-1 text-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground">
<span>Blog</span>
<IconChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
</a>
<Link
href="/blog"
className="group flex items-center gap-1 text-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground"
>
<span>Blog</span>
<IconChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
</Link>
<ul className="flex flex-col gap-5">
{Announcements.map((announcement: any) => (
<li key={announcement.title}>
<Link href={announcement.url}>
<a className="group flex flex-col focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded">
<p className="text-light mb-0 line-clamp-2 group-hover:text-foreground group-focus-visible:text-foreground">
{announcement.title}
</p>
<p className="text-sm line-clamp-2 text-lighter leading-relaxed !mb-0 group-hover:text-foreground-light group-focus-visible:text-foreground-light">
{announcement.description}
</p>
</a>
<Link
href={announcement.url}
className="group flex flex-col focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded"
>
<p className="text-light mb-0 line-clamp-2 group-hover:text-foreground group-focus-visible:text-foreground">
{announcement.title}
</p>
<p className="text-sm line-clamp-2 text-lighter leading-relaxed !mb-0 group-hover:text-foreground-light group-focus-visible:text-foreground-light">
{announcement.description}
</p>
</Link>
</li>
))}

95
apps/www/components/Nav/MenuItem.tsx
View File

@@ -11,56 +11,55 @@ const MenuItem = React.forwardRef<
}
>(({ className, title, href = '', description, icon, hasChevron, children, ...props }, ref) => {
return (
<Link href={href} passHref>
<a
ref={ref}
className={cn(
'group/menu-item flex items-center text-light text-sm hover:text-foreground select-none gap-3 rounded-md p-2 leading-none no-underline outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
description && 'items-center',
className
)}
{...props}
>
{children ?? (
<>
{icon && (
<div className="shrink-0 bg-surface-200 min-w-10 w-10 h-10 flex items-center justify-center rounded-lg">
<svg
className="h-5 w-5 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d={icon}
stroke="currentColor"
/>
</svg>
</div>
)}
<div className="flex flex-col justify-center">
<div className="flex items-center gap-1">
<p className="leading-snug text-foreground">{title}</p>
{hasChevron && (
<IconChevronRight
strokeWidth={2}
className="w-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
/>
)}
</div>
{description && (
<p className="line-clamp-1 -mb-1 leading-relaxed text-lighter group-hover/menu-item:text-light group-focus-visible/menu-item:text-light">
{description}
</p>
<Link
href={href}
ref={ref}
className={cn(
'group/menu-item flex items-center text-light text-sm hover:text-foreground select-none gap-3 rounded-md p-2 leading-none no-underline outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:text-foreground',
description && 'items-center',
className
)}
{...props}
>
{children ?? (
<>
{icon && (
<div className="shrink-0 bg-surface-200 min-w-10 w-10 h-10 flex items-center justify-center rounded-lg">
<svg
className="h-5 w-5 group-hover/menu-item:text-foreground group-focus-visible/menu-item:text-foreground"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d={icon}
stroke="currentColor"
/>
</svg>
</div>
)}
<div className="flex flex-col justify-center">
<div className="flex items-center gap-1">
<p className="leading-snug text-foreground">{title}</p>
{hasChevron && (
<IconChevronRight
strokeWidth={2}
className="w-3 text-foreground transition-all will-change-transform -translate-x-1 opacity-0 group-hover/menu-item:translate-x-0 group-hover/menu-item:opacity-100"
/>
)}
</div>
</>
)}
</a>
{description && (
<p className="line-clamp-1 -mb-1 leading-relaxed text-lighter group-hover/menu-item:text-light group-focus-visible/menu-item:text-light">
{description}
</p>
)}
</div>
</>
)}
</Link>
)
})

33
apps/www/components/Nav/MobileMenu.tsx
View File

@@ -108,10 +108,11 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
<AccordionMenuItem menuItem={menuItem} />
</Accordion.Item>
) : (
<Link href={menuItem.url}>
<a className="block py-2 pl-3 pr-4 text-base font-medium text-strong hover:bg-surface-200 dark:text-white focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:rounded">
{menuItem.title}
</a>
<Link
href={menuItem.url}
className="block py-2 pl-3 pr-4 text-base font-medium text-strong hover:bg-surface-200 dark:text-white focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:rounded"
>
{menuItem.title}
</Link>
)}
</m.div>
@@ -131,15 +132,17 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
className="bg-overlay fixed overflow-hidden inset-0 z-50 h-screen max-h-screen w-screen supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh] transform"
>
<div className="absolute h-16 px-6 flex items-center justify-between w-screen left-0 top-0 z-50 bg-overlay before:content[''] before:absolute before:w-full before:h-3 before:inset-0 before:top-full before:bg-gradient-to-b before:from-background-overlay before:to-transparent">
<Link href="/" as="/">
<a className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm">
<Image
src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
width={124}
height={24}
alt="Supabase Logo"
/>
</a>
<Link
href="/"
as="/"
className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
>
<Image
src={isDarkMode ? supabaseLogoWordmarkDark : supabaseLogoWordmarkLight}
width={124}
height={24}
alt="Supabase Logo"
/>
</Link>
<button
onClick={() => setOpen(false)}
@@ -168,14 +171,14 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
<Menu />
</div>
<div className="absolute bottom-0 left-0 right-0 top-auto w-full bg-alternative flex items-stretch p-4 gap-4">
<Link href="https://supabase.com/dashboard" passHref>
<Link href="https://supabase.com/dashboard" passHref legacyBehavior>
<Button block type="default" asChild>
<a type={undefined} className="">
Sign in
</a>
</Button>
</Link>
<Link href="https://supabase.com/dashboard" passHref>
<Link href="https://supabase.com/dashboard" passHref legacyBehavior>
<Button block asChild>
<a type={undefined} className="h-10 py-4">
Start your project

46
apps/www/components/Nav/ProductDropdown.tsx
View File

@@ -34,32 +34,34 @@ const ProductDropdown = () => {
</ul>
<div className="bg-overlay border-t xl:border-t-0 xl:border-l py-8 px-10 gap-8 grid grid-cols-5 xl:flex xl:flex-col w-full xl:w-[500px]">
<div className="col-span-3 xl:w-auto">
<Link href="/customers">
<a className="group flex items-center gap-1 text-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground">
Customer Stories
<IconChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
</a>
<Link
href="/customers"
className="group flex items-center gap-1 text-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm focus-visible:text-foreground"
>
Customer Stories
<IconChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
</Link>
<ul className="flex flex-col gap-2">
{CustomersData.slice(0, isTablet ? 2 : 3).map((customer) => (
<li key={customer.organization}>
<Link href={customer.url}>
<a className="group flex items-center gap-3 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded">
<div className="relative rounded-md bg-background p-2 border group-hover:border-foreground-muted/50 h-16 w-32 flex-shrink-0 overflow-auto">
<Image
src={`${basePath}/${customer.imgUrl}`}
alt={customer.title}
layout="fill"
objectFit="contain"
className="!p-4 brightness-50 contrast-50 dark:contrast-0 filter"
/>
</div>
<div className="flex flex-col">
<h4 className="text-light group-hover:text-foreground group-focus-visible:text-foreground text-normal mb-0 text-sm">
{customer.title}
</h4>
</div>
</a>
<Link
href={customer.url}
className="group flex items-center gap-3 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded"
>
<div className="relative rounded-md bg-background p-2 border group-hover:border-foreground-muted/50 h-16 w-32 flex-shrink-0 overflow-auto">
<Image
src={`${basePath}/${customer.imgUrl}`}
alt={customer.title}
layout="fill"
objectFit="contain"
className="!p-4 brightness-50 contrast-50 dark:contrast-0 filter"
/>
</div>
<div className="flex flex-col">
<h4 className="text-light group-hover:text-foreground group-focus-visible:text-foreground text-normal mb-0 text-sm">
{customer.title}
</h4>
</div>
</Link>
</li>
))}

61
apps/www/components/Nav/index.tsx
View File

@@ -72,26 +72,29 @@ const Nav = () => {
<div className="flex items-center px-6 lg:px-0 flex-1 sm:items-stretch justify-between">
<div className="flex items-center">
<div className="flex items-center flex-shrink-0">
<Link href="/" as="/">
<a className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm">
<Image
src={
isLaunchWeekPage || resolvedTheme === 'dark' || isHomePage
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
width={124}
height={24}
alt="Supabase Logo"
/>
</a>
<Link
href="/"
className="block w-auto h-6 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
>
<Image
src={
isLaunchWeekPage || resolvedTheme === 'dark' || isHomePage
? supabaseLogoWordmarkDark
: supabaseLogoWordmarkLight
}
width={124}
height={24}
alt="Supabase Logo"
/>
</Link>
{isLaunchWeekPage && (
<Link href="/launch-week" as="/launch-week">
<a className="hidden ml-2 xl:block font-mono text-sm uppercase leading-4 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm">
Launch Week
</a>
<Link
href="/launch-week"
as="/launch-week"
className="hidden ml-2 xl:block font-mono text-sm uppercase leading-4 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-foreground-lighter focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative focus-visible:rounded-sm"
>
Launch Week
</Link>
)}
</div>
@@ -133,23 +136,17 @@ const Nav = () => {
{!isUserLoading && (
<>
{isLoggedIn ? (
<Link href="/dashboard/projects" passHref>
<Button className="hidden text-white lg:block" asChild>
<a type={undefined}>Dashboard</a>
</Button>
</Link>
<Button className="hidden text-white lg:block" asChild>
<Link href="/dashboard/projects">Dashboard</Link>
</Button>
) : (
<>
<Link href="https://supabase.com/dashboard" passHref>
<Button type="default" className="hidden lg:block" asChild>
<a type={undefined}>Sign in</a>
</Button>
</Link>
<Link href="https://supabase.com/dashboard" passHref>
<Button className="hidden text-white lg:block" asChild>
<a type={undefined}>Start your project</a>
</Button>
</Link>
<Button type="default" className="hidden lg:block" asChild>
<Link href="https://supabase.com/dashboard">Sign in</Link>
</Button>
<Button className="hidden text-white lg:block" asChild>
<Link href="https://supabase.com/dashboard">Start your project</Link>
</Button>
</>
)}
</>

100
apps/www/components/OpenSource/RepoCard.tsx
View File

@@ -10,60 +10,58 @@ const RepoCard = ({ repo, activeTab, index }: { repo: any; activeTab: number; in
animate={{ opacity: 1, y: 0, transition: { delay: 0 + index / 25 } }}
exit={{ opacity: 0, y: 5, transition: { duration: 0.05 } }}
>
<Link href={repo.html_url}>
<a target="_blank">
<InteractiveShimmerCard
outerClassName=""
innerClassName="relative group flex flex-col gap-2 p-4 min-h-[170px] md:!h-[200px]"
hasActiveOnHover
>
<div className="flex gap-1 items-center">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-foreground-lighter grouopp-hover:fill-foreground"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 3.33215C7.09969 3.33215 3.12744 7.31061 3.12744 12.2198C3.12744 16.1459 5.66943 19.4775 9.19538 20.6523C9.63901 20.7339 9.80049 20.4597 9.80049 20.2237C9.80049 20.0135 9.7934 19.4536 9.78896 18.7127C7.32061 19.2495 6.79979 17.5211 6.79979 17.5211C6.39698 16.4937 5.81494 16.2204 5.81494 16.2204C5.00931 15.6703 5.87616 15.681 5.87616 15.681C6.76608 15.7431 7.23455 16.5966 7.23455 16.5966C8.02598 17.9541 9.31161 17.562 9.81646 17.3348C9.89809 16.7608 10.127 16.3695 10.3808 16.1477C8.41105 15.9232 6.33931 15.1602 6.33931 11.7549C6.33931 10.7851 6.68534 9.99101 7.25229 9.36993C7.16091 9.14545 6.85658 8.24134 7.33925 7.0187C7.33925 7.0187 8.08454 6.77914 9.7792 7.92903C10.503 7.73162 11.2498 7.63108 12 7.63002C12.7542 7.63357 13.5128 7.73206 14.2217 7.92903C15.9155 6.77914 16.659 7.01781 16.659 7.01781C17.1434 8.24134 16.8382 9.14545 16.7477 9.36993C17.3155 9.99101 17.6598 10.7851 17.6598 11.7549C17.6598 15.169 15.5845 15.9205 13.6086 16.1406C13.9271 16.4147 14.2102 16.9569 14.2102 17.7864C14.2102 18.9736 14.1995 19.9327 14.1995 20.2237C14.1995 20.4615 14.3592 20.7383 14.8099 20.6514C16.5767 20.0588 18.1126 18.9259 19.2005 17.4129C20.2884 15.8999 20.8733 14.0833 20.8726 12.2198C20.8726 7.31061 16.8994 3.33215 12 3.33215Z"
fill="currentColor"
/>
</svg>
<Link href={repo.html_url} target="_blank">
<InteractiveShimmerCard
outerClassName=""
innerClassName="relative group flex flex-col gap-2 p-4 min-h-[170px] md:!h-[200px]"
hasActiveOnHover
>
<div className="flex gap-1 items-center">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-foreground-lighter grouopp-hover:fill-foreground"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 3.33215C7.09969 3.33215 3.12744 7.31061 3.12744 12.2198C3.12744 16.1459 5.66943 19.4775 9.19538 20.6523C9.63901 20.7339 9.80049 20.4597 9.80049 20.2237C9.80049 20.0135 9.7934 19.4536 9.78896 18.7127C7.32061 19.2495 6.79979 17.5211 6.79979 17.5211C6.39698 16.4937 5.81494 16.2204 5.81494 16.2204C5.00931 15.6703 5.87616 15.681 5.87616 15.681C6.76608 15.7431 7.23455 16.5966 7.23455 16.5966C8.02598 17.9541 9.31161 17.562 9.81646 17.3348C9.89809 16.7608 10.127 16.3695 10.3808 16.1477C8.41105 15.9232 6.33931 15.1602 6.33931 11.7549C6.33931 10.7851 6.68534 9.99101 7.25229 9.36993C7.16091 9.14545 6.85658 8.24134 7.33925 7.0187C7.33925 7.0187 8.08454 6.77914 9.7792 7.92903C10.503 7.73162 11.2498 7.63108 12 7.63002C12.7542 7.63357 13.5128 7.73206 14.2217 7.92903C15.9155 6.77914 16.659 7.01781 16.659 7.01781C17.1434 8.24134 16.8382 9.14545 16.7477 9.36993C17.3155 9.99101 17.6598 10.7851 17.6598 11.7549C17.6598 15.169 15.5845 15.9205 13.6086 16.1406C13.9271 16.4147 14.2102 16.9569 14.2102 17.7864C14.2102 18.9736 14.1995 19.9327 14.1995 20.2237C14.1995 20.4615 14.3592 20.7383 14.8099 20.6514C16.5767 20.0588 18.1126 18.9259 19.2005 17.4129C20.2884 15.8999 20.8733 14.0833 20.8726 12.2198C20.8726 7.31061 16.8994 3.33215 12 3.33215Z"
fill="currentColor"
/>
</svg>
<p className="text-foreground group-hover:text-brand text-lg m-0 leading-none">
{repo.name}
</p>
</div>
<p className="text-sm flex-1 text-lighter">{repo.description}</p>
<div className="text-sm w-full flex justify-between text-lighter mt-8">
<p className="">{repo.full_name}</p>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1">
<span>{repo.forks.toLocaleString()}</span>
<svg
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-4 fill-foreground-lighter stroke-none"
>
<path
d="M5 5.37201V6.25001C5 6.66401 5.336 7.00001 5.75 7.00001H10.25C10.4489 7.00001 10.6397 6.92099 10.7803 6.78034C10.921 6.63969 11 6.44892 11 6.25001V5.37201C10.4996 5.19509 10.0778 4.84696 9.80928 4.38915C9.54072 3.93134 9.44265 3.39333 9.53241 2.87021C9.62216 2.34709 9.89396 1.87253 10.2998 1.53043C10.7056 1.18832 11.2192 1.00069 11.75 1.00069C12.2808 1.00069 12.7944 1.18832 13.2002 1.53043C13.6061 1.87253 13.8778 2.34709 13.9676 2.87021C14.0574 3.39333 13.9593 3.93134 13.6907 4.38915C13.4222 4.84696 13.0004 5.19509 12.5 5.37201V6.25001C12.5 6.84674 12.263 7.41904 11.841 7.841C11.419 8.26295 10.8467 8.50001 10.25 8.50001H8.75V10.628C9.25069 10.8049 9.67271 11.1532 9.94146 11.6112C10.2102 12.0692 10.3084 12.6075 10.2186 13.1309C10.1289 13.6543 9.85695 14.1291 9.45096 14.4714C9.04497 14.8136 8.53104 15.0014 8 15.0014C7.46897 15.0014 6.95504 14.8136 6.54905 14.4714C6.14306 14.1291 5.87115 13.6543 5.78139 13.1309C5.69164 12.6075 5.78981 12.0692 6.05855 11.6112C6.3273 11.1532 6.74932 10.8049 7.25 10.628V8.50001H5.75C5.15327 8.50001 4.58097 8.26295 4.15901 7.841C3.73706 7.41904 3.5 6.84674 3.5 6.25001V5.37201C2.99959 5.19509 2.57784 4.84696 2.30928 4.38915C2.04072 3.93134 1.94265 3.39333 2.03241 2.87021C2.12216 2.34709 2.39396 1.87253 2.79976 1.53043C3.20556 1.18832 3.71924 1.00069 4.25 1.00069C4.78077 1.00069 5.29445 1.18832 5.70025 1.53043C6.10605 1.87253 6.37785 2.34709 6.4676 2.87021C6.55735 3.39333 6.45929 3.93134 6.19073 4.38915C5.92217 4.84696 5.50042 5.19509 5 5.37201ZM5 3.25001C5 3.05109 4.92099 2.86033 4.78033 2.71968C4.63968 2.57902 4.44892 2.50001 4.25 2.50001C4.05109 2.50001 3.86033 2.57902 3.71967 2.71968C3.57902 2.86033 3.5 3.05109 3.5 3.25001C3.5 3.44892 3.57902 3.63969 3.71967 3.78034C3.86033 3.92099 4.05109 4.00001 4.25 4.00001C4.44892 4.00001 4.63968 3.92099 4.78033 3.78034C4.92099 3.63969 5 3.44892 5 3.25001ZM11.75 4.00001C11.9489 4.00001 12.1397 3.92099 12.2803 3.78034C12.421 3.63969 12.5 3.44892 12.5 3.25001C12.5 3.05109 12.421 2.86033 12.2803 2.71968C12.1397 2.57902 11.9489 2.50001 11.75 2.50001C11.5511 2.50001 11.3603 2.57902 11.2197 2.71968C11.079 2.86033 11 3.05109 11 3.25001C11 3.44892 11.079 3.63969 11.2197 3.78034C11.3603 3.92099 11.5511 4.00001 11.75 4.00001ZM8.75 12.75C8.75 12.5511 8.67099 12.3603 8.53033 12.2197C8.38968 12.079 8.19892 12 8 12C7.80109 12 7.61033 12.079 7.46967 12.2197C7.32902 12.3603 7.25 12.5511 7.25 12.75C7.25 12.9489 7.32902 13.1397 7.46967 13.2803C7.61033 13.421 7.80109 13.5 8 13.5C8.19892 13.5 8.38968 13.421 8.53033 13.2803C8.67099 13.1397 8.75 12.9489 8.75 12.75Z"
fill="currentColor"
/>
</svg>
</div>
<div className="flex items-center gap-1">
<span>{repo.stargazers_count.toLocaleString()}</span>
<IconStar className="w-4 fill-foreground-lighter stroke-none" />
</div>
<p className="text-foreground group-hover:text-brand text-lg m-0 leading-none">
{repo.name}
</p>
</div>
<p className="text-sm flex-1 text-lighter">{repo.description}</p>
<div className="text-sm w-full flex justify-between text-lighter mt-8">
<p className="">{repo.full_name}</p>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1">
<span>{repo.forks.toLocaleString()}</span>
<svg
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-4 fill-foreground-lighter stroke-none"
>
<path
d="M5 5.37201V6.25001C5 6.66401 5.336 7.00001 5.75 7.00001H10.25C10.4489 7.00001 10.6397 6.92099 10.7803 6.78034C10.921 6.63969 11 6.44892 11 6.25001V5.37201C10.4996 5.19509 10.0778 4.84696 9.80928 4.38915C9.54072 3.93134 9.44265 3.39333 9.53241 2.87021C9.62216 2.34709 9.89396 1.87253 10.2998 1.53043C10.7056 1.18832 11.2192 1.00069 11.75 1.00069C12.2808 1.00069 12.7944 1.18832 13.2002 1.53043C13.6061 1.87253 13.8778 2.34709 13.9676 2.87021C14.0574 3.39333 13.9593 3.93134 13.6907 4.38915C13.4222 4.84696 13.0004 5.19509 12.5 5.37201V6.25001C12.5 6.84674 12.263 7.41904 11.841 7.841C11.419 8.26295 10.8467 8.50001 10.25 8.50001H8.75V10.628C9.25069 10.8049 9.67271 11.1532 9.94146 11.6112C10.2102 12.0692 10.3084 12.6075 10.2186 13.1309C10.1289 13.6543 9.85695 14.1291 9.45096 14.4714C9.04497 14.8136 8.53104 15.0014 8 15.0014C7.46897 15.0014 6.95504 14.8136 6.54905 14.4714C6.14306 14.1291 5.87115 13.6543 5.78139 13.1309C5.69164 12.6075 5.78981 12.0692 6.05855 11.6112C6.3273 11.1532 6.74932 10.8049 7.25 10.628V8.50001H5.75C5.15327 8.50001 4.58097 8.26295 4.15901 7.841C3.73706 7.41904 3.5 6.84674 3.5 6.25001V5.37201C2.99959 5.19509 2.57784 4.84696 2.30928 4.38915C2.04072 3.93134 1.94265 3.39333 2.03241 2.87021C2.12216 2.34709 2.39396 1.87253 2.79976 1.53043C3.20556 1.18832 3.71924 1.00069 4.25 1.00069C4.78077 1.00069 5.29445 1.18832 5.70025 1.53043C6.10605 1.87253 6.37785 2.34709 6.4676 2.87021C6.55735 3.39333 6.45929 3.93134 6.19073 4.38915C5.92217 4.84696 5.50042 5.19509 5 5.37201ZM5 3.25001C5 3.05109 4.92099 2.86033 4.78033 2.71968C4.63968 2.57902 4.44892 2.50001 4.25 2.50001C4.05109 2.50001 3.86033 2.57902 3.71967 2.71968C3.57902 2.86033 3.5 3.05109 3.5 3.25001C3.5 3.44892 3.57902 3.63969 3.71967 3.78034C3.86033 3.92099 4.05109 4.00001 4.25 4.00001C4.44892 4.00001 4.63968 3.92099 4.78033 3.78034C4.92099 3.63969 5 3.44892 5 3.25001ZM11.75 4.00001C11.9489 4.00001 12.1397 3.92099 12.2803 3.78034C12.421 3.63969 12.5 3.44892 12.5 3.25001C12.5 3.05109 12.421 2.86033 12.2803 2.71968C12.1397 2.57902 11.9489 2.50001 11.75 2.50001C11.5511 2.50001 11.3603 2.57902 11.2197 2.71968C11.079 2.86033 11 3.05109 11 3.25001C11 3.44892 11.079 3.63969 11.2197 3.78034C11.3603 3.92099 11.5511 4.00001 11.75 4.00001ZM8.75 12.75C8.75 12.5511 8.67099 12.3603 8.53033 12.2197C8.38968 12.079 8.19892 12 8 12C7.80109 12 7.61033 12.079 7.46967 12.2197C7.32902 12.3603 7.25 12.5511 7.25 12.75C7.25 12.9489 7.32902 13.1397 7.46967 13.2803C7.61033 13.421 7.80109 13.5 8 13.5C8.19892 13.5 8.38968 13.421 8.53033 13.2803C8.67099 13.1397 8.75 12.9489 8.75 12.75Z"
fill="currentColor"
/>
</svg>
</div>
<div className="flex items-center gap-1">
<span>{repo.stargazers_count.toLocaleString()}</span>
<IconStar className="w-4 fill-foreground-lighter stroke-none" />
</div>
</div>
</InteractiveShimmerCard>
</a>
</div>
</InteractiveShimmerCard>
</Link>
</motion.div>
)

Some files were not shown because too many files have changed in this diff Show More