Merge branch 'supabase:master' into master

nipundev · Aug 4, 2023 · 7f59525 · 7f59525
2 parents 5713bf6 + 7370618
commit 7f59525
Show file tree

Hide file tree

Showing 374 changed files with 10,503 additions and 3,323 deletions.
diff --git a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -89,13 +89,13 @@ export const highlightSelectedNavItem = (id: string) => {
   const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
-  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
-  currentActiveItems.forEach((item) => item.classList.remove('text-brand-900'))
+  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand')
+  currentActiveItems.forEach((item) => item.classList.remove('text-brand'))
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
     if (item.href.split('/').at(-1) === id) {
-      item.classList.add('text-brand-900')
+      item.classList.add('text-brand')
     }
   })
 }
diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
         <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
           <a
             href={`#${formatSlug(item.link)}`}
-            className="text-scale-1000 hover:text-brand-900 transition-colors"
+            className="text-scale-1000 hover:text-brand transition-colors"
             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
           />
         </li>

diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
@@ -28,6 +28,11 @@ const HomePageCover = (props) => {
       icon: '/docs/img/icons/flutter-icon',
       href: '/guides/getting-started/quickstarts/flutter',
     },
+    {
+      tooltip: 'Android Kotlin',
+      icon: '/docs/img/icons/kotlin-icon',
+      href: '/guides/getting-started/quickstarts/kotlin',
+    },
     {
       tooltip: 'SvelteKit',
       icon: '/docs/img/icons/svelte-icon',
@@ -69,7 +74,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
+              <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>

diff --git a/apps/docs/components/LinkCard.tsx b/apps/docs/components/LinkCard.tsx
@@ -14,7 +14,7 @@ export default function LinkCard({
 }) {
   return (
     <Link href={link || '#'}>
-      <a className="border-scale-200 hover:border-brand-900 dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
+      <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>

diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
@@ -29,11 +29,7 @@ const Footer = () => (
             {Icon && <Icon width={16} height={16} />}
             <p>{text}</p>
             <Link href={url} passHref>
-              <a
-                className="text-brand-900 hover:underline"
-                target="_blank"
-                rel="noreferrer noopener"
-              >
+              <a className="text-brand hover:underline" target="_blank" rel="noreferrer noopener">
                 {ctaLabel}
               </a>
             </Link>

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -72,12 +72,6 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
       href: '/guides/platform',
       level: 'platform',
     },
-    {
-      label: 'Resources',
-      icon: 'resources',
-      href: '/guides/resources',
-      level: 'resources',
-    },
     {
       label: 'Self-Hosting',
       icon: 'self-hosting',
@@ -130,21 +124,33 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
       community: true,
     },
     {
-      label: 'Tools',
+      label: 'Resources',
     },
     {
-      label: 'Integrations',
-      icon: 'integrations',
-      hasLightIcon: true,
-      href: 'https://supabase.com/partners/integrations',
-      level: 'integrations',
+      label: 'CLI Commands',
+      icon: 'reference-cli',
+      href: '/reference/cli/introduction',
+      level: 'reference_javascript',
     },
     {
       label: 'Management API',
       icon: 'reference-api',
       href: '/reference/api/introduction',
       level: 'reference_javascript',
     },
+    {
+      label: 'Guides and Examples',
+      icon: 'resources',
+      href: '/guides/resources',
+      level: 'resources',
+    },
+    {
+      label: 'Integrations',
+      icon: 'integrations',
+      hasLightIcon: true,
+      href: 'https://supabase.com/partners/integrations',
+      level: 'integrations',
+    },
   ],
   [
     {
@@ -550,6 +556,10 @@ export const database: NavMenuConstant = {
       name: 'Postgres Guides',
       url: undefined,
       items: [
+        {
+          name: 'Analyzing efficiency and performance',
+          url: '/guides/database/inspect',
+        },
         {
           name: 'JSON and unstructured data',
           url: '/guides/database/json',
@@ -663,10 +673,23 @@ export const database: NavMenuConstant = {
           name: 'RUM: inverted index for full-text search',
           url: '/guides/database/extensions/rum',
         },
+      ],
+    },
+    {
+      name: 'Foreign Data Wrappers',
+      url: undefined,
+      items: [
+        { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },
+        { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+        { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+        { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
         {
-          name: 'wrappers: 3rd Party Integrations',
-          url: '/guides/database/extensions/wrappers',
+          name: 'Connecting to ClickHouse',
+          url: '/guides/database/extensions/wrappers/clickhouse',
         },
+        { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+        { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+        { name: 'Connecting to Stripe', url: '/guides/database/extensions/wrappers/stripe' },
       ],
     },
     {
@@ -983,33 +1006,51 @@ export const supabase_cli: NavMenuConstant = {
   title: 'Local Dev / CLI',
   url: '/guides/cli',
   items: [
-    { name: 'Getting started', url: '/guides/cli' },
-    { name: 'Local Development', url: '/guides/cli/local-development' },
-    { name: 'Managing environments', url: '/guides/cli/managing-environments' },
-    {
-      name: 'Managing config and secrets',
-      url: '/guides/cli/managing-config',
-    },
+    { name: 'Overview', url: '/guides/cli' },
     {
-      name: 'Testing emails locally',
-      url: '/guides/cli/testing-emails',
+      name: 'Using the CLI',
+      url: undefined,
+      items: [
+        { name: 'Getting started', url: '/guides/cli/getting-started' },
+        { name: 'CLI Configuration', url: '/guides/cli/config' },
+      ],
     },
     {
-      name: 'GitHub Action',
+      name: 'Developing with Supabase',
       url: undefined,
       items: [
+        { name: 'Local Development', url: '/guides/cli/local-development' },
+        { name: 'Managing environments', url: '/guides/cli/managing-environments' },
         {
-          name: 'Generate types from your database',
-          url: '/guides/cli/github-action/generating-types',
+          name: 'Managing config and secrets',
+          url: '/guides/cli/managing-config',
+        },
+        {
+          name: 'Seeding your database',
+          url: '/guides/cli/seeding-your-database',
+        },
+        {
+          name: 'Testing and linting',
+          url: '/guides/cli/testing-and-linting',
         },
       ],
     },
     {
-      name: 'Reference',
+      name: 'GitHub Action',
       url: undefined,
       items: [
-        { name: 'Commands', url: '/reference/cli/introduction' },
-        { name: 'Configuration', url: '/reference/cli/config' },
+        {
+          name: 'Generate types from your database',
+          url: '/guides/cli/github-action/generating-types',
+        },
+        {
+          name: 'Automated testing',
+          url: '/guides/cli/github-action/testing',
+        },
+        {
+          name: 'Backup your database',
+          url: '/guides/cli/github-action/backups',
+        },
       ],
     },
   ],

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -23,7 +23,7 @@ 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-900 flex gap-3">
+          <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>
@@ -100,7 +100,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           <a
             className={[
               'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+              'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
             ].join(' ')}
           >
             <div className="relative w-2">

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
       className={[
         ' ',
         !props.title && 'capitalize',
-        props.url === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+        props.url === router.pathname ? 'text-brand' : 'hover:text-brand text-scale-1200',
       ].join(' ')}
     >
       {props.title ?? props.id}
@@ -68,7 +68,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
               activeItem
-                ? 'text-brand-900 font-medium'
+                ? 'text-brand font-medium'
                 : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
@@ -97,8 +97,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                       className={[
                         'cursor-pointer transition text-sm',
                         subSubItem.url === router.pathname
-                          ? 'text-brand-900'
-                          : 'hover:text-brand-900 text-scale-1000',
+                          ? 'text-brand'
+                          : 'hover:text-brand text-scale-1000',
                       ].join(' ')}
                     >
                       {subSubItem.name}
@@ -124,7 +124,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
-              ? 'text-brand-900'
+              ? 'text-brand'
               : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
@@ -152,7 +152,7 @@ const Content = (props) => {
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
@@ -166,7 +166,7 @@ const Content = (props) => {
 
       <Link href={menu.url ?? ''} passHref>
         <a>
-          <div className="flex items-center gap-3 my-3 text-brand-900">
+          <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>

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -16,7 +16,7 @@ import { deepFilterSections } from './NavigationMenu.utils'
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
   return (
-    <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
+    <span className={['text-base text-brand-600 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
     </span>
   )
@@ -64,15 +64,15 @@ const FunctionLink = React.memo(function FunctionLink({
         className={cn(
           'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
           isParent ? 'flex justify-between' : 'leading-3',
-          active ? 'text-brand-900' : 'text-scale-1000'
+          active ? 'text-brand' : 'text-scale-1000'
         )}
       >
         {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
         {title}
         {active && !isSubItem && (
           <div
             aria-hidden="true"
-            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-600"
           ></div>
         )}
         {isParent && (
@@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">

diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -56,7 +56,7 @@ const TopNavBarRef: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200/90">
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
       <div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
         <div className={['lg:hidden'].join(' ')}>
           <Link href="/">
@@ -68,7 +68,7 @@ const TopNavBarRef: FC = () => {
                 height={24}
                 alt="Supabase Logo"
               />
-              <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+              <span className="font-mono text-sm font-medium text-brand">DOCS</span>
             </a>
           </Link>
           {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
@@ -82,21 +82,22 @@ const TopNavBarRef: FC = () => {
               group
               items-center
               justify-between
-              bg-scaleA-200
+              bg-surface-100
+              bg-opacity-75
+              hover:bg-surface-200
+              hover:bg-opacity-100
               border
               transition
-              hover:border-scale-600
-              hover:bg-scaleA-300
-              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded"
+              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
+              text-lighter
+              "
             >
               <div className="flex items-center space-x-2">
-                <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
-                <p className="hidden md:flex text-scale-1100 text-sm group-hover:text-scale-1200 transition">
-                  Search docs...
-                </p>
+                <IconSearch className="" size={18} strokeWidth={2} />
+                <p className="hidden md:flex text-sm">Search docs...</p>
               </div>
               <div className="hidden md:flex items-center space-x-1">
-                <div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                <div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
                   <IconCommand size={12} strokeWidth={1.5} />
                   <span className="text-[12px]">K</span>
                 </div>