From 29fe25026e7c10d8f6e5687de0ffa80ca2ca03a1 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Thu, 4 May 2023 23:06:42 -0230 Subject: [PATCH 1/5] Adjust menu item spacing and highlighting, scroll to active menu item on page load --- .../NavigationMenu/NavigationMenuCliList.tsx | 2 +- .../NavigationMenuGuideListItems.tsx | 41 ++++++--- .../NavigationMenuRefListItems.tsx | 85 ++++++++++++------- 3 files changed, 84 insertions(+), 44 deletions(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx index cae120747b8..9c15657d064 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx @@ -22,7 +22,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => { icon?: string }) => { return ( -
  • +
  • {icon && } diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index 22a7d049827..a5ddbec9512 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -2,7 +2,7 @@ import { useTheme } from 'common/Providers' import Image from 'next/image' import Link from 'next/link' import { useRouter } from 'next/router' -import React from 'react' +import React, { useEffect, useRef } from 'react' import { IconChevronLeft } from '~/../../packages/ui' import * as Accordion from '@radix-ui/react-accordion' @@ -43,6 +43,8 @@ const HeaderLink = React.memo(function HeaderLink(props: { const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) { const router = useRouter() const { isDarkMode } = useTheme() + const activeItem = props.subItem.url === router.pathname + const activeItemRef = useRef(null) const LinkContainer = (props) => { return ( @@ -52,6 +54,15 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any ) } + useEffect(() => { + // scroll to active item + if (activeItem && activeItemRef.current) { + // this is a hack, but seems a common one on Stackoverflow + setTimeout(() => { + activeItemRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) + }, 0) + } + }) return ( <> {props.subItemIndex === 0 && ( @@ -63,15 +74,15 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any )} -
  • +
  • @@ -120,14 +131,14 @@ const ContentLink = React.memo(function ContentLink(props: any) { const router = useRouter() return ( -
  • +
  • {props.icon && ( @@ -179,15 +190,17 @@ const Content = (props) => { return (
    {x.items && x.items.length > 0 ? ( -
    +
    {x.items.map((subItem, subItemIndex) => { return ( - + <> + + ) })}
    diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index b81f6c5a1dd..dffa2c2d482 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -1,7 +1,7 @@ import * as Accordion from '@radix-ui/react-accordion' import Link from 'next/link' import { useRouter } from 'next/router' -import { IconChevronLeft } from 'ui' +import { IconChevronLeft, IconChevronUp } from 'ui' import * as NavItems from './NavigationMenu.constants' import { find } from 'lodash' @@ -15,6 +15,7 @@ import { RefIdOptions, RefKeyOptions } from './NavigationMenu' import React, { Fragment } from 'react' import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers' import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils' +import { cn } from 'ui/src/utils/cn' const HeaderImage = React.memo(function HeaderImage(props: any) { const router = useRouter() @@ -31,8 +32,6 @@ const HeaderImage = React.memo(function HeaderImage(props: any) { }) const HeaderLink = React.memo(function HeaderLink(props: any) { - const router = useRouter() - return ( {props.title ?? props.id} @@ -46,6 +45,8 @@ const FunctionLink = React.memo(function FunctionLink({ icon, library, slug, + isParent = false, + isSubItem = false, }: { title: string name?: string @@ -54,6 +55,8 @@ const FunctionLink = React.memo(function FunctionLink({ product?: string library: string slug: string + isParent: boolean + isSubItem: boolean }) { const router = useRouter() const activeAccordianItem = useMenuActiveRefId() @@ -70,16 +73,29 @@ const FunctionLink = React.memo(function FunctionLink({ const active = activeAccordianItem === id return ( -
  • +
  • {icon && {icon}} {title} + {active && !isSubItem && ( + + )} + {isParent && ( + + )}
    • @@ -121,26 +137,37 @@ const RenderLink = React.memo(function RenderLink(props: any) { value={active ? props.id : ''} > - - - {props.items && - props.items - .filter((item) => props.allowedKeys.includes(item.id)) - .map((item) => { - return ( - - ) - })} - + + {props.items && ( + + {props.items && + props.items + .filter((item) => props.allowedKeys.includes(item.id)) + .map((item) => { + return ( + + ) + })} + + )} ) @@ -244,7 +271,7 @@ const Content: React.FC = ({ id, lib, commonSections, sp -
      +
        {sections.map((fn: any, fnIndex) => { // run allow check if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) { From d73dabe08235d6fc923794f75e4a5335343914c4 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 5 May 2023 16:12:14 -0230 Subject: [PATCH 2/5] Move home sidebar icons to own component --- .../components/Navigation/Navigation.types.ts | 11 + .../Navigation/NavigationMenu/HomeMenu.tsx | 151 +--------- .../NavigationMenu/HomeMenuIconPicker.tsx | 75 +++++ .../NavigationMenu/HomeMenuIcons.tsx | 258 ++++++++++++++++++ .../NavigationMenu.constants.ts | 143 +++++++++- .../NavigationMenuGuideListItems.tsx | 21 +- 6 files changed, 492 insertions(+), 167 deletions(-) create mode 100644 apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx create mode 100644 apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx diff --git a/apps/docs/components/Navigation/Navigation.types.ts b/apps/docs/components/Navigation/Navigation.types.ts index 76afaa7b1c6..a644cc7c70d 100644 --- a/apps/docs/components/Navigation/Navigation.types.ts +++ b/apps/docs/components/Navigation/Navigation.types.ts @@ -22,3 +22,14 @@ export interface References { currentVersion?: string } } + +type MenuItem = { + label: string + icon?: string + href?: string + level?: string + hasLightIcon?: boolean + community?: boolean +} + +export type HomepageMenuItems = MenuItem[][] diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx index db93e1616a2..5298b6a31a8 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx @@ -5,145 +5,10 @@ import { useRouter } from 'next/router' import { Fragment } from 'react' import { Badge } from '~/../../packages/ui' -const home = [ - [ - { - label: 'Home', - icon: '/img/icons/menu/home', - href: '/', - level: 'home', - }, - { - label: 'Getting Started', - icon: '/img/icons/menu/getting-started', - href: '/guides/getting-started', - level: 'gettingstarted', - }, - ], - [ - { - label: 'Database', - icon: '/img/icons/menu/database', - href: '/guides/database', - level: 'database', - }, - { - label: 'Serverless APIs', - icon: '/img/icons/menu/reference', - href: '/guides/api', - level: 'api', - }, - { - label: 'Auth', - icon: '/img/icons/menu/auth', - href: '/guides/auth', - level: 'auth', - }, - { - label: 'Edge Functions', - icon: '/img/icons/menu/functions', - href: '/guides/functions', - level: 'functions', - }, - { - label: 'Realtime', - icon: '/img/icons/menu/realtime', - href: '/guides/realtime', - level: 'realtime', - }, - { - label: 'Storage', - icon: '/img/icons/menu/storage', - href: '/guides/storage', - level: 'storage', - }, - ], - [ - { - label: 'Platform', - icon: '/img/icons/menu/platform', - href: '/guides/platform', - level: 'platform', - }, - { - label: 'Resources', - icon: '/img/icons/menu/platform', - href: '/guides/resources', - level: 'resources', - }, - { - label: 'Self-Hosting', - icon: '/img/icons/menu/platform', - href: '/guides/self-hosting', - level: 'self_hosting', - }, - { - label: 'Integrations', - icon: '/img/icons/menu/integrations', - hasLightIcon: true, - href: '/guides/integrations', - level: 'integrations', - }, - ], - [ - { - label: 'Client Library Reference', - }, - { - label: 'JavaScript', - icon: '/img/icons/menu/reference-javascript', - href: '/reference/javascript/introduction', - level: 'reference_javascript', - }, - { - label: 'Flutter', - icon: '/img/icons/menu/reference-dart', - href: '/reference/dart/introduction', - level: 'reference_dart', - }, - { - label: 'Python', - icon: '/img/icons/menu/reference-python', - href: '/reference/python/introduction', - level: 'reference_python', - community: true, - }, - { - label: 'C#', - icon: '/img/icons/menu/reference-csharp', - href: '/reference/csharp/introduction', - level: 'reference_csharp', - community: true, - }, - { - label: 'Swift', - icon: '/img/icons/menu/reference-swift', - href: '/reference/swift/introduction', - level: 'reference_swift', - community: true, - }, - { - label: 'Tools', - }, - { - label: 'Management API', - icon: '/img/icons/menu/reference-api', - href: '/reference/api/introduction', - level: 'reference_javascript', - }, - { - label: 'Supabase CLI', - icon: '/img/icons/menu/reference-cli', - href: '/guides/cli', - level: 'reference_javascript', - }, - ], -] +import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants' +import HomeMenuIconPicker from './HomeMenuIconPicker' const NavigationMenuHome = ({ active }) => { - const router = useRouter() - const { isDarkMode } = useTheme() - return (
        { ].join(' ')} >
          - {home.map((section, sectionIndex) => { + {HOMEPAGE_MENU_ITEMS.map((section, sectionIndex) => { return ( {sectionIndex !== 0 && ( @@ -183,15 +48,7 @@ const NavigationMenuHome = ({ active }) => { 'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ', ].join(' ')} > - {link.label} + {link?.icon && } {link.label} {link.community && Community} diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx new file mode 100644 index 00000000000..2d6384c8540 --- /dev/null +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx @@ -0,0 +1,75 @@ +import React from 'react' +import { + IconMenuApi, + IconMenuAuth, + IconMenuCli, + IconMenuCsharp, + IconMenuDatabase, + IconMenuEdgeFunctions, + IconMenuFlutter, + IconMenuGettingStarted, + IconMenuHome, + IconMenuIntegrations, + IconMenuJavascript, + IconMenuPlatform, + IconMenuPython, + IconMenuRealtime, + IconMenuResources, + IconMenuSelfHosting, + IconMenuServerlessApis, + IconMenuStorage, + IconMenuSwift, +} from './HomeMenuIcons' + +function getMenuIcon(menuKey: string) { + switch (menuKey) { + case 'home': + return + case 'getting-started': + return + case 'database': + return + case 'serverless-apis': + return + case 'auth': + return + case 'edge-functions': + return + case 'realtime': + return + case 'storage': + return + case 'platform': + return + case 'resources': + return + case 'self-hosting': + return + case 'integrations': + return + case 'javascript': + return + case 'dart': + return + case 'python': + return + case 'csharp': + return + case 'swift': + return + case 'api': + return + case 'cli': + return + default: + return + } +} + +type HomeMenuIconPickerProps = { + icon: string +} + +export default function HomeMenuIconPicker({ icon }: HomeMenuIconPickerProps) { + return getMenuIcon(icon) +} diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx new file mode 100644 index 00000000000..e88195dd029 --- /dev/null +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx @@ -0,0 +1,258 @@ +export function IconMenuHome() { + return ( + + + + ) +} + +export function IconMenuApi() { + return ( + + + + ) +} + +export function IconMenuAuth() { + return ( + + + + ) +} + +export function IconMenuCli() { + return ( + + + + ) +} + +export function IconMenuCsharp() { + return ( + + + + ) +} + +export function IconMenuDatabase() { + return ( + + + + ) +} + +export function IconMenuServerlessApis() { + return ( + + + + ) +} + +export function IconMenuEdgeFunctions() { + return ( + + + + ) +} + +export function IconMenuExtensions() { + return ( + + + + ) +} + +export function IconMenuFlutter() { + return ( + + + + ) +} + +export function IconMenuGettingStarted() { + return ( + + + + ) +} + +export function IconMenuIntegrations() { + return ( + + + + ) +} + +export function IconMenuJavascript() { + return ( + + + + ) +} +export function IconMenuPlatform() { + return ( + + + + ) +} + +export function IconMenuPython() { + return ( + + + + ) +} + +export function IconMenuRealtime() { + return ( + + + + ) +} + +export function IconMenuResources() { + return ( + + + + ) +} + +export function IconMenuSelfHosting() { + return ( + + + + ) +} + +export function IconMenuStorage() { + return ( + + + + ) +} + +export function IconMenuSwift() { + return ( + + + + ) +} diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 78292feff7e..c91b7f4fcd8 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -1,4 +1,139 @@ -import { References } from '../Navigation.types' +import { References, HomepageMenuItems } from '../Navigation.types' + +export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [ + [ + { + label: 'Home', + icon: 'home', + href: '/', + level: 'home', + }, + { + label: 'Getting Started', + icon: 'getting-started', + href: '/guides/getting-started', + level: 'gettingstarted', + }, + ], + [ + { + label: 'Database', + icon: 'database', + href: '/guides/database', + level: 'database', + }, + { + label: 'Serverless APIs', + icon: 'serverless-apis', + href: '/guides/api', + level: 'api', + }, + { + label: 'Auth', + icon: 'auth', + href: '/guides/auth', + level: 'auth', + }, + { + label: 'Edge Functions', + icon: 'edge-functions', + href: '/guides/functions', + level: 'functions', + }, + { + label: 'Realtime', + icon: 'realtime', + href: '/guides/realtime', + level: 'realtime', + }, + { + label: 'Storage', + icon: 'storage', + href: '/guides/storage', + level: 'storage', + }, + ], + [ + { + label: 'Platform', + icon: 'platform', + href: '/guides/platform', + level: 'platform', + }, + { + label: 'Resources', + icon: 'resources', + href: '/guides/resources', + level: 'resources', + }, + { + label: 'Self-Hosting', + icon: 'self-hosting', + href: '/guides/self-hosting', + level: 'self_hosting', + }, + { + label: 'Integrations', + icon: 'integrations', + hasLightIcon: true, + href: '/guides/integrations', + level: 'integrations', + }, + ], + [ + { + label: 'Client Library Reference', + }, + { + label: 'JavaScript', + icon: 'javascript', + href: '/reference/javascript/introduction', + level: 'reference_javascript', + }, + { + label: 'Flutter', + icon: 'dart', + href: '/reference/dart/introduction', + level: 'reference_dart', + }, + { + label: 'Python', + icon: 'python', + href: '/reference/python/introduction', + level: 'reference_python', + community: true, + }, + { + label: 'C#', + icon: 'csharp', + href: '/reference/csharp/introduction', + level: 'reference_csharp', + community: true, + }, + { + label: 'Swift', + icon: 'swift', + href: '/reference/swift/introduction', + level: 'reference_swift', + community: true, + }, + { + label: 'Tools', + }, + { + label: 'Management API', + icon: 'api', + href: '/reference/api/introduction', + level: 'reference_javascript', + }, + { + label: 'Supabase CLI', + icon: 'cli', + href: '/guides/cli', + level: 'reference_javascript', + }, + ], +] export const REFERENCES: References = { javascript: { @@ -503,7 +638,7 @@ export const database = { } export const api = { - icon: 'reference', + icon: 'serverless-apis', title: 'Serverless APIs', url: '/guides/api', items: [ @@ -541,7 +676,7 @@ export const api = { } export const functions = { - icon: 'functions', + icon: 'edge-functions', title: 'Edge Functions', url: '/guides/functions', items: [ @@ -828,7 +963,7 @@ export const resources = { export const self_hosting = { title: 'Self-Hosting', - icon: 'resources', + icon: 'self-hosting', url: '/guides/self-hosting', items: [ { name: 'Overview', url: '/guides/self-hosting' }, diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx index a5ddbec9512..e0f93adbc57 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx @@ -5,20 +5,7 @@ import { useRouter } from 'next/router' import React, { useEffect, useRef } from 'react' import { IconChevronLeft } from '~/../../packages/ui' import * as Accordion from '@radix-ui/react-accordion' - -const HeaderImage = React.memo(function HeaderImage(props: any) { - const router = useRouter() - const { isDarkMode } = useTheme() - - return ( - {props.icon} - ) -}) +import HomeMenuIconPicker from './HomeMenuIconPicker' const HeaderLink = React.memo(function HeaderLink(props: { title: string @@ -157,6 +144,7 @@ const ContentLink = React.memo(function ContentLink(props: any) { }) const Content = (props) => { + console.log(props) const { menu, id } = props return ( @@ -179,8 +167,9 @@ const Content = (props) => { -
          - +
          + {console.log(menu)} +
          From cefd1a91264efcdb29ddf22a4a7273506a07095f Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Fri, 5 May 2023 17:21:53 -0230 Subject: [PATCH 3/5] Update icons, for Marijana, at last. At long, long last. --- .../NavigationMenu/HomeMenuIconPicker.tsx | 66 +++--- .../NavigationMenu/HomeMenuIcons.tsx | 205 ++++++++++++++---- .../NavigationMenu.constants.ts | 14 +- .../NavigationMenuGuideListItems.tsx | 2 - .../NavigationMenuRefListItems.tsx | 17 +- apps/docs/components/index.tsx | 42 +++- apps/docs/docs/ref/csharp/introduction.mdx | 2 +- apps/docs/docs/ref/dart/introduction.mdx | 2 +- apps/docs/docs/ref/dart/v0/introduction.mdx | 2 +- .../docs/docs/ref/javascript/introduction.mdx | 2 +- .../docs/ref/javascript/v1/introduction.mdx | 2 +- apps/docs/docs/ref/python/introduction.mdx | 2 +- apps/docs/docs/ref/swift/introduction.mdx | 8 +- .../docs/reference/csharp/introduction.mdx | 2 +- 14 files changed, 261 insertions(+), 107 deletions(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx index 2d6384c8540..a32390d87d9 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx @@ -21,55 +21,61 @@ import { IconMenuSwift, } from './HomeMenuIcons' -function getMenuIcon(menuKey: string) { +function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) { switch (menuKey) { case 'home': - return + return case 'getting-started': - return + return case 'database': - return + return case 'serverless-apis': - return + return case 'auth': - return + return case 'edge-functions': - return + return case 'realtime': - return + return case 'storage': - return + return case 'platform': - return + return case 'resources': - return + return case 'self-hosting': - return + return case 'integrations': - return - case 'javascript': - return - case 'dart': - return - case 'python': - return - case 'csharp': - return - case 'swift': - return - case 'api': - return - case 'cli': - return + return + case 'reference-javascript': + return + case 'reference-dart': + return + case 'reference-python': + return + case 'reference-csharp': + return + case 'reference-swift': + return + case 'reference-api': + return + case 'reference-cli': + return default: - return + return } } type HomeMenuIconPickerProps = { icon: string + width?: number + height?: number } -export default function HomeMenuIconPicker({ icon }: HomeMenuIconPickerProps) { - return getMenuIcon(icon) +export default function HomeMenuIconPicker({ + icon, + width = 16, + height = 16, +}: HomeMenuIconPickerProps) { + return getMenuIcon(icon, width, height) } diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx index e88195dd029..d11eb7f954e 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx @@ -1,6 +1,16 @@ -export function IconMenuHome() { +type HomeMenuIcon = { + width?: number + height?: number +} +export function IconMenuHome({ width = 16, height = 16 }: HomeMenuIcon) { return ( - + + + + + + + + + + + + + ) } -export function IconMenuPlatform() { + +export function IconMenuPlatform({ width = 16, height = 16 }: HomeMenuIcon) { return ( - + + + + + + + { - console.log(props) const { menu, id } = props return ( @@ -168,7 +167,6 @@ const Content = (props) => {
          - {console.log(menu)}
          diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index dffa2c2d482..1c8a5415074 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -16,20 +16,7 @@ import React, { Fragment } from 'react' import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers' import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils' import { cn } from 'ui/src/utils/cn' - -const HeaderImage = React.memo(function HeaderImage(props: any) { - const router = useRouter() - const { isDarkMode } = useTheme() - - return ( - {props.icon} - ) -}) +import HomeMenuIconPicker from './HomeMenuIconPicker' const HeaderLink = React.memo(function HeaderLink(props: any) { return ( @@ -266,7 +253,7 @@ const Content: React.FC = ({ id, lib, commonSections, sp
          - +
          diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx index 8178b4d51f5..468ea91e3c1 100644 --- a/apps/docs/components/index.tsx +++ b/apps/docs/components/index.tsx @@ -1,7 +1,6 @@ import Link from 'next/link' import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui' import StepHikeCompact from '~/components/StepHikeCompact' - // Common components import Admonition from './Admonition' import ButtonCard from './ButtonCard' @@ -31,6 +30,28 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo import Options from '~/components/Options' import Param from '~/components/Params' +import { + IconMenuJavascript, + IconMenuHome, + IconMenuGettingStarted, + IconMenuDatabase, + IconMenuServerlessApis, + IconMenuAuth, + IconMenuEdgeFunctions, + IconMenuRealtime, + IconMenuStorage, + IconMenuPlatform, + IconMenuResources, + IconMenuSelfHosting, + IconMenuIntegrations, + IconMenuFlutter, + IconMenuPython, + IconMenuCsharp, + IconMenuSwift, + IconMenuApi, + IconMenuCli, +} from './Navigation/NavigationMenu/HomeMenuIcons' + const components = { ...markdownComponents, Admonition, @@ -73,6 +94,25 @@ const components = { CliGlobalFlagsHandler: () => , Options, Param, + IconMenuJavascript, + IconMenuHome, + IconMenuGettingStarted, + IconMenuDatabase, + IconMenuServerlessApis, + IconMenuAuth, + IconMenuEdgeFunctions, + IconMenuRealtime, + IconMenuStorage, + IconMenuPlatform, + IconMenuResources, + IconMenuSelfHosting, + IconMenuIntegrations, + IconMenuFlutter, + IconMenuPython, + IconMenuCsharp, + IconMenuSwift, + IconMenuApi, + IconMenuCli, } export default components diff --git a/apps/docs/docs/ref/csharp/introduction.mdx b/apps/docs/docs/ref/csharp/introduction.mdx index e016c4f8338..18a06f5c963 100644 --- a/apps/docs/docs/ref/csharp/introduction.mdx +++ b/apps/docs/docs/ref/csharp/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          C# Client Library

          @supabase-community/supabase-csharp

          diff --git a/apps/docs/docs/ref/dart/introduction.mdx b/apps/docs/docs/ref/dart/introduction.mdx index e183e37889e..b99332b670d 100644 --- a/apps/docs/docs/ref/dart/introduction.mdx +++ b/apps/docs/docs/ref/dart/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Flutter Client Library

          supabase-flutter

          diff --git a/apps/docs/docs/ref/dart/v0/introduction.mdx b/apps/docs/docs/ref/dart/v0/introduction.mdx index fdbb9d766a5..1d1f27212ce 100644 --- a/apps/docs/docs/ref/dart/v0/introduction.mdx +++ b/apps/docs/docs/ref/dart/v0/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Flutter Client Library

          supabase-flutter

          diff --git a/apps/docs/docs/ref/javascript/introduction.mdx b/apps/docs/docs/ref/javascript/introduction.mdx index d3c14042cb6..b22c1b371ff 100644 --- a/apps/docs/docs/ref/javascript/introduction.mdx +++ b/apps/docs/docs/ref/javascript/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Javascript Client Library

          @supabase/supabase-js

          diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx index a62134bdd69..8112558ffd6 100644 --- a/apps/docs/docs/ref/javascript/v1/introduction.mdx +++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Javascript Client Library

          @supabase/supabase-js

          diff --git a/apps/docs/docs/ref/python/introduction.mdx b/apps/docs/docs/ref/python/introduction.mdx index cecb5e86669..8b163faa745 100644 --- a/apps/docs/docs/ref/python/introduction.mdx +++ b/apps/docs/docs/ref/python/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Python Client Library

          @supabase-community/supabase-py

          diff --git a/apps/docs/docs/ref/swift/introduction.mdx b/apps/docs/docs/ref/swift/introduction.mdx index 80dc3584bd1..475ae7f8a03 100644 --- a/apps/docs/docs/ref/swift/introduction.mdx +++ b/apps/docs/docs/ref/swift/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          Swift Client Library

          @supabase-community/supabase-swift

          @@ -16,14 +16,12 @@ hideTitle: true This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files. We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects. +

          The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.

          -

          - Huge thanks to official maintainer, [Maail](https://github.com/maail). -

          +

          Huge thanks to official maintainer, [Maail](https://github.com/maail).

          - diff --git a/apps/docs/docs/reference/csharp/introduction.mdx b/apps/docs/docs/reference/csharp/introduction.mdx index 6c699314937..3eb96ba2925 100644 --- a/apps/docs/docs/reference/csharp/introduction.mdx +++ b/apps/docs/docs/reference/csharp/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
          - +

          C# Client Library

          supabase-csharp

          From 2d3d338805f6e84ab88d93f2611b3d9e619f9cf8 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 8 May 2023 15:15:03 -0230 Subject: [PATCH 4/5] More menu nudges --- .../Navigation/NavigationMenu/HomeMenu.tsx | 21 +++++++++++-------- .../NavigationMenu/HomeMenuIconPicker.tsx | 3 +++ .../NavigationMenu/HomeMenuIcons.tsx | 19 +++++++++++++++++ .../NavigationMenu.constants.ts | 9 +++++++- 4 files changed, 42 insertions(+), 10 deletions(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx index 5298b6a31a8..4861e86199b 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx @@ -4,7 +4,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { Fragment } from 'react' import { Badge } from '~/../../packages/ui' - +import { cn } from 'ui/src/utils/cn' import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants' import HomeMenuIconPicker from './HomeMenuIconPicker' @@ -16,7 +16,7 @@ const NavigationMenuHome = ({ active }) => { active ? 'opacity-100 ml-0 delay-150' : 'opacity-0 -ml-8 invisible absolute', ].join(' ')} > -
            +
              {HOMEPAGE_MENU_ITEMS.map((section, sectionIndex) => { return ( @@ -27,16 +27,19 @@ const NavigationMenuHome = ({ active }) => { >
          )}
          -
          - {section.map((link) => { +
          + {section.map((link, i) => { if (!link.href) { return ( - {link.label} - +
          ) } else { return ( @@ -44,8 +47,8 @@ const NavigationMenuHome = ({ active }) => {
        • {link?.icon && } diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx index a32390d87d9..07ad9d7f9c0 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx @@ -19,6 +19,7 @@ import { IconMenuServerlessApis, IconMenuStorage, IconMenuSwift, + IconMenuStatus, } from './HomeMenuIcons' function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) { @@ -61,6 +62,8 @@ function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) { return case 'reference-cli': return + case 'status': + return default: return } diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx index d11eb7f954e..73a39c75f59 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx @@ -381,3 +381,22 @@ export function IconMenuSwift({ width = 16, height = 16 }: HomeMenuIcon) { ) } + +export function IconMenuStatus({ width = 16, height = 16 }: HomeMenuIcon) { + return ( + + + + ) +} diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index dc511338fb5..0e8b4039757 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -118,7 +118,7 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [ community: true, }, { - label: 'Tools', + label: 'Tools reference', }, { label: 'Management API', @@ -133,6 +133,13 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [ level: 'reference_javascript', }, ], + [ + { + label: 'Status', + icon: 'status', + href: 'https://status.supabase.com/', + }, + ], ] export const REFERENCES: References = { From 06aa4a848b54aeb8aea77018ed6e4e1674659df3 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Tue, 9 May 2023 12:28:57 -0230 Subject: [PATCH 5/5] Change colours --- apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx index 4861e86199b..6c18375038b 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx @@ -48,7 +48,7 @@ const NavigationMenuHome = ({ active }) => {
        • {link?.icon && }