Merge branch 'staging' of https://github.com/WebDevStudios/nextjs-wordpress-starter into feature/component-handling

Author: dcooney

api/wordpress/_global/getPostTypeArchive.js

@@ -29,7 +29,7 @@ export const archiveQuerySeo = {
  * @param {string}  cursor   Start/end cursor for pagination.
  * @param {boolean} getNext  Whether to retrieve next set of posts (true) or previous set (false).
  * @param {number}  perPage  Number of posts per page.
- * @return {object}          Object containing Apollo client instance and post archive data or error object.
+ * @return {object} Object containing Apollo client instance and post archive data or error object.
  */
 export default async function getPostTypeArchive(
   postType,
@@ -40,7 +40,7 @@ export default async function getPostTypeArchive(
   perPage = 10
 ) {
   // Retrieve post type query.
-  const query = archiveQuerySeo?.[postType] ?? null
+  const query = archiveQuerySeo?.[postType]?.query ?? null
 
   // Get/create Apollo instance.
   const apolloClient = initializeWpApollo()

api/wordpress/_global/getPostTypeStaticProps.js

@@ -81,8 +81,8 @@ export default async function getPostTypeStaticProps(
     Object.keys(archiveQuerySeo).includes(postType) &&
     params.slug.length > 1
   ) {
-    const taxonomy = params.slug.shift()
-    const taxonomySlug = params.slug.join('/')
+    const taxonomy = params.slug.shift() // First "slug" piece is taxonomy type.
+    const taxonomySlug = params.slug.pop() // Last "slug" piece is the lowest-level taxonomy term slug.
 
     const {apolloClient, ...archiveData} = await getPostTypeTaxonomyArchive(
       taxonomy,

api/wordpress/_global/getPostTypeTaxonomyArchive.js

@@ -3,6 +3,7 @@ import {postTypes} from './postTypes'
 import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
 import getMenus from '../menus/getMenus'
 import queryPostsByTag from '../tags/queryPostsByTag'
+import queryPostsByCategory from '../categories/queryPostsByCategory'
 
 /**
  * Retrieve post taxnomy archive.
@@ -30,6 +31,7 @@ export default async function getPostTypeTaxonomyArchive(
 ) {
   // Define single post query based on taxonomy.
   const postTypeQuery = {
+    category: queryPostsByCategory,
     tag: queryPostsByTag
   }
 
@@ -102,18 +104,26 @@ export default async function getPostTypeTaxonomyArchive(
       // Flatten posts array to include inner node post data.
       response.posts = posts.map((post) => post.node)
 
+      // Use final breadcrumb as alternative canonical URL.
+      const breadcrumb =
+        archiveSeo?.breadcrumbs &&
+        archiveSeo.breadcrumbs.length > 0 &&
+        archiveSeo.breadcrumbs.slice(-1)[0]?.url
+
+      // Manually create fallback taxonomy canonical URL.
+      const fallback = `${response.defaultSeo?.openGraph?.url ?? ''}/${
+        postTypes?.[postType]?.route
+      }/${taxonomy}/${taxonomyId}`
+
       // Structure archive SEO.
       response.post = {
         seo: {
+          ...archiveSeo,
           title:
             archiveSeo?.title ??
             `${taxonomyId} - ${response.defaultSeo?.openGraph?.siteName ?? ''}`,
           metaDesc: archiveSeo?.metaDesc ?? '',
-          canonical:
-            archiveSeo?.canonical ??
-            `${response.defaultSeo?.openGraph?.url ?? ''}/${
-              postTypes?.[postType]?.route
-            }/${taxonomy}/${taxonomyId}`,
+          canonical: archiveSeo?.canonical ?? breadcrumb ?? fallback,
           metaRobotsNofollow: archiveSeo?.metaRobotsNofollow ?? 'follow',
           metaRobotsNoindex: archiveSeo?.metaRobotsNoindex ?? 'index'
         }

api/wordpress/_global/postTypes.js

@@ -1,9 +1,5 @@
 // Define valid WP post types (singular and plural GraphQL names).
 export const postTypes = {
-  comment: {
-    pluralName: 'comments',
-    route: null
-  },
   mediaItem: {
     pluralName: 'mediaItems',
     route: null

api/wordpress/_partials/seoPostFields.js

@@ -1,6 +1,10 @@
 // Query partial: retrieve SEO post fields.
 const seoPostFields = `
   seo {
+    breadcrumbs {
+      text
+      url
+    }
     canonical
     title
     metaDesc

api/wordpress/categories/queryPostsByCategory.js

@@ -0,0 +1,28 @@
+import {gql} from '@apollo/client'
+import defaultPageData from '../_partials/defaultPageData'
+import {archivePostFragment, archivePosts} from '../posts/queryPostsArchive'
+import seoPostFields from '../_partials/seoPostFields'
+
+// Query: retrieve posts category archive.
+const queryPostsByCategory = gql`
+  query GET_POSTS_BY_CATEGORY(
+    $first: Int
+    $last: Int
+    $after: String
+    $before: String
+    $orderBy: PostObjectsConnectionOrderbyEnum = DATE
+    $order: OrderEnum = DESC
+    $imageSize: MediaItemSizeEnum = THUMBNAIL
+    $id: ID!
+    $idType: CategoryIdType = SLUG
+  ) {
+    ${defaultPageData}
+    category(id: $id, idType: $idType) {
+      ${seoPostFields}
+      ${archivePosts}
+    }
+  }
+  ${archivePostFragment}
+`
+
+export default queryPostsByCategory

components/common/Layout.js

@@ -28,6 +28,9 @@ export default function Layout({children, seo, hasJsonLd}) {
         }
       ]
 
+  // Extract breadcrumbs from SEO.
+  const breadcrumbs = seo?.breadcrumbs
+
   return (
     <>
       <NextSeo
@@ -55,7 +58,21 @@ export default function Layout({children, seo, hasJsonLd}) {
       )}
       <Meta />
       <Header />
-      <main>{children}</main>
+      <main>
+        {/* TODO: extract breadcrumbs to component and make pretty. */}
+        {!!breadcrumbs && !!breadcrumbs.length && (
+          <div>
+            {breadcrumbs.map((breadcrumb, index) => (
+              <span key={index}>
+                <a href={breadcrumb?.url}>{breadcrumb?.text}</a>
+                {index < breadcrumbs.length - 1 && <span> &raquo; </span>}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {children}
+      </main>
       <Footer social={seo?.social} siteTitle={seo?.siteTitle} />
     </>
   )

functions/getPagePropTypes.js

@@ -21,11 +21,9 @@ export const seoSocialPropTypes = {
 // Yoast SEO prop types.
 export const seoPropTypes = {
   seo: PropTypes.shape({
-    siteTitle: PropTypes.string,
-    siteDescription: PropTypes.string,
-    title: PropTypes.string,
+    breadcrumbs: PropTypes.array,
+    canonical: PropTypes.string,
     description: PropTypes.string,
-    url: PropTypes.string,
     metaRobotsIndex: PropTypes.string,
     metaRobotsFollow: PropTypes.string,
     opengraphAuthor: PropTypes.string,
@@ -35,6 +33,10 @@ export const seoPropTypes = {
       altText: PropTypes.string,
       sourceUrl: PropTypes.string
     }),
+    siteTitle: PropTypes.string,
+    siteDescription: PropTypes.string,
+    title: PropTypes.string,
+    url: PropTypes.string,
     ...seoSocialPropTypes
   })
 }