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

chore: remove <Typography> components

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2022-03-06 23:10:09 +00:00
1 parent 39e40ff8ad
commit 93b6fdf020
39 files changed
+126 -233
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/components/AdminAccess/index.tsx
+1 -4
View File
@@ -6,7 +6,6 @@ import SectionContainer from '../Layouts/SectionContainer'
import ImageCarousel from '../Carousels/ImageCarousel'
import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
import { Typography } from '@supabase/ui'
import AdminAccessData from 'data/home/admin-access.json'
@@ -17,9 +16,7 @@ const AdminAccess = () => {
return (
<SectionContainer>
<div>
<Typography.Title level={2} className="mb-16">
Build your app without leaving the dashboard
</Typography.Title>
<h2 className="mb-16">Build your app without leaving the dashboard</h2>
</div>
<ImageCarousel content={AdminAccessData} altTabView={true} />
</SectionContainer>
www/components/AdminAccess/tabs.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import TabMarkup from 'data/AdminAccess.json'
import { Tabs as SBTabs, Typography, Button } from '@supabase/ui'
import { Tabs as SBTabs, Button } from '@supabase/ui'
type Props = {
tabId: string
@@ -26,7 +26,7 @@ function Tabs(props: Props) {
>
<SBTabs.Panel id="tabTableEditor" label="Table Editor">
<div className="mt-5">
<Typography.Title level={3}>{TabMarkup['tabTableEditor'].header}</Typography.Title>
<h3>{TabMarkup['tabTableEditor'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabTableEditor'].description}</p>
</dd>
@@ -38,7 +38,7 @@ function Tabs(props: Props) {
<SBTabs.Panel id="tabSqlEditor" label=" SQL Editor">
<div className="mt-5">
<Typography.Title level={3}>{TabMarkup['tabSqlEditor'].header}</Typography.Title>
<h3>{TabMarkup['tabSqlEditor'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabSqlEditor'].description}</p>
</dd>
@@ -49,7 +49,7 @@ function Tabs(props: Props) {
</SBTabs.Panel>
<SBTabs.Panel id="tabAuthRules" label="Auth Rules">
<div className="mt-5">
<Typography.Title level={3}>{TabMarkup['tabAuthRules'].header}</Typography.Title>
<h3>{TabMarkup['tabAuthRules'].header}</h3>
<dd className="mt-8">
<p>{TabMarkup['tabAuthRules'].description}</p>
</dd>
www/components/AuthWidget/AuthComponentExample.tsx
+1 -2
View File
@@ -7,7 +7,6 @@ import {
// Auth,
Space,
Tabs,
Typography,
IconCode,
IconSearch,
} from '@supabase/ui'
@@ -96,7 +95,7 @@ function AuthComponentExample() {
width="96"
alt="Logo"
/>
<Typography.Title level={3}>{'Acme Company'}</Typography.Title>
<h3>{'Acme Company'}</h3>
</Space>
<Badge dot>Demo</Badge>
</div>
www/components/AuthWidget/AuthWidget.tsx
+3 -6
View File
@@ -13,7 +13,6 @@ import {
Select,
Space,
Tabs,
Typography,
Input,
Toggle,
IconCode,
@@ -49,9 +48,7 @@ function AuthPage() {
<div className="container mx-auto px-8 sm:px-16 xl:px-20 relative py-32">
<div className="grid grid-cols-12">
<div className="col-span-8">
<Typography.Title level={2} className="mb-4">
ReactJS Auth Widget
</Typography.Title>
<h2 className="mb-4">ReactJS Auth Widget</h2>
<p>
An API built from the groud up just for Storage.With powerful library clients coming
soon that allow for asset optimasation and image transformation
@@ -85,7 +82,7 @@ function AuthPage() {
<div>
<Space size={3} direction="vertical">
<img src="https://app.supabase.io/img/supabase-dark.svg" width="96" />
<Typography.Title level={3}>{companyName}</Typography.Title>
<h3>{companyName}</h3>
</Space>
</div>
{/* <Auth
@@ -141,7 +138,7 @@ function AuthPage() {
<div className={`p-8`}>
<Space size={12} direction="vertical">
<div>
<Typography.Title level={3}>Customise your login form</Typography.Title>
<h3>Customise your login form</h3>
<p>Our ReactJS Auth form will help you get going even quicker </p>
</div>
<Divider light />
www/components/Blog/BlogHeader.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import React from 'react'
import { Typography } from '@supabase/ui'
interface Props {
title: string
@@ -10,9 +9,9 @@ export default function BlogHeader({ title }: Props) {
<div className="bg-white dark:bg-dark-800 overflow-hidden pt-4 pb-4 border-b dark:border-gray-600">
<div className="container mx-auto px-8 sm:px-16 xl:px-20">
<div className="mx-auto">
<Typography.Title>
<h1>
<span className="text-3xl">{title}</span>
</Typography.Title>
</h1>
</div>
</div>
</div>
www/components/Blog/BlogListItem.tsx
+2 -4
View File
@@ -1,4 +1,4 @@
import { Space, Typography } from '@supabase/ui'
import { Space } from '@supabase/ui'
import authors from 'lib/authors.json'
import React from 'react'
import Image from 'next/image'
@@ -32,9 +32,7 @@ const BlogListItem = ({ blog }: Props) => {
</div>
<div>
<Typography.Title level={3} className="m-0">
{blog.title}
</Typography.Title>
<h3 className="m-0">{blog.title}</h3>
</div>
<p small>{blog.date}</p>
www/components/BuiltWithSupabase/index.tsx
+1 -3
View File
@@ -1,7 +1,5 @@
import { useRouter } from 'next/router'
import SectionHeader from 'components/UI/SectionHeader'
import ProjectExamples from 'data/ProjectExamples.json'
import { Button, Card, Typography, Space, IconGitHub } from '@supabase/ui'
import { Button, IconGitHub } from '@supabase/ui'
import SectionContainer from '../Layouts/SectionContainer'
import ExampleCard from '../ExampleCard'
www/components/CTABanner/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { Button, Typography } from '@supabase/ui'
import { Button } from '@supabase/ui'
const CTABanner = (props: any) => {
const { darkerBg } = props
@@ -10,10 +10,10 @@ const CTABanner = (props: any) => {
`}
>
<div className="col-span-12">
<Typography.Title level={2}>
<h2>
<span style={{ color: '#bbbbbb' }}>Build in a weekend,</span>
<span style={{ color: '#ffffff' }}> scale to millions</span>
</Typography.Title>
</h2>
</div>
<div className="col-span-12 mt-4">
<a href="https://app.supabase.io/">
www/components/Carousels/ImageCarousel.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { useRouter } from 'next/router'
import { Tabs, Typography, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
import { Tabs, Button, IconCornerRightUp, IconArrowUpRight } from '@supabase/ui'
import { useState } from 'react'
// Import Swiper React components
@@ -170,7 +170,7 @@ function ImageCarousel(props: ImageCarouselProps) {
return (
<SwiperSlide key={i}>
<div className="bg-white dark:bg-gray-800 p-px">
<Typography.Title level={4}>{content.title}</Typography.Title>
<h4>{content.title}</h4>
<p>
<p className="text-base">{content.text}</p>
</p>
www/components/Carousels/SplitCodeBlockCarousel.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useState } from 'react'
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react'
import { Tabs, Typography, Button, Space } from '@supabase/ui'
import { Tabs, Button, Space } from '@supabase/ui'
import CodeBlock from '../CodeBlock/CodeBlock'
// Import Swiper styles
www/components/CaseStudies/benchmark.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { Button, Typography } from '@supabase/ui'
import { Button } from '@supabase/ui'
import { useRouter } from 'next/router'
const Benchmark = () => {
@@ -18,9 +18,9 @@ const Benchmark = () => {
alt="Benchmark illustration"
/>
<div className="px-12 py-5 lg:px-0 lg:py-0">
<Typography.Title level={4}>
<h4>
<span className="text-white">Built for speed and reliability</span>
</Typography.Title>
</h4>
<p>
<span className="block text-gray-300">
Supabase outperforms equivalent systems by more than 300%.
www/components/CaseStudies/index.tsx
+4 -6
View File
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
import Benchmark from 'components/CaseStudies/benchmark'
import SectionHeader from 'components/UI/SectionHeader'
import CaseStudiesData from 'data/CaseStudies.json'
import { Card, Space, Typography } from '@supabase/ui'
import { Card, Space } from '@supabase/ui'
import SectionContainer from '../Layouts/SectionContainer'
const CaseStudies = () => {
@@ -30,12 +30,10 @@ const CaseStudies = () => {
>
<Space className="justify-between h-40" direction="vertical">
<div>
<p small type="secondary">
Project example
</p>
<Typography.Title level={3}>{caseStudy.title}</Typography.Title>
<p>Project example</p>
<h3>{caseStudy.title}</h3>
</div>
<p type="default">{caseStudy.description}</p>
<p>{caseStudy.description}</p>
</Space>
</Card>
</a>
www/components/ExampleCard.tsx
+1 -9
View File
@@ -1,12 +1,4 @@
import {
Button,
Divider,
IconArrowUpRight,
IconGitHub,
IconTriangle,
Space,
Typography,
} from '@supabase/ui'
import { Button, Divider, IconArrowUpRight, IconGitHub, IconTriangle, Space } from '@supabase/ui'
import Link from 'next/link'
function ExampleCard(props: any) {
www/components/FeatureColumn.tsx
+1 -3
View File
@@ -1,12 +1,10 @@
import { Typography } from '@supabase/ui'
function FeatureColumn({ icon, title, text }: any) {
return (
<>
<p>
<p>{icon}</p>
</p>
<Typography.Title level={4}>{title}</Typography.Title>
<h4>{title}</h4>
<p>
<p>{text}</p>
</p>
www/components/Features/index.tsx
+2 -4
View File
@@ -1,4 +1,4 @@
import { Button, Badge, Typography, IconArrowRight } from '@supabase/ui'
import { Button, Badge, IconArrowRight } from '@supabase/ui'
import SectionHeader from 'components/UI/SectionHeader'
import Solutions from 'data/Solutions.json'
import Link from 'next/link'
@@ -30,9 +30,7 @@ const Features = () => {
return (
<SectionContainer className="pb-0">
<Typography.Title level={2} className="mb-16">
Build faster and focus on your products
</Typography.Title>
<h2 className="mb-16">Build faster and focus on your products</h2>
<dl className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 md:grid-cols-2 lg:grid-cols-4 md:gap-16 lg:gap-x-8 xl:gap-x-24">
{IconSections}
</dl>
www/components/Hero.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Button, IconBookOpen, Space, Typography } from '@supabase/ui'
import { Button, IconBookOpen, Space } from '@supabase/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import SectionContainer from './Layouts/SectionContainer'
www/components/Nav/Developers.tsx
+2 -5
View File
@@ -2,7 +2,6 @@ import React from 'react'
import DevelopersData from 'data/Developers.json'
import AnnouncementsData from 'data/Announcements.json'
import { useRouter } from 'next/router'
import { Typography } from '@supabase/ui'
type Props = {
text: string
@@ -33,7 +32,7 @@ const Developers = () => {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icon} />
</svg>
<div className="ml-4">
<Typography.Title level={5}>{text}</Typography.Title>
<h5>{text}</h5>
<p>
<p>{description}</p>
</p>
@@ -81,9 +80,7 @@ const Developers = () => {
/>
</div>
<div className="min-w-0 flex-1 sm:ml-8">
<Typography.Title level={5} className="mb-0">
{caseStudy.title}
</Typography.Title>
<h5 className="mb-0">{caseStudy.title}</h5>
<p>{caseStudy.description}</p>
</div>
</a>
www/components/Nav/Product.tsx
+3 -7
View File
@@ -3,7 +3,7 @@ import SolutionsData from 'data/Solutions.json'
import CaseStudiesData from 'data/CaseStudies.json'
import { useRouter } from 'next/router'
import ProductIcon from '../ProductIcon'
import { Typography, Badge } from '@supabase/ui'
import { Badge } from '@supabase/ui'
const Product = () => {
const { basePath } = useRouter()
@@ -16,9 +16,7 @@ const Product = () => {
<div className="flex flex-row items-center">
<ProductIcon icon={icon} />
<div>
<Typography.Title level={5} className="ml-3 mb-0">
{name}
</Typography.Title>
<h5 className="ml-3 mb-0">{name}</h5>
</div>
</div>
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
@@ -73,9 +71,7 @@ const Product = () => {
/>
</div>
<div className="min-w-0 flex-1 sm:ml-8">
<Typography.Title level={5} className="mb-0">
{caseStudy.title}
</Typography.Title>
<h5 className="mb-0">{caseStudy.title}</h5>
<p>{caseStudy.description}</p>
</div>
</a>
www/components/PricingTableRow.tsx
+3 -7
View File
@@ -1,6 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { IconHelpCircle, IconWatch, Space, Typography } from '@supabase/ui'
import { IconHelpCircle, IconWatch, Space } from '@supabase/ui'
import ReactTooltip from 'react-tooltip'
import ProductIcon from 'components/ProductIcon'
@@ -53,9 +53,7 @@ export const PricingTableRowDesktop = (props: any) => {
>
<Space size={4}>
{props.icon && <ProductIcon icon={props.icon} />}
<Typography.Title className="m-0" level={4}>
{category.title}
</Typography.Title>
<h4 className="m-0">{category.title}</h4>
</Space>
</th>
<td className="pricing-table__product-row bg-gray-50 dark:bg-scale-300 py-5 px-6"></td>
@@ -112,9 +110,7 @@ export const PricingTableRowMobile = (props: any) => {
<caption className="bg-gray-50 dark:bg-dark-900 border-t border-gray-200 dark:border-gray-600 py-3 px-4 text-sm font-medium text-gray-900 dark:text-white text-left">
<Space size={4}>
{category.icon ? <ProductIcon icon={props.icon} /> : null}
<Typography.Title className="m-0" level={4}>
{category.title}
</Typography.Title>
<h4 className="m-0">{category.title}</h4>
</Space>
</caption>
<thead>
www/components/Quote.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Space, Typography } from '@supabase/ui'
import { Space } from '@supabase/ui'
import React from 'react'
interface Props {
www/components/Sections/APISection.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { useState } from 'react'
// Import Swiper React components
import { Button, IconArrowUpRight, Tabs, Typography } from '@supabase/ui'
import { Button, IconArrowUpRight, Tabs } from '@supabase/ui'
import { Swiper, SwiperSlide } from 'swiper/react'
import CodeBlock from '../CodeBlock/CodeBlock'
import Link from 'next/link'
@@ -35,7 +35,7 @@ function APISection(props: Props) {
return (
<div className="grid grid-cols-12 lg:gap-16">
<div className="col-span-12 lg:col-span-5 xl:col-span-5 pb-8">
<Typography.Title level={2}>{props.title}</Typography.Title>
<h2>{props.title}</h2>
<p>{props.text}</p>
{props.documentation_link && (
<Link href={props.documentation_link} as={props.documentation_link}>
www/components/Sections/FeatureSection.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { IconDatabase, Typography } from '@supabase/ui'
import { IconDatabase } from '@supabase/ui'
const FeatureSection = (props: any) => {
return (
@@ -7,7 +7,7 @@ const FeatureSection = (props: any) => {
<p className="mb-4">
<IconDatabase />
</p>
<Typography.Title level={4}>Write less code</Typography.Title>
<h4>Write less code</h4>
<p>
<p className="lg:text-lg">
Use media in your project without needing to reply on external services or learn new
@@ -23,7 +23,7 @@ const FeatureSection = (props: any) => {
<p className="mb-4">
<IconDatabase />
</p>
<Typography.Title level={4}>Blazing fast</Typography.Title>
<h4>Blazing fast</h4>
<p>
<p className="lg:text-lg">
Use media in your project without needing to reply on external services or learn new
@@ -39,7 +39,7 @@ const FeatureSection = (props: any) => {
<p className="mb-4">
<IconDatabase />
</p>
<Typography.Title level={4}>Dependable</Typography.Title>
<h4>Dependable</h4>
<p>
<p className="lg:text-lg">
Use media in your project without needing to reply on external services or learn new
www/components/Sections/GithubExamples.tsx
+2 -12
View File
@@ -7,15 +7,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination } from 'swiper'
import Link from 'next/link'
import {
Button,
Typography,
IconGitHub,
IconArrowLeft,
IconArrowRight,
Space,
IconBookOpen,
} from '@supabase/ui'
import { Button, IconGitHub, IconArrowLeft, IconArrowRight, IconBookOpen } from '@supabase/ui'
import Examples from '../../data/Examples.json'
import ExampleCard from '../ExampleCard'
@@ -34,9 +26,7 @@ function GithubExamples() {
<>
<div className="grid grid-cols-12">
<div className="col-span-12 text-center">
<Typography.Title level={2}>
Community driven examples, libraries and guides
</Typography.Title>
<h2>Community driven examples, libraries and guides</h2>
<p className="block mb-6">
<p className="text-base lg:text-lg">
Supported by a network of early advocates, contributors, and champions.
www/components/Sections/ProductHeader.tsx
+4 -6
View File
@@ -1,4 +1,4 @@
import { Button, IconBookOpen, IconKey, Space, Typography } from '@supabase/ui'
import { Button, IconBookOpen, IconKey, Space } from '@supabase/ui'
import Link from 'next/link'
import ProductIcon from '../ProductIcon'
@@ -21,15 +21,13 @@ const ProductHeader = (props: Types) => (
<div className="flex flex-row mb-4 item-center">
{props.icon && <ProductIcon icon={props.icon} />}
{props.title && (
<Typography.Title level={4} className="ml-3" key={`product-name-${props.title}`}>
<h4 className="ml-3" key={`product-name-${props.title}`}>
{props.title}
</Typography.Title>
</h4>
)}
</div>
) : null}
<Typography.Title level={1} key={`h1`}>
{props.h1}
</Typography.Title>
<h1 key={`h1`}>{props.h1}</h1>
{props.subheader && (
<p>
{props.subheader.map((subheader, i) => {
www/components/TweetCard.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { IconTwitter, Typography } from '@supabase/ui'
import { IconTwitter } from '@supabase/ui'
import Image from 'next/image'
interface TweetCard {
www/components/UI/SectionHeader.tsx
+2 -4
View File
@@ -1,5 +1,3 @@
import { Typography } from '@supabase/ui'
const SectionHeader = (props: any) => {
return (
<div className={'grid grid-cols-12 gap-1 sm:gap-8 ' + props.className}>
@@ -8,12 +6,12 @@ const SectionHeader = (props: any) => {
<span className="col-span-12 block mb-6 text-sm tracking-widest uppercase text-gray-300 font-mono dark:text-gray-300">
{props.subtitle}
</span>
<Typography.Title level={2}>
<h2>
<span>{props.title}</span>
{props.title_alt && (
<span className="text-gray-400 dark:text-gray-300 inline">{props.title_alt}</span>
)}
</Typography.Title>
</h2>
</div>
<div className="col-span-12 lg:col-span-7">
{props.paragraph && (
www/data/Community.tsx
-1
View File
@@ -1,4 +1,3 @@
import { Card, Space, Typography } from '@supabase/ui'
import DeveloperSignups from 'data/DeveloperSignups'
type CommunityItem = {
www/data/Team.tsx
-3
View File
@@ -1,6 +1,3 @@
import { Card, Space, Typography } from '@supabase/ui'
import DeveloperSignups from 'data/DeveloperSignups'
type TeamMember = {
name: string
img: string
www/pages/404.tsx
+4 -5
View File
@@ -1,8 +1,7 @@
import { NextPage } from 'next'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import Link from 'next/link'
import { Button, Typography } from '@supabase/ui'
import { Button } from '@supabase/ui'
import DefaultLayout from '../components/Layouts/Default'
@@ -42,14 +41,14 @@ const Error404 = () => {
</nav>
</div>
<div className="absolute">
<Typography.Title
<h1
className={`select-none filter transition opacity-[5%] duration-200 ${
show404 ? 'blur-sm' : 'blur-none'
}`}
style={{ fontSize: '28rem' }}
>
404
</Typography.Title>
</h1>
</div>
<div
className={`transition flex flex-col space-y-6 items-center justify-center ${
@@ -57,7 +56,7 @@ const Error404 = () => {
}`}
>
<div className="w-[320px] flex flex-col items-center justify-center space-y-3">
<Typography.Title level={3}>Looking for something? 🔍</Typography.Title>
<h3>Looking for something? 🔍</h3>
<p className="text-center">We couldn't find the page that you're looking for!</p>
</div>
<div className="flex items-center space-x-4">
www/pages/auth/Auth.tsx
+5 -7
View File
@@ -128,7 +128,7 @@ function AuthPage() {
})}
</div>
</p>
<Typography.Title level={4}>All the social providers</Typography.Title>
<h4>All the social providers</h4>
<p>
<p className="text-base">
Enable social logins with the click of a button. Google, Facebook, GitHub, Azure,
@@ -142,7 +142,7 @@ function AuthPage() {
<IconLink />
</p>
</p>
<Typography.Title level={4}>Fully integrated</Typography.Title>
<h4>Fully integrated</h4>
<p>
<p className="text-base">
Incredibly simple Auth, without a single external authentication service. Built-in
@@ -156,7 +156,7 @@ function AuthPage() {
<IconShield />
</p>
</p>
<Typography.Title level={4}>Own your data</Typography.Title>
<h4>Own your data</h4>
<p>
<p className="text-base">
User data stored in your Supabase database so you never have to worry about 3rd
@@ -227,7 +227,7 @@ function AuthPage() {
<SectionContainer>
<div className="grid grid-cols-12 lg:gap-16">
<div className="col-span-12 lg:col-span-5 mb-8">
<Typography.Title level={2}>User permissions without the middleware</Typography.Title>
<h2>User permissions without the middleware</h2>
<p>
<p className="text-base lg:text-lg">
Supabase Auth works without any additional servers. Build Authorization rules with
@@ -269,9 +269,7 @@ function AuthPage() {
<img className="w-8" src={`${basePath}/images/product/auth/react-icon.svg`} />
</Space>
<Typography.Title level={2} className="mb-4">
React Auth
</Typography.Title>
<h2 className="mb-4">React Auth</h2>
<p>
<p className="text-base lg:text-lg">
Pre-built auth widgets to get started in minutes.
www/pages/blog.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { getSortedPosts, getAllCategories } from '~/lib/posts'
import authors from 'lib/authors.json'
import DefaultLayout from '~/components/Layouts/Default'
import { Typography, Tabs } from '@supabase/ui'
import { Tabs } from '@supabase/ui'
import PostTypes from '~/types/post'
import BlogListItem from '~/components/Blog/BlogListItem'
@@ -149,7 +149,7 @@ function FeaturedThumb(blog: PostTypes) {
</div>
<div>
<Typography.Title level={2}>{blog.title}</Typography.Title>
<h2>{blog.title}</h2>
<p className="m-0" type="secondary">
<span className="text-xl">{blog.description}</span>
</p>
www/pages/blog/[year]/[month]/[day]/[slug].tsx
+10 -10
View File
@@ -1,4 +1,4 @@
import { Badge, Card, Divider, IconChevronLeft, IconFile, Space, Typography } from '@supabase/ui'
import { Badge, Card, Divider, IconChevronLeft, IconFile, Space } from '@supabase/ui'
import matter from 'gray-matter'
import authors from 'lib/authors.json'
import hydrate from 'next-mdx-remote/hydrate'
@@ -107,7 +107,7 @@ function BlogPostPage(props: any) {
<p>{label}</p>
</div>
<div>
<Typography.Title level={4}>{post.title}</Typography.Title>
<h4>{post.title}</h4>
<p>{post.date}</p>
</div>
<div>
@@ -137,11 +137,11 @@ function BlogPostPage(props: any) {
</div>
<div>
<p>Table of contents</p>
<Typography>
<div>
<div className={blogStyles['toc']}>
<ReactMarkdown plugins={[gfm]}>{props.blog.toc.content}</ReactMarkdown>
</div>
</Typography>
</div>
</div>
</Space>
)
@@ -202,8 +202,8 @@ function BlogPostPage(props: any) {
{/* Title and description */}
<div className="mb-16 space-y-8 max-w-5xl">
<div className="space-y-4">
<p type="success">Blog post</p>
<Typography.Title>{props.blog.title}</Typography.Title>
<p className="text-brand-900">Blog post</p>
<h1>{props.blog.title}</h1>
<div className="flex space-x-3">
<p>{props.blog.date}</p>
<p>•</p>
@@ -241,8 +241,8 @@ function BlogPostPage(props: any) {
style={{ maxHeight: '520px' }}
/>
)}
<article className={blogStyles['article']}>
<Typography>{content}</Typography>
<article className={[blogStyles['article'], 'prose'].join(' ')}>
{content}
</article>
<div className="text-gray-900 dark:text-white">Share with your friends</div>
<div className="flex space-x-4 mt-4">
@@ -384,9 +384,9 @@ function BlogPostPage(props: any) {
<Space direction="vertical" size={8} className="lg:mb-16 lg:top-16 lg:sticky">
<div className="hidden lg:block">{toc}</div>
<div>
<Typography.Title className="mb-4" level={5}>
<h5 className="mb-4">
Related articles
</Typography.Title>
</h5>
<Space direction="vertical">
{props.relatedPosts.map((post: any) => (
<Link href={`/blog/${post.url}`} as={`/blog/${post.url}`}>
www/pages/blog/tags/[tag].tsx
-2
View File
@@ -5,8 +5,6 @@ import Link from 'next/link'
import DefaultLayout from '~/components/Layouts/Default'
import BlogListItem from '~/components/Blog/BlogListItem'
import PostTypes from '~/types/post'
import BlogHeader from '~/components/Blog/BlogHeader'
import { Typography } from '@supabase/ui'
export async function getStaticProps({ params }: any) {
const posts = getSortedPosts('_blog', 0, [params.tag])
www/pages/brand-assets.tsx
+9 -14
View File
@@ -1,17 +1,14 @@
import Container from 'components/Container'
import { createClient } from '@supabase/supabase-js'
import Layout from '~/components/Layouts/Default'
import CTABanner from 'components/CTABanner/index'
import { Button, Typography, IconDownload } from '@supabase/ui'
import { Button, IconDownload } from '@supabase/ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import SectionContainer from '~/components/Layouts/SectionContainer'
import { NextSeo } from 'next-seo'
const { Title, Text } = Typography
const Index = () => {
// base path for images
const router = useRouter()
@@ -39,14 +36,12 @@ const Index = () => {
<Container>
<SectionContainer className="pb-0 md:pb-0 lg:pb-0">
<div className="grid lg:grid-cols-2">
<div>
<Title>Brand assets</Title>
<Title level={3}>Download official Supabase logos</Title>
<Text>
All Supabase trademarks, logos, or other brand elements can never be modified or
used for any other purpose other than to represent Supabase Inc.
</Text>
</div>
<h1>Brand assets</h1>
<h3>Download official Supabase logos</h3>
<p>
All Supabase trademarks, logos, or other brand elements can never be modified or
used for any other purpose other than to represent Supabase Inc.
</p>
</div>
</SectionContainer>
<SectionContainer>
@@ -61,7 +56,7 @@ const Index = () => {
<div className="col-span-12 lg:col-span-7 flex items-center">
<div className="p-16">
<div>
<Typography.Title level={2}>Supabase logos</Typography.Title>
<h2>Supabase logos</h2>
<p>
<p>
Download Supabase official logos, including as SVG's, in both light and dark
www/pages/company.tsx
+10 -21
View File
@@ -24,7 +24,6 @@ import {
IconLinkedin,
IconTwitter,
Space,
Typography,
} from '@supabase/ui'
import { NextSeo } from 'next-seo'
@@ -76,9 +75,7 @@ const Header = () => {
mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24
text-center"
>
<Typography.Title>
Join one of the world's fastest growing open source communities.
</Typography.Title>
<h1>Join one of the world's fastest growing open source communities.</h1>
</div>
</>
)
@@ -133,9 +130,9 @@ const Team = () => {
</div>
<div className="flex flex-col justify-center space-y-2">
<div>
<Typography.Title level={5} className="mb-0">
<h5 className="mb-0">
{x.name}
</Typography.Title>
</h5>
<p className="mb-0">
{x.department}
</p>
@@ -216,9 +213,7 @@ const Community = () => {
/>
</div>
<div>
<Typography.Title level={1} className="mb-0">
{x.stat}
</Typography.Title>
<h1 className="mb-0">{x.stat}</h1>
<p>{x.statLabel}</p>
</div>
</div>
@@ -283,7 +278,7 @@ const Investors = () => {
</div>
))}
</div>
<Typography.Title level={3}>Individual investors</Typography.Title>
<h3>Individual investors</h3>
<div className="mt-5 mx-auto grid gap-5 grid-cols-2 lg:grid-cols-4 lg:max-w-none">
{InvestorData.filter((x) => x.lead === false)
.sort((a, b) => a.name.localeCompare(b.name))
@@ -293,9 +288,7 @@ const Investors = () => {
<div className="flex flex-col justify-center space-y-2">
<div>
<Typography.Title level={5} className="mb-0">
{x.name}
</Typography.Title>
<h5 className="mb-0">{x.name}</h5>
<p className="mb-0">{x.title}</p>
</div>
</div>
@@ -318,10 +311,8 @@ const Press = () => {
<Card key={`press_${x.href}`} hoverable>
<Space className="justify-between h-40" direction="vertical">
<div>
<p small type="secondary">
{x.type.toUpperCase()}
</p>
<Typography.Title level={3}>{x.title}</Typography.Title>
<p>{x.type.toUpperCase()}</p>
<h3>{x.title}</h3>
</div>
</Space>
</Card>
@@ -334,10 +325,8 @@ const Press = () => {
<Card key={`press_${x.href}`} hoverable>
<Space className="justify-between h-40" direction="vertical">
<div>
<p small type="secondary">
{x.type.toUpperCase()}
</p>
<Typography.Title level={3}>{x.title}</Typography.Title>
<p>{x.type.toUpperCase()}</p>
<h3>{x.title}</h3>
</div>
</Space>
</Card>
www/pages/database/Database.tsx
+6 -15
View File
@@ -1,13 +1,4 @@
import {
Badge,
Button,
IconArrowUpRight,
IconShuffle,
IconX,
Space,
Tabs,
Typography,
} from '@supabase/ui'
import { Badge, Button, IconArrowUpRight, IconShuffle, IconX, Space, Tabs } from '@supabase/ui'
// data
import ApiExamplesData from 'data/products/database/api-examples'
import ExtensionsExamplesData from 'data/products/database/extensions-examples'
@@ -122,7 +113,7 @@ function Database() {
</Space>
</p>
</p>
<Typography.Title level={4}>Just Postgres</Typography.Title>
<h4>Just Postgres</h4>
<p>
<p className="text-base lg:text-lg">
Every Supabase project is a dedicated Postgres database.
@@ -142,7 +133,7 @@ function Database() {
</Space>
</p>
</p>
<Typography.Title level={4}>Built-in Auth</Typography.Title>
<h4>Built-in Auth</h4>
<p>
<p className="text-base lg:text-lg">
Leveraging PostgreSQL's proven Row Level Security.
@@ -163,7 +154,7 @@ function Database() {
</Space>
</p>
</p>
<Typography.Title level={4}>Realtime enabled</Typography.Title>
<h4>Realtime enabled</h4>
<p>
<p className="text-base lg:text-lg">Data-change listeners over websockets.</p>
<p>Subscribe and react to database changes, milliseconds after they happen.</p>
@@ -176,7 +167,7 @@ function Database() {
<SectionContainer className="text-center md:pb-0 lg:pb-0">
<div className="grid grid-cols-12">
<div className="col-span-12 lg:col-span-8 lg:col-start-3">
<Typography.Title level={2}>Easy to use dashboard</Typography.Title>
<h2>Easy to use dashboard</h2>
<p>
<p className="text-base lg:text-lg">
The simplicity of a Table Editor, or the power of a SQL editor. Your choice.
@@ -320,7 +311,7 @@ function Database() {
<SectionContainer className="lg:py-48">
<div className="grid grid-cols-12 lg:gap-16">
<div className="col-span-12 lg:col-span-6 xl:col-span-5 mb-8">
<Typography.Title level={2}>Extend your database</Typography.Title>
<h2>Extend your database</h2>
<p className="block mb-8">
<p className="lg:text-lg">Supabase works natively with Postgres extensions.</p>
<p>
www/pages/pricing/index.tsx
+12 -14
View File
@@ -4,7 +4,7 @@ import Link from 'next/link'
import DefaultLayout from '~/components/Layouts/Default'
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/PricingTableRow'
import { Accordion, Badge, Button, Divider, Space, Typography } from '@supabase/ui'
import { Accordion, Button } from '@supabase/ui'
import pricing from '~/data/Pricing.json'
import pricingFaq from '~/data/PricingFAQ.json'
@@ -40,7 +40,7 @@ export default function IndexPage() {
<div className="bg-white dark:bg-gray-800">
<div className="container mx-auto px-6 lg:px-16 xl:px-20 relative pt-24 md:pt-24 lg:pt-24">
<div className="text-center">
<Typography.Title>Predictable pricing, no surprises</Typography.Title>
<h1>Predictable pricing, no surprises</h1>
<p>
<p className="text-lg">
Start with a hobby project, collaborate with a team, and scale to millions of users.
@@ -51,9 +51,9 @@ export default function IndexPage() {
<div className="rounded border border-green-500 dark:border-green-900 bg-green-500 bg-opacity-10 grid grid-cols-6">
<div className="p-6 col-span-6">
<Space className="mb-4">
<Typography.Title level={3} className="flex gap-2">
<h3 className="flex gap-2">
Special Beta Pricing
</Typography.Title>
</h3>
<Badge dot>Limited time offer</Badge>
</Space>
<p>
@@ -71,7 +71,7 @@ export default function IndexPage() {
className="col-span-6 h-30 object-cover"
/>
<div className="p-6 lg:col-span-6">
<Typography.Title level={4}>Free tshirt</Typography.Title>
<h4>Free tshirt</h4>
<p>
We are giving away free tshirts to anyone who signs up for the Beta Pro plan
</p>
@@ -223,7 +223,7 @@ export default function IndexPage() {
className=" bg-white dark:bg-gray-800 w-1/4 pb-4 px-6 text-left font-medium"
scope="col"
>
<Typography.Title level={4}>Free</Typography.Title>
<h4>Free</h4>
<div
className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
style={{ height: '1px' }}
@@ -234,7 +234,7 @@ export default function IndexPage() {
className=" bg-white dark:bg-gray-800 w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left"
scope="col"
>
<Typography.Title level={4}>Pro</Typography.Title>
<h4>Pro</h4>
<div
className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
style={{ height: '1px' }}
@@ -245,7 +245,7 @@ export default function IndexPage() {
className=" bg-white dark:bg-gray-800 w-1/4 pb-4 px-6 text-lg leading-6 font-medium text-gray-900 text-left"
scope="col"
>
<Typography.Title level={4}>Pay as you go</Typography.Title>
<h4>Pay as you go</h4>
<div
className="absolute bottom-0 left-0 h-0.25 w-full bg-gray-200 dark:bg-scale-300"
style={{ height: '1px' }}
@@ -391,11 +391,11 @@ export default function IndexPage() {
<div className="bg-gray-50 dark:bg-gray-800 border-t dark:border-gray-600">
<div className="container mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24">
<Typography.Title level={2}>Frequently asked questions</Typography.Title>
<Typography className="w-5/12 mb-4">
<h2>Frequently asked questions</h2>
<h1 className="w-5/12 mb-4">
Can&apos;t find the answer to your question, ask someone in the community either on our
Discord or GitHub.
</Typography>
</h1>
<Link href="https://discord.supabase.com">
<a>
<Button type="default" className="mr-2" size="small">
@@ -416,9 +416,7 @@ export default function IndexPage() {
{/* @ts-ignore */}
<Accordion type="bordered" openBehaviour="multiple" size="medium">
<Accordion.Item header={faq.question} id={`faq--${i.toString()}`}>
<Typography>
<ReactMarkdown>{faq.answer}</ReactMarkdown>
</Typography>
<ReactMarkdown>{faq.answer}</ReactMarkdown>
</Accordion.Item>
</Accordion>
</div>
www/pages/storage/Storage.tsx
+8 -21
View File
@@ -1,15 +1,4 @@
import {
Badge,
Button,
IconArrowUpRight,
IconBarChart,
IconCheckSquare,
IconShuffle,
IconWifi,
IconX,
Space,
Typography,
} from '@supabase/ui'
import { Badge, Button, IconArrowUpRight, IconShuffle, IconWifi, IconX, Space } from '@supabase/ui'
import ApiExamples from 'data/products/storage/api-examples'
import DashboardViewData from 'data/products/storage/dashboard-carousel.json'
import StoragePermissionsData from 'data/products/storage/permissions-examples'
@@ -104,7 +93,7 @@ function StoragePage() {
</Space>
</p>
</p>
<Typography.Title level={4}>Interoperable</Typography.Title>
<h4>Interoperable</h4>
<p>
<p className="text-lg">
Integrates well with the rest of Supabase ecosystem, including Auth and Postgres.
@@ -127,7 +116,7 @@ function StoragePage() {
</Space>
</p>
</p>
<Typography.Title level={4}>Lightning fast</Typography.Title>
<h4>Lightning fast</h4>
<p>
<p className="text-lg">
Thin API server layer that leverages Postgres' permissions and performance.
@@ -150,7 +139,7 @@ function StoragePage() {
</Space>
</p>
</p>
<Typography.Title level={4}>Dependable</Typography.Title>
<h4>Dependable</h4>
<p>
<p className="text-lg">Enterprise-level scalability and durability.</p>
{/* <p>A durability rating of 99.999999999%.</p> */}
@@ -161,7 +150,7 @@ function StoragePage() {
<SectionContainer className="pt-16">
<div className="mb-16 block">
<Typography.Title>Sleek dashboard for managing your media</Typography.Title>
<h1>Sleek dashboard for managing your media</h1>
<p>
<p className="text-lg">
A complete Object Explorer so that any of your team can use.
@@ -176,9 +165,7 @@ function StoragePage() {
// @ts-ignore
content={DashboardViewData}
footer={[
<Typography.Title level={4} key="title">
Check out our example app
</Typography.Title>,
<h4 key="title">Check out our example app</h4>,
// !! Update this example !!
<ExampleCard
key="example"
@@ -254,10 +241,10 @@ function StoragePage() {
<SectionContainer>
<div className="grid grid-cols-12 lg:gap-16">
<div className="col-span-12 lg:col-span-5 mb-8">
<Typography.Title level={2}>
<h2>
Integrates natively <br />
with Supabase Auth
</Typography.Title>
</h2>
<p>
<p className="">
Using Postgres Row Level Security to create Object access rules.
www/pages/support.tsx
+4 -11
View File
@@ -11,7 +11,6 @@ import {
IconX,
Space,
Tabs,
Typography,
IconGitHub,
Divider,
IconMail,
@@ -61,7 +60,7 @@ const Index = ({}: Props) => {
<Container>
<SectionContainer className="">
<div className="text-center">
<Typography.Title level={2}>Get Support</Typography.Title>
<h2>Get Support</h2>
<p>
<p className="lg:text-lg">
Need a bit of help? We're here for you. Check out our current issues, GitHub
@@ -80,9 +79,7 @@ const Index = ({}: Props) => {
"
>
<div className="mb-4">
<Typography.Title level={5} className="mb-1">
GitHub Issues
</Typography.Title>
<h5 className="mb-1">GitHub Issues</h5>
<p className="block">
<p>
Have a general issue or bug that you've found? We'd love to hear about it in
@@ -129,9 +126,7 @@ const Index = ({}: Props) => {
"
>
<div className="mb-4">
<Typography.Title level={5} className="mb-1">
GitHub Discussions
</Typography.Title>
<h5 className="mb-1">GitHub Discussions</h5>
<p className="block">
<p>
For help and questions about best practices, join our GitHub discussions.
@@ -179,9 +174,7 @@ const Index = ({}: Props) => {
"
>
<div className="mb-4">
<Typography.Title level={5} className="mb-1">
Email Support
</Typography.Title>
<h5 className="mb-1">Email Support</h5>
<p className="block">
<p>
We offer email based support. If you need SLAs, guaranteed response times,