diff --git a/DEVELOPERS.md b/DEVELOPERS.md index 5d52ce97bb1..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) @@ -211,6 +213,12 @@ 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 After making your changes to the file(s) you'd like to update, it's time to open a pull request. Once you submit your pull request, others from the Supabase team/community will review it with you. diff --git a/about/src/css/custom.css b/about/src/css/custom.css index dd3295ec8b0..7d12b14f42d 100755 --- a/about/src/css/custom.css +++ b/about/src/css/custom.css @@ -1032,6 +1032,7 @@ h4.method-list-item-label { h4.method-list-item-label .method-list-item-label-name { font-family: var(--ifm-font-family-monospace); font-size: 0.8rem; + margin-right: 4px; padding: var(--ifm-code-padding-vertical) 0; } h4.method-list-item-label .method-list-item-label-badge { 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'} -
+ })} + +
+ )}