From a774c9a346b1ab81580679fd849686a5e3736436 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 11 Oct 2023 19:02:54 -0400 Subject: [PATCH] Setup linting Signed-off-by: Joe Fusco --- .eslintrc.json | 78 +- components/FeatureTabsLeft.jsx | 76 +- components/FeatureTabsTop.jsx | 76 +- components/FieldTypesList.jsx | 81 +- components/HomepageLayoutsLayoutsFaqs.jsx | 62 +- components/HomepageLayoutsLayoutsFeatures.jsx | 40 +- components/HomepageLayoutsLayoutsHero.jsx | 72 +- ...epageLayoutsLayoutsSupportedFieldTypes.jsx | 55 +- components/Layout.jsx | 39 +- components/LayoutArchive.jsx | 43 +- components/LayoutFrontPage.jsx | 21 +- components/Logo.jsx | 12 +- components/Prose.jsx | 2 +- components/Search.jsx | 10 +- components/SidebarNavigation.jsx | 76 +- components/SiteFooter.jsx | 18 +- components/SiteHeader.jsx | 100 +- components/ThemeSelector.jsx | 12 +- components/TopNavigation.jsx | 136 +- components/icons/GitHubIcon.jsx | 2 +- components/icons/WordPressIcon.jsx | 6 +- components/ui/badge.tsx | 20 +- components/ui/button.tsx | 40 +- components/ui/card.tsx | 32 +- components/ui/input.tsx | 12 +- components/ui/label.tsx | 12 +- components/ui/navigation-menu.tsx | 38 +- components/ui/separator.tsx | 20 +- components/ui/tabs.js | 20 +- faust.config.js | 14 +- lib/utils.js | 14 +- package-lock.json | 20130 ++++++++-------- package.json | 25 +- pages/[...wordpressNode].js | 8 +- pages/_app.js | 28 +- pages/_document.js | 4 +- pages/api/faust/[[...route]].js | 6 +- pages/index.js | 8 +- pages/preview.js | 4 +- plugins/PersistedQueriesPlugin.js | 27 +- plugins/TempPersistedQueriesFixPlugin.js | 10 +- postcss.config.js | 16 +- prettier.config.js | 8 +- tailwind.config.js | 236 +- typography.js | 682 +- wp-blocks/AcfFieldTypeSettings.js | 26 +- wp-blocks/CoreHeading.js | 37 +- wp-blocks/index.js | 14 +- wp-templates/IndexTemplate.js | 123 +- wp-templates/archive-field_type.js | 102 +- wp-templates/front-page.js | 100 +- wp-templates/index.js | 18 +- wp-templates/single-field_type.js | 140 +- 53 files changed, 11566 insertions(+), 11425 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..7aaed89 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,77 @@ { - "extends": "next/core-web-vitals" -} + "root": true, + "parser": "@babel/eslint-parser", + "parserOptions": { + "ecmaVersion": 2020, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "browser": true, + "es6": true, + "node": true, + "jest": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@next/next/recommended", + "plugin:react/recommended", + "plugin:jest/recommended", + "plugin:prettier/recommended", + "plugin:react-hooks/recommended" + ], + "plugins": [ + "react", + "jest", + "prettier", + "react-hooks", + "@next/next" + ], + "rules": { + "prettier/prettier": "error", + "react/react-in-jsx-scope": "off", + "react/prop-types": "off", + "no-console": "warn", + "no-debugger": "warn", + "no-unused-vars": "warn", + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "@next/next/no-img-element": "error" + }, + "settings": { + "react": { + "version": "detect" + }, + "requireConfigFile": false + }, + "overrides": [ + { + "files": ["*.js", "*.jsx"], + "parser": "@babel/eslint-parser", + "parserOptions": { + "requireConfigFile": false, + "babelOptions": { + "presets": ["@babel/preset-env", "@babel/preset-react"] + } + }, + "rules": { + // ...your JavaScript-specific rules here + } + }, + { + "files": ["*.ts", "*.tsx"], + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint"], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended" + ], + "rules": { + // ...your TypeScript-specific rules here + } + } + ] +} \ No newline at end of file diff --git a/components/FeatureTabsLeft.jsx b/components/FeatureTabsLeft.jsx index e7de664..375644e 100644 --- a/components/FeatureTabsLeft.jsx +++ b/components/FeatureTabsLeft.jsx @@ -7,7 +7,7 @@ import { Container } from '@/components/Container' import { gql } from '@apollo/client' const FeatureTabsLeft = (layout) => { - const { features } = layout; + const { features } = layout let [tabOrientation, setTabOrientation] = useState('horizontal') useEffect(() => { @@ -33,8 +33,14 @@ const FeatureTabsLeft = (layout) => { >
-

-

+

+

{ 'group relative rounded-full px-4 my-2 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6', selectedIndex === featureIndex ? 'bg-slate-600 dark:bg-slate-800 lg:dark:bg-slate-700 lg:ring-1 lg:ring-inset lg:ring-white/10 group-hover:text-white ' - : 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white' + : 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white', )} >

@@ -61,7 +67,7 @@ const FeatureTabsLeft = (layout) => { 'font-display text-lg [&:not(:focus-visible)]:focus:outline-none', selectedIndex === featureIndex ? 'text-white dark:text-slate-200 hover:text-white group-hover:text-white dark:hover:text-slate-300 lg:dark:hover:text-slate-200' - : 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200' + : 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200', )} > @@ -73,7 +79,7 @@ const FeatureTabsLeft = (layout) => { 'mt-2 hidden text-sm lg:block group-hover:text-white dark:group-hover:text-slate-200', selectedIndex === featureIndex ? 'text-slate-800 lg:text-white dark:text-slate-200' - : 'text-slate-800' + : 'text-slate-800', )} > {feature.featureDescription} @@ -92,15 +98,23 @@ const FeatureTabsLeft = (layout) => {

- { feature?.featureImage && {feature.featureImage.node.altText} } + {feature?.featureImage && ( + {feature.featureImage.node.altText} + )}
))} @@ -114,25 +128,25 @@ const FeatureTabsLeft = (layout) => { } FeatureTabsLeft.fragment = gql` -fragment FeatureTabsLeft on LayoutFeatureTabs_Fields { - layout - name - description - features { + fragment FeatureTabsLeft on LayoutFeatureTabs_Fields { + layout name - featureDescription - featureImage { - node { - altText - sourceUrl - mediaDetails { - width - height + description + features { + name + featureDescription + featureImage { + node { + altText + sourceUrl + mediaDetails { + width + height + } } } } } -} -`; +` -export default FeatureTabsLeft; \ No newline at end of file +export default FeatureTabsLeft diff --git a/components/FeatureTabsTop.jsx b/components/FeatureTabsTop.jsx index aa58df1..c48af7b 100644 --- a/components/FeatureTabsTop.jsx +++ b/components/FeatureTabsTop.jsx @@ -5,17 +5,22 @@ import clsx from 'clsx' import { Container } from '@/components/Container' import { gql } from '@apollo/client' - function Feature({ feature, isActive, className, ...props }) { return (

{feature.featureSubtitle} @@ -23,7 +28,9 @@ function Feature({ feature, isActive, className, ...props }) {

{feature.name}

-

{feature.featureDescription}

+

+ {feature.featureDescription} +

) } @@ -37,8 +44,8 @@ function FeaturesMobile({ features }) {
- - { feature.featureImage && {feature.featureImage.node.altText} - } + )}
@@ -86,21 +93,22 @@ function FeaturesDesktop({ features }) { key={feature.name} className={clsx( 'px-5 transition duration-500 ease-in-out [&:not(:focus-visible)]:focus:outline-none', - featureIndex !== selectedIndex && 'opacity-60' + featureIndex !== selectedIndex && 'opacity-60', )} style={{ transform: `translateX(-${selectedIndex * 100}%)` }} aria-hidden={featureIndex !== selectedIndex} >
- { feature.featureImage && {feature.featureImage.node.altText} - } + {feature.featureImage && ( + {feature.featureImage.node.altText} + )}
))} @@ -137,26 +145,26 @@ const FeatureTabsTop = (feature) => { } FeatureTabsTop.fragment = gql` -fragment FeatureTabsTop on LayoutFeatureTabs_Fields { - layout - name - description - features { + fragment FeatureTabsTop on LayoutFeatureTabs_Fields { + layout name - featureSubtitle - featureDescription - featureImage { - node { - altText - sourceUrl - mediaDetails { - width - height + description + features { + name + featureSubtitle + featureDescription + featureImage { + node { + altText + sourceUrl + mediaDetails { + width + height + } } } } } -} -`; +` -export default FeatureTabsTop; \ No newline at end of file +export default FeatureTabsTop diff --git a/components/FieldTypesList.jsx b/components/FieldTypesList.jsx index 2ea167c..87e6c52 100644 --- a/components/FieldTypesList.jsx +++ b/components/FieldTypesList.jsx @@ -2,54 +2,55 @@ import Image from 'next/image' import Link from 'next/link' export function FieldTypesList({ data }) { + const { + node: { contentNodes }, + } = data - const { node: { contentNodes } } = data; - - if ( ! contentNodes.nodes || ! contentNodes.nodes.length ) { - return 
{JSON.stringify(data, null, 2)}
; - } - + if (!contentNodes.nodes || !contentNodes.nodes.length) { + return 
{JSON.stringify(data, null, 2)}
+ } return ( -
-
-

- WPGraphQL for ACF exposes ACF Fields to the GraphQL Schema allowing you to query for the data managed by ACF. -

-

- Below you will find a list of the Field Types that are supported by WPGraphQL for ACF and documentation for how to query for them. -

-
-
- {contentNodes.nodes.map((fieldType) => ( -
+
+

+ WPGraphQL for ACF exposes ACF Fields to the GraphQL Schema allowing + you to query for the data managed by ACF. +

+

+ Below you will find a list of the Field Types that are supported by + WPGraphQL for ACF and documentation for how to query for them. +

+
+
+ {contentNodes.nodes.map((fieldType) => ( +
-
- { fieldType?.featuredImage?.node && - {fieldType?.featuredImage?.node.altText - } -

- - - {fieldType.title} - -

-
+
+ {fieldType?.featuredImage?.node && ( + { + )} +

+ + + {fieldType.title} + +

- ))} -
+
+ ))} +
) } diff --git a/components/HomepageLayoutsLayoutsFaqs.jsx b/components/HomepageLayoutsLayoutsFaqs.jsx index 1626c59..71cde64 100644 --- a/components/HomepageLayoutsLayoutsFaqs.jsx +++ b/components/HomepageLayoutsLayoutsFaqs.jsx @@ -2,27 +2,26 @@ import { Container } from '@/components/Container' import { gql } from '@apollo/client' const getColumns = (questions, numberOfColumns) => { - - let columns = []; + let columns = [] // start with the middle column to keep things centered - let currentColumn = 1; - questions && questions.map(question => { - if (currentColumn >= numberOfColumns) { - currentColumn = 0; - } - if ( !columns[currentColumn] ) { - columns[currentColumn] = []; - } - columns[currentColumn].push(question); - currentColumn++; - }) + let currentColumn = 1 + questions && + questions.map((question) => { + if (currentColumn >= numberOfColumns) { + currentColumn = 0 + } + if (!columns[currentColumn]) { + columns[currentColumn] = [] + } + columns[currentColumn].push(question) + currentColumn++ + }) - return columns; -}; + return columns +} const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => { - - const columns = getColumns(questions, 3); + const columns = getColumns(questions, 3) return (
{ aria-labelledby="faq-title" className="relative overflow-hidden bg-slate-100 dark:bg-slate-800 py-20 sm:py-32" > -

{ > {title}

-

+

    {

    {faq.question}

    -
    +
    ))}
@@ -66,14 +70,14 @@ const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => { } HomepageLayoutsLayoutsFaqs.fragment = gql` -fragment HomepageLayoutsLayoutsFaqs on LayoutFaqs_Fields { - title - description - questions { - question - answer + fragment HomepageLayoutsLayoutsFaqs on LayoutFaqs_Fields { + title + description + questions { + question + answer + } } -} -`; +` -export default HomepageLayoutsLayoutsFaqs; \ No newline at end of file +export default HomepageLayoutsLayoutsFaqs diff --git a/components/HomepageLayoutsLayoutsFeatures.jsx b/components/HomepageLayoutsLayoutsFeatures.jsx index e687d91..bcf054e 100644 --- a/components/HomepageLayoutsLayoutsFeatures.jsx +++ b/components/HomepageLayoutsLayoutsFeatures.jsx @@ -1,25 +1,25 @@ -import { gql } from "@apollo/client"; -import FeatureTabsLeft from "./FeatureTabsLeft"; -import FeatureTabsTop from "./FeatureTabsTop"; +import { gql } from '@apollo/client' +import FeatureTabsLeft from './FeatureTabsLeft' +import FeatureTabsTop from './FeatureTabsTop' const HomepageLayoutsLayoutsFeatures = (feature) => { - const layout = feature?.layout?.[0] ?? 'top'; - switch (layout) { - case 'top': - return - default: - return - } -}; + const layout = feature?.layout?.[0] ?? 'top' + switch (layout) { + case 'top': + return + default: + return + } +} HomepageLayoutsLayoutsFeatures.fragment = gql` - fragment HomepageLayoutsLayoutsFeatures on LayoutFeatureTabs_Fields { - __typename - ...FeatureTabsTop - ...FeatureTabsLeft - } - ${FeatureTabsTop.fragment} - ${FeatureTabsLeft.fragment} -`; + fragment HomepageLayoutsLayoutsFeatures on LayoutFeatureTabs_Fields { + __typename + ...FeatureTabsTop + ...FeatureTabsLeft + } + ${FeatureTabsTop.fragment} + ${FeatureTabsLeft.fragment} +` -export default HomepageLayoutsLayoutsFeatures; \ No newline at end of file +export default HomepageLayoutsLayoutsFeatures diff --git a/components/HomepageLayoutsLayoutsHero.jsx b/components/HomepageLayoutsLayoutsHero.jsx index 9dfb0a3..bc0f54e 100644 --- a/components/HomepageLayoutsLayoutsHero.jsx +++ b/components/HomepageLayoutsLayoutsHero.jsx @@ -15,27 +15,33 @@ function TrafficLightsIcon(props) { ) } -const HomepageLayoutsLayoutsHero = ( hero ) => { +const HomepageLayoutsLayoutsHero = (hero) => { return (
-
-

-

+

+

- - +
-
@@ -44,14 +50,14 @@ const HomepageLayoutsLayoutsHero = ( hero ) => {
-
-
- {hero?.codeFileName || null} -
+
+
+ {hero?.codeFileName || null}
+
{ className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600" > {Array.from({ - length: hero?.codeSample && hero.codeSample.split('\n').length, + length: + hero?.codeSample && + hero.codeSample.split('\n').length, }).map((_, index) => ( {(index + 1).toString().padStart(2, '0')} @@ -83,7 +91,7 @@ const HomepageLayoutsLayoutsHero = ( hero ) => { 
@@ -126,22 +134,22 @@ const ACFE_AdvancedLink = gql`
       }
     }
   }
-`;
+`
 
 HomepageLayoutsLayoutsHero.fragment = gql`
-fragment HomepageLayoutsLayoutsHero on LayoutHero_Fields {
-  title
-  description
-  getStartedLink {
-    ...AcfeAdvancedLink
-  }
-  githubLink {
-    ...AcfeAdvancedLink
+  fragment HomepageLayoutsLayoutsHero on LayoutHero_Fields {
+    title
+    description
+    getStartedLink {
+      ...AcfeAdvancedLink
+    }
+    githubLink {
+      ...AcfeAdvancedLink
+    }
+    codeSample
+    codeFileName
   }
-  codeSample
-  codeFileName
-}
-${ACFE_AdvancedLink}
-`;
+  ${ACFE_AdvancedLink}
+`
 
-export default HomepageLayoutsLayoutsHero;
\ No newline at end of file
+export default HomepageLayoutsLayoutsHero
diff --git a/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx b/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
index 024a289..04d4dc2 100644
--- a/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
+++ b/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
@@ -1,8 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
-import {
-  useInView,
-} from 'framer-motion'
+import { useInView } from 'framer-motion'
 import Link from 'next/link'
 
 import { Container } from '@/components/Container'
@@ -21,30 +19,25 @@ function FieldType({ title, uri, featuredImage, className, ...props }) {
     

       
         

-          {
-          featuredImage?.node?.sourceUrl && (
-              {featuredImage?.node?.altText
-          )
-          }
-          

-            {title}
-          

+          {featuredImage?.node?.sourceUrl && (
+            {featuredImage?.node?.altText
+          )}
+          
{title}

         

       
-      
     

   )
 }
@@ -90,7 +83,6 @@ function FieldTypeColumn({
       style={{ '--marquee-duration': duration }}
     >
       {fieldTypes.concat(fieldTypes).map((fieldType, fieldTypeIndex) => (
-        
         = fieldTypes.length}
@@ -103,13 +95,13 @@ function FieldTypeColumn({
 }
 
 function FieldTypeGrid({ fieldTypes }) {
-
   let containerRef = useRef()
   let isInView = useInView(containerRef, { once: true, amount: 0.4 })
-  let columns = fieldTypes && fieldTypes.length > 0 ? splitArray(fieldTypes, 3) : null;
+  let columns =
+    fieldTypes && fieldTypes.length > 0 ? splitArray(fieldTypes, 3) : null
 
-  if ( ! columns) {
-    return null;
+  if (!columns) {
+    return null
   }
 
   columns = [columns[0], columns[1], splitArray(columns[2], 2)]
@@ -127,7 +119,7 @@ function FieldTypeGrid({ fieldTypes }) {
               clsx(
                 reviewIndex >= columns[0].length + columns[2][0].length &&
                   'md:hidden',
-                reviewIndex >= columns[0].length && 'lg:hidden'
+                reviewIndex >= columns[0].length && 'lg:hidden',
               )
             }
             msPerPixel={10}
@@ -153,7 +145,7 @@ function FieldTypeGrid({ fieldTypes }) {
   )
 }
 
-const HomepageLayoutsLayoutsSupportedFieldTypes = ( data ) => {
+const HomepageLayoutsLayoutsSupportedFieldTypes = (data) => {
   return (
     
 {
           id="reviews-title"
           className="text-3xl font-medium tracking-tight mb-5 dark:text-gray-100 text-gray-900 sm:text-center"
         >
-           { data.title }
+          {data.title}

-

+

@@ -179,7 +174,7 @@ HomepageLayoutsLayoutsSupportedFieldTypes.fragment = gql` fragment HomepageLayoutsLayoutsSupportedFieldTypes on LayoutSupportedFieldTypes_Fields { title description - fieldTypes(first:100) { + fieldTypes(first: 100) { nodes { __typename ... on FieldType { @@ -198,4 +193,4 @@ HomepageLayoutsLayoutsSupportedFieldTypes.fragment = gql` } ` -export default HomepageLayoutsLayoutsSupportedFieldTypes; +export default HomepageLayoutsLayoutsSupportedFieldTypes diff --git a/components/Layout.jsx b/components/Layout.jsx index 3871449..0263ebc 100644 --- a/components/Layout.jsx +++ b/components/Layout.jsx @@ -2,7 +2,10 @@ import { useCallback, useEffect, useState } from 'react' import Link from 'next/link' import clsx from 'clsx' -import { SidebarNavigation, SidebarNavigationFragment } from '@/components/SidebarNavigation' +import { + SidebarNavigation, + SidebarNavigationFragment, +} from '@/components/SidebarNavigation' import { Prose } from '@/components/Prose' import { gql } from '@apollo/client' import { flatListToHierarchical } from '@faustwp/core' @@ -20,8 +23,7 @@ function useTableOfContents(tableOfContents) { let [currentSection, setCurrentSection] = useState(tableOfContents?.[0]?.id) let getHeadings = useCallback((tableOfContents) => { - - if ( ! tableOfContents.length ) return [] + if (!tableOfContents.length) return [] return tableOfContents .flatMap((node) => [node.id, ...node.children.map((child) => child.id)]) @@ -43,9 +45,10 @@ function useTableOfContents(tableOfContents) { function onScroll() { let top = window.scrollY - if ( ! headings || ! headings.length ) return; + if (!headings || !headings.length) return - let current = headings && headings.length > 0 ? headings[0]?.id ?? null : null; + let current = + headings && headings.length > 0 ? headings[0]?.id ?? null : null for (let heading of headings) { if (top >= heading?.top) { current = heading.id @@ -66,27 +69,25 @@ function useTableOfContents(tableOfContents) { } export function Layout({ data, children, toc, title }) { - - let tableOfContents = toc && toc.length - ? collectHeadings( toc ) + let tableOfContents = toc && toc.length ? collectHeadings(toc) : [] + + const menuItems = data?.menuItems ?? [] + const navigation = menuItems?.nodes + ? flatListToHierarchical(menuItems.nodes, { + idKey: 'id', + childrenKey: 'links', + parentKey: 'parentId', + }) : [] - - const menuItems = data?.menuItems ?? []; - const navigation = menuItems?.nodes ? flatListToHierarchical( menuItems.nodes, { - idKey: 'id', - childrenKey: 'links', - parentKey: 'parentId' - } ) : []; let allLinks = navigation?.flatMap((section) => section.links) ?? [] let linkIndex = allLinks.findIndex((link) => { return link.href === data?.node?.uri }) let previousPage = allLinks[linkIndex - 1] - let nextPage = allLinks[linkIndex + 1] let section = allLinks.find((section) => - section.links.find((link) => link.href === data?.node?.uri) + section.links.find((link) => link.href === data?.node?.uri), ) let currentSection = useTableOfContents(tableOfContents) @@ -104,7 +105,7 @@ export function Layout({ data, children, toc, title }) { <> -

+
@@ -183,7 +184,7 @@ export function Layout({ data, children, toc, title }) { className={clsx( isActive(section) ? 'text-sky-500' - : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300' + : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300', )} > {section.title} diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx index a0f5a5e..49597d4 100644 --- a/components/LayoutArchive.jsx +++ b/components/LayoutArchive.jsx @@ -1,4 +1,7 @@ -import { SidebarNavigation, SidebarNavigationFragment } from '@/components/SidebarNavigation' +import { + SidebarNavigation, + SidebarNavigationFragment, +} from '@/components/SidebarNavigation' import { Prose } from '@/components/Prose' import { gql } from '@apollo/client' import { flatListToHierarchical } from '@faustwp/core' @@ -12,30 +15,32 @@ export const LayoutFragment = gql` ` export function LayoutArchive({ data, children, title }) { - const menuItems = data?.menuItems ?? []; - const navigation = menuItems?.nodes ? flatListToHierarchical( menuItems.nodes, { - idKey: 'id', - childrenKey: 'links', - parentKey: 'parentId' - } ) : []; + const menuItems = data?.menuItems ?? [] + const navigation = menuItems?.nodes + ? flatListToHierarchical(menuItems.nodes, { + idKey: 'id', + childrenKey: 'links', + parentKey: 'parentId', + }) + : [] let allLinks = navigation?.flatMap((section) => section.links) ?? [] let section = allLinks.find((section) => - section.links.find((link) => link.href === data?.node?.uri) + section.links.find((link) => link.href === data?.node?.uri), ) return ( <> -
-
-
-
-
-
- -
-
-
+
+
+
+
+
+
+ +
+
+
{(title || section) && (
@@ -53,8 +58,8 @@ export function LayoutArchive({ data, children, title }) { )} {children}
-
+
) } diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx index e736e53..983d28b 100644 --- a/components/LayoutFrontPage.jsx +++ b/components/LayoutFrontPage.jsx @@ -1,9 +1,6 @@ -import { useCallback, useEffect, useState } from 'react' - import { TopNavigationFragment } from '@/components/TopNavigation' import { gql } from '@apollo/client' import { flatListToHierarchical } from '@faustwp/core' -import { collectHeadings } from '@/lib/utils' import { SiteHeader } from '@/components/SiteHeader' export const LayoutFragment = gql` @@ -14,18 +11,18 @@ export const LayoutFragment = gql` ` export function LayoutFrontPage({ data, children }) { - const menuItems = data?.menuItems ?? []; - const navigation = menuItems?.nodes ? flatListToHierarchical( menuItems.nodes, { - idKey: 'id', - childrenKey: 'links', - parentKey: 'parentId' - } ) : []; + const menuItems = data?.menuItems ?? [] + const navigation = menuItems?.nodes + ? flatListToHierarchical(menuItems.nodes, { + idKey: 'id', + childrenKey: 'links', + parentKey: 'parentId', + }) + : [] return ( <> - <> - {children} - + <>{children} ) } diff --git a/components/Logo.jsx b/components/Logo.jsx index 9fc18ce..a6c9d6d 100644 --- a/components/Logo.jsx +++ b/components/Logo.jsx @@ -1,4 +1,4 @@ -import Image from "next/image" +import Image from 'next/image' function LogomarkPaths() { return ( @@ -20,11 +20,11 @@ export function Logomark(props) { export function Logo(props) { return ( WPGraphQL Logo ) } diff --git a/components/Prose.jsx b/components/Prose.jsx index e3ce6dc..e185754 100644 --- a/components/Prose.jsx +++ b/components/Prose.jsx @@ -17,7 +17,7 @@ export function Prose({ as: Component = 'div', className, ...props }) { // 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' + 'dark:prose-hr:border-slate-800', )} {...props} /> diff --git a/components/Search.jsx b/components/Search.jsx index d0da796..a9427e2 100644 --- a/components/Search.jsx +++ b/components/Search.jsx @@ -48,7 +48,7 @@ function useAutocomplete() { ] }) }, - }) + }), ) return { autocomplete, autocompleteState } @@ -98,7 +98,7 @@ function SearchResult({ result, autocomplete, collection, query }) { let id = useId() let sectionTitle = navigation.find((section) => - section.links.find((link) => link.href === result.url.split('#')[0]) + section.links.find((link) => link.href === result.url.split('#')[0]), )?.title let hierarchy = [sectionTitle, result.pageTitle].filter(Boolean) @@ -174,7 +174,7 @@ function SearchResults({ autocomplete, query, collection }) { const SearchInput = forwardRef(function SearchInput( { autocomplete, autocompleteState, onClose }, - inputRef + inputRef, ) { let inputProps = autocomplete.getInputProps({}) @@ -185,7 +185,7 @@ const SearchInput = forwardRef(function SearchInput( ref={inputRef} className={clsx( 'flex-auto appearance-none bg-transparent pl-12 text-slate-900 outline-none placeholder:text-slate-400 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden', - autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4' + autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4', )} {...inputProps} onKeyDown={(event) => { @@ -333,7 +333,7 @@ export function Search() { useEffect(() => { setModifierKey( - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ' + /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ', ) }, []) diff --git a/components/SidebarNavigation.jsx b/components/SidebarNavigation.jsx index c8b1619..a17f681 100644 --- a/components/SidebarNavigation.jsx +++ b/components/SidebarNavigation.jsx @@ -3,34 +3,33 @@ import clsx from 'clsx' import { gql } from '@apollo/client' export const SidebarNavigationFragment = gql` -fragment SidebarNavigationFragment on RootQuery { - menuItems(first: 100 where: {location: PRIMARY}) { - nodes { - id - label - title: label - href: uri - parentId + fragment SidebarNavigationFragment on RootQuery { + menuItems(first: 100, where: { location: PRIMARY }) { + nodes { + id + label + title: label + href: uri + parentId + } } } -} ` -const isActiveSection = (section, currentNode ) => { - if ( ! currentNode ) { - return false; +const isActiveSection = (section, currentNode) => { + if (!currentNode) { + return false } - let isActive = false; + let isActive = false section.links.forEach((link) => { - if ( link.href.includes(currentNode?.uri ) ) { - isActive = true; + if (link.href.includes(currentNode?.uri)) { + isActive = true } - }); - - return isActive; + }) + return isActive } export function SidebarNavigation({ className, data, navigation }) { @@ -40,7 +39,14 @@ export function SidebarNavigation({ className, data, navigation }) { {navigation.map((section) => (
  • -

    +

    {section.title}

    @@ -48,21 +54,23 @@ export function SidebarNavigation({ className, data, navigation }) { role="list" className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200" > - { isActiveSection(section, data?.node) ? section.links.map((link) => ( -
  • - - {link.title} - -
    • - )) : null } + {isActiveSection(section, data?.node) + ? section.links.map((link) => ( +
  • + + {link.title} + +
    • + )) + : null} ))} diff --git a/components/SiteFooter.jsx b/components/SiteFooter.jsx index be89f10..4cb1adc 100644 --- a/components/SiteFooter.jsx +++ b/components/SiteFooter.jsx @@ -1,9 +1,15 @@ import clsx from 'clsx' export function SiteFooter({ navigation }) { - return ( -
    -

    Footer

    -
    - ) -} \ No newline at end of file + // eslint-disable-next-line no-console + console.log({ navigation }) + return ( +
    +

    Footer

    +
    + ) +} diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx index 4852e8c..7bd09f9 100644 --- a/components/SiteHeader.jsx +++ b/components/SiteHeader.jsx @@ -11,49 +11,57 @@ import { GitHubIcon } from '@/components/icons/GitHubIcon' import { WordPressIcon } from '@/components/icons/WordPressIcon' export function SiteHeader({ navigation }) { - let [isScrolled, setIsScrolled] = useState(false) - - useEffect(() => { - function onScroll() { - setIsScrolled(window.scrollY > 0) - } - onScroll() - window.addEventListener('scroll', onScroll, { passive: true }) - return () => { - window.removeEventListener('scroll', onScroll) - } - }, []) - - return ( -
    -
    - -
    -
    - - - - -
    -
    - -
    -
    - - - - - - - -
    -
    - ) -} \ No newline at end of file + let [isScrolled, setIsScrolled] = useState(false) + + useEffect(() => { + function onScroll() { + setIsScrolled(window.scrollY > 0) + } + onScroll() + window.addEventListener('scroll', onScroll, { passive: true }) + return () => { + window.removeEventListener('scroll', onScroll) + } + }, []) + + return ( +
    +
    + +
    +
    + + + + +
    +
    + +
    +
    + + + + + + + +
    +
    + ) +} diff --git a/components/ThemeSelector.jsx b/components/ThemeSelector.jsx index 706ba1e..516891d 100644 --- a/components/ThemeSelector.jsx +++ b/components/ThemeSelector.jsx @@ -54,8 +54,8 @@ export function ThemeSelector(props) { setSelectedTheme( themes.find( (theme) => - theme.value === document.documentElement.getAttribute('data-theme') - ) + theme.value === document.documentElement.getAttribute('data-theme'), + ), ) } }, [selectedTheme]) @@ -64,8 +64,8 @@ export function ThemeSelector(props) { let handler = () => setSelectedTheme( themes.find( - (theme) => theme.value === (window.localStorage.theme ?? 'system') - ) + (theme) => theme.value === (window.localStorage.theme ?? 'system'), + ), ) window.addEventListener('storage', handler) @@ -103,7 +103,7 @@ export function ThemeSelector(props) { 'text-slate-900 dark:text-white': active && !selected, 'text-slate-700 dark:text-slate-400': !active && !selected, 'bg-slate-100 dark:bg-slate-900/40': active, - } + }, ) } > @@ -115,7 +115,7 @@ export function ThemeSelector(props) { 'h-4 w-4', selected ? 'fill-sky-400 dark:fill-sky-400' - : 'fill-slate-400' + : 'fill-slate-400', )} />
    diff --git a/components/TopNavigation.jsx b/components/TopNavigation.jsx index 07b9b0a..29c11d6 100644 --- a/components/TopNavigation.jsx +++ b/components/TopNavigation.jsx @@ -1,10 +1,10 @@ -"use client"; +'use client' -import * as React from "react" -import Link from "next/link" -import { gql } from "@apollo/client"; +import * as React from 'react' +import Link from 'next/link' +import { gql } from '@apollo/client' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' import { NavigationMenu, NavigationMenuContent, @@ -13,11 +13,11 @@ import { NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, -} from "@/components/ui/navigation-menu" +} from '@/components/ui/navigation-menu' export const TopNavigationFragment = gql` fragment TopNavigationFragment on RootQuery { - menuItems(first: 100 where: { location: TOP }) { + menuItems(first: 100, where: { location: TOP }) { nodes { id label @@ -32,19 +32,21 @@ export const TopNavigationFragment = gql` } } } -`; +` export function TopNavigation({ navigation }) { return ( {navigation.map((item) => { - if (item.links.length == 0) { return ( - + {item?.label} @@ -57,65 +59,71 @@ export function TopNavigation({ navigation }) { {item?.label}
      - { - item.links.map((sublink) => { - if (sublink.menuItemMeta?.isFeatured) { - return ( -
    • - - - {/* */} -
      - {sublink?.label} -
      -

      - {sublink.menuItemMeta?.description} -

      - -       -
      • - ) - } else { - return ( - - {sublink.menuItemMeta?.description} - - ); - } - }) - } + {item.links.map((sublink) => { + if (sublink.menuItemMeta?.isFeatured) { + return ( +
    • + + + {/* */} +
      + {sublink?.label} +
      +

      + {sublink.menuItemMeta?.description} +

      + +       +
      • + ) + } else { + return ( + + {sublink.menuItemMeta?.description} + + ) + } + })}
    - )})} + ) + })}     ) } -const ListItem = React.forwardRef(({ className, title, children, ...props }, ref) => { - return ( -
  • - - -
    {title}
    -

    - {children} -

    - -     -
    • - ) -}) -ListItem.displayName = "ListItem" +const ListItem = React.forwardRef( + ({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    + +     +
    • + ) + }, +) +ListItem.displayName = 'ListItem' diff --git a/components/icons/GitHubIcon.jsx b/components/icons/GitHubIcon.jsx index 554bd0b..552ff58 100644 --- a/components/icons/GitHubIcon.jsx +++ b/components/icons/GitHubIcon.jsx @@ -4,4 +4,4 @@ export function GitHubIcon(props) { ) -} \ No newline at end of file +} diff --git a/components/icons/WordPressIcon.jsx b/components/icons/WordPressIcon.jsx index 53739cf..8a4f534 100644 --- a/components/icons/WordPressIcon.jsx +++ b/components/icons/WordPressIcon.jsx @@ -1,7 +1,7 @@ export function WordPressIcon(props) { return ( - - + + ) -} \ No newline at end of file +} diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index bb37dc8..2494400 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -1,26 +1,26 @@ -import * as React from "react" -import { VariantProps, cva } from "class-variance-authority" +import * as React from 'react' +import { VariantProps, cva } from 'class-variance-authority' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const badgeVariants = cva( - "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + 'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { default: - "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground", + 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground', secondary: - "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground", + 'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground', destructive: - "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground", - outline: "text-foreground", + 'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground', + outline: 'text-foreground', }, }, defaultVariants: { - variant: "default", + variant: 'default', }, - } + }, ) export interface BadgeProps diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 0c9ca98..9f92c1a 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -1,35 +1,35 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { VariantProps, cva } from "class-variance-authority" +import * as React from 'react' +import { Slot } from '@radix-ui/react-slot' +import { VariantProps, cva } from 'class-variance-authority' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", + 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', { variants: { variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", + default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: - "border border-input hover:bg-accent hover:text-accent-foreground", + 'border border-input hover:bg-accent hover:text-accent-foreground', secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "underline-offset-4 hover:underline text-primary", + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'underline-offset-4 hover:underline text-primary', }, size: { - default: "h-10 py-2 px-4", - sm: "h-9 px-3 rounded-md", - lg: "h-11 px-8 rounded-md", + default: 'h-10 py-2 px-4', + sm: 'h-9 px-3 rounded-md', + lg: 'h-11 px-8 rounded-md', }, }, defaultVariants: { - variant: "default", - size: "default", + variant: 'default', + size: 'default', }, - } + }, ) export interface ButtonProps @@ -40,7 +40,7 @@ export interface ButtonProps const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : 'button' return ( ( {...props} /> ) - } + }, ) -Button.displayName = "Button" +Button.displayName = 'Button' export { Button, buttonVariants } diff --git a/components/ui/card.tsx b/components/ui/card.tsx index dff04b6..991d425 100644 --- a/components/ui/card.tsx +++ b/components/ui/card.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from 'react' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const Card = React.forwardRef< HTMLDivElement, @@ -9,13 +9,13 @@ const Card = React.forwardRef<
    )) -Card.displayName = "Card" +Card.displayName = 'Card' const CardHeader = React.forwardRef< HTMLDivElement, @@ -23,11 +23,11 @@ const CardHeader = React.forwardRef< >(({ className, ...props }, ref) => (
    )) -CardHeader.displayName = "CardHeader" +CardHeader.displayName = 'CardHeader' const CardTitle = React.forwardRef< HTMLParagraphElement, @@ -36,13 +36,13 @@ const CardTitle = React.forwardRef<

    )) -CardTitle.displayName = "CardTitle" +CardTitle.displayName = 'CardTitle' const CardDescription = React.forwardRef< HTMLParagraphElement, @@ -50,19 +50,19 @@ const CardDescription = React.forwardRef< >(({ className, ...props }, ref) => (

    )) -CardDescription.displayName = "CardDescription" +CardDescription.displayName = 'CardDescription' const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -

    +
    )) -CardContent.displayName = "CardContent" +CardContent.displayName = 'CardContent' const CardFooter = React.forwardRef< HTMLDivElement, @@ -70,10 +70,10 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
    )) -CardFooter.displayName = "CardFooter" +CardFooter.displayName = 'CardFooter' export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 929e05f..ff58f6a 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from 'react' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' export interface InputProps extends React.InputHTMLAttributes {} @@ -11,15 +11,15 @@ const Input = React.forwardRef( ) - } + }, ) -Input.displayName = "Input" +Input.displayName = 'Input' export { Input } diff --git a/components/ui/label.tsx b/components/ui/label.tsx index b32881e..f0cf960 100644 --- a/components/ui/label.tsx +++ b/components/ui/label.tsx @@ -1,13 +1,13 @@ -"use client" +'use client' -import * as React from "react" -import * as LabelPrimitive from "@radix-ui/react-label" -import { VariantProps, cva } from "class-variance-authority" +import * as React from 'react' +import * as LabelPrimitive from '@radix-ui/react-label' +import { VariantProps, cva } from 'class-variance-authority' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const labelVariants = cva( - "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" + 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', ) const Label = React.forwardRef< diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx index 590f8c5..ffc0a67 100644 --- a/components/ui/navigation-menu.tsx +++ b/components/ui/navigation-menu.tsx @@ -1,9 +1,9 @@ -import * as React from "react" -import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" -import { cva } from "class-variance-authority" -import { ChevronDown } from "lucide-react" +import * as React from 'react' +import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu' +import { cva } from 'class-variance-authority' +import { ChevronDown } from 'lucide-react' -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils' const NavigationMenu = React.forwardRef< React.ElementRef, @@ -12,8 +12,8 @@ const NavigationMenu = React.forwardRef< @@ -30,8 +30,8 @@ const NavigationMenuList = React.forwardRef< @@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName const NavigationMenuItem = NavigationMenuPrimitive.Item const navigationMenuTriggerStyle = cva( - "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" + 'group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50', ) const NavigationMenuTrigger = React.forwardRef< @@ -50,10 +50,10 @@ const NavigationMenuTrigger = React.forwardRef< >(({ className, children, ...props }, ref) => ( - {children}{" "} + {children}{' '}