Merge branch 'main' into feat/open-graph

wp-graphql · Jul 24, 2024 · 4783d2f · 4783d2f
2 parents 4eef0e6 + e958515
commit 4783d2f
Show file tree

Hide file tree

Showing 22 changed files with 2,681 additions and 1,129 deletions.
diff --git a/components/FeatureTabsTop.jsx b/components/FeatureTabsTop.jsx
@@ -1,10 +1,10 @@
-import { gql } from '@apollo/client'
-import { Tab } from '@headlessui/react'
-import clsx from 'clsx'
-import Image from 'next/image'
-
-import { Container } from '@/components/Container'
+import { gql } from '@apollo/client';
+import { Tab } from '@headlessui/react';
+import clsx from 'clsx';
+import Image from 'next/image';
 
+import { Container } from '@/components/Container';
+import { preventOrphans } from '@/lib/utils';
 
 function Feature({ feature, isActive, className, ...props }) {
   return (
@@ -21,7 +21,7 @@ function Feature({ feature, isActive, className, ...props }) {
       <h3
         className={clsx(
           'mt-6 text-sm font-medium',
-          isActive ? 'text-orange-500' : 'text-gray-500',
+          isActive ? 'text-blue-500' : 'text-gray-500',
         )}
       >
         {feature.featureSubtitle}
@@ -33,7 +33,7 @@ function Feature({ feature, isActive, className, ...props }) {
         {feature.featureDescription}
       </p>
     </div>
-  )
+  );
 }
 
 function FeaturesMobile({ features }) {
@@ -60,7 +60,7 @@ function FeaturesMobile({ features }) {
         </div>
       ))}
     </div>
-  )
+  );
 }
 
 function FeaturesDesktop({ features }) {
@@ -77,7 +77,7 @@ function FeaturesDesktop({ features }) {
                   name: (
                     <Tab className="text-left [&:not(:focus-visible)]:focus:outline-none">
                       <span className="absolute inset-0" />
-                      {feature.name}
+                      {preventOrphans(feature.name)}
                     </Tab>
                   ),
                 }}
@@ -119,7 +119,7 @@ function FeaturesDesktop({ features }) {
         </>
       )}
     </Tab.Group>
-  )
+  );
 }
 
 const FeatureTabsTop = (feature) => {
@@ -140,7 +140,7 @@ const FeatureTabsTop = (feature) => {
         <FeaturesDesktop features={feature.features} />
       </Container>
     </section>
-  )
+  );
 }
 
 FeatureTabsTop.fragment = gql`
@@ -164,6 +164,6 @@ FeatureTabsTop.fragment = gql`
       }
     }
   }
-`
+`;
 
-export default FeatureTabsTop
+export default FeatureTabsTop;
diff --git a/components/HomepageLayoutsLayoutsHeroLayout.jsx b/components/HomepageLayoutsLayoutsHeroLayout.jsx
@@ -18,13 +18,13 @@ function TrafficLightsIcon(props) {
 
 const HomepageLayoutsLayoutsHeroLayout = (hero) => {
   return (
-    <div className="overflow-hidden bg-white dark:-mb-32 dark:mt-[-4.5rem] dark:bg-navy dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
+    <div className="overflow-hidden bg-white dark:-mb-32 dark:-mt-18 dark:bg-navy dark:pb-32 dark:pt-18 dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
             <div className="relative">
               <div
-                className="inline bg-gradient-to-r from-blue-600 via-blue-500 to-blue-600 bg-clip-text font-display text-5xl tracking-tight text-transparent dark:from-blue-300 dark:via-blue-600 dark:to-blue-300"
+                className="inline font-display text-5xl tracking-tight text-slate-900 dark:text-slate-200"
                 dangerouslySetInnerHTML={{ __html: hero.title }}
               />
               <div

diff --git a/components/HomepageLayoutsLayoutsSupportedFieldTypesLayout.jsx b/components/HomepageLayoutsLayoutsSupportedFieldTypesLayout.jsx
@@ -151,7 +151,7 @@ const HomepageLayoutsLayoutsSupportedFieldTypesLayout = (data) => {
     <section
       id="field-types"
       aria-labelledby="field-types-title"
-      className="pb-16 pt-20 bg-slate-100 dark:bg-purple-800 sm:pb-24 sm:pt-32"
+      className="bg-slate-100 pb-16 pt-20 dark:bg-purple-800 sm:pb-24 sm:pt-32"
     >
       <Container>
         <h2

diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -136,7 +136,7 @@ export function Layout({ node, children, toc, title }) {
             <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:bg-gray-800/25" />
             <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
             <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-700 dark:block" />
-            <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
+            <div className="sticky top-18 -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
               <DocsSidebarNavigation
                 data={{
                   node
@@ -198,7 +198,7 @@ export function Layout({ node, children, toc, title }) {
               )}
             </dl>
           </div>
-          <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
+          <div className="hidden xl:sticky xl:top-18 xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
             <nav aria-labelledby="on-this-page-title" className="w-56">
               {tableOfContents && tableOfContents?.length > 0 && (
                 <>

diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx
@@ -64,7 +64,7 @@ export function LayoutArchive({ data, children, title }) {
             <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
             <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
             <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
-            <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
+            <div className="sticky top-18 -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
               <DocsSidebarNavigation
                 data={data}
                 navigation={docsSidebarNavigation}

diff --git a/components/PrimaryNavigation.jsx b/components/PrimaryNavigation.jsx
@@ -63,7 +63,7 @@ export function PrimaryNavigation({ navigation }) {
                         <li className="row-span-3" key={sublink.id}>
                           <NavigationMenuLink asChild>
                             <Link
-                              className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md text-accent-foreground"
+                              className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 text-accent-foreground no-underline outline-none focus:shadow-md"
                               href={sublink.href}
                               target={sublink?.target ?? null}
                             >

diff --git a/components/Prose.jsx b/components/Prose.jsx
@@ -10,16 +10,10 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
         // lead
         'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
-        // links
-        'prose-a:font-semibold dark:prose-a:text-sky-400',
-        // link underline
-        'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',
         // pre
         'prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
         // 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 dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800',
       )}
       {...props}
     />

diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx
@@ -42,7 +42,7 @@ export function SiteHeader({ navigation, isNoticeVisible = false }) {
       </div>
       <div className="relative flex grow basis-0 items-center gap-4">
         <Link href="/" aria-label="Home page" className='shrink-0'>
-          <Logo className="h-5 w-auto rounded-md bg-gradient-power dark:bg-none fill-slate-700 p-1 dark:fill-sky-100 md:block lg:block lg:h-9" />
+          <Logo className="h-5 w-auto rounded-md bg-gradient-power fill-slate-700 p-1 dark:bg-none dark:fill-sky-100 md:block lg:block lg:h-9" />
         </Link>
         <div className="hidden lg:block">
           <PrimaryNavigation navigation={navigation} />

diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary dark:bg-slate-900 dark:text-white text-primary-foreground hover:bg-primary/80',
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80 dark:bg-slate-900 dark:text-white',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:

diff --git a/lib/highlightCode.js b/lib/highlightCode.js
@@ -6,7 +6,9 @@ import darkTheme from 'prism-react-renderer/themes/nightOwl';
 import lightTheme from 'prism-react-renderer/themes/nightOwlLight';
 
 (typeof global !== "undefined" ? global : window).Prism = Prism;
-require('prismjs/components/prism-php');
+
+// Use dynamic import for Prism components
+import('prismjs/components/prism-php');
 
 export const HighlightCode = (code, language, highlightLines = []) => {
   const { theme, systemTheme, resolvedTheme } = useTheme();
@@ -65,4 +67,4 @@ export const HighlightCode = (code, language, highlightLines = []) => {
       )}
     </Highlight>
   );
-};
+};
diff --git a/lib/utils.js b/lib/utils.js
@@ -52,3 +52,7 @@ export function collectHeadings(nodes, slugify = slugifyWithCounter()) {
 
   return sections
 }
+
+export function preventOrphans(text) {
+  return text.replace(/ ([^\s]+) ([^\s]+)$/, ' $1\u00A0$2');
+}
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
@@ -2,7 +2,7 @@
 
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL
 
-module.exports = {
+const nextSitemapConfig = {
     siteUrl: SITE_URL,
     generateRobotsTxt: true,
     exclude: ["/docs-sitemap.xml", "/docs/*"],
@@ -13,12 +13,14 @@ module.exports = {
     },
     transform: (config, path) => {
         if (path.match(/\/\d{4}\/\d{2}\/\d{2}\/.*/gim)) {
-            return null
+            return null;
         }
 
         return {
             loc: path,
             lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
-        }
+        };
     },
-}
+};
+
+export default nextSitemapConfig;