Add ACF Field Type Configuration Block

components/DocsSidebarNavigation.jsx

@@ -1,7 +1,7 @@
-import { gql } from '@apollo/client'
-import clsx from 'clsx'
-import Link from 'next/link'
-import { useState } from 'react'
+import { gql } from '@apollo/client';
+import clsx from 'clsx';
+import Link from 'next/link';
+import { useState } from 'react';
 
 DocsSidebarNavigation.fragment = gql`
   fragment DocsSidebarNavigationFragment on RootQuery {
@@ -18,7 +18,7 @@ DocsSidebarNavigation.fragment = gql`
       }
     }
   }
-`
+`;
 
 export function DocsSidebarNavigation({ className, data, navigation }) {
   const isActiveSection = (section, currentNode) => {
@@ -50,36 +50,28 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
         {navigation.map((section) => (
           <li key={section.title}>
             <div className="flex items-center">
-              <Link href={section.href} className='block w-full'>
-                <h2 className="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
+              <Link href={section.href} passHref>
+                <h2 className="block w-full cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
                   {section.title}
                 </h2>
               </Link>
-              <div className="ml-auto mr-0 inline-flex items-center justify-center rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
-                <button
-                  onClick={() => toggleSection(section.title)}
-                  className="p-2 text-slate-900 transition-transform duration-300 dark:text-white"
+              <button
+                onClick={() => toggleSection(section.title)}
+                className="ml-auto p-2 text-slate-900 transition-transform duration-300 dark:text-white"
+              >
+                <svg
+                  className={clsx(
+                    'h-4 w-4 transition-transform',
+                    expandedSections[section.title] && 'rotate-180'
+                  )}
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
                 >
-                  <svg
-                    className={clsx(
-                      '',
-                      expandedSections[section.title] && 'rotate-90',
-                      'h-4 w-4'
-                    )}
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M9 5l7 7-7 7"
-                    />
-                  </svg>
-                </button>
-                </div>
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
             </div>
             <ul
               role="list"
@@ -93,14 +85,11 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
             >
               {section.links.map((link) => (
                 <li key={link.href} className="relative pl-3.5">
-                  <Link
-                    href={link.href}
-                    className={clsx(
-                      'block',
-                      link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
-                    )}
-                  >
-                    {link.title}
+                  <Link href={link.href}                       className={clsx(
+                        'block',
+                        link.href === data?.node?.uri ? 'font-semibold text-sky-500' : 'text-slate-500 hover:text-slate-600 dark:text-slate-400'
+                      )}>
+                      {link.title}
                   </Link>
                 </li>
               ))}

components/MiniGraphiQL.jsx

@@ -70,31 +70,15 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
     }
   }
 
-  const containerStyles = {
-    height: '80vh',
-    maxHeight: 'auto',
-    borderRadius: '4px',
-    padding: '0.5rem',
-    display: 'flex',
-    flex: '1 1 0%',
-  };
-
   const graphiqlStyles = `
-    :root {
-      color-scheme: ${theme};
-    }
     .graphiql-container {
+      height: fit-content;
       background-color: transparent !important;
       font-size: 14px;
-    }
-    .graphiql-container * {
-      box-shadow: none !important;
-    }
-    .graphiql-container .graphiql-editor-tools button:nth-child(2) {
-      display: none;
-    }
-    .graphiql-container .graphiql-editors {
-      border-radius: 2px;
+      border-radius: 4px;
+      padding: 0.5rem;
+      display: flex;
+      min-height: 400px; 
     }
     .graphiql-container .graphiql-editors.full-height {
       margin-top: 8px;
@@ -107,25 +91,34 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly
     .graphiql-container .graphiql-response .result-window {
       padding-top: 8px;
     }
-    .graphiql-container .graphiql-session-header {
-      display: none;
-    }
     .graphiql-container .graphiql-sessions {
       border-radius: 2px;
     }
+    .graphiql-container .graphiql-editors {
+      border-radius: 2px;
+    }
+    .graphiql-container * {
+      box-shadow: none !important;
+    }
+    .graphiql-container .graphiql-session-header {
+      display: none;
+    }
     .graphiql-container .graphiql-sidebar {
       display: none;
     }
+    .graphiql-container .graphiql-editor-tools button:nth-child(2) {
+      display: none; /* headers tab */
+    }
     .graphiql-toolbar button:nth-child(2) {
-      display: none; /* prettify */
+      display: none; /* prettify button */
     }
     .graphiql-toolbar button:nth-child(3) {
-      display: none; /* merge */
+      display: none; /* merge fragment button */
     }
   `;
 
   return (
-    <div style={containerStyles} className={resolvedTheme}>
+    <div className={resolvedTheme}>
       <style dangerouslySetInnerHTML={{ __html: graphiqlStyles }} />
       {GraphiQL ? (
         <GraphiQL

components/ui/accordion.tsx

@@ -24,11 +24,11 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Header className="my-1 flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}

components/ui/tabs.js

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-5 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow relative',
       className,
     )}
     {...props}

lib/jsonToPhp.js

@@ -0,0 +1,34 @@
+export function jsonToPhp(obj) {
+    const convertArray = (array) => {
+        return array.map(value => {
+            if (typeof value === 'object' && value !== null) {
+                return jsonToPhp(value);
+            } else if (Array.isArray(value)) {
+                return convertArray(value);
+            } else if (typeof value === 'string') {
+                return `'${value.replace(/'/g, "\\'")}'`;
+            } else if (typeof value === 'boolean') {
+                return value ? 'true' : 'false';
+            } else {
+                return value;
+            }
+        }).join(", ");
+    };
+
+    let result = "array(\n";
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const value = obj[key];
+            result += `\t\t'${key}' => `;
+            if (Array.isArray(value)) {
+                result += convertArray(value) + ",\n";
+            } else if (typeof value === 'object' && value !== null) {
+                result += jsonToPhp(value) + ",\n";
+            } else {
+                result += `${value},\n`;
+            }
+        }
+    }
+    result += "\t)";
+    return result;
+}

lib/snakeToPascalCase.js

@@ -0,0 +1,12 @@
+/**
+ * Converts a snake case string to PascalCase.
+ * 
+ * @param {string} str - The snake case string to convert.
+ * @returns {string} - The PascalCase version of the string.
+ */
+export function snakeToPascalCase(str) {
+    return str
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+}

next.config.mjs

@@ -1,7 +1,23 @@
 import { withFaust, getWpHostname } from '@faustwp/core';
+import nextMDX from '@next/mdx';
 import withMarkdoc from '@markdoc/next.js'
 import withSearch from './markdoc/search.mjs'
+import rehypePrettyCode from 'rehype-pretty-code';
 
+/** @type {import('rehype-pretty-code').Options} */
+const options = {
+    theme: 'one-dark-pro',
+};
+
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [[rehypePrettyCode, options]],
+  },
+});
+
+/** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
@@ -14,4 +30,4 @@ const nextConfig = {
     },
 };
 
-export default withFaust( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) );
+export default withFaust( withMDX( withSearch( withMarkdoc({ schemaPath: './src/markdoc' })(nextConfig) ) ) );