set up new oss page

apps/www/components/InteractiveShimmerCard/index.tsx

@@ -80,12 +80,12 @@ const InteractiveShimmerCard = ({
     >
       <div
         className={[
-          'relative h-full rounded-xl bg-scale-200 dark:bg-scale-300 overflow-hidden transition-all text-scale-1100',
+          'relative h-full z-10 rounded-xl bg-scale-200 dark:bg-scale-300 overflow-hidden transition-all text-scale-1100',
           innerClassName,
         ].join(' ')}
       >
-        <div className="relative z-10 w-full h-full">{children}</div>
-        <div ref={innerRef} className="absolute z-0 inset-0 w-full h-full" />
+        {children}
+        <div ref={innerRef} className="absolute z-0 inset-0 w-full h-full pointer-events-none" />
       </div>
     </div>
   )

apps/www/components/OpenSource/Repos.tsx

@@ -0,0 +1,163 @@
+import React, { useState, ReactNode } from 'react'
+import Link from 'next/link'
+import { AnimatePresence, motion } from 'framer-motion'
+import { IconArrowUpRight, IconStar, cn } from 'ui'
+import InteractiveShimmerCard from '../InteractiveShimmerCard'
+
+interface TabProps {
+  label: string
+  isActive: boolean
+  icon?: string
+  onClick: VoidFunction
+}
+
+const Tab = ({ isActive, label, icon, onClick }: TabProps) => (
+  <button
+    onClick={onClick}
+    className={`text-left rounded-full px-4 md:px-3 py-2 md:py-1 nowrap flex group gap-1 transition-all ${
+      isActive ? 'text-strong bg-surface-300' : 'text-light bg-surface-200 hover:bg-overlay-hover'
+    }`}
+    aria-selected={isActive}
+    role="tab"
+  >
+    <div className="flex flex-nowrap text-sm md:text-base gap-2 items-center">
+      {icon ? (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cn('text-light shrink-0', isActive && 'text-brand')}
+        >
+          <path
+            d={icon}
+            stroke="currentColor"
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : (
+        <IconArrowUpRight />
+      )}
+      <span className="whitespace-nowrap">{label}</span>
+    </div>
+  </button>
+)
+
+export interface RepoTab {
+  label: string
+  icon?: string
+  repos?: string[]
+}
+
+interface Props {
+  title: string | ReactNode
+  paragraph: string
+  tabs: RepoTab[]
+  repos: any[]
+}
+
+const Repos = ({ paragraph, tabs, repos }: Props) => {
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleTabClick = (tabIndex: number) => {
+    setActiveTab(tabIndex)
+  }
+
+  const activeRepos = repos
+    .filter((repo) => tabs[activeTab].repos?.includes(repo.name))
+    ?.sort((a, b) => (a.name > b.name ? 1 : -1))
+
+  console.log('activeRepos', activeRepos)
+
+  return (
+    <div className="flex flex-col gap-8 xl:gap-10">
+      <div className="w-full gap-2 flex flex-col items-center">
+        {/* <h2 className="text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
+            {title}
+          </h2>
+          <p className="text-scale-900 mb-4 max-w-sm">{paragraph}</p>
+          {cta && (
+            <Link href={cta.link}>
+              <a className="">
+                <Button type="default" size="small" icon={<IconArrowUpRight />}>
+                  {cta.label ?? 'Explore more'}
+                </Button>
+              </a>
+            </Link>
+          )} */}
+        <div className="flex justify-center max-w-full overflow-hidden items-center rounded-full bg-surface-100 ">
+          <div
+            className="flex flex-nowrap overflow-x-scroll items-center p-1 gap-2 no-scrollbar"
+            role="tablist"
+          >
+            {tabs.map((tab, index) => (
+              <Tab
+                key={index}
+                isActive={index === activeTab}
+                label={tab.label}
+                icon={tab.icon}
+                onClick={() => handleTabClick(index)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="relative w-full min-h-[420px] grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <AnimatePresence exitBeforeEnter>
+          {activeRepos?.map((repo: any, i: number) => (
+            <motion.div
+              key={`${activeTab}-${repo.name}`}
+              initial={{ opacity: 0, y: 5 }}
+              animate={{ opacity: 1, y: 0, transition: { delay: 0 + i / 25 } }}
+              exit={{ opacity: 0, y: 5, transition: { duration: 0.05 } }}
+            >
+              <InteractiveShimmerCard
+                outerClassName=""
+                innerClassName="relative group flex flex-col gap-2 p-4 h-[200px]"
+                hasActiveOnHover
+              >
+                <Link href={repo.html_url}>
+                  <a className="absolute inset-0 z-10" target="_blank" />
+                </Link>
+                <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">
+                  <p className="">{repo.full_name}</p>
+                  <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>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}
+
+export default Repos

apps/www/data/open-source/index.tsx

@@ -0,0 +1,83 @@
+import { products } from 'shared-data'
+
+export default {
+  metaTitle: 'Supabase Open Source Community',
+  metaDescription:
+    'Supabase is an open source company, actively fostering collaboration and supporting existing open source tools and communities.',
+  heroSection: {
+    title: 'The Power of Collaboration',
+    h1: <span className="heading-gradient">Open Source Community</span>,
+    subheader: (
+      <>
+        Supabase is an open source company, actively fostering collaboration and supporting existing
+        open source tools and communities.
+      </>
+    ),
+  },
+  repo_tabs: [
+    // {
+    //   label: 'Generic',
+    //   icon: '',
+    //   repos: [
+    //     'supabase',
+    //     'supavisor',
+    //     'supabase-cli',
+    //     'supabase-js',
+    //     'supabase-dart',
+    //     'supabase-flutter',
+    //     'supabase-audit',
+    //   ],
+    // },
+    {
+      label: 'Database',
+      icon: products.database.icon[16],
+      repos: [
+        'supabase',
+        'supabase-js',
+        'supabase-dart',
+        'supabase-flutter',
+        'supabase-audit',
+        'wrappers',
+      ],
+    },
+    {
+      label: 'Auth',
+      icon: products.authentication.icon[16],
+      repos: [
+        'supabase',
+        'supabase-cli',
+        'supabase-js',
+        'auth-helpers',
+        'auth-elements',
+        'auth-ui',
+        'mailme',
+      ],
+    },
+    {
+      label: 'Storage',
+      icon: products.storage.icon[16],
+      repos: ['storage-api', 'supabase', 'storage-js', 'storage-dart'],
+    },
+    {
+      label: 'Edge Functions',
+      icon: products.functions.icon[16],
+      repos: [
+        'edge-isServerRuntime',
+        'supabase',
+        'self-hosted-edge-functions-demo',
+        'functions-js',
+        'functions-relay',
+      ],
+    },
+    {
+      label: 'Realtime',
+      icon: products.realtime.icon[16],
+      repos: ['realtime', 'realtime-js', 'realtime-dart'],
+    },
+    {
+      label: 'Vector',
+      icon: products.vector.icon[16],
+      repos: ['pgvector', 'vecs'],
+    },
+  ],
+}

apps/www/pages/open-source/index.tsx

@@ -7,6 +7,9 @@ import maintainers from '~/data/maintainers.json'
 import Sponsors from '~/components/Sponsors'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
+import ProductHeaderCentered from '../../components/Sections/ProductHeaderCentered'
+import pageData from '~/data/open-source'
+import Repos from '../../components/OpenSource/Repos'
 
 const OpenSource = () => {
   const octokit = new Octokit()
@@ -25,7 +28,7 @@ const OpenSource = () => {
       const res = await octokit.request('GET /orgs/{org}/repos', {
         org: 'supabase',
         type: 'public',
-        per_page: 6,
+        per_page: 200,
         page: 1,
       })
       setRepos(res.data)
@@ -33,10 +36,12 @@ const OpenSource = () => {
     fetchOctoData()
   }, [])
 
+  console.log(repos)
   const router = useRouter()
 
-  const meta_title = 'Open Source | Supabase'
+  const meta_title = pageData.metaTitle || 'Open Source | Supabase'
   const meta_description =
+    pageData.metaDescription ||
     'Supabase is an open source company, supporting existing open source tools and communities wherever possible.'
 
   return (
@@ -56,7 +61,13 @@ const OpenSource = () => {
         }}
       />
       <DefaultLayout>
-        <div className="text-scale-1200 container mx-auto">
+        <SectionContainer className="overflow-hidden pt-8 pb-12 md:pt-12">
+          <ProductHeaderCentered {...pageData.heroSection} />
+        </SectionContainer>
+        <SectionContainer className="!pt-0">
+          <Repos repos={repos} tabs={pageData.repo_tabs} title="Yooo" paragraph="asfd" />
+        </SectionContainer>
+        {/* <div className="text-scale-1200 container mx-auto">
           <SectionContainer>
             <div className="container">
               <div className="flex items-center mb-16">
@@ -71,9 +82,9 @@ const OpenSource = () => {
               <h2 className="mb-6 text-2xl font-medium">Sponsors</h2>
               <Sponsors />
             </div>
-          </SectionContainer>
+          </SectionContainer> */}
 
-          <SectionContainer>
+        {/* <SectionContainer>
             <div className="">
               <h2 className="mb-6 text-2xl font-medium">Community Maintainers</h2>
 
@@ -127,7 +138,6 @@ const OpenSource = () => {
             </div>
           </SectionContainer>
 
-          {/* OSS */}
           <SectionContainer>
             <div>
               <h2 className="mb-6 text-2xl font-medium">Repositories</h2>
@@ -153,6 +163,7 @@ const OpenSource = () => {
             </div>
           </SectionContainer>
         </div>
+      */}
       </DefaultLayout>
     </>
   )

packages/shared-data/products.ts

@@ -49,18 +49,20 @@ export const products: Products = {
       '24': 'M5.18625 8.66531H19.5035V15.331H5.18625V8.66531Z M4 17.0007C4 16.0804 4.7461 15.3343 5.66645 15.3343H18.9984C19.9187 15.3343 20.6648 16.0804 20.6648 17.0007V20.3335C20.6648 21.2539 19.9187 22 18.9984 22H5.66646C4.7461 22 4 21.2539 4 20.3335V17.0007Z M4 3.66646C4 2.7461 4.7461 2 5.66645 2H18.9984C19.9187 2 20.6648 2.7461 20.6648 3.66645V6.99926C20.6648 7.91962 19.9187 8.66572 18.9984 8.66572H5.66646C4.7461 8.66572 4 7.91962 4 6.99926V3.66646Z',
     },
   },
+
   authentication: {
     name: PRODUCT_NAMES.AUTHENTICATION,
     icon: {
-      '16': 'M3.494 9.975h5m-5 0v2h5v-2m-5 0v-2h5v2M10 5V3a2 2 0 1 0-4 0v2m6.473 0v9h-9V5h9Z',
+      '16': 'M3.49414 9.97461H8.49414M3.49414 9.97461V11.9746H8.49414V9.97461M3.49414 9.97461V7.97461H8.49414V9.97461M10 5V3C10 1.89543 9.10457 1 8 1C6.89543 1 6 1.89543 6 3V5M3.47266 7L3.47266 12C3.47266 13.1046 4.36809 14 5.47266 14H10.4727C11.5772 14 12.4727 13.1046 12.4727 12V7C12.4727 5.89543 11.5772 5 10.4727 5L5.47266 5C4.36809 5 3.47266 5.89543 3.47266 7Z',
       '18': 'M3.02644 12.0457H9.18048M3.02644 12.0457V14.5072H9.18048V12.0457M3.02644 12.0457V9.58414H9.18048V12.0457M11.0339 5.92308V3.46154C11.0339 2.10207 9.93179 1 8.57228 1C7.21277 1 6.11067 2.10207 6.11067 3.46154V5.92308M3 8.38465L3 14.5384C3 15.8979 4.10208 17 5.46157 17H11.6157C12.9752 17 14.0773 15.8979 14.0773 14.5384V8.38465C14.0773 7.02516 12.9752 5.92308 11.6157 5.92308L5.46158 5.92308C4.10209 5.92308 3 7.02516 3 8.38465Z',
       '24': 'M5.03305 15.8071H12.7252M5.03305 15.8071V18.884H12.7252V15.8071M5.03305 15.8071V12.7302H12.7252V15.8071M15.0419 8.15385V5.07692C15.0419 3.37759 13.6643 2 11.965 2C10.2657 2 8.88814 3.37759 8.88814 5.07692V8.15385M5 11.2307L5 18.9231C5 20.6224 6.37757 22 8.07689 22H15.769C17.4683 22 18.8459 20.6224 18.8459 18.9231V11.2307C18.8459 9.53142 17.4683 8.15385 15.769 8.15385L8.07689 8.15385C6.37757 8.15385 5 9.53142 5 11.2307Z',
     },
   },
+
   storage: {
     name: PRODUCT_NAMES.STORAGE,
     icon: {
-      '16': 'M13 7.616V5.6l-3.618-3.6H3v4.03m9.964-.447L9.38 2v3.584h3.584ZM1.974 6v8h12V7.509h-7.59l-1.533-1.51H1.974Z',
+      '16': 'M12.9997 7.50869V5.60119L9.38151 2.00024H3.99967C3.44739 2.00024 2.99967 2.44796 2.99967 3.00024V5.99976M12.9645 5.58447L9.38004 2L9.38004 4.58447C9.38004 5.13676 9.82776 5.58447 10.38 5.58447L12.9645 5.58447ZM4.44135 5.99976H2.97363C2.42135 5.99976 1.97363 6.44747 1.97363 6.99976V11.9998C1.97363 13.1043 2.86906 13.9998 3.97363 13.9998H11.9736C13.0782 13.9998 13.9736 13.1043 13.9736 11.9998V8.50869C13.9736 7.95641 13.5259 7.50869 12.9736 7.50869H6.79396C6.53157 7.50869 6.27968 7.40556 6.09263 7.22153L5.14268 6.28692C4.95563 6.10289 4.70375 5.99976 4.44135 5.99976Z',
       '18': 'M15.7014 8.34507V5.80169L10.8772 1.00033H3.7014C2.96501 1.00033 2.36805 1.59728 2.36805 2.33367V6.33312M15.6545 5.77939L10.8752 1L10.8752 4.44605C10.8752 5.18243 11.4722 5.77939 12.2086 5.77939L15.6545 5.77939ZM4.29028 6.33312H2.33335C1.59696 6.33312 1 6.93008 1 7.66647V14.3333C1 15.8061 2.19392 17 3.66669 17H14.3333C15.8061 17 17 15.8061 17 14.3333V9.67842C17 8.94203 16.403 8.34507 15.6667 8.34507H7.42712C7.07725 8.34507 6.7414 8.20755 6.492 7.96218L5.2254 6.71601C4.976 6.47063 4.64015 6.33312 4.29028 6.33312Z',
       '24': 'M20.4997 12.1386V9.15811L14.8463 3.53163H6.43717C5.57423 3.53163 4.87467 4.23119 4.87467 5.09413V9.78087M20.4447 9.13199L14.844 3.53125L14.844 7.56949C14.844 8.43243 15.5436 9.13199 16.4065 9.13199L20.4447 9.13199ZM7.12729 9.78087H4.83398C3.97104 9.78087 3.27148 10.4804 3.27148 11.3434V19.1559C3.27148 20.8818 4.67059 22.2809 6.39648 22.2809H18.8965C20.6224 22.2809 22.0215 20.8818 22.0215 19.1559V13.7011C22.0215 12.8381 21.3219 12.1386 20.459 12.1386H10.8032C10.3933 12.1386 9.99969 11.9774 9.70743 11.6899L8.22312 10.2296C7.93086 9.94202 7.53729 9.78087 7.12729 9.78087Z',
     },