Merge pull request #14143 from supabase/fix/docs-site-performance

fix: docs site performance

apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts

@@ -79,7 +79,7 @@ export const unHighlightSelectedTocItems = () => {
 }
 
 export const highlightSelectedNavItem = (id: string) => {
-  const navMenuItems = document.querySelectorAll('.function-link-item a')
+  const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
   const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
@@ -87,7 +87,6 @@ export const highlightSelectedNavItem = (id: string) => {
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
-    // @ts-ignore
     if (item.href.split('/').at(-1) === id) {
       item.classList.add('text-brand-900')
     }

apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx

@@ -8,15 +8,13 @@ import { cn } from 'ui/src/utils/cn'
 import { HOMEPAGE_MENU_ITEMS } from './NavigationMenu.constants'
 import HomeMenuIconPicker from './HomeMenuIconPicker'
 
-const NavigationMenuHome = ({ active }) => {
+const NavigationMenuHome = () => {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
   return (
-    <div
-      className={[
-        'transition-all duration-150 ease-out',
-        active ? 'opacity-100 ml-0 delay-150' : 'opacity-0 -ml-8 invisible absolute',
-      ].join(' ')}
-    >
-      <ul className="relative w-full flex flex-col gap-6">
+    <div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150">
+      <ul className="relative w-full flex flex-col gap-4">
         {HOMEPAGE_MENU_ITEMS.map((section, sectionIndex) => {
           return (
             <Fragment key={`section-container-${sectionIndex}-border`}>

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -1,185 +1,233 @@
 import { useRouter } from 'next/router'
 import { memo, useEffect } from 'react'
 import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
+import NavigationMenuHome from './HomeMenu'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
-// @ts-expect-error
-import spec_js_v2 from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_js_v1 from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_dart_v1 from '~/../../spec/supabase_dart_v1.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_dart_v0 from '~/../../spec/supabase_dart_v0.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_csharp_v0 from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_python_v2 from '~/../../spec/supabase_py_v2.yml' assert { type: 'yml' }
-// @ts-expect-error
-import spec_swift_v0 from '~/../../spec/supabase_swift_v0.yml' assert { type: 'yml' }
 
-// import { gen_v3 } from '~/lib/refGenerator/helpers'
-import apiCommonSections from '~/../../spec/common-api-sections.json'
-import cliCommonSections from '~/../../spec/common-cli-sections.json'
-import libCommonSections from '~/../../spec/common-client-libs-sections.json'
-import authServerCommonSections from '~/../../spec/common-self-hosting-auth-sections.json'
-import realtimeServerCommonSections from '~/../../spec/common-self-hosting-realtime-sections.json'
-import analyticsServerCommonSections from '~/../../spec/common-self-hosting-analytics-sections.json'
-import functionsServerCommonSections from '~/../../spec/common-self-hosting-functions-sections.json'
-import storageServerCommonSections from '~/../../spec/common-self-hosting-storage-sections.json'
-import { flattenSections } from '~/lib/helpers'
-import NavigationMenuHome from './HomeMenu'
-
-// Filter libCommonSections for just the relevant sections in the current library
-export function generateAllowedClientLibKeys(sections, spec) {
-  // Filter parent sections first
-
-  const specIds = spec.functions.map((func) => {
-    return func.id
-  })
-
-  const newShape = flattenSections(sections).filter((section) => {
-    if (specIds.includes(section.id)) {
-      return section
-    }
-  })
-
-  const final = newShape.map((func) => {
-    return func.id
-  })
-
-  return final
+interface BaseMenu {
+  id: string
+  path: string
+  type: string
 }
 
-export type RefIdOptions =
-  | 'reference_javascript_v1'
-  | 'reference_javascript_v2'
-  | 'reference_dart_v0'
-  | 'reference_dart_v1'
-  | 'reference_csharp_v0'
-  | 'reference_python_v2'
-  | 'reference_swift_v0'
-  | 'reference_cli'
-  | 'reference_api'
-  | 'reference_self_hosting_auth'
-  | 'reference_self_hosting_storage'
-  | 'reference_self_hosting_realtime'
-  | 'reference_self_hosting_analytics'
-  | 'reference_self_hosting_functions'
+interface HomeMenu extends BaseMenu {
+  type: 'home'
+}
 
-export type RefKeyOptions =
-  | 'javascript'
-  | 'dart'
-  | 'csharp'
-  | 'python'
-  | 'swift'
-  | 'cli'
-  | 'api'
-  | 'self-hosting-auth'
-  | 'self-hosting-storage'
-  | 'self-hosting-realtime'
-  | 'self-hosting-analytics'
-  | 'self-hosting-functions'
+interface GuideMenu extends BaseMenu {
+  type: 'guide'
+}
+
+interface ReferenceMenu extends BaseMenu {
+  type: 'reference'
+  commonSectionsFile: string
+  specFile?: string
+}
+
+type Menu = HomeMenu | GuideMenu | ReferenceMenu
+
+const menus: Menu[] = [
+  {
+    id: 'home',
+    path: '/',
+    type: 'home',
+  },
+  {
+    id: 'gettingstarted',
+    path: '/guides/getting-started',
+    type: 'guide',
+  },
+  {
+    id: 'database',
+    path: '/guides/database',
+    type: 'guide',
+  },
+  {
+    id: 'api',
+    path: '/guides/api',
+    type: 'guide',
+  },
+  {
+    id: 'auth',
+    path: '/guides/auth',
+    type: 'guide',
+  },
+  {
+    id: 'functions',
+    path: '/guides/functions',
+    type: 'guide',
+  },
+  {
+    id: 'realtime',
+    path: '/guides/realtime',
+    type: 'guide',
+  },
+  {
+    id: 'storage',
+    path: '/guides/storage',
+    type: 'guide',
+  },
+  {
+    id: 'platform',
+    path: '/guides/platform',
+    type: 'guide',
+  },
+  {
+    id: 'resources',
+    path: '/guides/resources',
+    type: 'guide',
+  },
+  {
+    id: 'self_hosting',
+    path: '/guides/self-hosting',
+    type: 'guide',
+  },
+  {
+    id: 'integrations',
+    path: '/guides/integrations',
+    type: 'guide',
+  },
+  {
+    id: 'supabase_cli',
+    // TODO: Add path '/reference/cli/config'
+    path: '/guides/cli',
+    type: 'guide',
+  },
+  {
+    id: 'reference_javascript_v1',
+    path: '/reference/javascript/v1',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_js_v1.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_javascript_v2',
+    path: '/reference/javascript',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_js_v2.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_dart_v0',
+    path: '/reference/dart/v0',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_dart_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_dart_v1',
+    path: '/reference/dart',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_dart_v1.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_csharp_v0',
+    path: '/reference/csharp',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_csharp_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_python_v2',
+    path: '/reference/python',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_py_v2.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_swift_v0',
+    path: '/reference/swift',
+    commonSectionsFile: 'common-client-libs-sections.json',
+    specFile: 'supabase_swift_v0.yml',
+    type: 'reference',
+  },
+  {
+    id: 'reference_cli',
+    path: '/reference/cli',
+    commonSectionsFile: 'common-cli-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_api',
+    path: '/reference/api',
+    commonSectionsFile: 'common-api-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_auth',
+    path: '/reference/self-hosting-auth',
+    commonSectionsFile: 'common-self-hosting-auth-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_storage',
+    path: '/reference/self-hosting-storage',
+    commonSectionsFile: 'common-self-hosting-storage-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_realtime',
+    path: '/reference/self-hosting-realtime',
+    commonSectionsFile: 'common-self-hosting-realtime-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_analytics',
+    path: '/reference/self-hosting-analytics',
+    commonSectionsFile: 'common-self-hosting-analytics-sections.json',
+    type: 'reference',
+  },
+  {
+    id: 'reference_self_hosting_functions',
+    path: '/reference/self-hosting-functions',
+    commonSectionsFile: 'common-self-hosting-functions-sections.json',
+    type: 'reference',
+  },
+]
+
+function getMenuById(id: string) {
+  return menus.find((menu) => menu.id === id)
+}
+
+function getMenuByUrl(basePath: string, url: string) {
+  // If multiple matches, choose the menu with the longest path
+  const [menu] = menus
+    .filter(({ path }) => url.startsWith(`${basePath}${path}`))
+    .sort((a, b) => b.path.length - a.path.length)
+
+  return menu
+}
+
+function getMenuElement(menu: Menu) {
+  const menuType = menu.type
+  switch (menuType) {
+    case 'home':
+      return <NavigationMenuHome />
+    case 'guide':
+      return <NavigationMenuGuideList id={menu.id} />
+    case 'reference':
+      return (
+        <NavigationMenuRefList
+          id={menu.id}
+          basePath={menu.path}
+          commonSectionsFile={menu.commonSectionsFile}
+          specFile={menu.specFile}
+        />
+      )
+    default:
+      throw new Error(`Unknown menu type '${menuType}'`)
+  }
+}
 
 const NavigationMenu = () => {
   const router = useRouter()
 
   function handleRouteChange(url: string) {
-    switch (url) {
-      case `/docs`:
-        menuState.setMenuLevelId('home')
-        break
-      case url.includes(`/docs/guides/getting-started`) && url:
-        menuState.setMenuLevelId('gettingstarted')
-        break
-      case url.includes(`/docs/guides/database`) && url:
-        menuState.setMenuLevelId('database')
-        break
-      case url.includes(`/docs/guides/api`) && url:
-        menuState.setMenuLevelId('api')
-        break
-      case url.includes(`/docs/guides/auth`) && url:
-        menuState.setMenuLevelId('auth')
-        break
-      case url.includes(`/docs/guides/functions`) && url:
-        menuState.setMenuLevelId('functions')
-        break
-      case url.includes(`/docs/guides/realtime`) && url:
-        menuState.setMenuLevelId('realtime')
-        break
-      case url.includes(`/docs/guides/storage`) && url:
-        menuState.setMenuLevelId('storage')
-        break
-      case url.includes(`/docs/guides/platform`) && url:
-        menuState.setMenuLevelId('platform')
-        break
-      case url.includes(`/docs/guides/resources`) && url:
-        menuState.setMenuLevelId('resources')
-        break
-      case url.includes(`/docs/guides/self-hosting`) && url:
-        menuState.setMenuLevelId('self_hosting')
-        break
-      case url.includes(`/docs/guides/integrations`) && url:
-        menuState.setMenuLevelId('integrations')
-        break
-      case url.includes(`/docs/guides/cli`) && url:
-        menuState.setMenuLevelId('supabase_cli')
-        break
-      // JS v1
-      case url.includes(`/docs/reference/javascript/v1`) && url:
-        menuState.setMenuLevelId('reference_javascript_v1')
-        break
-      // JS v2 (latest)
-      case url.includes(`/docs/reference/javascript`) && url:
-        menuState.setMenuLevelId('reference_javascript_v2')
-        break
-      // dart v0
-      case url.includes(`/docs/reference/dart/v0`) && url:
-        menuState.setMenuLevelId('reference_dart_v0')
-        break
-      // dart v1 (latest)
-      case url.includes(`/docs/reference/dart`) && url:
-        menuState.setMenuLevelId('reference_dart_v1')
-        break
-      // C# v0 (latest)
-      case url.includes(`/docs/reference/csharp`) && url:
-        menuState.setMenuLevelId('reference_csharp_v0')
-        break
-      // python v2 (latest)
-      case url.includes(`/docs/reference/python`) && url:
-        menuState.setMenuLevelId('reference_python_v2')
-        break
-      // swift v1 (latest)
-      case url.includes(`/docs/reference/swift`) && url:
-        menuState.setMenuLevelId('reference_swift_v0')
-        break
-      case url.includes(`/docs/reference/cli/config`) && url:
-        menuState.setMenuLevelId('supabase_cli')
-        break
-      case url.includes(`/docs/reference/cli`) && url:
-        menuState.setMenuLevelId('reference_cli')
-        break
-      case url.includes(`/docs/reference/api`) && url:
-        menuState.setMenuLevelId('reference_api')
-        break
-      case url.includes(`/docs/reference/self-hosting-auth`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_auth')
-        break
-      case url.includes(`/docs/reference/self-hosting-storage`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_storage')
-        break
-      case url.includes(`/docs/reference/self-hosting-realtime`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_realtime')
-        break
-      case url.includes(`/docs/reference/self-hosting-analytics`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_analytics')
-        break
-      case url.includes(`/docs/reference/self-hosting-functions`) && url:
-        menuState.setMenuLevelId('reference_self_hosting_functions')
-        break
-
-      default:
-        break
+    const menu = getMenuByUrl(router.basePath, url)
+    if (menu) {
+      menuState.setMenuLevelId(menu.id)
     }
   }
 
@@ -193,168 +241,9 @@ const NavigationMenu = () => {
   }, [router.events])
 
   const level = useMenuLevelId()
+  const menu = getMenuById(level)
 
-  const isHomeActive = 'home' === level
-  const isGettingStartedActive = 'gettingstarted' === level
-  const isDatabaseActive = 'database' === level
-  const isApiActive = 'api' === level
-  const isAuthActive = 'auth' === level
-  const isFunctionsActive = 'functions' === level
-  const isRealtimeActive = 'realtime' === level
-  const isStorageActive = 'storage' === level
-  const issupabase_cliActive = 'supabase_cli' === level
-  const isPlatformActive = 'platform' === level
-  const isResourcesActive = 'resources' === level
-  const isSelfHosting = 'self_hosting' === level
-  const isIntegrationsActive = 'integrations' === level
-  const isReferenceActive = 'reference' === level
-
-  const isReference_Javascript_V1 = 'reference_javascript_v1' === level
-  const isReference_Javascript_V2 = 'reference_javascript_v2' === level
-  const isReference_Dart_V0 = 'reference_dart_v0' === level
-  const isReference_Dart_V1 = 'reference_dart_v1' === level
-  const isReference_Csharp_V0 = 'reference_csharp_v0' === level
-  const isReference_Python_V2 = 'reference_python_v2' === level
-  const isReference_Swift_V0 = 'reference_swift_v0' === level
-  const isReference_Cli = 'reference_cli' === level
-  const isReference_Api = 'reference_api' === level
-  const isReference_Self_Hosting_Auth = 'reference_self_hosting_auth' === level
-  const isReference_Self_Hosting_Storage = 'reference_self_hosting_storage' === level
-  const isReference_Self_Hosting_Realtime = 'reference_self_hosting_realtime' === level
-  const isReference_Self_Hosting_Analytics = 'reference_self_hosting_analytics' === level
-  const isReference_Self_Hosting_Functions = 'reference_self_hosting_functions' === level
-
-  return (
-    <div className={['flex relative', 'justify-center lg:justify-start'].join(' ')}>
-      {/* // main menu */}
-      <NavigationMenuHome active={isHomeActive} />
-      <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
-      <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
-      <NavigationMenuGuideList id={'api'} active={isApiActive} />
-      <NavigationMenuGuideList id={'auth'} active={isAuthActive} />
-      <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
-      <NavigationMenuGuideList
-        id={'realtime'}
-        active={isRealtimeActive}
-        value={['/guides/realtime/extensions']}
-      />
-      <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
-      <NavigationMenuGuideList id={'supabase_cli'} active={issupabase_cliActive} />
-      <NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
-      <NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
-      <NavigationMenuGuideList id={'self_hosting'} active={isSelfHosting} />
-      <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
-      <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
-      {/* // Client Libs */}
-      <NavigationMenuRefList
-        key={'reference-js-menu-v1'}
-        id={'reference_javascript_v1'}
-        active={isReference_Javascript_V1}
-        commonSections={libCommonSections}
-        lib="javascript"
-        spec={spec_js_v1}
-      />
-      <NavigationMenuRefList
-        key={'reference-js-menu'}
-        id={'reference_javascript_v2'}
-        active={isReference_Javascript_V2}
-        commonSections={libCommonSections}
-        lib="javascript"
-        spec={spec_js_v2}
-      />
-      <NavigationMenuRefList
-        key={'reference-dart-menu'}
-        id={'reference_dart_v0'}
-        active={isReference_Dart_V0}
-        commonSections={libCommonSections}
-        lib="dart"
-        spec={spec_dart_v0}
-      />
-      <NavigationMenuRefList
-        key={'reference-dart-menu-v1'}
-        id={'reference_dart_v1'}
-        active={isReference_Dart_V1}
-        commonSections={libCommonSections}
-        lib="dart"
-        spec={spec_dart_v1}
-      />
-      <NavigationMenuRefList
-        key={'reference-csharp-menu-v0'}
-        id={'reference_csharp_v0'}
-        active={isReference_Csharp_V0}
-        commonSections={libCommonSections}
-        lib="csharp"
-        spec={spec_csharp_v0}
-      />
-      <NavigationMenuRefList
-        key={'reference-swift-menu-v1'}
-        id={'reference_swift_v0'}
-        active={isReference_Swift_V0}
-        commonSections={libCommonSections}
-        lib="swift"
-        spec={spec_swift_v0}
-      />
-      <NavigationMenuRefList
-        key={'reference-python-menu-v2'}
-        id={'reference_python_v2'}
-        active={isReference_Python_V2}
-        commonSections={libCommonSections}
-        lib="python"
-        spec={spec_python_v2}
-      />
-      {/* // Tools */}
-      <NavigationMenuRefList
-        key={'reference-cli-menu'}
-        id={'reference_cli'}
-        active={isReference_Cli}
-        commonSections={cliCommonSections}
-        lib="cli"
-      />
-      <NavigationMenuRefList
-        key={'reference-api-menu'}
-        id={'reference_api'}
-        active={isReference_Api}
-        commonSections={apiCommonSections}
-        lib="api"
-      />
-      {/* // Self Hosting Server */}
-      <NavigationMenuRefList
-        key={'reference-self-hosting-auth-menu'}
-        id={'reference_self_hosting_auth'}
-        active={isReference_Self_Hosting_Auth}
-        commonSections={authServerCommonSections}
-        lib="self-hosting-auth"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-storage-menu'}
-        id={'reference_self_hosting_storage'}
-        active={isReference_Self_Hosting_Storage}
-        commonSections={storageServerCommonSections}
-        lib="self-hosting-storage"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-realtime-menu'}
-        id={'reference_self_hosting_realtime'}
-        active={isReference_Self_Hosting_Realtime}
-        commonSections={realtimeServerCommonSections}
-        lib="self-hosting-realtime"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-analytics-menu'}
-        id={'reference_self_hosting_analytics'}
-        active={isReference_Self_Hosting_Analytics}
-        commonSections={analyticsServerCommonSections}
-        lib="self-hosting-analytics"
-      />
-      <NavigationMenuRefList
-        key={'reference-self-hosting-functions-menu'}
-        id={'reference_self_hosting_functions'}
-        active={isReference_Self_Hosting_Functions}
-        commonSections={functionsServerCommonSections}
-        lib="self-hosting-functions"
-      />
-    </div>
-  )
+  return getMenuElement(menu)
 }
 
 export default memo(NavigationMenu)

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.utils.ts

@@ -1,6 +1,84 @@
-// check if the link is allowed to be displayed
-export function isFuncNotInLibraryOrVersion(id, type, allowedKeys) {
-  if (id && allowedKeys && !allowedKeys.includes(id) && type !== 'markdown') {
-    return true
-  }
+import { useEffect, useState } from 'react'
+import { ICommonItem } from '~/components/reference/Reference.types'
+import { Json } from '~/types'
+
+/**
+ * Recursively filter common sections and their sub items based on
+ * what is available in their spec
+ */
+export function deepFilterSections<T extends ICommonItem>(
+  sections: T[],
+  specFunctionIds: string[]
+): T[] {
+  return sections
+    .filter(
+      (section) =>
+        section.type === 'category' ||
+        section.type === 'markdown' ||
+        specFunctionIds.includes(section.id)
+    )
+    .map((section) => {
+      if ('items' in section) {
+        return {
+          ...section,
+          items: deepFilterSections(section.items, specFunctionIds),
+        }
+      }
+      return section
+    })
+}
+
+/**
+ * Imports common sections file dynamically.
+ *
+ * Dynamic imports allow for code splitting which
+ * dramatically reduces app bundle size.
+ *
+ * See https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
+ */
+export function useCommonSections(commonSectionsFile: string) {
+  const [commonSections, setCommonSections] = useState<ICommonItem[]>()
+
+  useEffect(() => {
+    async function fetchCommonSections() {
+      const commonSections = await import(
+        /* webpackInclude: /common-.*\.json$/ */
+        /* webpackMode: "lazy" */
+        `~/../../spec/${commonSectionsFile}`
+      )
+      setCommonSections(commonSections.default)
+    }
+    fetchCommonSections()
+  }, [commonSectionsFile])
+
+  return commonSections
+}
+
+/**
+ * Imports spec file dynamically.
+ *
+ * Dynamic imports allow for code splitting which
+ * dramatically reduces app bundle size.
+ *
+ * See https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
+ */
+export function useSpec(specFile?: string) {
+  const [spec, setSpec] = useState<Json>()
+
+  useEffect(() => {
+    if (!specFile) {
+      return
+    }
+    async function fetchSpec() {
+      const spec = await import(
+        /* webpackInclude: /supabase_.*\.ya?ml$/ */
+        /* webpackMode: "lazy" */
+        `~/../../spec/${specFile}`
+      )
+      setSpec(spec.default)
+    }
+    fetchSpec()
+  }, [specFile])
+
+  return spec
 }

apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router'
 import { IconChevronLeft } from 'ui'
 import * as NavItems from './NavigationMenu.constants'
 
-// @ts-expect-error
 import clientLibsCommon from '~/../../spec/common-cli.yml' assert { type: 'yml' }
 
 const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx

@@ -6,11 +6,10 @@ import * as NavItems from './NavigationMenu.constants'
 
 interface Props {
   id: string
-  active: boolean
   collapsible?: boolean
   value?: string[]
 }
-const NavigationMenuGuideList: React.FC<Props> = ({ id, active, value }) => {
+const NavigationMenuGuideList: React.FC<Props> = ({ id, value }) => {
   const router = useRouter()
 
   const menu = NavItems[id]
@@ -35,16 +34,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, active, value }) => {
       key={id}
       type={value ? 'multiple' : 'single'}
       value={value ?? firstLevelRoute}
-      className={[
-        'transition-all duration-150 ease-out',
-        // enabled
-        active && 'opacity-100 ml-0 delay-150',
-        // level === 'home' && 'ml-12',
-
-        // disabled
-        // level !== 'home' && level !== id ? '-ml-8' : '',
-        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
-      ].join(' ')}
+      className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150"
     >
       <NavigationMenuGuideListItems menu={menu} id={id} />
     </Accordion.Root>

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx

@@ -119,7 +119,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
 
   return (
     <li className="mb-1.5">
-      <Link href={`${props.url}`} passHref>
+      <Link href={props.url} passHref>
         <a
           className={[
             'cursor-pointer transition text-sm',
@@ -180,14 +180,12 @@ const Content = (props) => {
               <div className="flex flex-col gap-2.5">
                 {x.items.map((subItem, subItemIndex) => {
                   return (
-                    <>
-                      <ContentAccordionLink
-                        key={subItem.name}
-                        subItem={subItem}
-                        subItemIndex={subItemIndex}
-                        parent={x}
-                      />
-                    </>
+                    <ContentAccordionLink
+                      key={subItem.name}
+                      subItem={subItem}
+                      subItemIndex={subItemIndex}
+                      parent={x}
+                    />
                   )
                 })}
               </div>

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx

@@ -1,48 +1,44 @@
-// import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
-
-import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
+import { useCommonSections, useSpec } from './NavigationMenu.utils'
 import NavigationMenuRefListItems from './NavigationMenuRefListItems'
 
 import React from 'react'
 
-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[]
-  active: boolean
-  spec?: any
+interface NavigationMenuRefListProps {
+  id: string
+  basePath: string
+  commonSectionsFile: string
+  specFile?: string
 }
 
-const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
+const NavigationMenuRefList = ({
   id,
-  lib,
-  commonSections,
+  basePath,
+  commonSectionsFile,
+  specFile,
+}: NavigationMenuRefListProps) => {
+  const commonSections = useCommonSections(commonSectionsFile)
+  const spec = useSpec(specFile)
+
+  if (!commonSections) {
+    return null
+  }
+
+  if (specFile && !spec) {
+    return null
+  }
 
-  active,
-  spec,
-}) => {
   const filteredSections = commonSections.filter((section) => {
     return !section.excludes?.includes(id)
   })
 
   return (
-    <div
-      className={[
-        'transition-all duration-150 ease-out',
-        // enabled
-        active && 'opacity-100 ml-0 delay-150 h-auto',
-        // move menu back to margin-left
-        // level === 'home' && 'ml-12',
-        // disabled
-        // level !== 'home' && level !== id ? '-ml-8' : '',
-        !active ? 'opacity-0 invisible absolute h-0 overflow-hidden' : '',
-      ].join(' ')}
-    >
-      <NavigationMenuRefListItems id={id} lib={lib} commonSections={filteredSections} spec={spec} />
+    <div className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150 h-auto">
+      <NavigationMenuRefListItems
+        id={id}
+        commonSections={filteredSections}
+        spec={spec}
+        basePath={basePath}
+      />
     </div>
   )
 }

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 (
-    <li key={id} className="function-link-item leading-5">
-      <Link href={`/reference/${library}/${version ? version + '/' : ''}${slug}`} passHref>
-        <a
-          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 && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
-          {title}
-          {active && !isSubItem && (
-            <div
-              aria-hidden="true"
-              className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
-            ></div>
-          )}
-          {isParent && (
-            <IconChevronUp
-              width={16}
-              className="data-open-parent:rotate-0 data-closed-parent:rotate-90 transition"
-            />
-          )}
-        </a>
-      </Link>
+    <li className="function-link-item leading-5">
+      <a
+        href={url}
+        /**
+         * We don't actually want to navigate or re-render anything
+         * since ref links are all sub-sections on the same page
+         */
+        onClick={(e) => {
+          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 && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
+        {title}
+        {active && !isSubItem && (
+          <div
+            aria-hidden="true"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+          ></div>
+        )}
+        {isParent && (
+          <IconChevronUp
+            width={16}
+            className="data-open-parent:rotate-0 data-closed-parent:rotate-90 transition"
+          />
+        )}
+      </a>
     </li>
   )
 })
 
-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 (
+      <FunctionLink
+        title={section.title}
+        id={section.id}
+        slug={section.slug}
+        basePath={basePath}
+        isParent={false}
+        isSubItem
+      />
+    )
   }
 
+  let active =
+    section.id === activeAccordionItem ||
+    section.items.some((item) => item.id === activeAccordionItem)
+
   return (
-    <Accordion.Root
-      collapsible
-      key={props.id + '-accordian-root-for-func-' + props.index}
-      type="single"
-      value={active ? props.id : ''}
-    >
-      <Accordion.Item key={props.id + '-accordian-item'} value={props.id}>
+    <Accordion.Root collapsible type="single" value={active ? section.id : ''}>
+      <Accordion.Item value={section.id}>
         <FunctionLink
-          library={props.lib}
-          title={props.title}
-          id={props.id}
-          slug={props.slug}
-          isParent={props.items}
-          isSubItem={true}
+          title={section.title}
+          id={section.id}
+          slug={section.slug}
+          basePath={basePath}
+          isParent
+          isSubItem
         />
-        {props.items && (
-          <Accordion.Content
-            key={props.id + '-sub-items-accordion-container'}
-            className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-scale-600 pl-3 ml-1 data-open:mt-2 grid gap-2.5"
-          >
-            {props.items &&
-              props.items
-                .filter((item) => props.allowedKeys.includes(item.id))
-                .map((item) => {
-                  return (
-                    <FunctionLink
-                      key={item.title}
-                      library={props.lib}
-                      title={item.title}
-                      id={item.id}
-                      slug={item.slug}
-                      isParent={false}
-                      isSubItem={false}
-                    />
-                  )
-                })}
-          </Accordion.Content>
-        )}
+        <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up border-l border-scale-600 pl-3 ml-1 data-open:mt-2 grid gap-2.5">
+          {section.items.map((item) => {
+            return (
+              <FunctionLink
+                key={item.id}
+                title={item.title}
+                id={item.id}
+                slug={item.slug}
+                basePath={basePath}
+                isParent={false}
+                isSubItem={false}
+              />
+            )
+          })}
+        </Accordion.Content>
       </Accordion.Item>
     </Accordion.Root>
   )
@@ -172,67 +155,25 @@ const Divider = () => {
   return <div className="h-px w-full bg-blackA-300 dark:bg-whiteA-300 my-3"></div>
 }
 
-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<INavigationMenuRefList> = ({ 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 (
     <div className={'w-full flex flex-col gap-0 sticky top-8'}>
@@ -251,61 +192,26 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
           <span>Back to Main Menu</span>
         </a>
       </Link>
-
       <div className="flex items-center gap-3 my-3">
         <HomeMenuIconPicker icon={menu.icon} width={21} height={21} />
         <HeaderLink title={menu.title} url={menu.url} id={id} />
         <RevVersionDropdown />
       </div>
-
       <ul className="function-link-list flex flex-col gap-2">
-        {sections.map((fn: any, fnIndex) => {
-          // run allow check
-          if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
-            return <Fragment key={fn.id}></Fragment>
-          }
-
-          // handle subtitles with subitems
-          return fn.id ? (
-            <Fragment key={fn.id}>
-              <RenderLink {...fn} lib={lib} />
-              {fn.items &&
-                fn.items.map((item) => (
-                  <RenderLink
-                    {...item}
-                    library={menu.title}
-                    index={fnIndex}
-                    modifierIds={modifierIds}
-                    filterIds={filterIds}
-                    authServerIds={authServerIds}
-                    lib={lib}
-                    allowedKeys={allowedKeys}
-                  />
-                ))}
-            </Fragment>
-          ) : (
-            <Fragment key={fn.title}>
-              <Divider />
-              <SideMenuTitle title={fn.title} />
-              {fn.items &&
-                fn.items.map((item, i) => {
-                  // run allow check
-                  if (isFuncNotInLibraryOrVersion(item.id, item.type, allowedKeys))
-                    return <Fragment key={item.id + i}></Fragment>
-                  return (
-                    <RenderLink
-                      {...item}
-                      key={item.id + i}
-                      library={menu.title}
-                      index={fnIndex}
-                      modifierIds={modifierIds}
-                      filterIds={filterIds}
-                      authServerIds={authServerIds}
-                      lib={lib}
-                      allowedKeys={allowedKeys}
-                    />
-                  )
-                })}
+        {filteredSections.map((section) => {
+          return (
+            <Fragment key={section.title}>
+              {section.type === 'category' ? (
+                <>
+                  <Divider />
+                  <SideMenuTitle title={section.title} />
+                  {section.items.map((item) => (
+                    <RenderLink key={item.id} section={item} basePath={basePath} />
+                  ))}
+                </>
+              ) : (
+                <RenderLink section={section} basePath={basePath} />
+              )}
             </Fragment>
           )
         })}
@@ -314,4 +220,4 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
   )
 }
 
-export default React.memo(Content)
+export default React.memo(NavigationMenuRefListItems)

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'

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) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <RefSubLayout>
-        {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 <RefEducationSection key={x.id + i} item={x} markdownContent={markdownData} />
-              break
+              return (
+                <RefEducationSection
+                  key={section.id + i}
+                  item={section}
+                  markdownContent={markdownData}
+                />
+              )
             case 'function':
               return (
                 <RefFunctionSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
                   spec={props.spec}
                   typeSpec={props.typeSpec}
                 />
               )
             case 'cli-command':
-              return <CliCommandSection key={x.id + i} funcData={x} commonFuncData={x} />
-              break
+              return (
+                <CliCommandSection
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
+                />
+              )
             case 'operation':
               return (
                 <ApiOperationSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
+                  key={section.id + i}
+                  funcData={section}
+                  commonFuncData={section}
                   spec={props.spec}
                 />
               )
             default:
-              return (
-                <RefFunctionSection
-                  key={x.id + i}
-                  funcData={x}
-                  commonFuncData={x}
-                  spec={props.spec}
-                  typeSpec={props.typeSpec}
-                />
-              )
-              break
+              throw new Error(`Unknown common section type '${sectionType}'`)
           }
         })}
       </RefSubLayout>

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
 }

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'

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
     })

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: {
@@ -207,25 +207,6 @@ const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
   )
 })
 
-const SideMenu = memo(function SideMenu() {
-  return (
-    <div
-      className={[
-        'transition-all ease-out duration-200',
-        'absolute left-0 right-0 h-screen',
-        'px-5 pl-5 py-16',
-        'top-[0px]',
-        'bg-scale-200',
-        // desktop styles
-        'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
-        'lg:opacity-100 lg:visible',
-      ].join(' ')}
-    >
-      <NavigationMenu />
-    </div>
-  )
-})
-
 const HeaderLogo = memo(function HeaderLogo() {
   const { isDarkMode } = useTheme()
   return (
@@ -311,13 +292,26 @@ const NavContainer = memo(function NavContainer() {
             </div>
           </div>
         </div>
-        <SideMenu />
+        <div
+          className={[
+            'transition-all ease-out duration-200',
+            'absolute left-0 right-0 h-screen',
+            'px-5 pl-5 py-16',
+            'top-[0px]',
+            'bg-scale-200',
+            // desktop styles
+            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
+            'lg:opacity-100 lg:visible',
+          ].join(' ')}
+        >
+          <NavigationMenu />
+        </div>
       </div>
     </div>
   )
 })
 
-const SiteLayout = ({ children }) => {
+const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
     <>
       <Head>

apps/docs/lib/helpers.ts

@@ -1,6 +1,4 @@
-// [Joshen] I think this can be done better, as its mostly used to choose what
-
-import { ICommonFunc } from '../components/reference/Reference.types'
+import { ICommonBase, ICommonItem, ICommonSection } from '../components/reference/Reference.types'
 
 // menus to render in the SideBar.js (Ref Nav.constants.ts)
 export function getPageType(asPath: string) {
@@ -36,18 +34,25 @@ export function getPageType(asPath: string) {
   return page
 }
 
-export function flattenSections(sections: ICommonFunc[]) {
-  let a: ICommonFunc[] = []
-  for (let i = 0; i < sections.length; i++) {
-    if (sections[i].id) {
-      // only push a section that has an id
-      // these are reserved for sidebar subtitles
-      a.push(sections[i])
+/**
+ * Flattens common sections recursively by their `items`.
+ *
+ * _Note:_ `sections` type set to `ICommonBase[]` instead of
+ * `ICommonItem[]` until TypeScript supports JSON imports as const:
+ * https://github.com/microsoft/TypeScript/issues/32063
+ */
+export function flattenSections(sections: ICommonBase[]): ICommonSection[] {
+  return sections.reduce<ICommonSection[]>((acc, section: ICommonItem) => {
+    // Flatten sub-items
+    if ('items' in section) {
+      let newSections = acc
+
+      if (section.type !== 'category') {
+        newSections.push(section)
+      }
+
+      return newSections.concat(flattenSections(section.items))
     }
-    if (sections[i].items) {
-      // if there are subitems, loop through
-      a = a.concat(flattenSections(sections[i].items))
-    }
-  }
-  return a
+    return acc.concat(section)
+  }, [])
 }

apps/docs/lib/mdx/generateRefMarkdown.tsx

@@ -2,12 +2,9 @@ import fs from 'fs'
 
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
+import { ICommonMarkdown } from '~/components/reference/Reference.types'
 
-// import { remarkCodeHike } from '@code-hike/mdx'
-// import codeHikeTheme from '~/codeHikeTheme.js'
-// import theme from 'shiki/themes/solarized-dark.json'
-
-async function generateRefMarkdown(sections, slug) {
+async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
   let markdownContent = []
   /**
    * Read all the markdown files that might have
@@ -16,10 +13,8 @@ async function generateRefMarkdown(sections, slug) {
    *  - important notes regarding implementation
    */
   await Promise.all(
-    sections.map(async (x, i) => {
-      if (!x.id) return null
-
-      const pathName = `docs/ref${slug}/${x.id}.mdx`
+    sections.map(async (section) => {
+      const pathName = `docs/ref${slug}/${section.id}.mdx`
 
       function checkFileExists(x) {
         if (fs.existsSync(x)) {
@@ -37,8 +32,8 @@ async function generateRefMarkdown(sections, slug) {
       const { data, content } = matter(fileContents)
 
       markdownContent.push({
-        id: x.id,
-        title: x.title,
+        id: section.id,
+        title: section.title,
         meta: data,
         // introPage: introPages.includes(x),
         content: content

apps/docs/lib/mdx/getConfig.tsx

@@ -1,12 +1,7 @@
-// @ts-expect-error
 import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specAnalyticsV0 from '~/../../spec/analytics_v0_config.yaml' assert { type: 'yml' }
-// @ts-expect-error
 import specFunctionsV0 from '~/../../spec/functions_v0_config.yaml' assert { type: 'yml' }
 
 function getStorageConfigV0() {

apps/docs/lib/mdx/handleRefStaticPaths.tsx

@@ -1,13 +1,14 @@
-import { getAllDocs } from '../docs'
-
-async function handleRefGetStaticPaths() {
-  let docs = getAllDocs()
+import { ICommonSection } from '~/components/reference/Reference.types'
 
+async function handleRefGetStaticPaths(sections: ICommonSection[], libraryPath: string) {
   return {
-    paths: docs.map(() => {
+    paths: sections.map((section) => {
       return {
         params: {
-          slug: docs.map((d) => d.slug),
+          slug: libraryPath
+            .split('/')
+            .filter((dir) => !!dir)
+            .concat(section.slug),
         },
       }
     }),

apps/docs/lib/mdx/handleRefStaticProps.tsx

@@ -1,7 +1,11 @@
+import { ICommonMarkdown, ICommonSection } from '~/components/reference/Reference.types'
 import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown'
 
-async function handleRefStaticProps(sections, librarypath) {
-  let markdownContent = await generateRefMarkdown(sections, librarypath)
+async function handleRefStaticProps(sections: ICommonSection[], libraryPath: string) {
+  const markdownSections = sections.filter(
+    (section): section is ICommonMarkdown => section.type === 'markdown'
+  )
+  const markdownContent = await generateRefMarkdown(markdownSections, libraryPath)
 
   return {
     props: {

apps/docs/lib/refGenerator/helpers.ts

@@ -3,6 +3,7 @@ import { TsDoc } from '../../generator/legacy/definitions'
 import { values, mapValues } from 'lodash'
 import { OpenAPIV3 } from 'openapi-types'
 import { flattenSections } from '../helpers'
+import { ICommonItem } from '~/components/reference/Reference.types'
 
 export function extractTsDocNode(nodeToFind: string, definition: any) {
   const nodePath = nodeToFind.split('.')
@@ -294,12 +295,13 @@ export const toArrayWithKey = (obj: object, keyAs: string) =>
     })
   )
 
-export function generateAllowedClientLibKeys(sections, spec) {
+/**
+ * Get a list of common section IDs that are available in this spec
+ */
+export function getAvailableSectionIds(sections: ICommonItem[], spec: any) {
   // Filter parent sections first
 
-  const specIds = spec.functions.map((func) => {
-    return func.id
-  })
+  const specIds = spec.functions.map(({ id }) => id)
 
   const newShape = flattenSections(sections).filter((section) => {
     if (specIds.includes(section.id)) {

apps/docs/next.config.mjs

@@ -6,6 +6,12 @@ import rehypeSlug from 'rehype-slug'
 
 import withTM from 'next-transpile-modules'
 import withYaml from 'next-plugin-yaml'
+import configureBundleAnalyzer from '@next/bundle-analyzer'
+
+const withBundleAnalyzer = configureBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+})
+
 // import admonitions from 'remark-admonitions'
 
 // import { remarkCodeHike } from '@code-hike/mdx'
@@ -39,7 +45,7 @@ const withMDX = nextMdx({
   },
 })
 
-// /** @type {NextConfig} */
+/** @type {import('next').NextConfig} nextConfig */
 const nextConfig = {
   // Append the default value with md extensions
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
@@ -58,6 +64,11 @@ const nextConfig = {
   },
   experimental: {
     mdxRs: true,
+    modularizeImports: {
+      lodash: {
+        transform: 'lodash/{{member}}',
+      },
+    },
   },
   async headers() {
     return [
@@ -92,9 +103,14 @@ const nextConfig = {
   },
 }
 
-// next.config.js
-export default () => {
-  // const plugins = [withMDX]/
-  const plugins = [withTM(['ui', 'common', '@supabase/auth-helpers-nextjs']), withMDX, withYaml]
+const configExport = () => {
+  const plugins = [
+    withTM(['ui', 'common', '@supabase/auth-helpers-nextjs']),
+    withMDX,
+    withYaml,
+    withBundleAnalyzer,
+  ]
   return plugins.reduce((acc, next) => next(acc), nextConfig)
 }
+
+export default configExport

apps/docs/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev --port 3001",
     "dev:secrets:pull": "AWS_PROFILE=supabase-dev node internals/getSecrets.js",
     "build": "npm run generate:all && next build",
+    "build:analyze": "ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
     "build:sitemap": "node ./internals/generate-sitemap.mjs",
@@ -46,6 +47,7 @@
     "@docsearch/react": "^3.3.0",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@next/bundle-analyzer": "^13.4.0",
     "@next/mdx": "^12.0.4",
     "@octokit/auth-app": "^4.0.9",
     "@octokit/core": "^4.2.0",

apps/docs/pages/_app.tsx

@@ -3,11 +3,8 @@ import { SessionContextProvider } from '@supabase/auth-helpers-react'
 import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
 import { AppPropsWithLayout } from 'types'
 import { CommandMenuProvider } from 'ui'
-import components from '~/components'
 import Favicons from '~/components/Favicons'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'

apps/docs/pages/reference/analytics/config.tsx

@@ -4,7 +4,6 @@ import components from '~/components/index'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
-// @ts-expect-error
 import specFile from '~/../../spec/analytics_v0_config.yaml' assert { type: 'yml' }
 import { Parameter } from '~/lib/refGenerator/refTypes'
 

apps/docs/pages/reference/api/[...slug].tsx

@@ -8,17 +8,17 @@ import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 // @ts-ignore
 const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
 const sections = flattenSections(apiCommonSections)
+const libraryPath = '/api'
 
 export default function Config(props) {
   return <RefSectionHandler sections={sections} spec={generatedSpec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/api')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/auth/config.tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import specFile from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
 import { Parameter } from '~/lib/refGenerator/refTypes'
 import ReactMarkdown from 'react-markdown'

apps/docs/pages/reference/cli/[...slug].tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' }
 
 import { flattenSections } from '~/lib/helpers'
@@ -9,15 +8,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(cliCommonSections)
+const libraryPath = '/cli'
 
 export default function CliRef(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="cli" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/cli')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/cli/config.tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import specFile from '~/../../spec/cli_v1_config.yaml' assert { type: 'yml' }
 import { Parameter } from '~/lib/refGenerator/refTypes'
 import ReactMarkdown from 'react-markdown'

apps/docs/pages/reference/csharp/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/csharp/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -36,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/csharp/v0/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp/v0'
 
-export default function JSReference(props) {
+export default function CSharpReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_csharp_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/csharp/v0'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -35,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/csharp/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/dart/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_dart_v1.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/dart/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_dart_v1.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.slug === slug)
@@ -36,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/dart/v0/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_dart_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart/v0'
 
 export default function JSReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/dart/v0/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_dart_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/dart/v0'
 
-export default function JSReference(props) {
+export default function DartReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.slug === slug)
@@ -35,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/dart/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/javascript/[...slug].tsx

@@ -1,6 +1,6 @@
+import { inspect } from 'util'
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -8,6 +8,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   return (
@@ -22,9 +23,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/javascript/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -36,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/javascript/v1/[...slug].tsx

@@ -1,6 +1,6 @@
+import { inspect } from 'util'
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v1/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -8,6 +8,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   return (
@@ -22,9 +23,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript/v1')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -8,7 +7,9 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   const router = useRouter()
@@ -35,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/javascript/v1')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/python/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_py_v2.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -8,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/python'
 
 export default function PyReference(props) {
   return (
@@ -22,9 +22,9 @@ export default function PyReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/python')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/python/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_py_v2.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,6 +9,7 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/python'
 
 export default function PyReference(props) {
   const router = useRouter()
@@ -36,9 +36,9 @@ export default function PyReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/python')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/realtime/config.tsx

@@ -4,7 +4,6 @@ import components from '~/components/index'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
-// @ts-expect-error
 import specFile from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
 import { Parameter } from '~/lib/refGenerator/refTypes'
 

apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx

@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingAnalyticsCommonSections)
+const libraryPath = '/self-hosting-analytics'
 
 // @ts-ignore
 const spec = gen_v3(analyticsSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostAnalyticsReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-analytics')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/self-hosting-auth/[...slug].tsx

@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingAuthCommonSections)
+const libraryPath = '/self-hosting-auth'
 
 // @ts-ignore
 const spec = gen_v3(authSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostAuthReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-auth')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/self-hosting-functions/[...slug].tsx

@@ -7,15 +7,16 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingFunctionsCommonSections)
+const libraryPath = '/self-hosting-functions'
 
-export default function JSReference(props) {
+export default function SelfHostFunctionsReference(props) {
   return <RefSectionHandler sections={sections} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-functions')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx

@@ -4,18 +4,18 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
-import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingRealtimeCommonSections)
+const libraryPath = '/self-hosting-realtime'
 
-export default function JSReference(props) {
+export default function SelfHostRealtimeReference(props) {
   return <RefSectionHandler sections={sections} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-realtime')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/self-hosting-storage/[...slug].tsx

@@ -7,18 +7,19 @@ import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
 const sections = flattenSections(selfHostingStorageCommonSections)
+const libraryPath = '/self-hosting-storage'
 
 // @ts-ignore
 const spec = gen_v3(storageSpec, 'wat', { apiUrl: 'apiv0' })
 
-export default function JSReference(props) {
+export default function SelfHostStorageReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/self-hosting-storage')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/storage/config.tsx

@@ -1,4 +1,3 @@
-// @ts-expect-error
 import specFile from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
 import { Parameter } from '~/lib/refGenerator/refTypes'
 

apps/docs/pages/reference/swift/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_swift_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/swift/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_swift_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -36,9 +36,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/swift/v0/[...slug].tsx

@@ -1,5 +1,4 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_swift_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -7,15 +6,16 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift/v0'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx

@@ -1,6 +1,5 @@
 import clientLibsCommonSections from '~/../../spec/common-client-libs-sections.json'
 import typeSpec from '~/../../spec/enrichments/tsdoc_v2/combined.json'
-// @ts-expect-error
 import spec from '~/../../spec/supabase_swift_v0.yml' assert { type: 'yml' }
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
@@ -10,8 +9,9 @@ import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
 
 const sections = flattenSections(clientLibsCommonSections)
+const libraryPath = '/swift/v0'
 
-export default function JSReference(props) {
+export default function SwiftReference(props) {
   const router = useRouter()
   const slug = router.query.slug[0]
   const filteredSection = sections.filter((section) => section.id === slug)
@@ -35,9 +35,9 @@ export default function JSReference(props) {
 }
 
 export async function getStaticProps() {
-  return handleRefStaticProps(sections, '/swift/v0')
+  return handleRefStaticProps(sections, libraryPath)
 }
 
-export function getStaticPaths() {
-  return handleRefGetStaticPaths()
+export async function getStaticPaths() {
+  return handleRefGetStaticPaths(sections, libraryPath)
 }

apps/docs/scripts/search/sources/reference-doc.ts

@@ -3,7 +3,7 @@ import { readFile } from 'fs/promises'
 import yaml from 'js-yaml'
 import { OpenAPIV3 } from 'openapi-types'
 import {
-  ICommonFunc,
+  ICommonItem,
   IFunctionDefinition,
   ISpec,
 } from '../../../components/reference/Reference.types'
@@ -29,7 +29,7 @@ export abstract class ReferenceSource<SpecSection> extends BaseSource {
     const specContents = await readFile(this.specFilePath, 'utf8')
     const refSectionsContents = await readFile(this.sectionsFilePath, 'utf8')
 
-    const refSections: ICommonFunc[] = JSON.parse(refSectionsContents)
+    const refSections: ICommonItem[] = JSON.parse(refSectionsContents)
     const flattenedRefSections = flattenSections(refSections)
 
     const checksum = createHash('sha256')
@@ -69,7 +69,7 @@ export abstract class ReferenceSource<SpecSection> extends BaseSource {
 
   abstract getSpecSections(specContents: string): SpecSection[]
   abstract matchSpecSection(specSections: SpecSection[], id: string): SpecSection
-  abstract formatSection(specSection: SpecSection, refSection: ICommonFunc): string
+  abstract formatSection(specSection: SpecSection, refSection: ICommonItem): string
 }
 
 export class OpenApiReferenceSource extends ReferenceSource<enrichedOperation> {
@@ -106,7 +106,7 @@ export class ClientLibReferenceSource extends ReferenceSource<IFunctionDefinitio
   matchSpecSection(functionDefinitions: IFunctionDefinition[], id: string): IFunctionDefinition {
     return functionDefinitions.find((functionDefinition) => functionDefinition.id === id)
   }
-  formatSection(functionDefinition: IFunctionDefinition, refSection: ICommonFunc): string {
+  formatSection(functionDefinition: IFunctionDefinition, refSection: ICommonItem): string {
     const { title } = refSection
     const { description, title: functionName } = functionDefinition
 

apps/docs/styles/main.scss

@@ -8,6 +8,7 @@
     url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
@@ -16,6 +17,7 @@
     url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 
 :root {

apps/docs/types/index.ts

@@ -1 +1,3 @@
 export * from './next'
+
+export type Json = string | number | boolean | { [key: string]: Json } | Json[]

apps/docs/types/yaml.d.ts

@@ -0,0 +1,13 @@
+declare module '*.yml' {
+  import { Json } from '.'
+
+  const value: Json
+  export default value
+}
+
+declare module '*.yaml' {
+  import { Json } from '.'
+
+  const value: Json
+  export default value
+}

package-lock.json

@@ -41,6 +41,7 @@
         "@docsearch/react": "^3.3.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
+        "@next/bundle-analyzer": "^13.4.0",
         "@next/mdx": "^12.0.4",
         "@octokit/auth-app": "^4.0.9",
         "@octokit/core": "^4.2.0",
@@ -5267,9 +5268,9 @@
       }
     },
     "node_modules/@next/bundle-analyzer": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.2.4.tgz",
-      "integrity": "sha512-bY4Clt7f1roJextpeQOQQWfNiXI0O5UvfOEyfuM5YUGPQMOCAZD2zjLjolakdn9Dm2yyMQUQ6JDE+iJK0dIeLA==",
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.0.tgz",
+      "integrity": "sha512-3ni7Ple1By7RNk2MB/y4CC4aFJuyI2mYSRxDo8n5VckVJeLVasmmmvzdN45dKzgs8AHu3dPWIsS3+2NJKMyU+A==",
       "dependencies": {
         "webpack-bundle-analyzer": "4.7.0"
       }
@@ -43187,9 +43188,9 @@
       "integrity": "sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q=="
     },
     "@next/bundle-analyzer": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.2.4.tgz",
-      "integrity": "sha512-bY4Clt7f1roJextpeQOQQWfNiXI0O5UvfOEyfuM5YUGPQMOCAZD2zjLjolakdn9Dm2yyMQUQ6JDE+iJK0dIeLA==",
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.0.tgz",
+      "integrity": "sha512-3ni7Ple1By7RNk2MB/y4CC4aFJuyI2mYSRxDo8n5VckVJeLVasmmmvzdN45dKzgs8AHu3dPWIsS3+2NJKMyU+A==",
       "requires": {
         "webpack-bundle-analyzer": "4.7.0"
       }
@@ -51526,6 +51527,7 @@
         "@docsearch/react": "^3.3.0",
         "@mdx-js/loader": "^1.6.22",
         "@mdx-js/react": "^1.6.22",
+        "@next/bundle-analyzer": "^13.4.0",
         "@next/mdx": "^12.0.4",
         "@octokit/auth-app": "^4.0.9",
         "@octokit/core": "^4.2.0",

packages/ui/package.json

@@ -4,6 +4,7 @@
   "main": "./index.tsx",
   "types": "./index.tsx",
   "license": "MIT",
+  "sideEffects": false,
   "scripts": {
     "build:icons": "node --experimental-modules internals/populate-icons.js",
     "storybook": "start-storybook -p 6006",

packages/ui/src/components/Command/CommandMenuProvider.tsx

@@ -1,6 +1,11 @@
 import { useTheme, UseThemeProps } from 'common'
+import dynamic from 'next/dynamic'
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
-import CommandMenu from './CommandMenu'
+
+// `CommandMenu` is heavy - code split to reduce app bundle size
+const CommandMenu = dynamic(() => import('./CommandMenu'), {
+  loading: () => <p>Loading...</p>,
+})
 
 export interface CommandMenuContextValue {
   isOpen: boolean

spec/common-api-sections.json

@@ -6,6 +6,7 @@
     "type": "markdown"
   },
   {
+    "type": "category",
     "title": "Projects",
     "items": [
       {
@@ -35,6 +36,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Secrets",
     "items": [
       {
@@ -58,6 +60,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Typescript",
     "items": [
       {
@@ -69,6 +72,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Functions",
     "items": [
       {
@@ -109,8 +113,8 @@
       }
     ]
   },
-
   {
+    "type": "category",
     "title": "Custom Hostname",
     "items": [
       {
@@ -146,6 +150,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "pgsodium",
     "items": [
       {
@@ -163,6 +168,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Network",
     "items": [
       {

spec/common-cli-sections.json

@@ -14,6 +14,7 @@
     "type": "markdown"
   },
   {
+    "type": "category",
     "title": "General",
     "items": [
       {
@@ -55,6 +56,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Testing",
     "items": [
       {
@@ -72,6 +74,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Generate Types",
     "items": [
       {
@@ -95,6 +98,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Database",
     "items": [
       {
@@ -148,6 +152,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Migrations",
     "items": [
       {
@@ -177,6 +182,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Projects",
     "items": [
       {
@@ -200,6 +206,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Organizations",
     "items": [
       {
@@ -217,6 +224,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Edge Functions",
     "items": [
       {
@@ -258,6 +266,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Secrets",
     "items": [
       {
@@ -287,6 +296,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Authentication",
     "items": [
       {
@@ -334,6 +344,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Custom Domains",
     "items": [
       {
@@ -375,6 +386,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Vanity Subdomains",
     "items": [
       {
@@ -410,6 +422,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Network Bans",
     "items": [
       {
@@ -433,6 +446,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Network Restrictions",
     "items": [
       {
@@ -456,6 +470,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "SSL Enforcement",
     "items": [
       {
@@ -479,6 +494,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Autocompletion Scripts",
     "items": [
       {

spec/common-client-libs-sections.json

@@ -51,6 +51,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Database",
     "items": [
       {
@@ -292,7 +293,7 @@
       {
         "id": "using-modifiers",
         "isFunc": false,
-        "title": "Using Modifiers",
+        "title": "Using modifiers",
         "slug": "using-modifiers",
         "product": "database",
         "parent": "modifiers",
@@ -375,6 +376,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Auth",
     "items": [
       {
@@ -696,6 +698,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Functions",
     "items": [
       {
@@ -708,6 +711,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Realtime",
     "items": [
       {
@@ -769,6 +773,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Storage",
     "items": [
       {
@@ -900,6 +905,7 @@
     ]
   },
   {
+    "type": "category",
     "title": "Misc",
     "excludes": [
       "reference_dart_v1",

spec/common-self-hosting-analytics-sections.json

@@ -7,6 +7,7 @@
     "type": "markdown"
   },
   {
+    "type": "category",
     "title": "Management API",
     "items": [
       {

spec/common-self-hosting-auth-sections.json

@@ -7,6 +7,7 @@
     "type": "markdown"
   },
   {
+    "type": "category",
     "title": "Usage",
     "items": [
       {

spec/common-self-hosting-storage-sections.json

@@ -7,6 +7,7 @@
     "type": "markdown"
   },
   {
+    "type": "category",
     "title": "Usage",
     "items": [
       {