diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index fc502585e7a..df352a3f05d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -510,7 +510,7 @@ export const reference_javascript = { export const reference_cli = { icon: '/img/icons/cli-icon.svg', title: 'Supabase CLI', - parent: '/reference', + parent: '/', items: [ { name: 'Getting Started', @@ -561,3 +561,71 @@ export const reference_cli = { // 'reference/auth': AuthServerNav, // 'reference/storage': StorageServerNav, // ] + +export const references = [ + { + label: 'Client libraries', + items: [ + { + label: 'supabase-js', + versions: ['v2', 'v1'], + description: 'something about the reference', + icon: '/docs/img/icons/javascript-icon.svg', + url: '/new/reference/javascript/start', + }, + { + label: 'supabase-py', + description: 'something about the reference', + icon: '/docs/img/icons/python-icon.svg', + url: '/new/reference/python/start', + }, + { + label: 'supabase-dart', + versions: ['v1', 'v0'], + description: 'something about the reference', + icon: '/docs/img/icons/dart-icon.svg', + url: '/new/reference/dart/start', + }, + ], + }, + { + label: 'Platform Tools', + items: [ + { + label: 'CLI', + description: 'something about the reference', + icon: '/docs/img/icons/cli-icon.svg', + url: '/new/reference/cli/start', + }, + { + label: 'Management API', + description: 'something about the reference', + icon: '/docs/img/icons/api-icon.svg', + url: '/new/reference/management-api/start', + }, + ], + }, + { + label: 'Self Hosting', + items: [ + { + label: 'Auth server', + description: 'something about the reference', + icon: '/docs/img/icons/menu/auth.svg', + url: '/reference/auth/start', + }, + { + label: 'Storage server', + description: 'something about the reference', + icon: '/docs/img/icons/menu/storage.svg', + url: '/reference/storage/start', + }, + { + label: 'Realtime server', + description: 'something about the reference', + icon: '/docs/img/icons/menu/realtime.svg', + url: '/reference/realtime/start', + }, + ], + }, +] diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx index ebc412e7175..98080ca5025 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx @@ -142,6 +142,56 @@ const SideNav = () => { level: 'platform', }, ], + [ + { + label: 'Javascript Client', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'supabase-py', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'supabase-dart', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'Mangement API', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'CLI', + icon: 'api.svg', + href: '/new/reference/cli/start', + level: 'reference_javascript', + }, + { + label: 'Auth server', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'Storage server', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + { + label: 'Realtime server', + icon: 'api.svg', + href: '/new/reference/javascript/start', + level: 'reference_javascript', + }, + ], ] return ( diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx index 557a38c8f27..a9f2a4d766b 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx @@ -125,7 +125,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { - Back to reference + Back to menu
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx index 68dae8beacb..976bef2305e 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx @@ -1,11 +1,12 @@ import Link from 'next/link' import { useRouter } from 'next/router' -import { IconChevronLeft } from 'ui' +import { IconChevronLeft, IconCommand, IconSearch } from 'ui' import * as NavItems from './NavigationMenu.constants' // @ts-expect-error import jsSpec from '~/../../spec/supabase_js_v2_temp_new_shape.yml' assert { type: 'yml' } // @ts-expect-error import clientLibsCommon from '~/../../spec/common-client-libs.yml' assert { type: 'yml' } +import { SearchButton } from '~/components/DocSearch' const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => { const router = useRouter() @@ -82,6 +83,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => { ].join(' ')} >
+ {/* {process.env.NEXT_PUBLIC_EXPERIMENTAL_REF !== 'true' && ( */} { Back to reference -
- - -

- {menu.title ?? currentLevel} -

-
-
    + {/* )} */} + {process.env.NEXT_PUBLIC_EXPERIMENTAL_REF !== 'true' && ( +
    + +

    + supabase-js +

    +
    + )} +
      diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx new file mode 100644 index 00000000000..cbd6b0d3bf8 --- /dev/null +++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx @@ -0,0 +1,319 @@ +import Image from 'next/image' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { FC, useEffect, useState } from 'react' +import { + Badge, + Button, + Dropdown, + IconCommand, + IconMenu, + IconMessageSquare, + IconMoon, + IconSearch, + IconSun, + Input, + Listbox, +} from 'ui' +import { SearchButton } from '~/components/DocSearch' +import { REFERENCES } from '~/components/Navigation/Navigation.constants' +import { useTheme } from '~/components/Providers' + +import { getPageType } from '~/lib/helpers' + +const TopNavBarRef: FC = () => { + const { isDarkMode, toggleTheme } = useTheme() + const [mounted, setMounted] = useState(false) + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) + + const { asPath, push } = useRouter() + const pathSegments = asPath.split('/') + + const library = pathSegments.length >= 3 ? pathSegments[2] : undefined + const libraryMeta = REFERENCES?.[library] ?? undefined + const versions = libraryMeta?.versions ?? [] + + const version = versions.includes(pathSegments[pathSegments.indexOf(library) + 1]) + ? pathSegments[pathSegments.indexOf(library) + 1] + : versions[0] + + const pageType = getPageType(asPath) + + useEffect(() => { + setMounted(true) + }, [isDarkMode]) + + const pageLinks = [ + { text: 'Guides', key: 'docs', link: '/' }, + { text: 'Reference', key: 'reference', link: '/reference' }, + ] + + const toggleDarkMode = () => { + localStorage.setItem('supabaseDarkMode', (!isDarkMode).toString()) + toggleTheme() + + const key = localStorage.getItem('supabaseDarkMode') + document.documentElement.className = key === 'true' ? 'dark' : '' + } + + const onSelectVersion = (version: string) => { + // [Joshen] Ideally we use but this works for now + if (!library) return + if (version === versions[0]) { + push(`/reference/${library}`) + } else { + push(`/reference/${library}/${version}`) + } + } + + // [Joshen] Kaizen: Use UI library's SidePanel for this + const toggleMobileMenu = () => { + setMobileMenuOpen(!mobileMenuOpen) + const sidebar = document.querySelector('.sidebar-menu-container') + const contentPane = document.querySelector('.main-content-pane') + + sidebar.classList.toggle('hidden') + contentPane.classList.toggle('hidden') + } + + return ( + + ) +} +export default TopNavBarRef diff --git a/apps/docs/components/Navigation/RefSwitcher.tsx b/apps/docs/components/Navigation/RefSwitcher.tsx new file mode 100644 index 00000000000..25a2335da54 --- /dev/null +++ b/apps/docs/components/Navigation/RefSwitcher.tsx @@ -0,0 +1,174 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import { Badge, Dropdown, GlassPanel, IconChevronDown, IconChevronRight, Popover } from 'ui' + +import { references } from './NavigationMenu/NavigationMenu.constants' + +const RefSwitcher = () => { + const router = useRouter() + const [currentRef, setCurrentRef] = useState() + const [open, setOpen] = useState(false) + + useEffect(() => { + setOpen(false) + }, [router.pathname]) + + return ( +
      + setOpen(!open)} + overlay={ + <> + {references.map((section) => { + return ( + <> +
      + + {section.label} + +
      +
      + {section.items.map((item) => { + return ( + + setOpen(!open)} + > +
      + +
      +
      + {item.label} +
      +
      + +
      +
      +
      + {item.description} +
      +
      +       + + ) + })} +
      + + ) + })} + + } + > +
      +
      +
      + +

      + supabase-js +

      +
      +
      + +
      +
      +
      +       + }> +
      +
      +
      +
      +

      + v2.0 +

      +
      +
      + +
      +
      +
      +
      +       +
      + ) +} + +const VersionOverlay = () => { + return ( + <> + Stable releases + + version 2.0 + + Latest + + + Version 1.0 + + Alpha releases + +

      Currently no alpha releases

      +       + + ) +} +export default RefSwitcher diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index 429dc7719e3..11ea6d05433 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -4,8 +4,9 @@ import { useRouter } from 'next/router' import Footer from '~/components/Footer' import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu' import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar' +import SiteRefLayout from './SiteRefLayout' -const Layout = ({ children }) => { +const Layout = (props) => { const router = useRouter() useEffect(() => { @@ -19,7 +20,13 @@ const Layout = ({ children }) => { }, []) if (process.env.NEXT_PUBLIC_NEW_DOCS !== 'true') { - return <>{children} + return <>{props.children} + } + + return SiteRefLayout(props) + + if (process.env.NEXT_PUBLIC_EXPERIMENTAL_REF && router.asPath.includes('/reference/')) { + return SiteRefLayout(props) } return ( @@ -37,7 +44,7 @@ const Layout = ({ children }) => {
- {children} + {props.children}
Supabase 2022 diff --git a/apps/docs/layouts/SiteRefLayout.tsx b/apps/docs/layouts/SiteRefLayout.tsx new file mode 100644 index 00000000000..738ba659b7c --- /dev/null +++ b/apps/docs/layouts/SiteRefLayout.tsx @@ -0,0 +1,81 @@ +import Image from 'next/image' +import Link from 'next/link' +import { useRouter } from 'next/router' +import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu' +import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef' +import { useTheme } from '~/components/Providers' + +import RefSwitcher from '~/components/Navigation/RefSwitcher' + +const SiteRefLayout = ({ children }) => { + const router = useRouter() + const { isDarkMode } = useTheme() + + return ( + <> +
+ {/* */} + +
+
+
+
+ + + Supabase Logo + DOCS + + + {router.asPath.includes('/new/reference/') && } +
+
+
+
+
+ +
+
+
+
+ {/* */} + +
+ +
+
+ {children} +
+
+ Supabase 2022 + — + Contributing + Author Styleguide + Changelog + Opensource + Supasquad +
+
+
+
+
+
+ + ) +} + +export default SiteRefLayout diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx index fccc89c3340..2f5b7a2f5f2 100644 --- a/apps/docs/layouts/ref/RefSubLayout.tsx +++ b/apps/docs/layouts/ref/RefSubLayout.tsx @@ -18,7 +18,14 @@ const RefSubLayout: FC & RefSubLayoutSubComponents = (props) = return (
-
{props.children}
+
+ {props.children} +
) @@ -26,7 +33,7 @@ const RefSubLayout: FC & RefSubLayoutSubComponents = (props) = const Section: FC = (props) => { return ( -
+