From bd189bc2f9255da0f95d61e161318bb17daccd41 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Mon, 11 Sep 2023 13:05:55 +0200 Subject: [PATCH] set up new oss page --- .../InteractiveShimmerCard/index.tsx | 6 +- apps/www/components/OpenSource/Repos.tsx | 163 ++++++++++++++++++ apps/www/data/open-source/index.tsx | 83 +++++++++ apps/www/pages/open-source/index.tsx | 23 ++- packages/shared-data/products.ts | 6 +- 5 files changed, 270 insertions(+), 11 deletions(-) create mode 100644 apps/www/components/OpenSource/Repos.tsx create mode 100644 apps/www/data/open-source/index.tsx diff --git a/apps/www/components/InteractiveShimmerCard/index.tsx b/apps/www/components/InteractiveShimmerCard/index.tsx index 474b5912907..6512138130a 100644 --- a/apps/www/components/InteractiveShimmerCard/index.tsx +++ b/apps/www/components/InteractiveShimmerCard/index.tsx @@ -80,12 +80,12 @@ const InteractiveShimmerCard = ({ >
-
{children}
-
+ {children} +
) diff --git a/apps/www/components/OpenSource/Repos.tsx b/apps/www/components/OpenSource/Repos.tsx new file mode 100644 index 00000000000..bbf1f449df2 --- /dev/null +++ b/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) => ( + +) + +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 ( +
+
+ {/*

+ {title} +

+

{paragraph}

+ {cta && ( + + + + + + )} */} +
+
+ {tabs.map((tab, index) => ( + handleTabClick(index)} + /> + ))} +
+
+
+
+ + {activeRepos?.map((repo: any, i: number) => ( + + + + + +
+ + + + +

+ {repo.name} +

+
+

{repo.description}

+
+

{repo.full_name}

+
+ {repo.stargazers_count.toLocaleString()} + +
+
+ + + ))} + +
+
+ ) +} + +export default Repos diff --git a/apps/www/data/open-source/index.tsx b/apps/www/data/open-source/index.tsx new file mode 100644 index 00000000000..5133b292cf1 --- /dev/null +++ b/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: Open Source Community, + 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'], + }, + ], +} diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx index 49d24b55151..7a05db1a540 100644 --- a/apps/www/pages/open-source/index.tsx +++ b/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 = () => { }} /> -
+ + + + + + + {/*
@@ -71,9 +82,9 @@ const OpenSource = () => {

Sponsors

- + */} - + {/*

Community Maintainers

@@ -127,7 +138,6 @@ const OpenSource = () => {
- {/* OSS */}

Repositories

@@ -153,6 +163,7 @@ const OpenSource = () => {
+ */} ) diff --git a/packages/shared-data/products.ts b/packages/shared-data/products.ts index 034d8bfab4a..a318659f2a2 100644 --- a/packages/shared-data/products.ts +++ b/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', },