Merge branch 'feature/33-previews' into develop

Author: ravewebdev

api/wordpress/_global/getPostTypeArchive.js

@@ -14,38 +14,31 @@ import getMenus from '../menus/getMenus'
 export const archiveSeo = {
   career: {
     title: 'Careers',
-    description: '',
-    route: 'careers'
+    description: ''
   },
   event: {
     title: 'Events',
-    description: '',
-    route: 'events'
+    description: ''
   },
   portfolio: {
     title: 'Portfolio',
-    description: '',
-    route: 'portfolio'
+    description: ''
   },
   post: {
     title: 'Blog',
-    description: '',
-    route: 'blog'
+    description: ''
   },
   service: {
     title: 'Services',
-    description: '',
-    route: 'service'
+    description: ''
   },
   team: {
     title: 'Team Members',
-    description: '',
-    route: 'team'
+    description: ''
   },
   testimonial: {
     title: 'Testimonials',
-    description: '',
-    route: 'testimonial'
+    description: ''
   }
 }
 
@@ -126,7 +119,7 @@ export default async function getPostTypeArchive(
       // Retrieve default SEO data.
       response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
 
-      const pluralType = postTypes[postType] ?? postType
+      const pluralType = postTypes[postType]?.pluralName ?? postType
       const data = archiveData?.[pluralType] ?? null
 
       // Set error props if data not found.
@@ -147,7 +140,7 @@ export default async function getPostTypeArchive(
             ? {
                 ...homepageSettings.postsPage.seo,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`
               }
             : {
@@ -156,7 +149,7 @@ export default async function getPostTypeArchive(
                 }`,
                 metaDesc: archiveSeo?.[postType]?.description,
                 canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
-                  archiveSeo?.[postType]?.route
+                  postTypes?.[postType]?.route
                 }`,
                 metaRobotsNofollow: 'follow',
                 metaRobotsNoindex: 'index'

api/wordpress/_global/getPostTypeById.js

@@ -19,9 +19,15 @@ import getMenus from '../menus/getMenus'
  * @param {string}          postType WP post type.
  * @param {number | string} id       Post identifier.
  * @param {string}          idType   Type of ID.
+ * @param {boolean}         preview  Whether checking if post preview exists.
  * @return {object}                  Object containing Apollo client instance and post data or error object.
  */
-export default async function getPostTypeById(postType, id, idType = 'SLUG') {
+export default async function getPostTypeById(
+  postType,
+  id,
+  idType = 'SLUG',
+  preview = false
+) {
   // Define single post query based on post type.
   const postTypeQuery = {
     career: queryCareerById,
@@ -93,11 +99,11 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
         slug: id
       }
 
-      // Handle blocks.
-      if (!post || !post?.blocksJSON) {
+      if (preview || !post || !post?.blocksJSON) {
         return post
       }
 
+      // Handle blocks.
       newPost.blocks = await formatBlockData(
         JSON.parse(newPost.blocksJSON) ?? []
       )

api/wordpress/_global/getPostTypeStaticPaths.js

@@ -15,7 +15,7 @@ export default async function getPostTypeStaticPaths(postType) {
   }
 
   // Retrieve post type plural name.
-  const pluralName = postTypes[postType]
+  const pluralName = postTypes[postType].pluralName
 
   // Check if post type is hierarchical.
   const isHierarchical = isHierarchicalPostType(postType)

api/wordpress/_global/getPostTypeStaticProps.js

@@ -8,15 +8,17 @@ import getFrontendPage, {frontendPageSeo} from './getFrontendPage'
  * Retrieve static props by post type.
  *
  * @author WebDevStudios
- * @param {string} params   Post params (e.g., slug).
- * @param {string} postType Post Type.
- * @return {object}         Object containing post props and revalidate setting.
+ * @param {string}  params      Post params (e.g., slug).
+ * @param {string}  postType    Post Type.
+ * @param {boolean} preview     Whether requesting preview of post.
+ * @param {object}  previewData Post preview data.
+ * @return {object}             Object containing post props and revalidate setting.
  */
 export default async function getPostTypeStaticProps(
   params,
-  postType
-  // preview = false, // TODO - add preview handling.
-  // previewData = null
+  postType,
+  preview = false,
+  previewData = null
 ) {
   // Set revalidate length (seconds).
   const revalidate = 60 * 5
@@ -28,7 +30,7 @@ export default async function getPostTypeStaticProps(
     }
   }
 
-  // Check for Frontend-only routes.
+  /* -- Handle Frontend-only routes. -- */
   if (Object.keys(frontendPageSeo).includes(postType)) {
     const {apolloClient, ...routeData} = await getFrontendPage(postType)
 
@@ -41,7 +43,7 @@ export default async function getPostTypeStaticProps(
     })
   }
 
-  // Check for dynamic archive display.
+  /* -- Handle dynamic archive display. -- */
   if (!Object.keys(params).length) {
     const {apolloClient, ...archiveData} = await getPostTypeArchive(postType)
 
@@ -56,24 +58,42 @@ export default async function getPostTypeStaticProps(
     })
   }
 
+  /* -- Handle individual posts. -- */
+
   // Handle catch-all routes.
   const slug = Array.isArray(params.slug) ? params.slug.join('/') : params.slug
 
+  // Get post identifier (ID or slug).
+  const postId = Number.isInteger(Number(slug)) ? Number(slug) : slug
+
+  // Check if preview mode is active and valid for current post (preview and post IDs or slugs match).
+  const isCurrentPostPreview =
+    preview &&
+    (postId === previewData?.post?.id || postId === previewData?.post?.slug)
+
+  // Check if viewing a draft post.
+  const isDraft = isCurrentPostPreview && 'draft' === previewData?.post?.status
+
+  // Set query variables.
+  const id = isDraft ? previewData.post.id : slug
+  const idType = isDraft ? 'DATABASE_ID' : 'SLUG'
+
   // Retrieve post data.
   const {apolloClient, error, ...postData} = await getPostTypeById(
     postType,
-    slug
+    id,
+    idType
   )
 
   const props = {
     ...postData,
     ...sharedProps,
-    error
+    error,
+    preview: isCurrentPostPreview
   }
 
-  // Custom handling for homepage.
+  // Fallback to empty props if homepage not set in WP.
   if ('/' === slug && error) {
-    // Fallback to empty props if homepage not set in WP.
     props.post = null
     props.error = false
   }

api/wordpress/_global/postTypes.js

@@ -1,15 +1,45 @@
 // Define valid WP post types (singular and plural GraphQL names).
 export const postTypes = {
-  career: 'careers',
-  comment: 'comments',
-  event: 'events',
-  mediaItem: 'mediaItems',
-  page: 'pages',
-  portfolio: 'portfolios',
-  post: 'posts',
-  service: 'services',
-  team: 'teams',
-  testimonial: 'testimonials'
+  career: {
+    pluralName: 'careers',
+    route: 'careers'
+  },
+  comment: {
+    pluralName: 'comments',
+    route: null
+  },
+  event: {
+    pluralName: 'events',
+    route: 'events'
+  },
+  mediaItem: {
+    pluralName: 'mediaItems',
+    route: null
+  },
+  page: {
+    pluralName: 'pages',
+    route: ''
+  },
+  portfolio: {
+    pluralName: 'portfolios',
+    route: 'portfolio'
+  },
+  post: {
+    pluralName: 'posts',
+    route: 'blog'
+  },
+  service: {
+    pluralName: 'services',
+    route: 'service'
+  },
+  team: {
+    pluralName: 'teams',
+    route: 'team'
+  },
+  testimonial: {
+    pluralName: 'testimonials',
+    route: 'testimonial'
+  }
 }
 
 // Define hierarchical post types.

api/wordpress/_partials/globalPostFields.js

@@ -5,5 +5,6 @@ const globalPostFields = `
   slug
   uri
   title
+  status
 `
 export default globalPostFields

api/wordpress/connector.js

@@ -4,6 +4,14 @@ import {initializeApollo} from '../apolloConfig'
 
 // Define env vars.
 export const wpApiUrlBase = getEnvVar('WORDPRESS_API_URL')
+export const wpPreviewSecret = process.env.WORDPRESS_PREVIEW_SECRET
+const wpAppUser = process.env.WORDPRESS_APPLICATION_USERNAME
+const wpAppPass = process.env.WORDPRESS_APPLICATION_PASSWORD
+
+// Set WP application password auth header.
+const wpAuthorization = Buffer.from(`${wpAppUser}:${wpAppPass}`).toString(
+  'base64'
+)
 
 // Define Frontend WP API data endpoint base.
 const wpDataEndpointBase = '/wp'
@@ -28,7 +36,10 @@ export function createWpApolloClient() {
     ssrMode: false,
     link: new HttpLink({
       uri: `${wpApiUrlBase}graphql`,
-      credentials: ''
+      credentials: '',
+      headers: {
+        authorization: `Basic ${wpAuthorization}`
+      }
     }),
     cache: new InMemoryCache()
   })

functions/getPagePropTypes.js

@@ -49,7 +49,7 @@ export const postPropTypes = {
     excerpt: PropTypes.string,
     featuredImage: PropTypes.object,
     ...seoPropTypes,
-    slug: PropTypes.string,
+    slug: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     title: PropTypes.string,
     uri: PropTypes.string
   })

functions/isPreviewActive.js

@@ -0,0 +1,19 @@
+/**
+ * Check if preview mode is active for current post view.
+ *
+ * @param {object} post        Current post object.
+ * @param {object} previewData Post preview object.
+ * @return {boolean}           Whether preview mode is active for current view.
+ */
+export default function isPreviewActive(post, previewData) {
+  const previewId = previewData?.page?.id
+  const postId = post?.databaseId
+
+  // Not in preview mode if either ID is missing.
+  if (!previewId || !postId) {
+    return false
+  }
+
+  // Only in preview mode if IDs match.
+  return previewId === postId
+}

pages/[...slug].js

@@ -54,12 +54,14 @@ export async function getStaticPaths() {
  * Get post static props.
  *
  * @author WebDevStudios
- * @param {object} context        Context for current post.
- * @param {object} context.params Route parameters for current post.
- * @return {object}               Post props.
+ * @param {object}  context             Context for current post.
+ * @param {object}  context.params      Route parameters for current post.
+ * @param {boolean} context.preview     Whether requesting preview of post.
+ * @param {object}  context.previewData Post preview data.
+ * @return {object}                     Post props.
  */
-export async function getStaticProps({params}) {
-  return getPostTypeStaticProps(params, postType)
+export async function getStaticProps({params, preview, previewData}) {
+  return getPostTypeStaticProps(params, postType, preview, previewData)
 }
 
 Page.propTypes = {