chore: update versions (#226)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.config/vite.lib.js

@@ -12,7 +12,8 @@ const pkg = require(path.join(PWD, 'package.json'))
 export const lib = {
   entry: path.resolve(PWD, 'src/index.ts'),
   name: pkg.name,
-  fileName: 'index'
+  fileName: 'index',
+  formats: ['cjs', 'es']
 }
 export const basePlugins = [
   tsconfigPaths(),

docs/CHANGELOG.md

@@ -0,0 +1,6 @@
+# nhost-documentation
+
+## null
+### Patch Changes
+
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS

docs/components/AnchorLink.tsx

@@ -2,12 +2,10 @@ import Text from '@/components/ui/Text'
 import { motion } from 'framer-motion'
 import { useRouter } from 'next/dist/client/router'
 import React, { useState } from 'react'
-
 import createKebabCase from '../utils/createKebabCase'
 import Permalink from './icons/Permalink'
 
-// import { ReactNode, useState } from 'react';
-interface AnchorLinkProps {
+export interface AnchorLinkProps {
   children?: any
   id?: string
   size?: 'tiny' | 'small' | 'normal' | 'large' | 'big' | 'heading'
@@ -72,9 +70,8 @@ export default function AnchorLink({ children, id, size, className }: AnchorLink
           href={createKebabCase(
             `#${isQuoted ? (children.props ? children.props.children : children) : children}`
           )}
-          size={size ? size : 'big'}
           color="greyscaleDark"
-          className="font-medium"
+          className="font-medium break-all"
         >
           {children}
         </Text>

docs/components/Content.tsx

@@ -32,6 +32,7 @@ export function Content({ mdxSource, components, frontmatter }) {
             href={getGithubLink(router.query.category, router.query.subcategory, router.query.post)}
             target="_blank"
             rel="noreferrer"
+            type={null}
           >
             Edit This Page
             <GithubIcon className="w-3.5 h-3.5 ml-1.5 text-greyscaleDark self-center" />

docs/components/Footer.tsx

@@ -30,6 +30,7 @@ export default function Footer() {
                 variant="secondary"
                 className="md:visible invisible mr-2 text-white cursor-pointer"
                 href="mailto:hello@nhost.io"
+                type={null}
               >
                 Contact Us
               </Button>
@@ -40,6 +41,7 @@ export default function Footer() {
                 target="_blank"
                 rel="noreferrer"
                 className="cursor-pointer"
+                type={null}
               >
                 <span className="md:block hidden">Sign up or Log in</span>
                 <span className="md:hidden">Sign up</span>

docs/components/Header.tsx

@@ -1,26 +1,26 @@
-import { MenuIcon } from '@heroicons/react/outline'
+import { useNavData } from '@/components/NavDataContext'
+import { ArrowLeftIcon, MenuIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import { useRouter } from 'next/dist/client/router'
 import Link from 'next/link'
-import React, { useEffect } from 'react'
-import { useState } from 'react'
-
+import React, { MouseEvent, useEffect, useState } from 'react'
 import Button from '../components/ui/Button'
+import { Nav } from './Nav'
 
 export default function Header() {
   const [mobileMenu, setMobileMenu] = useState(false)
   const router = useRouter()
   const GithubStarsCounter = () => {
     const repoUrl = `https://api.github.com/repos/nhost/nhost`
-    const [count, setCount] = useState(null);
-    const format = n => n > 1000 ? `${(n / 1000).toFixed(1)}k` : n;
+    const [count, setCount] = useState(null)
+    const format = (n: number) => (n > 1000 ? `${(n / 1000).toFixed(1)}k` : n)
 
     useEffect(() => {
-      (async () => {
-        const data = await fetch(repoUrl).then(res => res.json());
-        setCount(data.stargazers_count);
-      })();
-    }, []);
+      ;(async () => {
+        const data = await fetch(repoUrl).then((res) => res.json())
+        setCount(data.stargazers_count)
+      })()
+    }, [repoUrl])
 
     return (
       <a
@@ -40,154 +40,234 @@ export default function Header() {
       </a>
     )
   }
+
+  function handleMobileMenuOpen() {
+    setMobileMenu(true)
+  }
+
+  function handleMobileMenuClose() {
+    setMobileMenu(false)
+  }
+
+  if (mobileMenu) {
+    return <MobileNav onClose={handleMobileMenuClose} />
+  }
+
   return (
-    <div className="bg-white md:max-w-full drop">
-      {mobileMenu ? (
-        <MobileNav setMobileMenu={setMobileMenu} mobileMenu={mobileMenu} />
-      ) : (
-        <div className="md:max-w-header2  mx-auto font-display flex flex-row antialiased px-4 ">
-          <div className="flex flex-row w-full  mx-auto place-content-between py-2">
-            <div className="flex flex-row">
-              <div className="md:hidden">
-                <MenuIcon
-                  className="h-8 w-8 cursor-pointer text-greyscaleDark"
-                  aria-hidden="true"
-                  onClick={() => setMobileMenu(!mobileMenu)}
-                />
-              </div>
+    <header className="bg-white md:max-w-full menu-card rounded-md px-4 py-0.5 mx-2">
+      <div className="md:max-w-header2 mx-auto font-display flex flex-row antialiased">
+        <div className="flex flex-row w-full mx-auto place-content-between py-2">
+          <div className="flex flex-row">
+            <button
+              className="md:hidden w-8 h-8 flex items-center justify-center cursor-pointer text-greyscaleDark"
+              aria-label="Open menu"
+              onClick={handleMobileMenuOpen}
+            >
+              <MenuIcon className="h-6 w-6" />
+            </button>
+
+            <Link href="/get-started" passHref>
+              <a className="hidden ml-3 sm:ml-0 self-center md:flex flex-row cursor-pointer">
+                <img src="/images/nhost-docs.svg" width={110} height={35} alt="Nhost white logo" />
+                <h1 className="self-center ml-6 font-medium text-greyscaleDark">DOCS</h1>
+              </a>
+            </Link>
+
+            <div className="ml-20 hidden md:flex flex-row self-center ">
+              <ul className="flex flex-row items-center self-center antialiased font-medium text-greyscaleGrey font-display">
+                <Link href="/get-started" passHref={true}>
+                  <a
+                    className={clsx(
+                      'cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
+                      router.query.category === 'get-started' && 'text-greyscaleDark'
+                    )}
+                  >
+                    Get Started
+                  </a>
+                </Link>
+                <Link href="/platform" passHref={true}>
+                  <a
+                    className={clsx(
+                      'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
+                      router.query.category === 'platform' && 'text-greyscaleDark'
+                    )}
+                  >
+                    Platform
+                  </a>
+                </Link>
+
+                <Link href="/reference" passHref={true}>
+                  <a
+                    className={clsx(
+                      'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
+                      router.query.category === 'reference' && 'text-greyscaleDark'
+                    )}
+                  >
+                    Reference
+                  </a>
+                </Link>
+              </ul>
+            </div>
+          </div>
+          <div className="hidden sm:flex self-center">
+            <GithubStarsCounter />
+            <Button
+              className="self-center"
+              variant="primary"
+              href={'https://app.nhost.io'}
+              Component="a"
+              target="_blank"
+              rel="noreferrer"
+              type={null}
+            >
+              Go to Nhost
+            </Button>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export type MobileNavProps = {
+  onClose?: VoidFunction
+}
+
+export function MobileNav({ onClose }: MobileNavProps) {
+  const { getConvolutedNavByCategory } = useNavData()
+  const router = useRouter()
+  const [selectedMenuSlug, setSelectedMenuSlug] = useState<string | null>(null)
+  const [selectedMenuName, setSelectedMenuName] = useState<string | null>(null)
+
+  function handleMenuSelect(event: MouseEvent<HTMLAnchorElement>, slug: string, name: string) {
+    event.preventDefault()
+
+    setSelectedMenuSlug(slug)
+    setSelectedMenuName(name)
+  }
+
+  function clearMenuSelection() {
+    setSelectedMenuSlug(null)
+    setSelectedMenuName(null)
+  }
+
+  return (
+    <div className="bg-white menu-card rounded-lg px-4 pb-6 max-w-full mx-2">
+      <div className="flex flex-col w-full py-3 mx-auto">
+        <div className="grid grid-flow-col justify-between items-center">
+          {!selectedMenuSlug && (
+            <>
+              <button
+                className="w-8 h-8 flex items-center justify-center cursor-pointer text-greyscaleDark"
+                aria-label="Close menu"
+                onClick={onClose}
+              >
+                <MenuIcon className="h-6 w-6" aria-hidden="true" />
+              </button>
+
               <Link href="/get-started" passHref>
-                <a className="hidden ml-3 sm:ml-0 self-center md:flex flex-row cursor-pointer">
+                <a
+                  className="ml-3 sm:ml-0 self-center flex flex-row cursor-pointer"
+                  onClick={onClose}
+                >
                   <img
                     src="/images/nhost-docs.svg"
                     width={110}
                     height={35}
                     alt="Nhost white logo"
                   />
-                  <h1 className="self-center ml-6 font-medium text-greyscaleDark">DOCS</h1>
+                  <h1 className="self-center ml-5 font-medium text-greyscaleDark">DOCS</h1>
                 </a>
               </Link>
+            </>
+          )}
 
-              <div className="ml-20 hidden md:flex flex-row self-center ">
-                <ul className="flex flex-row items-center self-center antialiased font-medium text-greyscaleGrey font-display">
-                  <Link href="/get-started" passHref={true}>
-                    <a
-                      className={clsx(
-                        'cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                        router.query.category === 'get-started' && 'text-greyscaleDark'
-                      )}
-                    >
-                      Get Started
-                    </a>
-                  </Link>
-                  <Link href="/platform" passHref={true}>
-                    <a
-                      className={clsx(
-                        'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                        router.query.category === 'platform' && 'text-greyscaleDark'
-                      )}
-                    >
-                      Platform
-                    </a>
-                  </Link>
+          {selectedMenuSlug && (
+            <button
+              className="ml-2 h-8 grid grid-flow-col gap-2 items-center justify-center cursor-pointer text-greyscaleDark"
+              aria-label="Go back to main menu"
+              onClick={clearMenuSelection}
+            >
+              <ArrowLeftIcon className="h-4 w-4" aria-hidden="true" />{' '}
+              <span className="font-medium text-base-">{selectedMenuName}</span>
+            </button>
+          )}
 
-                  <Link href="/reference" passHref={true}>
-                    <a
-                      className={clsx(
-                        'ml-12 cursor-pointer text-base- self-center hover:text-greyscaleDark transition-colors duration-200 py-3',
-                        router.query.category === 'reference' && 'text-greyscaleDark'
-                      )}
-                    >
-                      Reference
-                    </a>
-                  </Link>
-                </ul>
-              </div>
-            </div>
-            <div className="hidden sm:flex self-center">
-              <GithubStarsCounter />
-              <Button
-                className="self-center"
-                variant="primary"
-                href={'https://app.nhost.io'}
-                Component="a"
-                target="_blank"
-                rel="noreferrer"
+          {/* Placeholder for making logo appear correctly in the middle */}
+          <div className="w-8 h-8" />
+        </div>
+
+        <div className="flex flex-col py-6 mt-4 border-divide border-t border-b">
+          {!selectedMenuSlug && (
+            <ul className="flex flex-col font-medium text-greyscaleDark text-base- font-display space-y-4 text-left px-4">
+              <li
+                className={clsx(
+                  'cursor-pointer text-base-  hover:text-greyscaleDark transition-colors duration-200 text-left ',
+                  router.query.category === 'get-started' && 'text-greyscaleDark'
+                )}
               >
-                Go to Nhost
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+                <Link href="/get-started" passHref>
+                  <a
+                    className="block"
+                    onClick={(event) => handleMenuSelect(event, 'get-started', 'Get Started')}
+                  >
+                    Get Started
+                  </a>
+                </Link>
+              </li>
+              <li
+                className={clsx(
+                  'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200 text-left',
+                  router.query.category === 'platform' && 'text-greyscaleDark'
+                )}
+              >
+                <Link href="/platform">
+                  <a
+                    className="block"
+                    onClick={(event) => handleMenuSelect(event, 'platform', 'Platform')}
+                  >
+                    Platform
+                  </a>
+                </Link>
+              </li>
+              <li
+                className={clsx(
+                  'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200',
+                  router.query.category === 'reference' && 'text-greyscaleDark'
+                )}
+              >
+                <Link href="/reference">
+                  <a
+                    className="block"
+                    onClick={(event) => handleMenuSelect(event, 'reference', 'Reference')}
+                  >
+                    Reference
+                  </a>
+                </Link>
+              </li>
+            </ul>
+          )}
 
-export function MobileNav({ setMobileMenu, mobileMenu }) {
-  const router = useRouter()
-  return (
-    <div className="bg-white rounded-sm shadow-sm drop w-full ">
-      <div className="flex flex-col w-full py-3 mx-auto ">
-        <div className="flex flex-row">
-          <div className="md:hidden">
-            <MenuIcon
-              className="h-8 w-8 cursor-pointer text-greyscaleDark"
-              aria-hidden="true"
-              onClick={() => setMobileMenu(!mobileMenu)}
+          {selectedMenuSlug && (
+            <Nav
+              category={selectedMenuSlug}
+              categoryTitle={selectedMenuName}
+              convolutedNav={getConvolutedNavByCategory(selectedMenuSlug)}
+              onMenuSelected={onClose}
             />
-          </div>
-          <div className="mx-auto">
-            <Link href="/" passHref>
-              <a className="md:hidden ml-3 sm:ml-0 self-center flex flex-row cursor-pointer">
-                <img src="/images/nhost-docs.svg" width={110} height={35} alt="Nhost white logo" />
-                <h1 className="self-center ml-5 font-medium text-greyscaleDark">DOCS</h1>
-              </a>
-            </Link>
-          </div>
-        </div>
-        <div className="flex py-6 mt-4 border-divide border-t border-b ">
-          <ul className="flex flex-col font-medium text-greyscaleDark text-base- font-display space-y-4 text-left px-4 ">
-            <li
-              className={clsx(
-                'cursor-pointer text-base-  hover:text-greyscaleDark transition-colors duration-200 text-left ',
-                router.query.category === 'get-started' && 'text-greyscaleDark'
-              )}
-            >
-              <Link href="/get-started" passHref={true}>
-                Get Started
-              </Link>
-            </li>
-            <li
-              className={clsx(
-                'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200 text-left',
-                router.query.category === 'platform' && 'text-greyscaleDark'
-              )}
-            >
-              <Link href="/platform" passHref={true}>
-                <a>Platform</a>
-              </Link>
-            </li>
-            <li
-              className={clsx(
-                'cursor-pointer text-base- hover:text-greyscaleDark transition-colors duration-200',
-                router.query.category === 'reference' && 'text-greyscaleDark'
-              )}
-            >
-              <Link href="/reference" passHref={true}>
-                <a>Reference</a>
-              </Link>
-            </li>
-          </ul>
+          )}
         </div>
       </div>
+
       <div className="sm:flex self-center py-2">
         <Button
           className="self-center"
           variant="primary"
-          href={'https://app.nhost.io'}
+          href="https://app.nhost.io"
           Component="a"
           target="_blank"
           rel="noreferrer"
+          type={null}
         >
           Go to Nhost
         </Button>

docs/components/MDX/CodeComponent.tsx

@@ -10,7 +10,7 @@ import Copy from '../icons/Copy'
 // @ts-ignore -> add to types
 SyntaxHighlighter.registerLanguage('js', js)
 
-interface CodeEditorProps {
+export interface CodeEditorProps {
   code: string
   fileName: string
   className: string

docs/components/MDX/components.tsx

@@ -1,14 +1,15 @@
-import AnchorLink from '@/components/AnchorLink'
-import CodeComponent from '@/components/MDX/CodeComponent'
-import Text from '@/components/ui/Text'
+import AnchorLink, { AnchorLinkProps } from '@/components/AnchorLink'
+import CodeComponent, { CodeEditorProps } from '@/components/MDX/CodeComponent'
+import Text, { TextProps } from '@/components/ui/Text'
+import clsx from 'clsx'
 import Image from 'next/image'
 import Link from 'next/link'
-import React from 'react'
+import React, { DetailedHTMLProps, HTMLProps, PropsWithChildren } from 'react'
 
 import Command from '../Command'
 import Divider from '../Divider'
 
-function Note({ children }) {
+function Note({ children }: PropsWithChildren<unknown>) {
   return (
     <div className="px-5 py-5 my-5 space-y-2 text-white rounded-md bg-verydark">
       <Text className="text-white">Note</Text>
@@ -17,57 +18,70 @@ function Note({ children }) {
   )
 }
 
-function Video({ src }) {
+function Video({
+  src,
+  ...props
+}: DetailedHTMLProps<HTMLProps<HTMLSourceElement>, HTMLSourceElement>) {
   return (
     <div className="flex justify-center my-8 mx-10">
       <video width="800" controls>
-        <source src={src} type="video/mp4" />
+        <source src={src} type="video/mp4" {...props} />
       </video>
     </div>
   )
 }
 
-const CustomLink = (props) => {
-  const href = props.href
-  const isInternalLink = href && (href.startsWith('/') || href.startsWith('#'))
+const CustomLink = ({
+  className,
+  children,
+  href,
+  ...props
+}: DetailedHTMLProps<HTMLProps<HTMLAnchorElement>, HTMLAnchorElement>) => {
+  const isInternalLink = href && ['./', '../', '/', '#'].some((symbol) => href.startsWith(symbol))
 
   if (isInternalLink) {
     return (
-      <Link href={href}>
-        <a {...props} className="font-medium text-blue">
-          {props.children}
+      <Link href={href} passHref>
+        <a className={clsx('font-medium text-blue', className)} {...props}>
+          {children}
         </a>
       </Link>
     )
   }
 
   return (
-    <a target="_blank" className="font-medium text-blue" rel="noopener noreferrer" {...props} />
+    <a
+      target="_blank"
+      className={clsx('font-medium text-blue', className)}
+      rel="noopener noreferrer"
+      href={href}
+      {...props}
+    >
+      {children}
+    </a>
   )
 }
 
 const components = {
-  img: (props) => {
+  img: (props: DetailedHTMLProps<HTMLProps<HTMLImageElement>, HTMLImageElement>) => {
     return (
-      <>
-        <span className="block mt-5 mx-10 ">
-          <img src={props.src} alt={props.alt} className="mx-auto border mt-2" />
-          {props.alt && (
-            <div className="block text-center text-secondary text-sm mb-8 pt-4">
-              <Text color="greyscaleDark" size="tiny">
-                {props.alt}
-              </Text>
-            </div>
-          )}
-        </span>
-      </>
+      <span className="block mt-5 mx-10 ">
+        <img src={props.src} alt={props.alt} className="mx-auto border mt-2" />
+        {props.alt && (
+          <div className="block text-center text-secondary text-sm mb-8 pt-4">
+            <Text color="greyscaleDark" size="tiny">
+              {props.alt}
+            </Text>
+          </div>
+        )}
+      </span>
     )
   },
   Video,
   Image,
   Text,
   Note,
-  code: (props) => {
+  code: (props: CodeEditorProps) => {
     if (props.className && props.className.includes('language')) {
       return <CodeComponent {...props} />
     } else {
@@ -76,50 +90,46 @@ const components = {
   },
   Divider,
   a: CustomLink,
-  h1: (props) => {
+  h1: (props: AnchorLinkProps) => {
     return (
       <>
         <Divider />
-        <AnchorLink {...props} size="heading" className="cursor-pointer" />
+        <AnchorLink {...props} className="cursor-pointer text-3xl md:text-4xl" />
       </>
     )
   },
-  h2: (props) => {
+  h2: (props: AnchorLinkProps) => {
     return (
-      <>
-        <div className="mt-10">
-          <AnchorLink {...props} size="big" className="cursor-pointer" />
-        </div>
-      </>
+      <div className="mt-10">
+        <AnchorLink {...props} className="cursor-pointer text-lg sm:text-xl md:text-2.5xl" />
+      </div>
     )
   },
-  h3: (props) => {
+  h3: (props: AnchorLinkProps) => {
     return (
-      <>
-        <div className="mt-8">
-          <AnchorLink {...props} size="large" className="cursor-pointer" />
-        </div>
-      </>
+      <div className="mt-8">
+        <AnchorLink {...props} className="cursor-pointer text-lg" />
+      </div>
     )
   },
-  h4: (props) => {
+  h4: (props: AnchorLinkProps) => {
     return (
-      <>
-        <div className="mt-4">
-          <AnchorLink {...props} size="normal" className="font-bold cursor-pointer" />
-        </div>
-      </>
+      <div className="mt-4">
+        <AnchorLink {...props} className="font-bold cursor-pointer text-base-" />
+      </div>
     )
   },
-  p: (props) => (
-    <Text
-      variant="body"
-      size="small"
-      color="dark"
-      className="my-2 antialiased leading-6"
-      {...props}
-    />
-  )
+  p: (props: TextProps) => {
+    return (
+      <Text
+        variant="body"
+        size="small"
+        color="dark"
+        className="my-2 antialiased leading-6"
+        {...props}
+      />
+    )
+  }
 }
 
 export default components

docs/components/Nav.tsx

@@ -2,104 +2,127 @@ import Text from '@/components/ui/Text'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
+import { ParsedUrlQuery } from 'querystring'
+import React, { MouseEvent } from 'react'
 import { fixTitle } from '../utils/fixTitle'
+import { NavItem } from './NavDataContext'
 
-export function Nav(props) {
+export type NavProps = {
+  /**
+   * Class name to apply to the wrapper element.
+   */
+  className?: string
+  /**
+   * Category slug.
+   */
+  category: string
+  /**
+   * The category title.
+   */
+  categoryTitle: string
+  /**
+   * Convoluted navigation.
+   */
+  convolutedNav: NavItem[]
+  /**
+   * Function to be called when a menu item is selected.
+   */
+  onMenuSelected?: (event?: MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+}
+
+export function Nav({ className, onMenuSelected, ...props }: NavProps) {
   const router = useRouter()
+
   return (
-    <div className="hidden lg:flex lg:min-w-nav lg:w-nav flex-col space-y-5 antialiased mt-1">
+    <div className={clsx('lg:min-w-nav lg:w-nav flex-col space-y-5 antialiased mt-1', className)}>
       <div>
         <ul>
-          <Link href={`/${props.category}`} passHref>
-            <li
-              className={clsx(
-                'cursor-pointer py-1 px-3 transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
-                router.query.category === props.category &&
-                  !router.query.subcategory &&
-                  !router.query.post &&
-                  'bg-veryLightGray'
-              )}
-            >
+          <li
+            className={clsx(
+              'transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
+              router.query.category === props.category &&
+                !router.query.subcategory &&
+                !router.query.post &&
+                'bg-veryLightGray'
+            )}
+          >
+            <Link href={`/${props.category}`} passHref>
               <Text
                 variant="a"
                 color="greyscaleDark"
                 size="normal"
                 className={clsx(
-                  'transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased',
+                  'block py-1.5 px-3 transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased',
                   'font-medium'
                 )}
+                onClick={onMenuSelected}
               >
                 {props.categoryTitle}
               </Text>
-            </li>
-          </Link>
+            </Link>
+          </li>
         </ul>
       </div>
       {props.convolutedNav.map((elem) => {
+        const parentCategory = props.category.replace(' ', '-')
+
         return (
-          <>
-            <div key={elem.category} className="">
-              {/* <Link
-              href={`/${props.category.replace(" ", "-")}/${elem.category}`}
-              passHref
-            > */}
-              <div className="cursor-pointer">
-                <Link href={`/${props.category.replace(' ', '-')}/${elem.category}/`} passHref>
-                  <Text
-                    variant="a"
-                    color="greyscaleGrey"
-                    size="normal"
-                    className="font-medium capitalize px-3"
+          <div key={elem.category}>
+            <Link href={`/${parentCategory}/${elem.category}/`} passHref>
+              <Text
+                variant="a"
+                color="greyscaleGrey"
+                size="normal"
+                className="block px-3 py-px font-medium capitalize"
+                onClick={onMenuSelected}
+              >
+                {/* Split */}
+                {fixTitle(elem)}
+              </Text>
+            </Link>
+
+            <ul className="mt-1 space-y-1 ">
+              {elem.posts.map((post) => {
+                const pathToLink =
+                  post.fileName != 'index'
+                    ? `/${parentCategory}/${elem.category}/${post.fileName}`
+                    : `/${parentCategory}/${elem.category}`
+
+                const shouldHighlight =
+                  router.query.subcategory === elem.category && router.query.post === post.fileName
+
+                const shouldHighlightSubcategories =
+                  !router.query.post &&
+                  post.fileName === 'index' &&
+                  elem.category === router.query.subcategory
+
+                return (
+                  <li
+                    className={clsx(
+                      'transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
+                      (shouldHighlight || shouldHighlightSubcategories) && 'bg-veryLightGray'
+                    )}
+                    key={pathToLink}
                   >
-                    {/* Split */}
-                    {fixTitle(elem)}
-                  </Text>
-                </Link>
-              </div>
-              {/* </Link> */}
-
-              <ul className="space-y-1 mt-1 ">
-                {elem.posts.map((post) => {
-                  const pathToLink =
-                    post.fileName != 'index'
-                      ? `${props.pathname}/${elem.category}/${post.fileName}`
-                      : `${props.pathname}/${elem.category}`
-
-                  const shouldHiglight =
-                    router.query.subcategory === elem.category && props.query.post === post.fileName
-
-                  const shouldHighlightSubCategories =
-                    !router.query.post &&
-                    post.fileName === 'index' &&
-                    elem.category === router.query.subcategory
-
-                  return (
-                    <Link href={pathToLink} passHref key={post}>
-                      <li
+                    <Link href={pathToLink} passHref>
+                      <Text
+                        variant="a"
+                        color="greyscaleDark"
+                        size="normal"
                         className={clsx(
-                          'cursor-pointer py-1 px-3 transition duration-300 ease-in-out rounded-md hover:text-black hover:bg-veryLightGray',
-                          (shouldHiglight || shouldHighlightSubCategories) && 'bg-veryLightGray'
+                          'py-1.5 px-3 block transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased block',
+                          (shouldHighlight || shouldHighlightSubcategories) && 'font-medium'
                         )}
+                        onClick={onMenuSelected}
                       >
-                        <Text
-                          variant="a"
-                          color="greyscaleDark"
-                          size="normal"
-                          className={clsx(
-                            'transition-colors duration-300 ease-in-out text-greyscaleDark hover:text-dark subpixel-antialiased',
-                            (shouldHiglight || shouldHighlightSubCategories) && 'font-medium'
-                          )}
-                        >
-                          {post.title}
-                        </Text>
-                      </li>
+                        {post.title}
+                      </Text>
                     </Link>
-                  )
-                })}
-              </ul>
-            </div>
-          </>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
         )
       })}
     </div>

docs/components/NavDataContext.tsx

@@ -0,0 +1,85 @@
+import { ParsedUrlQuery } from 'querystring'
+import { createContext, PropsWithChildren, useContext } from 'react'
+
+export type Post = {
+  /**
+   * Title of the post.
+   */
+  title: string
+  /**
+   * File name where the post is located.
+   */
+  fileName: string
+  /**
+   * Order of posts.
+   */
+  order: string[]
+}
+
+export type NavItem = {
+  /**
+   * Slug of the category.
+   */
+  category: string
+  /**
+   * List of posts in the category.
+   */
+  posts: Post[]
+}
+
+export type NavDataContextProps = {
+  /**
+   * Category slug.
+   */
+  category: string
+  /**
+   * The category title.
+   */
+  categoryTitle: string
+  /**
+   * Convoluted navigation.
+   */
+  convolutedNav: NavItem[]
+  /**
+   * Available menu items for all categories.
+   */
+  availableCategoryMenus: {
+    /**
+     * Slug of the category.
+     */
+    slug: string
+    /**
+     * Menu items of the category.
+     */
+    items: NavItem[]
+  }[]
+}
+
+export const NavDataContext = createContext<NavDataContextProps>(null)
+
+export function NavDataProvider({ children, ...props }: PropsWithChildren<NavDataContextProps>) {
+  return <NavDataContext.Provider value={props}>{children}</NavDataContext.Provider>
+}
+
+export function useNavData() {
+  const context = useContext(NavDataContext)
+
+  if (!context) {
+    throw new Error(`"useNavData" must be used within a "NavDataProvider"`)
+  }
+
+  /**
+   * Returns all of the navigation items for the specified category.
+   *
+   * @param slug Slug of the category.
+   * @returns All of the navigation items for the specified category.
+   */
+  function getConvolutedNavByCategory(slug: string) {
+    return (
+      context.availableCategoryMenus.find(({ slug: category }) => category === slug)?.items ||
+      context.convolutedNav
+    )
+  }
+
+  return { getConvolutedNavByCategory, ...context }
+}

docs/components/Newsletter.tsx

@@ -7,8 +7,11 @@ import Loading from './ui/Loading'
 
 function NewsletterForm(props) {
   return (
-    <div className=" flex flex-row w-64 mt-5">
-      <form className=" flex flex-row" onSubmit={(e) => props.subscribe(e)}>
+    <div className="flex flex-row w-64 mt-5">
+      <form
+        className="grid grid-flow-row sm:grid-flow-col gap-4"
+        onSubmit={(e) => props.subscribe(e)}
+      >
         <Input
           color="dark"
           placeholder="Email address"
@@ -32,7 +35,7 @@ function NewsletterError({ errorMessage, retry }) {
     ? errorMessage.split('.').slice(0, 2).join('.')
     : errorMessage
   return (
-    <div className="flex flex-row mt-5">
+    <div className="grid grid-flow-row md:grid-flow-col gap-4 mt-5">
       <p className="text-white font-normal text-sm mt-2.5">{formattedError}.</p>
       <button
         className="btn-subscribe font-display text-greyscaleDark font-medium cursor-pointer"

docs/components/ui/Text/Text.tsx

@@ -1,8 +1,15 @@
 import cn from 'classnames'
-import React, { CSSProperties, FunctionComponent, JSXElementConstructor } from 'react'
+import React, {
+  CSSProperties,
+  ForwardedRef,
+  forwardRef,
+  FunctionComponent,
+  JSXElementConstructor
+} from 'react'
+import mergeRefs from 'react-merge-refs'
 import s from './Text.module.css'
 
-interface TextProps {
+export interface TextProps {
   variant?: Variant
   className?: string
   style?: CSSProperties
@@ -23,20 +30,23 @@ type Size = 'tiny' | 'small' | 'normal' | 'large' | 'big' | 'heading'
 
 type Color = 'dark' | 'grey' | 'blue' | 'greyscaleDark' | 'greyscaleGrey' | 'red' | 'white'
 
-export const Text: FunctionComponent<TextProps> = ({
-  style,
-  className = '',
-  variant = 'body',
-  color,
-  children,
-  html,
-  onClick,
-  size,
-  rel,
-  href,
-  target,
-  name
-}) => {
+export const Text: FunctionComponent<TextProps> = forwardRef(function DefaultText(
+  {
+    style,
+    className = '',
+    variant = 'body',
+    color,
+    children,
+    html,
+    onClick,
+    size,
+    rel,
+    href,
+    target,
+    name
+  },
+  ref: ForwardedRef<HTMLElement>
+) {
   const componentsMap: {
     [P in Variant]: React.ComponentType<any> | string
   } = {
@@ -72,6 +82,7 @@ export const Text: FunctionComponent<TextProps> = ({
 
   return (
     <Component
+      ref={ref}
       className={cn(
         s.root,
         {
@@ -107,6 +118,6 @@ export const Text: FunctionComponent<TextProps> = ({
       {children}
     </Component>
   )
-}
+})
 
 export default Text

docs/components/ui/Text/index.ts

@@ -1 +1,2 @@
+export * from './Text'
 export { default } from './Text'

docs/content/docs/get-started/index.mdx

@@ -30,6 +30,6 @@ JavaScript and TypeScript functions run your custom code in the backend.
 
 ## Get started
 
-Follow our [Quick start](./get-started/quick-start) guide to build your first app.
+Follow our [Quick start](/get-started/quick-start) guide to build your first app.
 
 Check out [Nhost on GitHub](https://github.com/nhost/nhost). Give us a star, and feel free to open a discussion for any feature requests as well.

docs/content/docs/platform/authentication/sign-in-methods.mdx

@@ -78,7 +78,7 @@ await nhost.auth.signIn({
 
 A user can be created anonymously. This is useful for offering a limited version of your application to your users without having them sign in first.
 
-An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](../database/permissions).
+An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/database/permissions).
 
 ### Deanonymize users
 

docs/content/docs/platform/authentication/user-management.mdx

@@ -36,7 +36,7 @@ query {
 
 ## Creating users
 
-Users should be created using the sign-up or sign-in flows as described under [sign-in methods](./sign-in-methods).
+Users should be created using the sign-up or sign-in flows as described under [sign-in methods](/platform/authentication/sign-in-methods).
 
 **Never** create users directly via GraphQL or database. **Never** modify the `auth.users` table. **Never** modify the GraphQL root queries.
 

docs/content/docs/platform/index.mdx

@@ -6,28 +6,28 @@ This section:
 
 ### Database
 
-- [Schema](./platform/database)
-- [Permissions](./platform/database/permissions)
-- [GraphQL](./platform/database/graphql)
+- [Schema](/platform/database)
+- [Permissions](/platform/database/permissions)
+- [GraphQL](/platform/database/graphql)
 
 ### Authentication
 
-- [Authentication overview](./platform/authentication)
-- [User management](./platform/authentication/user-management)
-- [Sign-in methods](./platform/authentication/sign-in-methods)
-- [Social login](./platform/authentication/social-login)
+- [Authentication overview](/platform/authentication)
+- [User management](/platform/authentication/user-management)
+- [Sign-in methods](/platform/authentication/sign-in-methods)
+- [Social login](/platform/authentication/social-login)
 
 ### Storage
 
-- [File storage](./platform/storage)
+- [File storage](/platform/storage)
 
 ### Serverless functions
 
-- [Creating functions](./platform/serverless-functions)
-- [Event triggers](./platform/serverless-functions/event-triggers)
+- [Creating functions](/platform/serverless-functions)
+- [Event triggers](/platform/serverless-functions/event-triggers)
 
 ### Nhost
 
-- [Environment variables](./platform/nhost/environment-variables)
-- [GitHub integration](./platform/nhost/github-integration)
-- [Local development](./platform/nhost/local-development)
+- [Environment variables](/platform/nhost/environment-variables)
+- [GitHub integration](/platform/nhost/github-integration)
+- [Local development](/platform/nhost/local-development)

docs/content/docs/platform/nhost/github-integration.mdx

@@ -20,7 +20,7 @@ Specifically, the following will be deployed:
 
 ## Workflow
 
-Create a new Nhost app. Then use [Nhost CLI](./local-development) to initialize your Nhost app locally.
+Create a new Nhost app. Then use [Nhost CLI](/platform/nhost/local-development) to initialize your Nhost app locally.
 
 The workflow is as follows:
 

docs/content/docs/platform/nhost/index.mdx

@@ -4,6 +4,6 @@ title: 'Overview'
 
 Documentation for other platform features:
 
-- [Environment variables](./nhost/environment-variables)
-- [GitHub integration](./nhost/github-integration)
-- [Local development](./nhost/local-development)
+- [Environment variables](/platform/nhost/environment-variables)
+- [GitHub integration](/platform/nhost/github-integration)
+- [Local development](/platform/nhost/local-development)

docs/content/docs/platform/serverless-functions/event-triggers.mdx

@@ -14,7 +14,7 @@ Event triggers are managed in Hasura. Go to Hasura, then select **Events** in th
 
 ![Creating event trigger in Hasura](/images/platform/hasura-create-event-trigger.png)
 
-Nhost's [environment variables](../nhost/environment-variables) can be used in event trigger headers. For example, you can attach `NHOST_WEBHOOK_SECRET` to an outgoing webhook here.
+Nhost's [environment variables](/platform/nhost/environment-variables) can be used in event trigger headers. For example, you can attach `NHOST_WEBHOOK_SECRET` to an outgoing webhook here.
 
 ---
 

docs/content/docs/reference/index.mdx

@@ -6,17 +6,17 @@ In this section:
 
 ### Nhost SDK
 
-- [Overview](./reference/sdk)
-- [GraphQL](./reference/sdk/graphql)
-- [Authentication](./reference/sdk/authentication)
-- [Storage](./reference/sdk/storage)
-- [Functions](./reference/sdk/functions)
+- [Overview](/reference/sdk)
+- [GraphQL](/reference/sdk/graphql)
+- [Authentication](/reference/sdk/authentication)
+- [Storage](/reference/sdk/storage)
+- [Functions](/reference/sdk/functions)
 
 ### Nhost CLI
 
-- [CLI overview](./reference/cli)
+- [CLI overview](/reference/cli)
 
 ### Supporting libraries
 
-- [@nhost/react-auth](./reference/supporting-libraries/react-auth)
-- [@nhost/react-apollo](./reference/supporting-libraries/react-apollo)
+- [@nhost/react-auth](/reference/supporting-libraries/react-auth)
+- [@nhost/react-apollo](/reference/supporting-libraries/react-apollo)

docs/content/docs/reference/sdk/index.mdx

@@ -5,10 +5,10 @@ subtitle: 'Nhost JavaScript SDK.'
 
 Nhost SDK is the primary way of interacting with your Nhost app. It exposes a standard interface for each of the following services:
 
-- [GraphQL](./sdk/graphql)
-- [Authentication](./sdk/authentication)
-- [Storage](./sdk/storage)
-- [Functions](./sdk/functions)
+- [GraphQL](/reference/sdk/graphql)
+- [Authentication](/reference/sdk/authentication)
+- [Storage](/reference/sdk/storage)
+- [Functions](/reference/sdk/functions)
 
 ## Installation
 

docs/content/docs/reference/supporting-libraries/index.mdx

@@ -6,5 +6,5 @@ We offer libraries and plugins for specific frameworks to make integration with
 
 Currently, the following supporting libraries are available:
 
-- [@nhost/react-apollo](./supporting-libraries/react-apollo)
-- [@nhost/react-auth](./supporting-libraries/react-auth)
+- [@nhost/react-apollo](/reference/supporting-libraries/react-apollo)
+- [@nhost/react-auth](/reference/supporting-libraries/react-auth)

docs/content/docs/reference/supporting-libraries/react-auth.mdx

@@ -10,7 +10,7 @@ title: '@nhost/react-auth'
 
 Install `@nhost/react-auth` and its dependencies:
 
-```
+```sh
 npm install @nhost/nhost-js @nhost/react-auth
 ```
 

docs/package.json

@@ -42,5 +42,6 @@
     "tailwindcss": "^2.2.19",
     "typescript": "^4.5.2"
   },
-  "prettier": "../prettier.config.js"
+  "prettier": "../prettier.config.js",
+  "version": null
 }

docs/pages/[category].tsx

@@ -4,50 +4,68 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import components from '@/components/MDX/components'
 import { Nav } from '@/components/Nav'
+import { NavDataProvider } from '@/components/NavDataContext'
 import { createConvolutedNav } from '@/lib/post'
 import { capitalize } from '@/utils/capitalize'
 import fs from 'fs'
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { join } from 'path'
 import React from 'react'
-
 import { Main } from '../components/Main'
 
-export default function Home({ category, frontmatter, mdxSource, convolutedNav, categoryTitle }) {
-  const router = useRouter()
-  const pathname = `/${router.query.category}`
-
+export default function Home({
+  category,
+  frontmatter,
+  mdxSource,
+  convolutedNav,
+  availableCategoryMenus,
+  categoryTitle
+}) {
   return (
-    <div className="bg-white">
-      <Head>
-        <title>
-          {frontmatter.title} – {capitalize(category)} | Nhost Documentation
-        </title>
-      </Head>
-      <Header />
-      <Container>
-        <Nav
-          categoryTitle={categoryTitle}
-          convolutedNav={convolutedNav}
-          category={category}
-          query={router.query}
-          pathname={pathname}
-        />
-        <Main>
-          <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
-        </Main>
-      </Container>
-      <Footer />
-    </div>
+    <NavDataProvider
+      category={category}
+      categoryTitle={categoryTitle}
+      convolutedNav={convolutedNav}
+      availableCategoryMenus={availableCategoryMenus}
+    >
+      <div className="bg-white pt-2">
+        <Head>
+          <title>
+            {frontmatter.title} - {capitalize(category)} | Nhost Documentation
+          </title>
+        </Head>
+        <Header />
+        <Container>
+          <Nav
+            className="hidden lg:flex"
+            categoryTitle={categoryTitle}
+            convolutedNav={convolutedNav}
+            category={category}
+          />
+
+          <Main>
+            <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
+          </Main>
+        </Container>
+        <Footer />
+      </div>
+    </NavDataProvider>
   )
 }
 
 export async function getStaticProps({ params }) {
   const postsDirectory = join(process.cwd(), 'content', 'docs')
-  const convolutedNav = createConvolutedNav(params.category)
+  const availableCategories = fs.readdirSync(postsDirectory)
+  const availableCategoryMenus = availableCategories.map((category) => ({
+    slug: category,
+    items: createConvolutedNav(category)
+  }))
+
+  const convolutedNav =
+    availableCategoryMenus.find(({ slug }) => slug === params.category).items ||
+    createConvolutedNav(params.category)
 
   const categoryTitle = matter(
     fs.readFileSync(join(postsDirectory, `${params.category}/index.mdx`), 'utf8')
@@ -64,7 +82,8 @@ export async function getStaticProps({ params }) {
       category: params.category,
       frontmatter: { ...data },
       mdxSource,
-      convolutedNav: convolutedNav
+      availableCategoryMenus,
+      convolutedNav
     }
   }
 }
@@ -84,6 +103,7 @@ export async function getStaticPaths(props) {
     paths: paths.map((category) => {
       return {
         params: {
+          availableCategories: paths,
           category
         }
       }

docs/pages/[category]/[subcategory].tsx

@@ -4,16 +4,15 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import components from '@/components/MDX/components'
 import { Nav } from '@/components/Nav'
+import { NavDataProvider } from '@/components/NavDataContext'
 import { createConvolutedNav, getAllPosts } from '@/lib/post'
 import { capitalize } from '@/utils/capitalize'
 import fs from 'fs'
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { join } from 'path'
 import React from 'react'
-
 import { Main } from '../../components/Main'
 import { SubNavigation } from '../../components/SubNavigation'
 import { TopNavigation } from '../../components/TopNavigation'
@@ -25,47 +24,60 @@ export default function Post({
   mdxSource,
   convolutedNav,
   post,
-  categoryTitle
+  categoryTitle,
+  availableCategoryMenus
 }) {
-  const router = useRouter()
-  const pathname = `/${router.query.category}`
   return (
-    <div className="bg-white">
-      <Head>
-        <title>
-          {frontmatter.title} – {capitalize(category)} | Nhost Documentation
-        </title>
-      </Head>
-      <Header />
-      <Container>
-        <Nav
-          convolutedNav={convolutedNav}
-          category={category}
-          categoryTitle={categoryTitle}
-          query={router.query}
-          pathname={pathname}
-        />
-
-        <Main>
-          <TopNavigation category={category} subcategory={subcategory} />
-
-          <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
-          <SubNavigation
+    <NavDataProvider
+      category={category}
+      categoryTitle={categoryTitle}
+      convolutedNav={convolutedNav}
+      availableCategoryMenus={availableCategoryMenus}
+    >
+      <div className="bg-white pt-2">
+        <Head>
+          <title>
+            {frontmatter.title} - {capitalize(category)} | Nhost Documentation
+          </title>
+        </Head>
+        <Header />
+        <Container>
+          <Nav
+            className="hidden lg:flex"
             convolutedNav={convolutedNav}
             category={category}
-            post={post}
-            subcategory={subcategory}
+            categoryTitle={categoryTitle}
           />
-        </Main>
-      </Container>
-      <Footer />
-    </div>
+
+          <Main>
+            <TopNavigation category={category} subcategory={subcategory} />
+
+            <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
+            <SubNavigation
+              convolutedNav={convolutedNav}
+              category={category}
+              post={post}
+              subcategory={subcategory}
+            />
+          </Main>
+        </Container>
+        <Footer />
+      </div>
+    </NavDataProvider>
   )
 }
 
 export async function getStaticProps({ params }) {
   const postsDirectory = join(process.cwd(), 'content', 'docs')
-  const convolutedNav = createConvolutedNav(params.category)
+  const availableCategories = fs.readdirSync(postsDirectory)
+  const availableCategoryMenus = availableCategories.map((category) => ({
+    slug: category,
+    items: createConvolutedNav(category)
+  }))
+
+  const convolutedNav =
+    availableCategoryMenus.find(({ slug }) => slug === params.category).items ||
+    createConvolutedNav(params.category)
 
   const fullPath = join(postsDirectory, `${params.category}/${params.subcategory}/index.mdx`)
   const categoryTitle = matter(
@@ -83,7 +95,8 @@ export async function getStaticProps({ params }) {
       subcategory: params.subcategory,
       frontmatter: { ...data },
       mdxSource,
-      convolutedNav: convolutedNav
+      availableCategoryMenus,
+      convolutedNav
     }
   }
 }

docs/pages/[category]/[subcategory]/[post].tsx

@@ -4,20 +4,17 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import components from '@/components/MDX/components'
 import { Nav } from '@/components/Nav'
+import { NavDataProvider } from '@/components/NavDataContext'
 import { SubNavigation } from '@/components/SubNavigation'
 import { TopNavigation } from '@/components/TopNavigation'
-import { createConvolutedNav, getAllPosts, getHeadingsByPost, removeIndexFile } from '@/lib/post'
+import { createConvolutedNav, getAllPosts, removeIndexFile } from '@/lib/post'
 import { capitalize } from '@/utils/capitalize'
 import fs from 'fs'
 import matter from 'gray-matter'
 import { serialize } from 'next-mdx-remote/serialize'
-import { useRouter } from 'next/dist/client/router'
 import Head from 'next/head'
 import { join } from 'path'
 import React from 'react'
-
-// import { PostMetadata } from "../../../components/PostMetadata";
-// import { HeadingsNavigation } from "../../../components/HeadingsNavigation";
 import { Main } from '../../../components/Main'
 
 export default function Post({
@@ -25,61 +22,64 @@ export default function Post({
   subcategory,
   frontmatter,
   mdxSource,
-  nav,
   convolutedNav,
+  availableCategoryMenus,
   post,
-  headings,
   categoryTitle
 }) {
-  const router = useRouter()
-  const pathname = `/${router.query.category}`
   return (
-    <div className="bg-white">
-      <Head>
-        <title>
-          {frontmatter.title} – {capitalize(subcategory)} - {capitalize(category)} | Nhost
-          Documentation
-        </title>
-      </Head>
-      <Header />
-      <Container>
-        <Nav
-          convolutedNav={convolutedNav}
-          category={category}
-          categoryTitle={categoryTitle}
-          nav={nav}
-          query={router.query}
-          pathname={pathname}
-          headings={headings}
-        />
-
-        <Main>
-          <TopNavigation category={category} subcategory={subcategory} />
-
-          <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
-          <SubNavigation
+    <NavDataProvider
+      category={category}
+      categoryTitle={categoryTitle}
+      convolutedNav={convolutedNav}
+      availableCategoryMenus={availableCategoryMenus}
+    >
+      <div className="bg-white pt-2">
+        <Head>
+          <title>
+            {frontmatter.title} - {capitalize(subcategory)} - {capitalize(category)} | Nhost
+            Documentation
+          </title>
+        </Head>
+        <Header />
+        <Container>
+          <Nav
+            className="hidden lg:flex"
             convolutedNav={convolutedNav}
             category={category}
-            post={post}
-            subcategory={subcategory}
+            categoryTitle={categoryTitle}
           />
-          {/* <PostMetadata
-            category={category}
-            subcategory={subcategory}
-            frontmatter={frontmatter}
-            post={post}
-          /> */}
-        </Main>
-        {/* <HeadingsNavigation headings={headings} /> */}
-      </Container>
-      <Footer />
-    </div>
+
+          <Main>
+            <TopNavigation category={category} subcategory={subcategory} />
+
+            <Content mdxSource={mdxSource} components={components} frontmatter={frontmatter} />
+
+            <SubNavigation
+              convolutedNav={convolutedNav}
+              category={category}
+              post={post}
+              subcategory={subcategory}
+            />
+          </Main>
+        </Container>
+        <Footer />
+      </div>
+    </NavDataProvider>
   )
 }
 
 export async function getStaticProps({ params }) {
   const postsDirectory = join(process.cwd(), 'content', 'docs')
-  const convolutedNav = createConvolutedNav(params.category)
+  const availableCategories = fs.readdirSync(postsDirectory)
+  const availableCategoryMenus = availableCategories.map((category) => ({
+    slug: category,
+    items: createConvolutedNav(category)
+  }))
+
+  const convolutedNav =
+    availableCategoryMenus.find(({ slug }) => slug === params.category).items ||
+    createConvolutedNav(params.category)
 
   const categoryTitle = matter(
     fs.readFileSync(join(postsDirectory, `${params.category}/index.mdx`), 'utf8')
@@ -91,7 +91,6 @@ export async function getStaticProps({ params }) {
   )
   const fileContents = fs.readFileSync(fullPath, 'utf8')
   const { data, content } = matter(fileContents)
-  const headings = getHeadingsByPost(content)
   const mdxSource = await serialize(content)
 
   return {
@@ -102,8 +101,8 @@ export async function getStaticProps({ params }) {
       post: params.post,
       frontmatter: { ...data },
       mdxSource,
-      headings: headings,
-      convolutedNav: convolutedNav
+      availableCategoryMenus,
+      convolutedNav
     }
   }
 }

docs/pages/index.tsx

@@ -1,21 +1,24 @@
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
+import { NavDataProvider } from '@/components/NavDataContext'
 import Text from '@/components/ui/Text'
 import Head from 'next/head'
 
 export default function Home() {
   return (
-    <div className="bg-fafafa">
-      <Head>
-        <title>Nhost Documentation</title>
-      </Head>
-      <Header />
-      <div className="flex flex-row max-w-5xl pb-20 mx-auto space-x-20 mt-36 bg-fafafa">
-        <div className="h-screen">
-          <Text>Welcome to Nhost</Text>
+    <NavDataProvider category="" categoryTitle="" convolutedNav={[]} availableCategoryMenus={[]}>
+      <div className="bg-fafafa pt-2">
+        <Head>
+          <title>Nhost Documentation</title>
+        </Head>
+        <Header />
+        <div className="flex flex-row max-w-5xl pb-20 mx-auto space-x-20 mt-36 bg-fafafa">
+          <div className="h-screen">
+            <Text>Welcome to Nhost</Text>
+          </div>
         </div>
+        <Footer />
       </div>
-      <Footer />
-    </div>
+    </NavDataProvider>
   )
 }

docs/public/sitemap.xml

@@ -1,36 +1,41 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://docs.nhost.io</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.955Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/javascript-client</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start/schema</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/sign-in-methods</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/social-login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication/user-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/environment-variables</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/github-integration</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost/local-development</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/serverless-functions/event-triggers</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-apollo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-auth</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/quick-start</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/get-started/upgrade</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/database</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/nhost</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/platform/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/sdk</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
-<url><loc>https://docs.nhost.io/reference/supporting-libraries</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-08T09:55:24.956Z</lastmod></url>
+<url><loc>https://docs.nhost.io</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/install-cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/local-changes</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/metadata-and-serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow/workflow-setup</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/javascript-client</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start/schema</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/sign-in-methods</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/social-login</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication/user-management</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database/permissions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/environment-variables</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/github-integration</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost/local-development</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/serverless-functions/event-triggers</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/graphql</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-apollo</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries/react-auth</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/cli-workflow</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/quick-start</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started/upgrade</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/authentication</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/database</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/nhost</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/serverless-functions</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform/storage</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/cli</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/sdk</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference/supporting-libraries</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/get-started</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/platform</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
+<url><loc>https://docs.nhost.io/reference</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-22T08:04:43.021Z</lastmod></url>
 </urlset>

docs/styles/globals.css

@@ -69,7 +69,6 @@ body {
   flex: none;
   order: 1;
   flex-grow: 0;
-  margin: 0px 16px;
 }
 
 @responsive {
@@ -93,6 +92,10 @@ body {
   border-radius: 4px;
 }
 
+.menu-card {
+  box-shadow: 0px 1px 4px rgba(14, 24, 39, 0.1), 0px 8px 24px rgba(14, 24, 39, 0.1);
+}
+
 .divider {
   height: 1px;
   left: 0px;

docs/styles/markdown-styles.module.css

@@ -11,7 +11,7 @@
 }
 
 .markdown li {
-  @apply text-sm font-display text-greyscaleDark font-medium leading-7;
+  @apply text-base- font-display text-greyscaleDark font-normal leading-7;
   list-style: disc;
   list-style-type: disc;
   list-style-position: inside;

examples/testing-project/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @nhost-examples/testing-project
+
+## 1.0.1
+### Patch Changes
+
+- a880583: - Improve typings (close [this PR](https://github.com/nhost/hasura-auth-js/pull/15))
+  - Add the metadata field introduced in [hasura-auth 0.2.0](https://github.com/nhost/hasura-auth/releases/tag/v0.2.0) (close [this PR](https://github.com/nhost/hasura-auth-js/pull/18))

examples/testing-project/nhost/config.yaml

@@ -3,11 +3,11 @@ services:
   mailhog:
     port: 8025
   hasura:
-    version: v2.1.0
+    version: v2.2.0
     environment:
       hasura_graphql_enable_remote_schema_permissions: false
   auth:
-    version: sha-c328aa7
+    version: 0.2.1
 auth:
   access_control:
     email:

examples/testing-project/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nhost-examples/testing-project",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Wrapper to run the Nhost CLI for development and testing",
   "scripts": {
     "start": "nhost -d"

packages/hasura-auth-js/CHANGELOG.md

@@ -1,6 +1,21 @@
 # @nhost/hasura-auth-js
 
+## 0.1.13
+
+### Patch Changes
+
+- 2e1c055: Axios causes some trouble when used NodeJS / CommonJS. Any code importing `axios` now does so in using the `require()` syntax
+
+## 0.1.12
+
+### Patch Changes
+
+- a880583: - Improve typings (close [this PR](https://github.com/nhost/hasura-auth-js/pull/15))
+  - Add the metadata field introduced in [hasura-auth 0.2.0](https://github.com/nhost/hasura-auth/releases/tag/v0.2.0) (close [this PR](https://github.com/nhost/hasura-auth-js/pull/18))
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+
 ## 0.1.11
+
 ### Patch Changes
 
 - 7c3a7be: Remove http timeout options (fix[#157](https://github.com/nhost/nhost/issues/157))

packages/hasura-auth-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-auth-js",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Hasura-auth client",
   "license": "MIT",
   "keywords": [
@@ -29,16 +29,10 @@
     "verify": "run-p prettier lint",
     "verify:fix": "run-p prettier:fix lint:fix"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    }
-  },
   "main": "src/index.ts",
   "publishConfig": {
     "access": "public",
-    "main": "dist/index.umd.js",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "typings": "./dist/index.d.ts"
   },

packages/hasura-auth-js/src/hasura-auth-api.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosError, AxiosInstance } from 'axios'
+import type { AxiosError, AxiosInstance } from 'axios'
 
 import {
   ApiChangeEmailResponse,
@@ -24,6 +24,8 @@ import {
   SignUpEmailPasswordParams
 } from './utils/types'
 
+const axios = require('axios')
+
 const SERVER_ERROR_CODE = 500
 export class HasuraAuthApi {
   private url: string

packages/hasura-auth-js/src/hasura-auth-client.ts

@@ -26,6 +26,8 @@ import {
   ApiError,
   ApiResetPasswordResponse,
   ApiSendVerificationEmailResponse,
+  ApiSignInResponse,
+  ApiSignOutResponse,
   AuthChangedFunction,
   AuthChangeEvent,
   ChangeEmailParams,
@@ -105,7 +107,6 @@ export class HasuraAuthClient {
     this.initAuthLoading = true
 
     this.session = null
-    // this.user = null;
 
     this.api = new HasuraAuthApi({ url: this.url })
 
@@ -313,7 +314,7 @@ export class HasuraAuthClient {
    *
    * @docs https://docs.nhost.io/TODO
    */
-  async signOut(params?: { all?: boolean }): Promise<unknown> {
+  async signOut(params?: { all?: boolean }): Promise<ApiSignOutResponse> {
     const refreshToken = await this._getItem(NHOST_REFRESH_TOKEN)
 
     this._clearSession()
@@ -333,10 +334,8 @@ export class HasuraAuthClient {
    *
    * @docs https://docs.nhost.io/TODO
    */
-  async verifyEmail(params: { email: string; ticket: string }): Promise<unknown> {
-    const { data, error } = await this.api.verifyEmail(params)
-
-    return { data, error }
+  async verifyEmail(params: { email: string; ticket: string }): Promise<ApiSignInResponse> {
+    return await this.api.verifyEmail(params)
   }
 
   /**

packages/hasura-auth-js/src/utils/types.ts

@@ -7,7 +7,7 @@ export interface User {
   email?: string
   isAnonymous: boolean
   defaultRole: string
-  roles: Record<string, string>
+  roles: string[]
 }
 
 export interface Session {
@@ -32,6 +32,7 @@ export interface SignUpEmailPasswordParams {
     defaultRole?: string
     displayName?: string
     redirectTo?: string
+    metadata?: Record<string, unknown>
   }
 }
 
@@ -55,6 +56,7 @@ export interface SignInPasswordlessEmailParams {
     defaultRole?: string
     displayName?: string
     redirectTo?: string
+    metadata?: Record<string, unknown>
   }
 }
 
@@ -66,6 +68,7 @@ export interface SignInPasswordlessSmsParams {
     defaultRole?: string
     displayName?: string
     redirectTo?: string
+    metadata?: Record<string, unknown>
   }
 }
 
@@ -92,6 +95,7 @@ export interface SignInWithProviderOptions {
     defaultRole?: string
     displayName?: string
     redirectTo?: string
+    metadata?: Record<string, unknown>
   }
 }
 

packages/hasura-auth-js/tests/sign-up.test.ts

@@ -20,6 +20,24 @@ describe('sign-up', () => {
     expect(session).toBeNull()
   })
 
+  test('sign up with metadata', async () => {
+    const email = faker.internet.email().toLocaleLowerCase()
+    const password = faker.internet.password(8)
+
+    const { session, error } = await auth.signUp({
+      email,
+      password,
+      options: {
+        metadata: {
+          birthDate: '1990-01-01'
+        }
+      }
+    })
+
+    expect(error).toBeNull()
+    expect(session).toBeNull()
+  })
+
   it('sign up with options', async () => {
     const email = faker.internet.email().toLocaleLowerCase()
     const password = faker.internet.password(8)

packages/hasura-storage-js/CHANGELOG.md

@@ -1,6 +1,19 @@
 # @nhost/hasura-storage-js
 
+## 0.0.9
+
+### Patch Changes
+
+- 2e1c055: Axios causes some trouble when used NodeJS / CommonJS. Any code importing `axios` now does so in using the `require()` syntax
+
+## 0.0.8
+
+### Patch Changes
+
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+
 ## 0.0.7
+
 ### Patch Changes
 
 - 7c3a7be: Remove http timeout options (fix[#157](https://github.com/nhost/nhost/issues/157))

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [
@@ -27,16 +27,10 @@
     "verify": "run-p prettier lint",
     "verify:fix": "run-p prettier:fix lint:fix"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    }
-  },
   "main": "src/index.ts",
   "publishConfig": {
     "access": "public",
-    "main": "dist/index.umd.js",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "typings": "./dist/index.d.ts"
   },

packages/hasura-storage-js/src/hasura-storage-api.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import axios, { AxiosInstance } from 'axios'
+import type { AxiosInstance } from 'axios'
 
 import {
   ApiDeleteParams,
@@ -11,6 +11,7 @@ import {
   UploadHeaders
 } from './utils/types'
 
+const axios = require('axios')
 export class HasuraStorageApi {
   private url: string
   private httpClient: AxiosInstance

packages/nhost-js/CHANGELOG.md

@@ -1,6 +1,26 @@
 # @nhost/nhost-js
 
+## 0.3.9
+
+### Patch Changes
+
+- 2e1c055: Axios causes some trouble when used NodeJS / CommonJS. Any code importing `axios` now does so in using the `require()` syntax
+- Updated dependencies [2e1c055]
+  - @nhost/hasura-auth-js@0.1.13
+  - @nhost/hasura-storage-js@0.0.9
+
+## 0.3.8
+
+### Patch Changes
+
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+- Updated dependencies [a880583]
+- Updated dependencies [03562af]
+  - @nhost/hasura-auth-js@0.1.12
+  - @nhost/hasura-storage-js@0.0.8
+
 ## 0.3.7
+
 ### Patch Changes
 
 - Updated dependencies [7c3a7be]

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [
@@ -20,16 +20,10 @@
     "type": "git",
     "url": "git+https://github.com/nhost/nhost.git"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    }
-  },
   "main": "src/index.ts",
   "publishConfig": {
     "access": "public",
-    "main": "dist/index.umd.js",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "typings": "./dist/index.d.ts"
   },

packages/nhost-js/src/clients/functions.ts

@@ -1,7 +1,8 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
 
 import { FunctionCallResponse } from '../types'
 
+const axios = require('axios')
 export interface NhostFunctionsConstructorParams {
   url: string
 }

packages/nhost-js/src/clients/graphql.ts

@@ -1,7 +1,9 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
 
 import { GraphqlRequestResponse, GraphqlResponse } from '../types'
 
+const axios = require('axios')
+
 export interface NhostGraphqlConstructorParams {
   url: string
 }

packages/nhost-js/src/types.ts

@@ -1,4 +1,4 @@
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 
 export type GraphqlRequestResponse =
   | {

packages/react-apollo/CHANGELOG.md

@@ -1,6 +1,22 @@
 # @nhost/react-apollo
 
-## 2.1.1
+## 2.1.3
+
 ### Patch Changes
 
-  - @nhost/nhost-js@0.3.7
+- Updated dependencies [2e1c055]
+  - @nhost/nhost-js@0.3.9
+
+## 2.1.2
+
+### Patch Changes
+
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+- Updated dependencies [03562af]
+  - @nhost/nhost-js@0.3.8
+
+## 2.1.1
+
+### Patch Changes
+
+- @nhost/nhost-js@0.3.7

packages/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [
@@ -35,14 +35,10 @@
   "main": "src/index.tsx",
   "publishConfig": {
     "access": "public",
-    "main": "dist/index.umd.js",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "typings": "dist/index.d.ts"
   },
-  "exports": {
-    "import": "./dist/index.es.js",
-    "require": "./dist/index.umd.js"
-  },
   "dependencies": {
     "@nhost/nhost-js": "workspace:*",
     "subscriptions-transport-ws": "^0.11.0"

packages/react-auth/CHANGELOG.md

@@ -1,6 +1,22 @@
 # @nhost/react-auth
 
-## 2.0.4
+## 2.0.6
+
 ### Patch Changes
 
-  - @nhost/nhost-js@0.3.7
+- Updated dependencies [2e1c055]
+  - @nhost/nhost-js@0.3.9
+
+## 2.0.5
+
+### Patch Changes
+
+- 03562af: Build in CommonJS and ESM instead of UMD and ESM as the UMD bundle generated by the default Vite lib build mode doesn't work with NodeJS
+- Updated dependencies [03562af]
+  - @nhost/nhost-js@0.3.8
+
+## 2.0.4
+
+### Patch Changes
+
+- @nhost/nhost-js@0.3.7

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-auth",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Nhost React client",
   "license": "MIT",
   "keywords": [
@@ -34,14 +34,10 @@
   "main": "src/index.tsx",
   "publishConfig": {
     "access": "public",
-    "main": "dist/index.umd.js",
+    "main": "dist/index.cjs.js",
     "module": "dist/index.es.js",
     "typings": "dist/index.d.ts"
   },
-  "exports": {
-    "import": "./dist/index.es.js",
-    "require": "./dist/index.umd.js"
-  },
   "dependencies": {
     "@nhost/nhost-js": "workspace:*"
   },