Merge commit '488468d699169df3e143648bed1e932ce85031f0' into feat/add…

…-field-setting-key-to-field-settings-accordion
wp-graphql · Jan 9, 2024 · d593deb · d593deb
2 parents de10707 + 488468d
commit d593deb
Show file tree

Hide file tree

Showing 15 changed files with 168 additions and 75 deletions.
diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -10,14 +10,17 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Prose } from '@/components/Prose'
 import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 import { collectHeadings } from '@/lib/utils'
 
 Layout.fragment = gql`
   fragment LayoutFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
@@ -124,7 +127,8 @@ export function Layout({ data, children, toc, title }) {
 
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} />
+      <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">

diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx
@@ -8,13 +8,16 @@ import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
 import { Prose } from '@/components/Prose'
 import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 
 LayoutArchive.fragment = gql`
   fragment LayoutArchiveFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
@@ -53,7 +56,8 @@ export function LayoutArchive({ data, children, title }) {
 
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} />
+      <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">
           <div className="hidden lg:relative lg:block lg:flex-none">

diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx
@@ -6,13 +6,16 @@ import { SiteFooter } from './SiteFooter'
 
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 
 
 LayoutFrontPage.fragment = gql`
   fragment LayoutFrontPageFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${FooterNavigation.fragment}
 `
@@ -36,7 +39,8 @@ export function LayoutFrontPage({ data, children }) {
     : []
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} data={data} />
+      <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/components/MiniGraphiQL.jsx b/components/MiniGraphiQL.jsx
@@ -47,17 +47,22 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
   const fetcher = createGraphiQLFetcher({
     url: endpoint,
     fetch: async (url, options) => {
-      // Construct query parameters
-      const params = new URLSearchParams({
-        query: options.body.query,
-        variables: JSON.stringify(options.body.variables),
-      });
+      const parsedBody = JSON.parse(options?.body);
+
+      const params = new URLSearchParams();
+      params.append('query', parsedBody.query);
+      if (options.body.variables) {
+        params.append('variables', JSON.stringify(parsedBody.variables));
+      }
+      const getUrl = `${url}&${params.toString()}`;
 
       // Make the GET request
-      return fetch(`${url}?${params.toString()}`, { 
+      const res = await fetch(getUrl, { 
         method: 'GET', 
-        headers: { 'Accept': 'application/json' } 
+        headers: options?.headers,
       });
+
+      return res;
     }
   });
 

diff --git a/components/PrimaryNavigation.jsx b/components/PrimaryNavigation.jsx
@@ -36,10 +36,10 @@ export function PrimaryNavigation({ navigation }) {
   return (
     <NavigationMenu>
       <NavigationMenuList>
-        {navigation.map((item) => {
+        {navigation.map((item, i) => {
           if (item.links.length == 0) {
             return (
-              <NavigationMenuItem key={item.id}>
+              <NavigationMenuItem key={item?.id ?? i}>
                 <Link href={item.href} legacyBehavior passHref>
                   <NavigationMenuLink
                     className={navigationMenuTriggerStyle()}
@@ -56,7 +56,7 @@ export function PrimaryNavigation({ navigation }) {
             <NavigationMenuItem key={item.id}>
               <NavigationMenuTrigger>{item?.label}</NavigationMenuTrigger>
               <NavigationMenuContent>
-                <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                <ul className="grid gap-2 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                   {item.links.map((sublink) => {
                     if (sublink.menuItemMeta?.isFeatured) {
                       return (
@@ -80,14 +80,16 @@ export function PrimaryNavigation({ navigation }) {
                       )
                     } else {
                       return (
-                        <ListItem
-                          key={sublink.id}
-                          href={sublink.href}
-                          target={sublink?.target ?? null}
-                          title={sublink.label}
-                        >
-                          {sublink.menuItemMeta?.description}
-                        </ListItem>
+                        <NavigationMenuLink asChild>
+                          <ListItem
+                            key={sublink.id}
+                            href={sublink.href}
+                            target={sublink?.target ?? null}
+                            title={sublink.label}
+                          >
+                            {sublink.menuItemMeta?.description}
+                          </ListItem>
+                        </NavigationMenuLink>
                       )
                     }
                   })}

diff --git a/components/Search.jsx b/components/Search.jsx
@@ -9,9 +9,9 @@ import { createPortal } from "react-dom";
 import { SearchIcon } from '@/components/icons/SearchIcon';
 import '@docsearch/css/dist/style.css';
 
-const INDEX_NAME = 'wpgraphql';
-const API_KEY = '0c11d662dad18e8a18d20c969b25c65f';
-const APP_ID = 'HB50HVJDY8';
+const INDEX_NAME = 'acf-wpgraphql';
+const API_KEY = 'b404b713250845334bb3538fe4f32895';
+const APP_ID = 'I1X3LCBG6R';
 
 const SearchContext = createContext();
 

diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx
@@ -10,9 +10,11 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Search } from '@/components/Search'
 import { ModeToggle } from '@/components/ThemeSelector'
 
-export function SiteHeader({ navigation }) {
+export function SiteHeader({ navigation, isNoticeVisible = false }) {
   let [isScrolled, setIsScrolled] = useState(false)
 
+  const headerTopPosition = isNoticeVisible ? 'top-12' : 'top-0';
+
   useEffect(() => {
     function onScroll() {
       setIsScrolled(window.scrollY > 0)
@@ -27,7 +29,9 @@ export function SiteHeader({ navigation }) {
   return (
     <header
       className={clsx(
-        'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
+        'sticky',
+        headerTopPosition,
+        'z-40 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
         isScrolled
           ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
           : 'dark:bg-transparent',

diff --git a/components/SitewideNotice.jsx b/components/SitewideNotice.jsx
@@ -0,0 +1,22 @@
+import { gql } from '@apollo/client'
+
+SitewideNotice.fragment = gql`
+  fragment SitewideNoticeFragment on RootQuery {
+    sitewideNotice {
+      sitewideNoticeFields {
+        displayNotice
+        message
+      }
+    }
+  }
+`
+
+export function SitewideNotice({ displayNotice = false, message = '' }) {
+  if (displayNotice) {
+    return (
+      <div className="fixed inset-x-0 top-0 z-50 inline h-12 bg-sky-100 p-3 text-sky-900 dark:bg-sky-800 dark:text-sky-200">
+        <p className="text-center text-sm font-medium">{message}</p>
+      </div>
+    )
+  }
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -6,7 +6,7 @@ import React from 'react'
 
 import 'focus-visible'
 import '@/styles/tailwind.css'
-// import '../globalStylesheet.css'
+import '../globalStylesheet.css'
 import { SearchProvider } from '@/components/Search'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import blocks from '@/wp-blocks'

diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,5 +1,4 @@
 import { gql } from '@apollo/client';
-import clsx from 'clsx'
 import React, { useState } from 'react';
 
 import { Button } from "@/components/ui/button";
@@ -8,7 +7,7 @@ import { Card, CardFooter, CardHeader } from "@/components/ui/card";
 const AccordionItem = ({ title, content, isOpen, onClick }) => { 
   return (
     <>
-      <Button onClick={onClick} variant="primary" className="py-2 w-full text-left flex justify-between items-center">
+      <Button onClick={onClick} variant="primary" className="flex w-full items-center justify-between py-2 text-left">
         {title}
         <svg 
           xmlns="http://www.w3.org/2000/svg" 
@@ -22,7 +21,7 @@ const AccordionItem = ({ title, content, isOpen, onClick }) => {
         </svg>
       </Button>
       {isOpen && (
-        <div className="dark:bg-dark-muted bg-muted px-4 py-4">
+        <div className="dark:bg-dark-muted bg-muted p-4">
           {content}
         </div>
       )}
@@ -88,7 +87,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
           })}
         </CardHeader>
         <CardFooter>
-          <div className="flex justify-center items-center space-x-4 w-full">
+          <div className="flex w-full items-center justify-center space-x-4">
             <Button variant="ghost" onClick={toggleAll} className="w-full">
               {openItems.length === fieldTypeSettings?.nodes?.length ? 'Collapse All' : 'Expand All'}
             </Button>

diff --git a/wp-blocks/CoreCode.js b/wp-blocks/CoreCode.js
@@ -0,0 +1,26 @@
+import { CoreBlocks } from '@faustwp/blocks'
+import slugify from '@sindresorhus/slugify'
+const { CoreCode: FaustCoreCode } = CoreBlocks
+
+export function CoreCode(props) {
+  const { attributes } = props
+
+
+  const customAttributes = {
+    ...attributes,
+    anchor: !attributes.anchor
+      ? slugify(attributes.content)
+      : attributes.anchor,
+  }
+  console.log({attributes, customAttributes});
+
+  return (
+    <>
+      <FaustCoreCode {...props} attributes={customAttributes} />
+    </>
+  )
+}
+
+CoreCode.displayName = { ...FaustCoreCode.displayName }
+CoreCode.config = { ...FaustCoreCode.config }
+CoreCode.fragments = { ...FaustCoreCode.fragments }
diff --git a/wp-blocks/index.js b/wp-blocks/index.js
@@ -4,9 +4,11 @@ import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock
 import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from './AcfGraphqlQuery'
 import { CoreHeading } from './CoreHeading'
+import { CoreCode } from './CoreCode'
 
 const blocks = {
   ...CoreBlocks,
+  CoreCode,
   CoreHeading,
   AcfGraphqlQuery,
   AcfFieldTypeSettingsBlock,

diff --git a/wp-templates/IndexTemplate.js b/wp-templates/IndexTemplate.js
@@ -1,6 +1,7 @@
 import { gql } from '@apollo/client'
 import { WordPressBlocksViewer } from '@faustwp/blocks'
 import { flatListToHierarchical } from '@faustwp/core'
+import Head from 'next/head'
 
 import { Layout } from '@/components/Layout'
 import blocks from '@/wp-blocks'
@@ -47,33 +48,38 @@ export const IndexTemplate = ({ data }) => {
   })
 
   return (
-    <Layout
-      title={node?.title ? node.title : 'WPGraphQL for ACF'}
-      data={data}
-      navigation={data?.navigation?.nodes}
-      toc={toc}
-    >
-      {node?.modified && (
-        <div id="last-updated" className="text-sm text-gray-500">
-          Last Upated:{' '}
-          {new Date(node.modified).toLocaleDateString('en-us', {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-          })}
-        </div>
-      )}
-      <WordPressBlocksViewer blocks={blockList} />
-      {/* <h2>Raw editorBlocks</h2> */}
-      {
-        /**
-         *  uncomment to debug editorBlocks
-         *  <pre>{JSON.stringify(node.editorBlocks, null, 2)}</pre>
-         */
-        // <pre>{JSON.stringify(node, null, 2)}</pre>
-      }
-    </Layout>
+    <>
+      <Head>
+        <title>{`${node?.title} - WPGraphQL for ACF`}</title>
+      </Head>
+      <Layout
+        title={node?.title ? node.title : 'WPGraphQL for ACF'}
+        data={data}
+        navigation={data?.navigation?.nodes}
+        toc={toc}
+      >
+        {node?.modified && (
+          <div id="last-updated" className="text-sm text-gray-500">
+            Last Upated:{' '}
+            {new Date(node.modified).toLocaleDateString('en-us', {
+              weekday: 'long',
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </div>
+        )}
+        <WordPressBlocksViewer blocks={blockList} />
+        {/* <h2>Raw editorBlocks</h2> */}
+        {
+          /**
+           *  uncomment to debug editorBlocks
+           *  <pre>{JSON.stringify(node.editorBlocks, null, 2)}</pre>
+           */
+          // <pre>{JSON.stringify(node, null, 2)}</pre>
+        }
+      </Layout>
+    </>
   )
 }