From 4aa40ae46b4aeb34fe260f18ea1ed4440e18abfd Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Thu, 14 Sep 2023 12:14:35 +0200 Subject: [PATCH] update open source page --- apps/www/components/OpenSource/OSSHero.tsx | 5 +++- apps/www/components/OpenSource/Repos.tsx | 27 ++++++++++++------- .../www/components/OpenSource/hero.module.css | 12 --------- .../Sections/ProductHeaderCentered.tsx | 2 +- apps/www/data/open-source/index.tsx | 14 +--------- apps/www/pages/open-source/index.tsx | 16 ++++++++--- 6 files changed, 36 insertions(+), 40 deletions(-) diff --git a/apps/www/components/OpenSource/OSSHero.tsx b/apps/www/components/OpenSource/OSSHero.tsx index fef72852bef..92589e4f572 100644 --- a/apps/www/components/OpenSource/OSSHero.tsx +++ b/apps/www/components/OpenSource/OSSHero.tsx @@ -21,7 +21,10 @@ const OSSHero = () => ( styles['hero-container'], ].join(' ')} > -
+
diff --git a/apps/www/components/OpenSource/Repos.tsx b/apps/www/components/OpenSource/Repos.tsx index 8c34f6fae46..3e84ce41969 100644 --- a/apps/www/components/OpenSource/Repos.tsx +++ b/apps/www/components/OpenSource/Repos.tsx @@ -22,7 +22,7 @@ const Tab = ({ isActive, label, icon, onClick }: TabProps) => ( role="tab" >
- {icon ? ( + {icon && ( ( strokeLinejoin="round" /> - ) : // - null} + )} {label}
@@ -53,16 +52,20 @@ export interface RepoTab { } interface Props { - title: string | ReactNode - paragraph: string tabs: RepoTab[] repos: any[] } +enum SWIPER_STATE { + START = 'START', + MIDDLE = 'MIDDLE', + END = 'END', +} + const Repos = ({ tabs, repos }: Props) => { const [activeTab, setActiveTab] = useState(0) const [apiSwiper, setApiSwiper] = useState(undefined) - const [swiperState, setSwiperState] = useState<'START' | 'END' | 'MIDDLE'>('START') + const [swiperState, setSwiperState] = useState(SWIPER_STATE.START) useEffect(() => { if (!apiSwiper) return @@ -105,20 +108,26 @@ const Repos = ({ tabs, repos }: Props) => { grabCursor slidesPerView="auto" onSlideChange={(slider) => - setSwiperState(slider.isEnd ? 'END' : slider.isBeginning ? 'START' : 'MIDDLE') + setSwiperState( + slider.isEnd + ? SWIPER_STATE.END + : slider.isBeginning + ? SWIPER_STATE.START + : SWIPER_STATE.MIDDLE + ) } className="relative flex md:hidden justify-center max-w-full w-full overflow-hidden items-center rounded-full bg-surface-100 p-2" >
{tabs.map((tab, index) => ( diff --git a/apps/www/components/OpenSource/hero.module.css b/apps/www/components/OpenSource/hero.module.css index 366359aa567..f2c6dc4156b 100644 --- a/apps/www/components/OpenSource/hero.module.css +++ b/apps/www/components/OpenSource/hero.module.css @@ -20,18 +20,6 @@ will-change: transform; } -.gradient { - position: absolute; - user-select: none; - pointer-events: none; - inset: 0px; - z-index: -3; - filter: blur(140px); - transform: translateZ(0px); - background: radial-gradient(ellipse 50% 60% at 50% 70%, #3ecf8e, transparent), - radial-gradient(ellipse 70% 80% at 50% 50%, #1d7a50, transparent); -} - @media (min-width: 1024px) { .hero-grid-lines { animation-duration: 30s; diff --git a/apps/www/components/Sections/ProductHeaderCentered.tsx b/apps/www/components/Sections/ProductHeaderCentered.tsx index 98de8020142..b3976d3b9a8 100644 --- a/apps/www/components/Sections/ProductHeaderCentered.tsx +++ b/apps/www/components/Sections/ProductHeaderCentered.tsx @@ -66,7 +66,7 @@ const ProductHeaderCentered = (props: Types) => (

{props.h1}

-

{props.subheader}

+

{props.subheader}

{props.cta && ( diff --git a/apps/www/data/open-source/index.tsx b/apps/www/data/open-source/index.tsx index 4ba7075b5a5..8bf94993931 100644 --- a/apps/www/data/open-source/index.tsx +++ b/apps/www/data/open-source/index.tsx @@ -15,19 +15,6 @@ export default { ), }, 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], @@ -58,6 +45,7 @@ export default { 'auth-helpers', 'auth-elements', 'auth-ui', + 'gotrue', 'mailme', ], }, diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx index a314c1611d5..ab9dec893b3 100644 --- a/apps/www/pages/open-source/index.tsx +++ b/apps/www/pages/open-source/index.tsx @@ -1,9 +1,11 @@ import { useState, useEffect } from 'react' import { useRouter } from 'next/router' import { Octokit } from '@octokit/core' +import { NextSeo } from 'next-seo' + import DefaultLayout from '~/components/Layouts/Default' import SectionContainer from '~/components/Layouts/SectionContainer' -import { NextSeo } from 'next-seo' +import OSSHero from '~/components/OpenSource/OSSHero' import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered' import Repos from '~/components/OpenSource/Repos' import Sponsorships from '~/components/OpenSource/Sponsorships' @@ -12,7 +14,7 @@ import pageData from '~/data/open-source' // Import Swiper styles if swiper used on page import 'swiper/swiper.min.css' -import OSSHero from '../../components/OpenSource/OSSHero' +import CTABanner from '../../components/CTABanner' const OpenSource = () => { const octokit = new Octokit() @@ -26,6 +28,7 @@ const OpenSource = () => { per_page: 200, page: 1, }) + setRepos(res.data) } fetchOctoData() @@ -37,6 +40,7 @@ const OpenSource = () => { const meta_description = pageData.metaDescription || 'Supabase is an open source company, supporting existing open source tools and communities wherever possible.' + const totalStars = repos.reduce((acc: number, val: any) => acc + val.stargazers_count, 0) return ( <> @@ -60,11 +64,15 @@ const OpenSource = () => { - + - + +
+ + + )