dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Francesco Sansalvadore committed 2023-05-26 20:28:51 +02:00
1 parent ff3ec35886
commit 24f9be9283
9 files changed
+73 -153
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/CodeBlock/CodeBlock.tsx
+2 -1
View File
@@ -17,6 +17,7 @@ export interface CodeBlockProps {
className?: string
children?: string
size?: 'small' | 'medium' | 'large'
background?: string
}
function CodeBlock(props: CodeBlockProps) {
@@ -98,7 +99,7 @@ function CodeBlock(props: CodeBlockProps) {
padding: '21px 24px',
fontSize: large ? 18 : '0.875rem',
lineHeight: large ? 1.6 : 1.4,
background: '#181818',
background: props.background ?? '#1A1A1A',
}}
showLineNumbers={props.showLineNumbers}
lineNumberStyle={{
apps/www/components/Layouts/Default.tsx
+3 -2
View File
@@ -5,17 +5,18 @@ import Footer from 'components/Footer/index'
type Props = {
hideHeader?: boolean
hideFooter?: boolean
className?: string
children: React.ReactNode
}
const DefaultLayout = (props: Props) => {
const { hideHeader = false, hideFooter = false, children } = props
const { hideHeader = false, hideFooter = false, className = '', children } = props
return (
<>
{!hideHeader && <Nav />}
<div className="min-h-screen">
<main>{children}</main>
<main className={className}>{children}</main>
</div>
{!hideFooter && <Footer />}
</>
apps/www/components/Sections/FeaturesSection.tsx
+4 -2
View File
@@ -23,7 +23,7 @@ const FeaturesSection = ({ title, paragraph, features }: Props) => {
<h2 className="text-2xl sm:text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
{title}
</h2>
<p className="p">{paragraph}</p>
<p className="text-scale-900 mb-4">{paragraph}</p>
<Link href="">
<a className="">
<Button type="default" size="small">
@@ -56,7 +56,9 @@ const FeaturesSection = ({ title, paragraph, features }: Props) => {
</div>
<div className="text-sm lg:text-base">
<h2 className="text-base">{feature.title}</h2>
<ReactMarkdown className="prose pt-1 text-sm">{feature.text}</ReactMarkdown>
<ReactMarkdown className="prose pt-1 text-sm text-scale-900">
{feature.text}
</ReactMarkdown>
</div>
</div>
)
apps/www/components/Sections/HighlightCards.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const HighlightCards = ({ highlights }: { highlights: Highlight[] }) => {
<InteractiveShimmerCard innerClassName="flex flex-col p-8 !bg-scale-200">
<div className="w-full aspect-square mb-4">image</div>
<h3 className="text-lg text-scale-1200 font-medium mb-2">{highlight.title}</h3>
<p>{highlight.paragraph}</p>
<p className="text-scale-900">{highlight.paragraph}</p>
</InteractiveShimmerCard>
))}
</div>
apps/www/components/Sections/TimedTabs.tsx → apps/www/components/Sections/TimedTabsSection.tsx
+8 -8
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect, ReactNode } from 'react'
import { motion, useAnimation, AnimatePresence } from 'framer-motion'
import { motion, useAnimation } from 'framer-motion'
import SectionContainer from '~/components/Layouts/SectionContainer'
import Link from 'next/link'
import { Button } from 'ui'
@@ -42,18 +42,18 @@ interface Tab {
}
interface Props {
title: string
title: string | ReactNode
paragraph: string
tabs: Tab[]
intervalDuration?: number
updateFrequency?: number
}
const TimedTabs = ({
const TimedTabsSection = ({
title,
paragraph,
tabs,
intervalDuration = 15,
intervalDuration = 25,
updateFrequency = 10,
}: Props) => {
const [activeTab, setActiveTab] = useState(0)
@@ -120,10 +120,10 @@ const TimedTabs = ({
<SectionContainer className="flex flex-col gap-8">
<div className="flex flex-col lg:flex-row gap-8 xl:gap-10 justify-between">
<div className="w-full lg:w-1/2 gap-2 flex flex-col">
<h2 className="text-2xl sm:text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
<h2 className="text-3xl xl:text-4xl max-w-[280px] sm:max-w-xs xl:max-w-[360px] tracking-[-1px]">
{title}
</h2>
<p className="p max-w-sm">{paragraph}</p>
<p className="text-scale-900 mb-4 max-w-sm">{paragraph}</p>
<Link href="">
<a className="">
<Button type="default" size="small">
@@ -146,7 +146,7 @@ const TimedTabs = ({
>
{tabs.map((tab, i) => (
<SwiperSlide key={i}>
<CodeBlock key={i} lang="py" size="medium">
<CodeBlock key={i} lang="py" size="large" background="#1A1A1A">
{tab.code}
</CodeBlock>
</SwiperSlide>
@@ -170,4 +170,4 @@ const TimedTabs = ({
)
}
export default TimedTabs
export default TimedTabsSection
apps/www/components/Sections/UseCasesSection.tsx
+5 -5
View File
@@ -15,10 +15,10 @@ interface Props {
const UseCasesSection = ({ title, paragraph, useCases }: Props) => {
return (
<SectionContainer className="flex flex-col gap-8">
<div className="flex flex-col gap-4 items-center justify-center">
<SectionContainer className="flex flex-col gap-12">
<div className="flex flex-col text-center gap-4 items-center justify-center">
<h2 className="heading-gradient text-2xl sm:text-3xl xl:text-4xl font-medium">{title}</h2>
<p className="p mx-auto text-center lg:w-1/2">{paragraph}</p>
<p className="mx-auto text-scale-900 lg:w-1/2">{paragraph}</p>
</div>
<div className="grid gap-10 grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
{useCases.map((example) => {
@@ -36,8 +36,8 @@ const UseCasesSection = ({ title, paragraph, useCases }: Props) => {
alt={example.title}
/>
<div className="prose">
<h4 className="">{example.title}</h4>
<p className="text-sm">{example.description}</p>
<h4 className="text-lg">{example.title}</h4>
<p className="text-sm text-scale-900">{example.description}</p>
</div>
</div>
</>
apps/www/data/products/vector/page.tsx
+44 -36
View File
@@ -9,39 +9,47 @@ export const pageData = {
component: '',
},
],
highlights: [
{
title: 'PostgreSQL + pgvector',
paragraph:
'Every Supabase project is a dedicated Postgres instance. Use pgvector to store, query, and index your vector embeddings at scale.',
image: '',
},
{
title: 'Connect with OpenAI',
paragraph:
'Easily connect to any LLM or embeddings API, including Hugging Face, SageMaker and more.',
image: '',
},
{
title: 'Secure and Scalable',
paragraph:
'Supabase is SOC2 type 2 compliant, and comes with an advanced permissions system.',
image: '',
},
{
title: 'Deploy Globally',
paragraph:
'Choose from 12 Fully Managed datacenters or, or Self-Host on your own cloud or servers.',
image: '',
},
],
highlightsSection: {
highlights: [
{
title: 'PostgreSQL + pgvector',
paragraph:
'Every Supabase project is a dedicated Postgres instance. Use pgvector to store, query, and index your vector embeddings at scale.',
image: '',
},
{
title: 'Connect with OpenAI',
paragraph:
'Easily connect to any LLM or embeddings API, including Hugging Face, SageMaker and more.',
image: '',
},
{
title: 'Secure and Scalable',
paragraph:
'Supabase is SOC2 type 2 compliant, and comes with an advanced permissions system.',
image: '',
},
{
title: 'Deploy Globally',
paragraph:
'Choose from 12 Fully Managed datacenters or, or Self-Host on your own cloud or servers.',
image: '',
},
],
},
integrations: {
title: 'Leverage the tools you love',
image: <IntegrationsSVG />,
},
useCasesSection: {
title: 'What you can build with Supabase Vector',
paragraph: 'Manage your vector embeddings to power any AI project from start to finish.',
title: (
<>
<span className="heading-gradient">What you can build</span>
<br />
<span className="heading-gradient">with Supabase Vector</span>
</>
),
paragraph: 'Go effortlessly from experimentation to production-ready AI applications.',
useCases: [
{
img: 'toast-messages.svg',
@@ -155,32 +163,32 @@ docs.query(
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'Fully managed or Self-Hosted',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
text: 'Start without hassle with our cloud platform, or self-host your own solution to keep everything under control. You choose.',
},
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'Multi region',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
title: 'Global & Multi-Region',
text: 'Automatically provision and configure a global view of applications across multiple regions to reduce read latency.',
},
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'Health Benefits',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
title: 'Integrated',
text: 'Vector embeddings are in the same database as the rest of your data, which reduces I/O roundtrips and improves performance.',
},
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'No vendor lock-in',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
text: 'We use existing standards to increase portability and to avoid lock-in, making it easy to migrate in and out.',
},
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'Automatic Backups',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
text: 'Automatic backups and PITR (Point In Time Recovery) ensure your data is always safe and recoverable.',
},
{
icon: 'M2.22628 8.76631C2.07453 6.92839 2.70175 5.03824 4.10791 3.63208C6.64632 1.09367 10.7619 1.09367 13.3003 3.63208C15.8387 6.17049 15.8387 10.2861 13.3003 12.8245C10.7619 15.3629 6.64632 15.3629 4.10791 12.8245C3.50852 12.2251 3.05066 11.5377 2.73434 10.804M0.516543 7.55176L2.23116 9.26638L3.94578 7.55176M5.95088 4.97787L11.3675 4.97787L11.3675 7.1379L5.95088 7.1379L5.95088 4.97787ZM6.2096 7.13777L11.0825 7.13777L11.0825 9.2978L6.2096 9.2978L6.2096 7.13777ZM5.95114 9.29726L11.3678 9.29726L11.3678 11.4573H5.95114V9.29726Z',
title: 'Highly Scalable',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.',
text: 'Designed for unparalleled high performance and availability at global scale.',
},
],
},
apps/www/pages/vector/Vector.tsx
+5 -97
View File
@@ -1,43 +1,19 @@
import { Button, IconGrid, IconLayers, IconMenu } from 'ui'
import Solutions from 'data/Solutions.json'
import { NextSeo } from 'next-seo'
import Link from 'next/link'
import { useRouter } from 'next/router'
import CTABanner from '~/components/CTABanner'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
import CommunitySlider from '~/components/Sections/CommunitySlider'
import APISection from '~/components/Sections/APISection'
import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered'
import VectorStyles from './vector.module.css'
import FeaturesSection from '~/components/Sections/FeaturesSection'
import HighlightCards from '~/components/Sections/HighlightCards'
import UseCasesSection from '~/components/Sections/UseCasesSection'
import CenteredTitleImage from '~/components/Sections/CenteredTitleImage'
import TimedTabs from '~/components/Sections/TimedTabs'
import TimedTabsSection from '~/components/Sections/TimedTabsSection'
import { pageData } from '~/data/products/vector/page'
import 'swiper/swiper.min.css'
const Cursor = ({ className = '', color = 'none' }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill={color}
viewBox="0 0 24 24"
aria-hidden="true"
className={`h-10 w-10 stroke-black dark:stroke-white ${className}`}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"
/>
</svg>
)
}
function VectorPage() {
// base path for images
const { basePath } = useRouter()
@@ -61,7 +37,7 @@ function VectorPage() {
],
}}
/>
<DefaultLayout>
<DefaultLayout className="bg-scale-100">
<ProductHeaderCentered
icon={Solutions['vector']?.icon}
title={Solutions['vector']?.name}
@@ -74,83 +50,15 @@ function VectorPage() {
subheader={[
'Integrate your favorite ML-models to easily store, index and search vector embeddings for any AI use case.',
]}
image={[
<div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
<div
className={[
'border-brand-800 relative h-12 w-48 bg-[#34B27B]',
`flex items-center justify-center ${VectorStyles['shape']}`,
].join(' ')}
>
<p
className={`text-scale-1200 text-[18px] font-medium ${VectorStyles['button-text']}`}
>
Start for free
</p>
</div>
<Cursor
color="var(--colors-yellow9)"
className={`${VectorStyles['cursor-one']} absolute top-[220px] right-[130px]`}
/>
<Cursor
color="var(--colors-indigo9)"
className={`${VectorStyles['cursor-two']} absolute top-[180px] right-[280px]`}
/>
<div
className={[
'border-scale-1200 absolute bottom-[40px] left-[175px] flex h-10 w-20',
'items-center justify-center space-x-2 rounded-full border-[3px] bg-indigo-900',
`${VectorStyles['cursor-two-comment']}`,
].join(' ')}
>
<p className="text-lg">🤔</p>
</div>
<Cursor
color="var(--colors-tomato9)"
className={`${VectorStyles['cursor-three']} absolute top-[170px] right-[180px]`}
/>
<div
className={[
'border-scale-1200 absolute top-[72px] left-[320px] flex h-10 w-20',
'items-center justify-center space-x-2 rounded-full border-[3px] bg-tomato-900',
`${VectorStyles['cursor-three-comment']}`,
].join(' ')}
>
<p className="text-lg">😄</p>
</div>
{/* <div className="bg-scale-100 border-scale-500 absolute left-0 h-full w-24 border-r py-9 shadow">
<div className="border-scale-500 h-7 border-b" />
</div> */}
{/* <div className="bg-scale-100 border-scale-500 absolute right-0 h-full w-20 border-l py-9 shadow">
<div className="border-scale-500 h-7 border-b" />
</div> */}
<div className="bg-scale-200 border-scale-500 absolute top-0 flex h-9 w-full items-center justify-between border-b">
<div className="flex items-center">
<IconMenu className="text-scale-1200 mx-3" strokeWidth={1} size={16} />
<IconGrid className="text-scale-1200 mx-3" strokeWidth={1} size={15} />
<IconLayers className="text-scale-1200 mx-3" strokeWidth={1} size={15} />
</div>
<div className="mx-3 flex items-center">
<div className="border-scale-300 dark:border-scale-1200 bg-tomato-900 dark:bg-tomato-900 relative -right-4 h-5 w-5 rounded-full border" />
<div className="border-scale-300 dark:border-scale-1200 bg-yellow-900 dark:bg-yellow-900 relative -right-2 z-[2] h-5 w-5 rounded-full border" />
<div className="border-scale-300 dark:border-scale-1200 bg-indigo-900 dark:bg-indigo-900 z-[3] h-5 w-5 rounded-full border" />
</div>
</div>
</div>,
]}
image={[]}
documentation_url={'/docs/guides/vector/broadcast'}
/>
<HighlightCards highlights={pageData.highlights} />
<HighlightCards {...pageData.highlightsSection} />
<CenteredTitleImage {...pageData.integrations} />
<TimedTabsSection {...pageData.APIsection} />
<UseCasesSection {...pageData.useCasesSection} />
<TimedTabs {...pageData.APIsection} />
<FeaturesSection {...pageData.featuresSection} />
<CommunitySlider />
<CTABanner />
apps/www/styles/index.css
+1 -1
View File
@@ -91,7 +91,7 @@ h6:not(.overwrite) {
}
.heading-gradient-brand {
@apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-900;
@apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-800;
}
.toc-animate {