Merge pull request #15955 from supabase/feat/misc-improvs

feat: Various improvements to the integration pages

apps/docs/layouts/guides/index.tsx

@@ -1,17 +1,15 @@
 import { MDXProvider } from '@mdx-js/react'
 import { NextSeo } from 'next-seo'
 import Head from 'next/head'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useRef, useState } from 'react'
-import { IconExternalLink } from 'ui'
+import { ExpandableVideo, IconExternalLink } from 'ui'
 import components from '~/components'
 import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
 import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
 import GuidesTableOfContents from '~/components/GuidesTableOfContents'
 import useHash from '~/hooks/useHash'
 import { LayoutMainContent } from '../DefaultLayout'
-import ExpandableVideo from 'ui/src/components/ExpandableVideo/ExpandableVideo'
 
 interface Props {
   meta: {

apps/www/components/Partners/TileGrid.tsx

@@ -3,35 +3,35 @@ import Link from 'next/link'
 import { Partner } from '~/types/partners'
 
 export default function TileGrid({
-  partnersByCategory,
+  partners,
   hideCategories = false,
 }: {
-  partnersByCategory: { [category: string]: Partner[] }
+  partners: Partner[]
   hideCategories?: boolean
 }) {
+  const partnersByCategory: { [category: string]: Partner[] } = {}
+  partners.forEach(
+    (p) => (partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
+  )
+
+  const featuredPartners = partners.filter((p) => p.featured)
+
   return (
     <>
-      {Object.keys(partnersByCategory).map((category) => (
-        <div key={category} id={category.toLowerCase()} className="space-y-8">
-          {!hideCategories && <h2 className="h2">{category}</h2>}
+      {featuredPartners.length > 0 ? (
+        <div key="featured" id="featured" className="space-y-8">
+          <h2 className="h2">Featured</h2>
           <div className="grid  grid-cols-1 gap-5 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
-            {partnersByCategory[category].map((p) => (
+            {featuredPartners.map((p) => (
               <Link key={p.slug} href={`/partners/${p.slug}`}>
-                <a
-                  className="
-                "
-                >
+                <a>
                   <div
                     className="
-
                 bg-scale-100 dark:bg-scale-300
                 hover:bg-scale-200 hover:dark:bg-scale-400
                 group flex h-full w-full flex-col rounded border px-6 
                 py-6 shadow 
                 transition-all 
-
-               
-                
                 hover:shadow-lg"
                   >
                     <div className="flex w-full space-x-6">
@@ -49,7 +49,58 @@ export default function TileGrid({
                         <h3 className="text-scale-1100 group-hover:text-scale-1200 mb-2 text-xl transition-colors">
                           {p.title}
                         </h3>
-                        <p className="text-scale-900 text-sm">{p.description}</p>
+                        <p
+                          className="text-scale-900 text-sm line-clamp-4 min-h-[80px]"
+                          title={p.description}
+                        >
+                          {p.description}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </Link>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {Object.keys(partnersByCategory).map((category) => (
+        <div key={category} id={category.toLowerCase()} className="space-y-8">
+          {!hideCategories && <h2 className="h2">{category}</h2>}
+          <div className="grid  grid-cols-1 gap-5 lg:max-w-none lg:grid-cols-2 xl:grid-cols-3">
+            {partnersByCategory[category].map((p) => (
+              <Link key={p.slug} href={`/partners/${p.slug}`}>
+                <a>
+                  <div
+                    className="
+                bg-scale-100 dark:bg-scale-300
+                hover:bg-scale-200 hover:dark:bg-scale-400
+                group flex h-full w-full flex-col rounded border px-6 
+                py-6 shadow 
+                transition-all 
+                hover:shadow-lg"
+                  >
+                    <div className="flex w-full space-x-6">
+                      <div className="h-10 w-10 scale-100 transition-all group-hover:scale-110">
+                        <Image
+                          layout="fixed"
+                          width={40}
+                          height={40}
+                          className="h-10 w-10 rounded-full bg-gray-300"
+                          src={p.logo}
+                          alt={p.title}
+                        />
+                      </div>
+                      <div>
+                        <h3 className="text-scale-1100 group-hover:text-scale-1200 mb-2 text-xl transition-colors">
+                          {p.title}
+                        </h3>
+                        <p
+                          className="text-scale-900 text-sm line-clamp-4 min-h-[80px]"
+                          title={p.description}
+                        >
+                          {p.description}
+                        </p>
                       </div>
                     </div>
                   </div>

apps/www/lib/database.types.ts

@@ -1,112 +1,140 @@
-export type Json = string | number | boolean | null | { [key: string]: Json } | Json[]
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]
 
 export interface Database {
   public: {
     Tables: {
-      partners: {
-        Row: {
-          id: number
-          slug: string
-          type: Database['public']['Enums']['partner_type']
-          category: string
-          developer: string
-          title: string
-          description: string
-          logo: string
-          images: string[]
-          video: string
-          overview: string
-          website: string
-          docs: string
-          approved: boolean
-        }
-        Insert: {
-          id?: number
-          slug?: string
-          type?: Database['public']['Enums']['partner_type']
-          category?: string
-          developer?: string
-          title?: string
-          description?: string
-          logo?: string
-          images?: string[]
-          video?: string
-          overview?: string
-          website?: string
-          docs?: string
-          approved?: boolean
-        }
-        Update: {
-          id?: number
-          slug?: string
-          type?: Database['public']['Enums']['partner_type']
-          category?: string
-          developer?: string
-          title?: string
-          description?: string
-          logo?: string
-          images?: string[]
-          video?: string
-          overview?: string
-          website?: string
-          docs?: string
-          approved?: boolean
-        }
-      }
       partner_contacts: {
         Row: {
-          id: number
-          type: Database['public']['Enums']['partner_type']
           company: string
+          contacted: boolean
           country: string
-          details?: string
+          created_at: string
+          details: string | null
           email: string
           first: string
+          id: number
           last: string
-          phone?: string
-          size?: number
-          title?: string
+          phone: string | null
+          size: number | null
+          title: string | null
+          type: Database['public']['Enums']['partner_type']
           website: string
         }
         Insert: {
+          company: string
+          contacted?: boolean
+          country: string
+          created_at?: string
+          details?: string | null
+          email: string
+          first: string
           id?: number
-          type?: Database['public']['Enums']['partner_type']
-          company?: string
-          country?: string
-          details?: string
-          email?: string
-          first?: string
-          last?: string
-          phone?: string
-          size?: number
-          title?: string
-          website?: string
+          last: string
+          phone?: string | null
+          size?: number | null
+          title?: string | null
+          type: Database['public']['Enums']['partner_type']
+          website: string
         }
         Update: {
-          id?: number
-          type?: Database['public']['Enums']['partner_type']
           company?: string
+          contacted?: boolean
           country?: string
-          details?: string
+          created_at?: string
+          details?: string | null
           email?: string
           first?: string
+          id?: number
           last?: string
-          phone?: string
-          size?: number
-          title?: string
+          phone?: string | null
+          size?: number | null
+          title?: string | null
+          type?: Database['public']['Enums']['partner_type']
           website?: string
         }
+        Relationships: []
+      }
+      partners: {
+        Row: {
+          approved: boolean | null
+          call_to_action_link: string | null
+          category: string
+          contact: number
+          created_at: string
+          description: string
+          developer: string
+          docs: string | null
+          featured: boolean
+          id: number
+          images: string[] | null
+          logo: string
+          overview: string
+          slug: string
+          title: string
+          tsv: unknown | null
+          type: Database['public']['Enums']['partner_type']
+          video: string | null
+          website: string
+        }
+        Insert: {
+          approved?: boolean | null
+          call_to_action_link?: string | null
+          category: string
+          contact: number
+          created_at?: string
+          description: string
+          developer: string
+          docs?: string | null
+          featured?: boolean
+          id?: number
+          images?: string[] | null
+          logo: string
+          overview: string
+          slug: string
+          title: string
+          tsv?: unknown | null
+          type: Database['public']['Enums']['partner_type']
+          video?: string | null
+          website: string
+        }
+        Update: {
+          approved?: boolean | null
+          call_to_action_link?: string | null
+          category?: string
+          contact?: number
+          created_at?: string
+          description?: string
+          developer?: string
+          docs?: string | null
+          featured?: boolean
+          id?: number
+          images?: string[] | null
+          logo?: string
+          overview?: string
+          slug?: string
+          title?: string
+          tsv?: unknown | null
+          type?: Database['public']['Enums']['partner_type']
+          video?: string | null
+          website?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: 'partners_contact_fkey'
+            columns: ['contact']
+            referencedRelation: 'partner_contacts'
+            referencedColumns: ['id']
+          }
+        ]
       }
     }
     Views: {}
-    Functions: {
-      derive_label_sort_from_label: {
-        Args: { label: string }
-        Returns: string
-      }
-    }
+    Functions: {}
     Enums: {
       partner_type: 'technology' | 'expert'
     }
+    CompositeTypes: {
+      [_ in never]: never
+    }
   }
 }

apps/www/pages/partners/experts/[slug].tsx

@@ -32,7 +32,7 @@ function Partner({
           url: `https://supabase.com/partners/experts/${partner.slug}`,
           images: [
             {
-              url: partner.images[0] ?? partner.logo,
+              url: partner.images ? partner.images[0] : partner.logo,
             },
           ],
         }}
@@ -92,7 +92,7 @@ function Partner({
                   },
                 }}
               >
-                {partner.images.map((image: any, i: number) => {
+                {partner.images?.map((image: any, i: number) => {
                   return (
                     <SwiperSlide key={i}>
                       <div className="relative ml-3 mr-3 block cursor-move overflow-hidden rounded-md">
@@ -178,7 +178,7 @@ function Partner({
                     </a>
                   </div>
 
-                  {partner.type === 'technology' && (
+                  {partner.type === 'technology' && partner.docs && (
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Documentation</span>
                       <a

apps/www/pages/partners/experts/index.tsx

@@ -31,10 +31,6 @@ interface Props {
 
 function ExpertPartnersPage(props: Props) {
   const { partners } = props
-  const partnersByCategory: { [category: string]: Partner[] } = {}
-  partners.map(
-    (p) => (partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
-  )
   const router = useRouter()
 
   const meta_title = 'Find an expert'
@@ -122,7 +118,7 @@ function ExpertPartnersPage(props: Props) {
               {/* Partner Tiles */}
               <div className="grid">
                 {partners.length ? (
-                  <TileGrid partnersByCategory={partnersByCategory} hideCategories={true} />
+                  <TileGrid partners={partners} hideCategories={true} />
                 ) : (
                   <h2 className="h2">No Partners Found</h2>
                 )}

apps/www/pages/partners/integrations/[slug].tsx

@@ -11,7 +11,7 @@ import { Dispatch, SetStateAction, useState } from 'react'
 import remarkGfm from 'remark-gfm'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/swiper.min.css'
-import { Admonition, IconChevronLeft, IconExternalLink } from 'ui'
+import { Admonition, Button, ExpandableVideo, IconChevronLeft, IconExternalLink } from 'ui'
 import ImageModal from '~/components/ImageModal'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -60,7 +60,7 @@ function Partner({
           url: `https://supabase.com/partners/integrations/${partner.slug}`,
           images: [
             {
-              url: partner.images[0] ?? partner.logo,
+              url: partner.images ? partner.images[0] : partner.logo,
             },
           ],
         }}
@@ -137,7 +137,7 @@ function Partner({
                   },
                 }}
               >
-                {partner.images.map((image: any, i: number) => {
+                {partner.images?.map((image: any, i: number) => {
                   return (
                     <SwiperSlide key={i}>
                       <div className="relative ml-3 mr-3 block cursor-move overflow-hidden rounded-md">
@@ -157,8 +157,8 @@ function Partner({
               </Swiper>
             </div>
 
-            <div className="grid gap-3 space-y-16 lg:grid-cols-4 lg:space-y-0 lg:space-x-3">
-              <div className="lg:col-span-3">
+            <div className="grid lg:grid-cols-8 lg:space-x-12">
+              <div className="lg:col-span-5">
                 <h2
                   className="text-scale-1200"
                   style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
@@ -166,83 +166,93 @@ function Partner({
                   Overview
                 </h2>
 
-                {partner.video && (
-                  <div
-                    className="bg-scale-1000 relative w-full rounded-md shadow-lg"
-                    style={{ padding: '56.25% 0 0 0', marginBottom: '1rem' }}
-                  >
-                    <iframe
-                      title="Demo video showcasing Supabase"
-                      className="absolute h-full w-full rounded-md"
-                      src={`https://www.youtube-nocookie.com/embed/${partner.video}?autoplay=0&loop=0&controls=1&modestbranding=1&rel=0&disablekb=1`}
-                      style={{ top: 0, left: 0 }}
-                      frameBorder="0"
-                      allow="autoplay; modestbranding; encrypted-media"
-                    />
-                  </div>
-                )}
-
                 <div className="prose">
                   <MDXRemote {...overview} components={mdxComponents(setFocusedImage)} />
                 </div>
               </div>
 
-              <div>
-                <h2
-                  className="text-scale-1200"
-                  style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
-                >
-                  Details
-                </h2>
+              <div className="lg:col-span-3 order-first lg:order-last pt-16 lg:pt-0">
+                <div className="sticky top-20">
+                  <h2
+                    className="text-scale-1200"
+                    style={{ fontSize: '1.5rem', marginBottom: '1rem' }}
+                  >
+                    Details
+                  </h2>
 
-                <div className="text-scale-1200 divide-y">
-                  {partner.type === 'technology' && (
-                    <div className="flex items-center justify-between py-2">
-                      <span className="text-scale-900">Developer</span>
-                      <span className="text-scale-1200">{partner.developer}</span>
+                  {partner.video && (
+                    <div className="mb-6">
+                      <ExpandableVideo
+                        imgUrl=""
+                        videoId={partner.video}
+                        imgOverlayText="Watch an introductory video"
+                      />
                     </div>
                   )}
 
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-scale-900">Category</span>
-                    <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
-                        {partner.category}
-                      </a>
-                    </Link>
-                  </div>
+                  <div className="text-scale-1200 divide-y">
+                    {partner.type === 'technology' && (
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-scale-900">Developer</span>
+                        <span className="text-scale-1200">{partner.developer}</span>
+                      </div>
+                    )}
 
-                  <div className="flex items-center justify-between py-2">
-                    <span className="text-scale-900">Website</span>
-                    <a
-                      href={partner.website}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-brand-900 hover:text-brand-800 transition-colors"
-                    >
-                      {new URL(partner.website).host}
-                    </a>
-                  </div>
-
-                  {partner.type === 'technology' && partner.docs && (
                     <div className="flex items-center justify-between py-2">
-                      <span className="text-scale-900">Documentation</span>
+                      <span className="text-scale-900">Category</span>
+                      <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
+                        <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                          {partner.category}
+                        </a>
+                      </Link>
+                    </div>
+
+                    <div className="flex items-center justify-between py-2">
+                      <span className="text-scale-900">Website</span>
                       <a
-                        href={partner.docs}
+                        href={partner.website}
                         target="_blank"
                         rel="noreferrer"
                         className="text-brand-900 hover:text-brand-800 transition-colors"
                       >
-                        <span className="flex items-center space-x-1">
-                          <span>Learn</span>
-                          <IconExternalLink size="small" />
-                        </span>
+                        {new URL(partner.website).host}
                       </a>
                     </div>
-                  )}
+
+                    {partner.type === 'technology' && partner.docs && (
+                      <div className="flex items-center justify-between py-2">
+                        <span className="text-scale-900">Documentation</span>
+                        <a
+                          href={partner.docs}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="text-brand-900 hover:text-brand-800 transition-colors"
+                        >
+                          <span className="flex items-center space-x-1">
+                            <span>Learn</span>
+                            <IconExternalLink size="small" />
+                          </span>
+                        </a>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
+            {partner.call_to_action_link && (
+              <div className="bg-scale-100 dark:bg-scale-300 hover:border-scale-600 hover:dark:border-scale-700 border-scale-300 dark:border-scale-400 rounded-2xl border p-10 drop-shadow-sm max-w-5xl mx-auto mt-12">
+                <div className="flex flex-row justify-between">
+                  <h1 className="text-2xl font-medium self-center">
+                    Get started with {partner.title} and Supabase.
+                  </h1>
+                  <a href={partner.call_to_action_link} target="_blank" rel="noreferrer">
+                    <Button size="medium" type="secondary">
+                      Add integration
+                    </Button>
+                  </a>
+                </div>
+              </div>
+            )}
           </div>
         </SectionContainer>
       </DefaultLayout>

apps/www/pages/partners/integrations/index.tsx

@@ -1,7 +1,7 @@
-import { IconLoader, IconSearch, Input } from 'ui'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { IconLoader, IconSearch, Input } from 'ui'
 import { useDebounce } from 'use-debounce'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -39,10 +39,6 @@ function IntegrationPartnersPage(props: Props) {
 
   const allCategories = Array.from(new Set(initialPartners.map((p) => p.category)))
 
-  const partnersByCategory: { [category: string]: Partner[] } = {}
-  partners.forEach(
-    (p) => (partnersByCategory[p.category] = [...(partnersByCategory[p.category] ?? []), p])
-  )
   const router = useRouter()
 
   const meta_title = 'Find an Integration'
@@ -218,7 +214,7 @@ function IntegrationPartnersPage(props: Props) {
               {/* Partner Tiles */}
               <div className="grid space-y-10">
                 {partners.length ? (
-                  <TileGrid partnersByCategory={partnersByCategory} />
+                  <TileGrid partners={partners} />
                 ) : (
                   <h2 className="h2">No Partners Found</h2>
                 )}

packages/ui/src/components/ExpandableVideo/ExpandableVideo.tsx

@@ -1,15 +1,21 @@
-import React from 'react'
-import Image from 'next/image'
-import { IconPlay, Modal } from 'ui'
 import { useBreakpoint } from 'common'
+import Image from 'next/image'
+import React from 'react'
+import { IconPlay, Modal } from 'ui'
 
 interface ExpandableVideoProps {
   imgUrl: string
   videoId: string
+  imgOverlayText?: string
   imgAltText?: string
 }
 
-function ExpandableVideo({ imgUrl, videoId, imgAltText }: ExpandableVideoProps) {
+export function ExpandableVideo({
+  imgUrl,
+  videoId,
+  imgOverlayText,
+  imgAltText,
+}: ExpandableVideoProps) {
   const [expandVideo, setExpandVideo] = React.useState(false)
   const isMobile = useBreakpoint(768)
 
@@ -81,7 +87,7 @@ function ExpandableVideo({ imgUrl, videoId, imgAltText }: ExpandableVideoProps)
                     `}
         >
           <IconPlay strokeWidth={2} size="small" />
-          <p className="text-sm">Watch video guide</p>
+          <p className="text-sm">{imgOverlayText ?? 'Watch video guide'}</p>
         </div>
         <Image
           src={imgUrl}
@@ -94,5 +100,3 @@ function ExpandableVideo({ imgUrl, videoId, imgAltText }: ExpandableVideoProps)
     </>
   )
 }
-
-export default ExpandableVideo