save

Signed-off-by: Joe Fusco <[email protected]>
wp-graphql · Dec 10, 2023 · e79f01a · e79f01a
1 parent f064ae7
commit e79f01a
Show file tree

Hide file tree

Showing 7 changed files with 875 additions and 119 deletions.
diff --git a/components/DocsSidebarNavigation.jsx b/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="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300 block w-full">
                   {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 transform 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>
               ))}

diff --git a/next.config.mjs b/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) ) ) );