From de1070792273603f43de47f68e6ac8988e371c95 Mon Sep 17 00:00:00 2001
From: Jason Bahl <jasonbahl@mac.com>
Date: Tue, 9 Jan 2024 16:13:43 -0700
Subject: [PATCH 1/2] - update tailwind.config.js to use data-theme for dark
 mode (algolia DocSearch components rely on this) - change <ThemeProvider> in
 _app.js to use default "data-theme" attribute instead of "attribute='class'"
 - update tailwind.css to use [data-theme='dark'] as the theme variant -
 update AcfFieldTypeSettingsBlock to add some more context to the content
 within the accordion

---
 pages/_app.js                          |  1 -
 styles/tailwind.css                    |  2 +-
 tailwind.config.js                     |  2 +-
 wp-blocks/AcfFieldTypeSettingsBlock.js | 10 ++++++----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/pages/_app.js b/pages/_app.js
index 1d65d7d..68245d6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -14,7 +14,6 @@ import blocks from '@/wp-blocks'
 export default function MyApp({ Component, pageProps, router }) {
   return (
     <ThemeProvider
-      attribute="class"
       defaultTheme="system"
       enableSystem
       disableTransitionOnChange
diff --git a/styles/tailwind.css b/styles/tailwind.css
index c97cbb1..ff634b3 100644
--- a/styles/tailwind.css
+++ b/styles/tailwind.css
@@ -51,7 +51,7 @@
     --radius: 0.5rem;
   }
  
-  .dark {
+[data-theme='dark'] {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
  
diff --git a/tailwind.config.js b/tailwind.config.js
index df0d653..55f83d4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,7 @@ module.exports = {
     './wp-templates/**/*.{js,mjs,jsx,mdx,tsx,ts}',
     './wp-templates/*.{js,mjs,jsx,mdx,tsx,ts}',
   ],
-  darkMode: 'class',
+  darkMode: [ 'class', '[data-theme="dark"]'],
   theme: {
     fontSize: {
       xs: ['0.75rem', { lineHeight: '1rem' }],
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index bf5ad7c..da3c6d8 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -61,21 +61,23 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
 
   return (
     <>
+    <p>Below you will find information about how various ACF field settings can impact how the field will map to the GraphQL Schema and/or modify resolution of the field when queried.</p>
       <Card>
         <CardHeader className="grid grid-cols-[1fr_110px] items-start space-y-2">
           {fieldTypeSettings?.nodes?.map((item, index) => {
             const { id, name, description, fieldTypeSettingsMeta } = item;
-            const { impactOnWpgraphql } = fieldTypeSettingsMeta;
+            const { impactOnWpgraphql, acfFieldName } = fieldTypeSettingsMeta;
 
             return (
               <AccordionItem
                 key={id}
-                title={name}
+                title={`${name}`}
                 content={
                   <>
-                    {description && <p>{description}</p>}
+                    {acfFieldName && <><p><code className='mb-10'>{acfFieldName}</code></p></>}
+                    {description && <><p>{description}</p></>}
                     {impactOnWpgraphql && (
-                      <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
+                      <><strong>Impact on the GraphQL</strong><span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} /></>
                     )}
                   </>
                 }

From 342135e65963d8c7336d591c0b81a48f2ec8a42a Mon Sep 17 00:00:00 2001
From: Jason Bahl <jasonbahl@mac.com>
Date: Tue, 9 Jan 2024 16:20:05 -0700
Subject: [PATCH 2/2] npm run lint:fix

---
 components/PrimaryNavigation.jsx | 6 +++---
 wp-blocks/index.js               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/PrimaryNavigation.jsx b/components/PrimaryNavigation.jsx
index fa2c82a..51981ba 100644
--- a/components/PrimaryNavigation.jsx
+++ b/components/PrimaryNavigation.jsx
@@ -36,10 +36,10 @@ export function PrimaryNavigation({ navigation }) {
   return (
     <NavigationMenu>
       <NavigationMenuList>
-        {navigation.map((item, i) => {
+        {navigation.map((item) => {
           if (item.links.length == 0) {
             return (
-              <NavigationMenuItem key={item?.id ?? i}>
+              <NavigationMenuItem key={item?.id}>
                 <Link href={item.href} legacyBehavior passHref>
                   <NavigationMenuLink
                     className={navigationMenuTriggerStyle()}
@@ -80,7 +80,7 @@ export function PrimaryNavigation({ navigation }) {
                       )
                     } else {
                       return (
-                        <NavigationMenuLink asChild>
+                        <NavigationMenuLink asChild key={sublink.id}>
                           <ListItem
                             key={sublink.id}
                             href={sublink.href}
diff --git a/wp-blocks/index.js b/wp-blocks/index.js
index 521eabc..9636478 100644
--- a/wp-blocks/index.js
+++ b/wp-blocks/index.js
@@ -3,8 +3,8 @@ import { CoreBlocks } from '@faustwp/blocks'
 import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock'
 import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from './AcfGraphqlQuery'
-import { CoreHeading } from './CoreHeading'
 import { CoreCode } from './CoreCode'
+import { CoreHeading } from './CoreHeading'
 
 const blocks = {
   ...CoreBlocks,