Merge branch 'main' into feat/atlas-isr-redux

wp-graphql · Jan 13, 2024 · 8c296e0 · 8c296e0
2 parents 13c1ea1 + 3c3cc0c
commit 8c296e0
Show file tree

Hide file tree

Showing 15 changed files with 1,409 additions and 1,572 deletions.
diff --git a/components/FieldTypesList.jsx b/components/FieldTypesList.jsx
@@ -26,16 +26,10 @@ export function FieldTypesList({ data }) {
         {contentNodes.nodes.map((fieldType) => (
           <div
             key={fieldType.uri}
-            className="dark:bg-white/2.5 group relative flex flex-col rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
+            className="dark:bg-white/2.5 group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
           >
-            <Link
-              href={fieldType.uri}
-              tabIndex={0}
-              className="absolute inset-0 z-20 rounded-2xl focus:outline-none focus:ring-2 focus:ring-zinc-900/75 focus:ring-offset-2"
-              aria-label={`${fieldType.title} field type`}
-            />
             <div className="ring-zinc-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
-            <div className="relative z-10 flex h-full flex-col rounded-2xl px-4 pb-4 pt-16">
+            <div className="relative rounded-2xl px-4 pb-4 pt-16">
               {fieldType?.featuredImage?.node && (
                 <Image
                   src={fieldType?.featuredImage?.node.sourceUrl}
@@ -45,15 +39,14 @@ export function FieldTypesList({ data }) {
                     fieldType?.featuredImage?.node.altText ??
                     'screenshot of the field type'
                   }
-                  layout="responsive"
-                  className="shrink-0"
                 />
               )}
-              <div className="mt-auto">
-                <h3 className="pb-4 pt-6 text-center font-semibold text-gray-900 dark:text-gray-100">
+              <h3 className="mt-6 font-semibold text-gray-900 dark:text-gray-100">
+                <Link href={fieldType.uri}>
+                  <span className="absolute inset-0 rounded-2xl" />
                   {fieldType.title}
-                </h3>
-              </div>
+                </Link>
+              </h3>
             </div>
           </div>
         ))}

diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
+import { flatListToHierarchical } from '@faustwp/core'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
@@ -13,8 +13,8 @@ import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 import { collectHeadings } from '@/lib/utils'
 
-export const LAYOUT_QUERY = gql`
-  query LayoutFragment {
+Layout.fragment = gql`
+  fragment LayoutFragment on RootQuery {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
@@ -75,24 +75,26 @@ function useTableOfContents(tableOfContents) {
   return currentSection
 }
 
-export function Layout({ node, children, toc, title }) {
-  const { sitewideNotice, primaryMenuItems, footerMenuItems, docsSidebarMenuItems } = useFaustQuery(LAYOUT_QUERY);
+export function Layout({ data, children, toc, title }) {
   let tableOfContents = toc && toc.length ? collectHeadings(toc) : []
 
+  const primaryMenuItems = data?.primaryMenuItems ?? []
   const primaryNavigation = primaryMenuItems?.nodes
     ? flatListToHierarchical(primaryMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
+  const footerMenuItems = data?.footerMenuItems ?? []
   const footerNavigation = footerMenuItems?.nodes
     ? flatListToHierarchical(footerMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
+  const docsSidebarMenuItems = data?.docsSidebarMenuItems ?? []
   const docsSidebarNavigation = docsSidebarMenuItems?.nodes
     ? flatListToHierarchical(docsSidebarMenuItems.nodes, {
         idKey: 'id',
@@ -103,13 +105,13 @@ export function Layout({ node, children, toc, title }) {
   let docsSidebarAllLinks =
     docsSidebarNavigation?.flatMap((section) => section.links) ?? []
   let linkIndex = docsSidebarAllLinks.findIndex((link) => {
-    return link.href === node?.uri
+    return link.href === data?.node?.uri
   })
   let previousPage = docsSidebarAllLinks[linkIndex - 1]
 
   let nextPage = docsSidebarAllLinks[linkIndex + 1]
   let section = docsSidebarAllLinks.find((section) =>
-    section.links.find((link) => link.href === node?.uri),
+    section.links.find((link) => link.href === data?.node?.uri),
   )
   let currentSection = useTableOfContents(tableOfContents)
 
@@ -125,8 +127,8 @@ export function Layout({ node, children, toc, title }) {
 
   return (
     <>
-      <SitewideNotice displayNotice={sitewideNotice.sitewideNoticeFields.displayNotice} message={sitewideNotice.sitewideNoticeFields.message} />
-      <SiteHeader navigation={primaryNavigation} isNoticeVisible={sitewideNotice.sitewideNoticeFields.displayNotice} />
+      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
 
       <main className='content'>
         <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
@@ -136,9 +138,7 @@ export function Layout({ node, children, toc, title }) {
             <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
             <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
               <DocsSidebarNavigation
-                data={{
-                  node
-                }}
+                data={data}
                 navigation={docsSidebarNavigation}
               />
             </div>

diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx
@@ -10,8 +10,8 @@ import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 
-export const GET_LAYOUT_QUERY = gql`
-  query GetLayout {
+LayoutArchive.fragment = gql`
+  fragment LayoutArchiveFragment on RootQuery {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
@@ -21,7 +21,7 @@ export const GET_LAYOUT_QUERY = gql`
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
-`;
+`
 
 export function LayoutArchive({ data, children, title }) {
   const primaryMenuItems = data?.primaryMenuItems ?? []

diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx
@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client'
-import { flatListToHierarchical, useFaustQuery } from '@faustwp/core'
+import { flatListToHierarchical } from '@faustwp/core'
 
 import { FooterNavigation } from './FooterNavigation'
 import { SiteFooter } from './SiteFooter'
@@ -9,8 +9,8 @@ import { SiteHeader } from '@/components/SiteHeader'
 import { SitewideNotice } from '@/components/SitewideNotice'
 
 
-export const LAYOUT_FRONT_PAGE_QUERY = gql`
-  query LayoutFrontPageFragment {
+LayoutFrontPage.fragment = gql`
+  fragment LayoutFrontPageFragment on RootQuery {
     ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...FooterNavigationFragment
@@ -20,17 +20,16 @@ export const LAYOUT_FRONT_PAGE_QUERY = gql`
   ${FooterNavigation.fragment}
 `
 
-export function LayoutFrontPage({ children }) {
-
-  const { sitewideNotice, primaryMenuItems, footerMenuItems } = useFaustQuery(LAYOUT_FRONT_PAGE_QUERY);
-
+export function LayoutFrontPage({ data, children }) {
+  const primaryMenuItems = data?.primaryMenuItems ?? []
   const primaryNavigation = primaryMenuItems?.nodes
     ? flatListToHierarchical(primaryMenuItems.nodes, {
         idKey: 'id',
         childrenKey: 'links',
         parentKey: 'parentId',
       })
     : []
+  const footerMenuItems = data?.footerMenuItems ?? []
   const footerNavigation = footerMenuItems?.nodes
     ? flatListToHierarchical(footerMenuItems.nodes, {
         idKey: 'id',
@@ -40,8 +39,8 @@ export function LayoutFrontPage({ children }) {
     : []
   return (
     <>
-      <SitewideNotice displayNotice={sitewideNotice?.sitewideNoticeFields?.displayNotice} message={sitewideNotice?.sitewideNoticeFields?.message} />
-      <SiteHeader navigation={primaryNavigation} isNoticeVisible={sitewideNotice?.sitewideNoticeFields?.displayNotice} />
+      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} data={data} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
       <main className='content'>
         {children}
       </main>

diff --git a/faust.config.js b/faust.config.js
@@ -11,6 +11,5 @@ export default setConfig({
   templates,
   experimentalPlugins: [],
   usePersistedQueries: true,
-  experimentalToolbar: false,
   possibleTypes,
 })