Misc Fixes

components/Prose.jsx

@@ -19,7 +19,7 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         // hr
         'dark:prose-hr:border-slate-800',
         // code
-        'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none',
+        'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800',
       )}
       {...props}
     />

components/ui/accordion.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

lib/utils.js

@@ -2,10 +2,12 @@ import { slugifyWithCounter } from '@sindresorhus/slugify'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+// Merges classes using clsx and tailwind-merge.
 export function cn(...inputs) {
   return twMerge(clsx(inputs))
 }
 
+// Recursively retrieve text from a node or its children.
 export function getNodeText(node) {
   let text = ''
   for (let child of node.children ?? []) {
@@ -18,6 +20,7 @@ export function getNodeText(node) {
   return text
 }
 
+// Collects and processes heading nodes (h2, h3) from a list of nodes.
 export function collectHeadings(nodes, slugify = slugifyWithCounter()) {
   let sections = []
 

package.json

@@ -25,6 +25,8 @@
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.3",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.2",

wp-blocks/AcfFieldTypeSettingsBlock.js

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client'
+import { Fragment } from 'react'
 
 export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) {
   const { fieldTypeSettings } = fieldTypeSettingsBlockFields
@@ -10,18 +11,18 @@ export function AcfFieldTypeSettingsBlock({fieldTypeSettingsBlockFields}) {
         const { acfFieldName, impactOnWpgraphql } = fieldTypeSettingsMeta
 
         return (
-          <div key={id} className="mb-4">
-            <h3 className="mb-2">{name}</h3>
-            <code className="whitespace-nowrap text-gray-400">{acfFieldName}</code>
-            <ul>
-              <li className={description ? '' : 'italic text-gray-400'}>
-                {description || 'Description not yet documented'}
+          <Fragment key={id}>
+            <h3 key={'h3' + id} className="mt-2">{name}</h3>
+            {acfFieldName && <code>{acfFieldName}</code>}
+            <ul key={'ul' + id}>
+              <li>
+                {description || <span className='italic'>Description not yet documented</span>}
               </li>
-              <li className={impactOnWpgraphql ? '' : 'italic text-gray-400'}>
-                {impactOnWpgraphql ? <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} /> : 'Impact on WPGraphQL not yet documented'}
+              <li>
+                {impactOnWpgraphql ? <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} /> : <span className='italic'>Impact on WPGraphQL not yet documented</span>}
               </li>
             </ul>
-          </div>
+          </Fragment>
         );
       })}
     </>