feat: dark-mode support for Algolia

components/PrimaryNavigation.jsx

@@ -39,7 +39,7 @@ export function PrimaryNavigation({ navigation }) {
         {navigation.map((item) => {
           if (item.links.length == 0) {
             return (
-              <NavigationMenuItem key={item.id}>
+              <NavigationMenuItem key={item?.id}>
                 <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 key={sublink.id}>
+                          <ListItem
+                            key={sublink.id}
+                            href={sublink.href}
+                            target={sublink?.target ?? null}
+                            title={sublink.label}
+                          >
+                            {sublink.menuItemMeta?.description}
+                          </ListItem>
+                        </NavigationMenuLink>
                       )
                     }
                   })}

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

styles/tailwind.css

@@ -51,7 +51,7 @@
     --radius: 0.5rem;
   }
 
-  .dark {
+[data-theme='dark'] {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
 

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' }],

wp-blocks/AcfFieldTypeSettingsBlock.js

@@ -60,21 +60,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 }} /></>
                     )}
                   </>
                 }

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,