-
+
+
)
}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index 1c8a5415074..0069b311827 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -4,19 +4,16 @@ import { useRouter } from 'next/router'
import { IconChevronLeft, IconChevronUp } from 'ui'
import * as NavItems from './NavigationMenu.constants'
-import { find } from 'lodash'
import Image from 'next/image'
-import { useTheme } from 'common/Providers'
import RevVersionDropdown from '~/components/RefVersionDropdown'
import { useMenuActiveRefId } from '~/hooks/useMenuState'
-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'
+import { ICommonItem, ICommonSection } from '~/components/reference/Reference.types'
import HomeMenuIconPicker from './HomeMenuIconPicker'
+import { deepFilterSections } from './NavigationMenu.utils'
const HeaderLink = React.memo(function HeaderLink(props: any) {
return (
@@ -26,135 +23,121 @@ const HeaderLink = React.memo(function HeaderLink(props: any) {
)
})
-const FunctionLink = React.memo(function FunctionLink({
- title,
- id,
- icon,
- library,
- slug,
- isParent = false,
- isSubItem = false,
-}: {
+interface FunctionLinkProps {
title: string
name?: string
id: string
icon?: string
- product?: string
- library: string
+ basePath: string
slug: string
- isParent: boolean
- isSubItem: boolean
-}) {
+ isParent?: boolean
+ isSubItem?: boolean
+}
+
+const FunctionLink = React.memo(function FunctionLink({
+ title,
+ id,
+ icon,
+ basePath,
+ slug,
+ isParent = false,
+ isSubItem = false,
+}: FunctionLinkProps) {
const router = useRouter()
- const activeAccordianItem = useMenuActiveRefId()
+ const activeAccordionItem = useMenuActiveRefId()
- // check if we're on a versioned page
- let version = ''
- if (router.asPath.includes('v1')) {
- version = 'v1'
- }
+ const url = `${router.basePath}${basePath}/${slug}`
+ const active = activeAccordionItem === id
- if (router.asPath.includes('v0')) {
- version = 'v0'
- }
-
- const active = activeAccordianItem === id
return (
-
-
-
- {icon && }
- {title}
- {active && !isSubItem && (
-
- )}
- {isParent && (
-
- )}
-
-
+
+ {
+ e.preventDefault()
+ history.pushState({}, '', url)
+ document.getElementById(slug)?.scrollIntoView()
+ }}
+ className={cn(
+ 'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
+ isParent ? 'flex justify-between' : 'leading-3',
+ active ? 'text-brand-900' : 'text-scale-1000'
+ )}
+ >
+ {icon && }
+ {title}
+ {active && !isSubItem && (
+
+ )}
+ {isParent && (
+
+ )}
+
)
})
-const RenderLink = React.memo(function RenderLink(props: any) {
- const activeAccordianItem = useMenuActiveRefId()
- let active = false
+export interface RenderLinkProps {
+ section: ICommonSection
+ basePath: string
+}
- const isFilter = props.filterIds?.includes(activeAccordianItem)
- const isModifier = props.modifierIds?.includes(activeAccordianItem)
- const isAuthServer = props.authServerIds?.includes(activeAccordianItem)
+const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderLinkProps) {
+ const activeAccordionItem = useMenuActiveRefId()
- if (
- (isFilter && props.id === 'using-filters') ||
- (activeAccordianItem === 'using-filters' && props.id === 'using-filters')
- ) {
- active = true
- } else if (
- (isModifier && props.id === 'using-modifiers') ||
- (activeAccordianItem === 'using-modifiers' && props.id === 'using-modifiers')
- ) {
- active = true
- } else if (
- (isAuthServer && props.id === 'admin-api') ||
- (activeAccordianItem === 'admin-api' && props.id === 'admin-api')
- ) {
- active = true
- } else {
- active = false
+ if (!('items' in section)) {
+ return (
+
+ )
}
+ let active =
+ section.id === activeAccordionItem ||
+ section.items.some((item) => item.id === activeAccordionItem)
+
return (
-
-
+
+
- {props.items && (
-
- {props.items &&
- props.items
- .filter((item) => props.allowedKeys.includes(item.id))
- .map((item) => {
- return (
-
- )
- })}
-
- )}
+
+ {section.items.map((item) => {
+ return (
+
+ )
+ })}
+
)
@@ -172,67 +155,25 @@ const Divider = () => {
return
}
-interface INavigationMenuRefList {
- id: RefIdOptions
- lib: RefKeyOptions
- commonSections: any[] // to do type up
-
- // the keys of menu items that are allowed to be shown on the side menu
- // if undefined, we show all the menu items
- allowedClientKeys?: string[]
+interface NavigationMenuRefListItemsProps {
+ id: string
+ basePath: string
+ commonSections: ICommonItem[]
spec?: any
}
-const Content: React.FC = ({ id, lib, commonSections, spec }) => {
- const allowedClientKeys = spec ? generateAllowedClientLibKeys(commonSections, spec) : undefined
-
- let sections = commonSections
-
- const allowedKeys = allowedClientKeys
-
- if (!sections) console.error('no common sections imported')
-
+const NavigationMenuRefListItems = ({
+ id,
+ basePath,
+ commonSections,
+ spec,
+}: NavigationMenuRefListItemsProps) => {
const menu = NavItems[id]
- const databaseFunctions = find(sections, { title: 'Database' })
- ? find(sections, { title: 'Database' }).items
- : []
- const authFunctions = find(sections, { title: 'Auth' })
- ? find(sections, { title: 'Auth' }).items
- : []
-
- const filterIds =
- databaseFunctions.length > 0
- ? find(databaseFunctions, {
- id: 'using-filters',
- }) &&
- find(databaseFunctions, {
- id: 'using-filters',
- })
- .items.filter((x) => allowedKeys.includes(x.id))
- .map((x) => x.id)
- : []
- const modifierIds =
- databaseFunctions.length > 0
- ? find(databaseFunctions, {
- id: 'using-modifiers',
- }) &&
- find(databaseFunctions, {
- id: 'using-modifiers',
- })
- .items.filter((x) => allowedKeys.includes(x.id))
- .map((x) => x.id)
- : []
-
- const authServerIds =
- databaseFunctions.length > 0
- ? find(authFunctions, {
- id: 'admin-api',
- }) &&
- find(authFunctions, {
- id: 'admin-api',
- }).items.map((x) => x.id)
- : []
+ const specFunctionIds = spec?.functions.map(({ id }) => id)
+ const filteredSections = spec
+ ? deepFilterSections(commonSections, specFunctionIds)
+ : commonSections
return (
@@ -251,61 +192,26 @@ const Content: React.FC
= ({ id, lib, commonSections, sp
Back to Main Menu
-
-
- {sections.map((fn: any, fnIndex) => {
- // run allow check
- if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
- return
- }
-
- // handle subtitles with subitems
- return fn.id ? (
-
-
- {fn.items &&
- fn.items.map((item) => (
-
- ))}
-
- ) : (
-
-
-
- {fn.items &&
- fn.items.map((item, i) => {
- // run allow check
- if (isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys))
- return
- return (
-
- )
- })}
+ {filteredSections.map((section) => {
+ return (
+
+ {section.type === 'category' ? (
+ <>
+
+
+ {section.items.map((item) => (
+
+ ))}
+
+ ) : (
+
+ )}
)
})}
@@ -314,4 +220,4 @@ const Content: React.FC = ({ id, lib, commonSections, sp
)
}
-export default React.memo(Content)
+export default React.memo(NavigationMenuRefListItems)
diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx
index f25d32e74cf..400b3fa7287 100644
--- a/apps/docs/components/reference/CLICommandSection.tsx
+++ b/apps/docs/components/reference/CLICommandSection.tsx
@@ -1,6 +1,5 @@
import ReactMarkdown from 'react-markdown'
import { CodeBlock, IconChevronRight, Tabs } from 'ui'
-// @ts-expect-error
import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' }
import Options from '~/components/Options'
import Param from '~/components/Params'
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index b1b5bebf134..107a2c788a3 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -8,10 +8,10 @@ import RefFunctionSection from '~/components/reference/RefFunctionSection'
import RefSubLayout from '~/layouts/ref/RefSubLayout'
import ApiOperationSection from './ApiOperationSection'
import CliCommandSection from './CLICommandSection'
-import { IAPISpec, ICommonFunc, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
+import { IAPISpec, ICommonSection, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
interface RefSectionHandlerProps {
- sections: ICommonFunc[]
+ sections: ICommonSection[]
spec?: ISpec | IAPISpec
typeSpec?: TypeSpec
pageProps: { docs: IRefStaticDoc[] }
@@ -26,10 +26,21 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
// When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up
// find the #sign-up element and scroll to that
useEffect(() => {
- if (document && slug !== 'start') {
- document.querySelector(`#${slug}`) && document.querySelector(`#${slug}`).scrollIntoView()
+ document.getElementById(slug)?.scrollIntoView()
+ }, [slug])
+
+ useEffect(() => {
+ function handler(e: PopStateEvent) {
+ const [slug] = window.location.pathname.split('/').slice(-1)
+ document.getElementById(slug)?.scrollIntoView()
}
- })
+
+ window.addEventListener('popstate', handler)
+
+ return () => {
+ window.removeEventListener('popstate', handler)
+ }
+ }, [])
function getPageTitle() {
switch (props.type) {
@@ -59,46 +70,48 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
- {props.sections.map((x, i) => {
- switch (x.type) {
+ {props.sections.map((section, i) => {
+ const sectionType = section.type
+ switch (sectionType) {
case 'markdown':
- const markdownData = props.pageProps.docs.find((doc) => doc.id === x.id)
+ const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
- return
- break
+ return (
+
+ )
case 'function':
return (
)
case 'cli-command':
- return
- break
+ return (
+
+ )
case 'operation':
return (
)
default:
- return (
-
- )
- break
+ throw new Error(`Unknown common section type '${sectionType}'`)
}
})}
diff --git a/apps/docs/components/reference/Reference.types.ts b/apps/docs/components/reference/Reference.types.ts
index 4ff54b1b991..ce15320180e 100644
--- a/apps/docs/components/reference/Reference.types.ts
+++ b/apps/docs/components/reference/Reference.types.ts
@@ -33,19 +33,61 @@ export interface IFunctionDefinition {
examples?: []
}
-export interface ICommonFunc {
- id?: string
+export interface ICommonBase {
+ type: string
title: string
- slug?: string
- product?: string
- type?: string
- parent?: string
- items?: ICommonFunc[]
+ summary?: string
}
+export interface ICommonBaseSection extends ICommonBase {
+ id: string
+ slug: string
+ excludes?: string[]
+}
+
+export interface ICommonCategory extends ICommonBase {
+ type: 'category'
+ items: ICommonSection[]
+ excludes?: string[]
+}
+
+export interface ICommonMarkdown extends ICommonBaseSection {
+ type: 'markdown'
+}
+
+export interface ICommonFunctionGroup extends ICommonBaseSection {
+ type: 'function'
+ isFunc: false
+ product: string
+ items: ICommonFunction[]
+}
+
+export interface ICommonFunction extends ICommonBaseSection {
+ type: 'function'
+ product: string
+ parent?: string
+}
+
+export interface ICommonCliCommand extends ICommonBaseSection {
+ type: 'cli-command'
+}
+
+export interface ICommonApiOperation extends ICommonBaseSection {
+ type: 'operation'
+}
+
+export type ICommonSection =
+ | ICommonMarkdown
+ | ICommonFunctionGroup
+ | ICommonFunction
+ | ICommonCliCommand
+ | ICommonApiOperation
+
+export type ICommonItem = ICommonCategory | ICommonSection
+
export interface IRefFunctionSection {
funcData: any
- commonFuncData: ICommonFunc
+ commonFuncData: ICommonFunction
spec: any
typeSpec?: TypeSpec
}
diff --git a/apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx b/apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx
index 1de9c1971d0..e108730f65a 100644
--- a/apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx
+++ b/apps/docs/components/reference/enrichments/cli/CliGlobalFlagsHandler.tsx
@@ -1,6 +1,5 @@
import RefSubLayout from '~/layouts/ref/RefSubLayout'
-// @ts-expect-error
import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yaml' }
import Param from '~/components/Params'
import Options from '~/components/Options'
diff --git a/apps/docs/generator/helpers.ts b/apps/docs/generator/helpers.ts
index e7796c9101f..30b8037d818 100644
--- a/apps/docs/generator/helpers.ts
+++ b/apps/docs/generator/helpers.ts
@@ -1,5 +1,5 @@
-import * as _ from 'lodash'
import * as fs from 'fs'
+import { mapValues, values } from 'lodash'
export const slugify = (text: string) => {
if (!text) return ''
@@ -34,8 +34,8 @@ export const writeToDisk = (fileName: string, content: any) => {
* Convert Object to Array of values
*/
export const toArrayWithKey = (obj: object, keyAs: string) =>
- _.values(
- _.mapValues(obj, (value: any, key: string) => {
+ values(
+ mapValues(obj, (value: any, key: string) => {
value[keyAs] = key
return value
})
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 48c5584c3e0..9edb1e4f0d6 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -4,10 +4,10 @@ import Link from 'next/link'
import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
-import { memo, useEffect } from 'react'
+import Head from 'next/head'
+import { PropsWithChildren, memo } from 'react'
import Footer from '~/components/Navigation/Footer'
import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
-import Head from 'next/head'
const levelsData = {
home: {
@@ -211,25 +211,6 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
)
})
-const SideMenu = memo(function SideMenu() {
- return (
-
-
-
- )
-})
-
const HeaderLogo = memo(function HeaderLogo() {
const { isDarkMode } = useTheme()
return (
@@ -315,13 +296,26 @@ const NavContainer = memo(function NavContainer() {