Merge branch 'debug/faust-ssr'

# Conflicts:
#	package-lock.json
#	package.json

.gitignore

@@ -2,8 +2,17 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*
+.yarn/cache/
+.yarn/unplugged/
+.yarn/build-state.yml
+
 
 # testing
 /coverage

components/DocsSidebarNavigation.jsx

@@ -3,6 +3,8 @@ import clsx from 'clsx';
 import Link from 'next/link';
 import { useState } from 'react';
 
+
+
 DocsSidebarNavigation.fragment = gql`
   fragment DocsSidebarNavigationFragment on RootQuery {
     docsSidebarMenuItems: menuItems(

components/FeatureTabsLeft.jsx

@@ -1,9 +1,11 @@
+
 import { gql } from '@apollo/client'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 
+
 import { Container } from '@/components/Container'
 
 

components/FeatureTabsTop.jsx

@@ -1,3 +1,4 @@
+
 import { gql } from '@apollo/client';
 import { Tab } from '@headlessui/react';
 import clsx from 'clsx';

components/Fence.jsx

@@ -1,6 +1,7 @@
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import { Fragment } from 'react'
 
+
 export function Fence({ children, language }) {
   return (
     <Highlight

components/FooterNavigation.jsx

@@ -3,6 +3,8 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import * as React from 'react'
 
+
+
 import styles from '@/styles/footer-navigation.module.css';
 
 export function FooterNavigation({ navigation }) {

components/HomepageLayoutsLayoutsHeroLayout.jsx

@@ -3,6 +3,8 @@ import clsx from 'clsx'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import { Fragment } from 'react'
 
+
+
 import { Button } from '@/components/Button'
 
 
@@ -97,16 +99,29 @@ const HomepageLayoutsLayoutsHeroLayout = (hero) => {
                           style={style}
                         >
                           <code className="px-4">
-                            {tokens.map((line, lineIndex) => (
-                              <div key={lineIndex} {...getLineProps({ line })}>
-                                {line.map((token, tokenIndex) => (
-                                  <span
-                                    key={tokenIndex}
-                                    {...getTokenProps({ token })}
-                                  />
-                                ))}
-                              </div>
-                            ))}
+                            {tokens.map((line, lineIndex) => {
+
+                                const lineProps = getLineProps({ line }) || {};
+                                const linePropsKey = lineProps.key || lineIndex;
+                                delete lineProps.key; // delete key to prevent React warning
+                                return  (
+                                <div {...lineProps} key={linePropsKey}>
+                                  {line.map((token, tokenIndex) => {
+
+                                    const tokenProps = getTokenProps({ token }) || {};
+                                    const tokenPropsKey = tokenProps.key || tokenIndex;
+                                    delete tokenProps.key; // delete key to prevent React warning
+
+                                    return (
+                                      <span
+                                          key={tokenPropsKey}
+                                          {...tokenProps}
+                                      />
+                                    )
+                                  })}
+                                </div>
+                              )}
+                            )}
                           </code>
                         </pre>
                       )}

components/HomepageLayoutsLayoutsSupportedFieldTypesLayout.jsx

@@ -1,10 +1,12 @@
+
 import { gql } from '@apollo/client'
 import clsx from 'clsx'
 import { useInView } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
+
 import { Container } from '@/components/Container'
 
 

components/Layout.jsx

@@ -1,9 +1,11 @@
+
 import { gql } from '@apollo/client'
 import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 
+
 import EditPost from './EditPost'
 
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'

components/MiniGraphiQL.jsx

@@ -3,6 +3,7 @@ import { useTheme } from 'next-themes';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
+
 const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly }) => {
   const [GraphiQL, setGraphiQL] = useState(null);
   const { theme, resolvedTheme } = useTheme();

components/MobileNavigation.jsx

@@ -1,3 +1,4 @@
+
 import { Dialog } from '@headlessui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'

components/PrimaryNavigation.jsx

@@ -1,3 +1,4 @@
+
 import { gql } from '@apollo/client'
 import Link from 'next/link'
 import * as React from 'react'

components/Search.jsx

@@ -1,3 +1,4 @@
+
 import { DocSearchModal } from "@docsearch/react";
 import clsx from 'clsx'
 import Head from 'next/head'
@@ -100,7 +101,10 @@ function Hit({ hit, children }) {
 export function Search({ ...props }) {
   let [modifierKey, setModifierKey] = useState()
   let searchButtonRef = useRef()
-  let { onOpen, onInput } = useContext(SearchContext)
+  let searchContext = useContext(SearchContext)
+
+  const onOpen = searchContext.onOpen || (() => {})
+  const onInput = searchContext.onInput || (() => {})
 
   useEffect(() => {
     function onKeyDown(event) {

components/SiteHeader.jsx

@@ -2,12 +2,12 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
+
 import { GitHubIcon } from '@/components/icons/GitHubIcon'
 import { WordPressIcon } from '@/components/icons/WordPressIcon'
 import { Logo } from '@/components/Logo'
 import { MobileNavigation } from '@/components/MobileNavigation'
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
-import { Search } from '@/components/Search'
 import { ModeToggle } from '@/components/ThemeSelector'
 
 export function SiteHeader({ navigation, isNoticeVisible = false }) {
@@ -49,7 +49,7 @@ export function SiteHeader({ navigation, isNoticeVisible = false }) {
         </div>
       </div>
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-        <Search />
+        {/*<Search />*/}
       </div>
       <div className="relative flex basis-0 justify-end gap-4 sm:gap-8 md:grow">
         <ModeToggle className="relative z-10" />

components/ThemeProvider.jsx

@@ -3,6 +3,7 @@
 import { ThemeProvider as NextThemesProvider } from "next-themes"
 import * as React from "react"
 
+
 export function ThemeProvider({ children, ...props }) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

components/ThemeSelector.jsx

@@ -1,5 +1,6 @@
 "use client"
 
+
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 import { useTheme } from "next-themes"
 import * as React from "react"

components/ui/accordion.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDownIcon } from "@radix-ui/react-icons"
 import * as React from "react"

components/ui/button.tsx

@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot'
 import { VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'
 
+
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(

components/ui/context-menu.jsx

@@ -1,3 +1,4 @@
+
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
 import * as React from "react"

components/ui/dropdown-menu.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import {
   CheckIcon,

components/ui/label.tsx

@@ -4,6 +4,7 @@ import * as LabelPrimitive from '@radix-ui/react-label'
 import { VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'
 
+
 import { cn } from '@/lib/utils'
 
 const labelVariants = cva(

components/ui/navigation-menu.tsx

@@ -3,6 +3,8 @@ import { cva } from 'class-variance-authority'
 import { ChevronDown } from 'lucide-react'
 import * as React from 'react'
 
+
+
 import { cn } from '@/lib/utils'
 
 const NavigationMenu = React.forwardRef<

components/ui/popover.tsx

@@ -3,6 +3,7 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import * as React from "react"
 
+
 import { cn } from "@/lib/utils"
 
 const Popover = PopoverPrimitive.Root

components/ui/separator.tsx

@@ -3,6 +3,7 @@
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
 import * as React from 'react'
 
+
 import { cn } from '@/lib/utils'
 
 const Separator = React.forwardRef<

components/ui/tabs.js

@@ -3,6 +3,7 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import * as React from 'react'
 
+
 import { cn } from '@/lib/utils'
 
 const Tabs = TabsPrimitive.Root

components/ui/tabs.tsx

@@ -3,6 +3,7 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 import * as React from "react"
 
+
 import { cn } from "@/lib/utils"
 
 const Tabs = TabsPrimitive.Root