diff --git a/.github/workflows/docs-compilation-check.yml b/.github/workflows/docs-compilation-check.yml index aa386f17f3c..ce774357678 100644 --- a/.github/workflows/docs-compilation-check.yml +++ b/.github/workflows/docs-compilation-check.yml @@ -17,7 +17,7 @@ jobs: strategy: matrix: - node-version: [14.x] + node-version: [16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: diff --git a/DEVELOPERS.md b/DEVELOPERS.md index 7b871e48edf..e92a19bdc45 100644 --- a/DEVELOPERS.md +++ b/DEVELOPERS.md @@ -14,6 +14,8 @@ - [Shared components](#shared-components) - [Installing packages](#installing-packages) - [Development](#development) +- [Common Tasks](#common-tasks) + - [Adding redirects](#adding-redirects) - [Finally](#finally) - [Community Channels](#community-channels) @@ -56,7 +58,7 @@ To build Supabase, you clone the source code repository: ### Choosing Directory -Before you start a development server, you must choose if you want to work on the [Supabase Website](https://supabase.com), [Supabase Docs](https://supabase.com/docs), or [Supabase Studio](https://app.supabase.io). +Before you start a development server, you must choose if you want to work on the [Supabase Website](https://supabase.com), [Supabase Docs](https://supabase.com/docs), or [Supabase Studio](https://app.supabase.com). 1. Go to the [Supabase Website](https://supabase.com) directory @@ -70,7 +72,7 @@ Before you start a development server, you must choose if you want to work on th cd web ``` - Go to the [Supabase Studio](https://app.supabase.io) directory + Go to the [Supabase Studio](https://app.supabase.com) directory ```sh cd studio @@ -186,7 +188,6 @@ Then edit and visit any of the following sites: - `/apps/temp-community-tutorials`: http://localhost:3003 - pulls all our DEV articles (which community members can write) into a nextjs site. Temporary/POC - ### Shared components The monorepo has a set of shared components under `/packages`: @@ -194,6 +195,7 @@ The monorepo has a set of shared components under `/packages`: - `/packages/common`: Common React code, shared between all sites. - `/packages/config`: All shared config - `/packages/tsconfig`: Shared Typescript settings + ### Installing packages Installing a package with NPM workspaces requires you to add the `-w` flag to tell NPM which workspace you want to install into. @@ -211,7 +213,11 @@ You do not need to install `devDependencies` in each workspace. These can all be `npm run dev` +## Common Tasks +### Adding Redirects + +To add a redirect, simple create a new entry in the [`next.config.js`](https://github.com/supabase/supabase/blob/master/apps/www/next.config.js) file in our main site. ## Finally diff --git a/README.md b/README.md index 571fbdef34e..d251a2bf678 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md) ## Status - [x] Alpha: We are testing Supabase with a closed set of customers -- [x] Public Alpha: Anyone can sign up over at [app.supabase.io](https://app.supabase.io). But go easy on us, there are a few kinks +- [x] Public Alpha: Anyone can sign up over at [app.supabase.com](https://app.supabase.com). But go easy on us, there are a few kinks - [x] Public Beta: Stable enough for most non-enterprise use-cases - [ ] Public: Production-ready @@ -55,7 +55,7 @@ Supabase is a combination of open source tools. We’re building the features of **Architecture** -Supabase is a [hosted platform](https://app.supabase.io). You can sign up and start using Supabase without installing anything. +Supabase is a [hosted platform](https://app.supabase.com). You can sign up and start using Supabase without installing anything. You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and [develop locally](https://supabase.com/docs/guides/local-development). ![Architecture](https://supabase.com/docs/assets/images/supabase-architecture-9050a7317e9ec7efb7807f5194122e48.png) diff --git a/apps/temp-docs/components/AuthProviders.tsx b/apps/temp-docs/components/AuthProviders.tsx index 65f20a09feb..aa984248e90 100644 --- a/apps/temp-docs/components/AuthProviders.tsx +++ b/apps/temp-docs/components/AuthProviders.tsx @@ -7,7 +7,7 @@ export default function AuthProviders() {
{authProviders.map((x: any) => (
- +

{x.name}

diff --git a/apps/temp-docs/components/CodeBlock/CodeBlock.module.css b/apps/temp-docs/components/CodeBlock/CodeBlock.module.css deleted file mode 100644 index 9dda8e0be0c..00000000000 --- a/apps/temp-docs/components/CodeBlock/CodeBlock.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.code-block::before { - content: ''; - background: #1e1e1e; - height: 10px; - width: 48px; - display: block; -} - -.code-block::after { - content: ''; - background: #1e1e1e; - height: 12px; - width: 48px; - display: block; -} - -.code-block code .linenumber { - margin-right: 4px; -} - -.code-block code::after, -.code-block code::before { - content: none !important; -} diff --git a/apps/temp-docs/components/CodeBlock/CodeBlock.tsx b/apps/temp-docs/components/CodeBlock/CodeBlock.tsx index d8444bac260..df5ead184b6 100644 --- a/apps/temp-docs/components/CodeBlock/CodeBlock.tsx +++ b/apps/temp-docs/components/CodeBlock/CodeBlock.tsx @@ -1,12 +1,12 @@ import { Light as SyntaxHighlighter } from 'react-syntax-highlighter' import monokaiCustomTheme from './CodeBlock.utils' -import CodeBlockStyles from './CodeBlock.module.css' -import { Button, IconCopy } from '@supabase/ui' +import { Button, IconCheck, IconCopy } from '@supabase/ui' import CopyToClipboard from 'react-copy-to-clipboard' import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript' import py from 'react-syntax-highlighter/dist/cjs/languages/hljs/python' import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql' +import { useState } from 'react' interface Props { lang: 'js' | 'sql' | 'py' @@ -18,6 +18,15 @@ interface Props { } function CodeBlock(props: Props) { + const [copied, setCopied] = useState(false) + + const handleCopy = () => { + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 1000) + } + let lang = props.lang ? props.lang : props.className @@ -38,7 +47,7 @@ function CodeBlock(props: Props) { - {props.children} + {props.children?.trimEnd()} {!props.hideCopy && props.children ? (
-
diff --git a/apps/temp-docs/components/Footer.tsx b/apps/temp-docs/components/Footer.tsx index 01b64edd282..a64a96c7668 100644 --- a/apps/temp-docs/components/Footer.tsx +++ b/apps/temp-docs/components/Footer.tsx @@ -1,4 +1,4 @@ -import { Typography } from '@supabase/ui' +import Image from 'next/image' import Link from 'next/link' import footer from '../data/footer.json' import { useTheme } from './Providers' @@ -16,24 +16,35 @@ const Footer = () => {
- + - Supabase
- + Twitter - + GitHub Discord @@ -60,6 +73,8 @@ const Footer = () => { Youtube @@ -78,21 +93,22 @@ const Footer = () => { diff --git a/apps/temp-docs/components/LinkCard.tsx b/apps/temp-docs/components/LinkCard.tsx index 664876d0673..8d2edcd90b1 100644 --- a/apps/temp-docs/components/LinkCard.tsx +++ b/apps/temp-docs/components/LinkCard.tsx @@ -1,27 +1,32 @@ +import Link from 'next/link' import { ReactElement } from 'react' export default function LinkCard({ title, description, icon, + link, }: { title: string description: string icon: ReactElement + link: string }) { return ( -
- {description ? ( - <> -

{title}

-

{description}

- - ) : ( -
- {icon} -

{title}

-
- )} -
+ + + {description ? ( + <> +

{title}

+

{description}

+ + ) : ( +
+ {icon} +

{title}

+
+ )} + + ) } diff --git a/apps/temp-docs/components/Sponsor.tsx b/apps/temp-docs/components/Sponsor.tsx index ff8038df233..f502f1ba56e 100644 --- a/apps/temp-docs/components/Sponsor.tsx +++ b/apps/temp-docs/components/Sponsor.tsx @@ -2,10 +2,12 @@ import Image from 'next/image' export default function Sponsor({ imageUrl, handle }: { imageUrl: string; handle: string }) { return (
- {handle}
{handle}
diff --git a/apps/temp-docs/components/TabPanel.tsx b/apps/temp-docs/components/TabPanel.tsx index 453668972f9..5d18bd9dd44 100644 --- a/apps/temp-docs/components/TabPanel.tsx +++ b/apps/temp-docs/components/TabPanel.tsx @@ -1,7 +1,5 @@ -import { ReactElement } from 'react' import { Tabs } from '@supabase/ui' -export default function TabPanel(props) { - console.log({ props }) +export default function TabPanel(props: { id: string; label: string | undefined; children: any }) { return ( {props.children} diff --git a/apps/temp-docs/components/TabWrapper.tsx b/apps/temp-docs/components/TabWrapper.tsx index 9412b506312..1d3861e9899 100644 --- a/apps/temp-docs/components/TabWrapper.tsx +++ b/apps/temp-docs/components/TabWrapper.tsx @@ -1,10 +1,15 @@ import { Tabs } from '@supabase/ui' -const TabWrapper = (props) => { - console.log('Tab props: ', props) - const { children, ...otherProps } = props - - return {props.children} +const TabWrapper = (props: any) => { + return ( +
+ + + {props.children} + + +
+ ) } export default TabWrapper diff --git a/apps/temp-docs/components/ThemeToggle.tsx b/apps/temp-docs/components/ThemeToggle.tsx index f188036c825..fc88fd28ef4 100644 --- a/apps/temp-docs/components/ThemeToggle.tsx +++ b/apps/temp-docs/components/ThemeToggle.tsx @@ -13,9 +13,12 @@ function DarkModeToggle() { } return ( - ) } diff --git a/apps/temp-docs/components/layouts/Layout.tsx b/apps/temp-docs/components/layouts/Layout.tsx index 4ff31541aac..86beb1d7ddb 100644 --- a/apps/temp-docs/components/layouts/Layout.tsx +++ b/apps/temp-docs/components/layouts/Layout.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useState } from 'react' +import { ReactElement } from 'react' import Head from 'next/head' import NavBar from '../nav/NavBar' import SideBar from '../nav/SideBar' @@ -12,8 +12,8 @@ const DocsLayout = ({ currentPage, }: { meta: { title: string; description: string } - children: string - toc: any + children: ReactElement + toc?: any menuItems: any currentPage: string }) => { @@ -25,7 +25,7 @@ const DocsLayout = ({ {meta?.title} | Supabase - + @@ -40,24 +40,28 @@ const DocsLayout = ({
-
+
-
-
- {children} -
-
-
On this page
- {toc - ? toc.json.map((item: any) => { +
+
+
+ {children} +
+
+ {toc && ( +
+
On this page
+
    + {toc.json.map((item: any, i: number) => { return ( -
  • +
  • {item.content}
    • ) - }) - : 'Please note: No TOC on this page'} -
+ })} + +
+ )}