Merge branch 'staging' into develop

Author: ravewebdev

.storybook/main.js

@@ -1,12 +1,19 @@
 const path = require('path')
 
-// https://storybook.js.org/docs/react/configure/overview
+/**
+ * Configure Storybook.
+ *
+ * @see https://storybook.js.org/docs/react/configure/overview
+ */
 module.exports = {
   reactOptions: {
     fastRefresh: true,
     strictMode: true
   },
-  stories: ['../components/**/**/*.stories.@(js|mdx)'],
+  stories: [
+    '../components/**/**/*.stories.@(js|mdx)',
+    '../docs/**/**/*.stories.@(mdx)'
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-essentials',

.storybook/manager.js

@@ -1,6 +1,21 @@
 import {addons} from '@storybook/addons'
 import theme from './theme'
 
+/**
+ * Configure Storybook features and behavior.
+ *
+ * @see https://storybook.js.org/docs/react/configure/features-and-behavior
+ */
 addons.setConfig({
-  theme
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: theme,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: false
 })

.storybook/preview-head.html

@@ -1,35 +1,60 @@
-import {withNextRouter} from 'storybook-addon-next-router'
+import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
 import {addDecorator} from '@storybook/react'
-
+import {withNextRouter} from 'storybook-addon-next-router'
 import '../styles/index.css'
 
-// This is so that we don't get "Uncaught TypeError: Cannot read property 'prefetch' of null" in stories with a Next.js link component.
+/**
+ * Enable Next.js <Link /> component usage.
+ */
 addDecorator(
   withNextRouter({
     path: '/'
   })
 )
 
+/**
+ * Custom viewports based on popular Apple devices.
+ */
 const customViewports = {
-  mobile: {
-    name: 'Mobile',
+  largeMobile: {
+    name: 'iPhone X/11/12 Pro',
     styles: {
-      width: '375px',
-      height: '667px'
-    }
+      width: '428px',
+      height: '926px'
+    },
+    type: 'mobile'
   },
-  tablet: {
-    name: 'Tablet',
+  smallLaptop: {
+    name: 'MacBook Air 13"',
     styles: {
-      width: '768px',
-      height: '1024px'
+      width: '1280px',
+      height: '800px'
+    },
+    type: 'desktop'
+  },
+  largeLaptop: {
+    name: 'MacBook Pro 16"',
+    styles: {
+      width: '1536px',
+      height: '960px'
     }
+  },
+  destkop: {
+    name: 'iMac 5k',
+    styles: {
+      width: '2048px',
+      height: '1152px'
+    },
+    type: 'desktop'
   }
 }
 
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   viewport: {
-    viewports: customViewports
+    viewports: {
+      ...customViewports,
+      ...INITIAL_VIEWPORTS
+    }
   }
 }

.storybook/preview.js

@@ -1,4 +1,12 @@
 import {create} from '@storybook/theming/create'
-import tailwindConfig from '../tailwind.config'
 
-export default create({})
+/**
+ * Configure Storybook theme.
+ *
+ * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
+ */
+export default create({
+  base: 'light',
+  brandTitle: 'WebDevStudios',
+  brandUrl: 'https://webdevstudios.com'
+})

.storybook/theme.js

@@ -0,0 +1,63 @@
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
+import {initializeWpApollo} from '../connector'
+import queryDefaultPageData from './queryDefaultPageData'
+import getMenus from '../menus/getMenus'
+
+// Define SEO for Frontend routes.
+export const frontendPageSeo = {
+  search: {
+    title: 'Search',
+    description: 'Search page'
+  }
+}
+
+/**
+ * Retrieve data for Frontend-only route (i.e., page does not exist in WordPress).
+ *
+ * @author WebDevStudios
+ * @param {string} route Frontend route.
+ * @return {object}      Object containing Apollo client instance and post data or error object.
+ */
+export default async function getFrontendPage(route) {
+  // Get/create Apollo instance.
+  const apolloClient = initializeWpApollo()
+
+  // Set up return object.
+  const response = {
+    apolloClient,
+    error: false,
+    errorMessage: null
+  }
+
+  // Execute query.
+  response.post = await apolloClient
+    .query({query: queryDefaultPageData})
+    .then((res) => {
+      const {homepageSettings, siteSeo, menus} = res.data
+
+      // Retrieve menus.
+      response.menus = getMenus(menus)
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
+      // Set route SEO.
+      return {
+        seo: {
+          title: `${frontendPageSeo?.[route]?.title} - ${
+            response.defaultSeo?.openGraph?.siteName ?? ''
+          }`,
+          metaDesc: frontendPageSeo?.[route]?.description,
+          canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${route}`
+        }
+      }
+    })
+    .catch((error) => {
+      response.error = true
+      response.errorMessage = error.message
+
+      return null
+    })
+
+  return response
+}

api/wordpress/_global/getFrontendPage.js

@@ -7,6 +7,47 @@ import queryServicesArchive from '../services/queryServicesArchive'
 import queryTeamsArchive from '../teams/queryTeamsArchive'
 import queryPortfoliosArchive from '../portfolios/queryPortfoliosArchive'
 import queryTestimonialsArchive from '../testimonials/queryTestimonialsArchive'
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
+import getMenus from '../menus/getMenus'
+
+// Define SEO for archives.
+export const archiveSeo = {
+  career: {
+    title: 'Careers',
+    description: '',
+    route: 'careers'
+  },
+  event: {
+    title: 'Events',
+    description: '',
+    route: 'events'
+  },
+  portfolio: {
+    title: 'Portfolio',
+    description: '',
+    route: 'portfolio'
+  },
+  post: {
+    title: 'Blog',
+    description: '',
+    route: 'blog'
+  },
+  service: {
+    title: 'Services',
+    description: '',
+    route: 'service'
+  },
+  team: {
+    title: 'Team Members',
+    description: '',
+    route: 'team'
+  },
+  testimonial: {
+    title: 'Testimonials',
+    description: '',
+    route: 'testimonial'
+  }
+}
 
 /**
  * Retrieve post archive.
@@ -77,8 +118,16 @@ export default async function getPostTypeArchive(
   await apolloClient
     .query({query, variables})
     .then((archive) => {
+      const {homepageSettings, siteSeo, menus, ...archiveData} = archive.data
+
+      // Retrieve menus.
+      response.menus = getMenus(menus)
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
       const pluralType = postTypes[postType] ?? postType
-      const data = archive?.data?.[pluralType] ?? null
+      const data = archiveData?.[pluralType] ?? null
 
       // Set error props if data not found.
       if (!data?.edges || !data?.pageInfo) {
@@ -91,6 +140,29 @@ export default async function getPostTypeArchive(
       // Flatten posts array to include inner node post data.
       response.posts = data.edges.map((post) => post.node)
 
+      // Attempt to use posts page for blog, default to custom SEO.
+      response.post = {
+        seo:
+          'post' === postType && homepageSettings?.postsPage?.seo
+            ? {
+                ...homepageSettings.postsPage.seo,
+                canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
+                  archiveSeo?.[postType]?.route
+                }`
+              }
+            : {
+                title: `${archiveSeo?.[postType]?.title} - ${
+                  response.defaultSeo?.openGraph?.siteName ?? ''
+                }`,
+                metaDesc: archiveSeo?.[postType]?.description,
+                canonical: `${response.defaultSeo?.openGraph?.url ?? ''}/${
+                  archiveSeo?.[postType]?.route
+                }`,
+                metaRobotsNofollow: 'follow',
+                metaRobotsNoindex: 'index'
+              }
+      }
+
       // Extract pagination data.
       response.pagination = data.pageInfo
     })

api/wordpress/_global/getPostTypeArchive.js

@@ -9,6 +9,8 @@ import queryServiceById from '../services/queryServiceById'
 import queryTeamById from '../teams/queryTeamById'
 import queryPortfolioById from '../portfolios/queryPortfolioById'
 import queryTestimonialById from '../testimonials/queryTestimonialById'
+import formatDefaultSeoData from '@/functions/formatDefaultSeoData'
+import getMenus from '../menus/getMenus'
 
 /**
  * Retrieve single post by specified identifier.
@@ -63,29 +65,45 @@ export default async function getPostTypeById(postType, id, idType = 'SLUG') {
   // Execute query.
   response.post = await apolloClient
     .query({query, variables: {id, idType}})
-    .then((post) => {
+    .then((res) => {
+      const {homepageSettings, siteSeo, menus, ...postData} = res.data
+
+      // Retrieve menus.
+      response.menus = getMenus(menus)
+
+      // Retrieve default SEO data.
+      response.defaultSeo = formatDefaultSeoData({homepageSettings, siteSeo})
+
+      const post = postData?.[postType]
+
       // Set error props if data not found.
-      if (!post?.data?.[postType]) {
+      if (!post) {
         response.error = true
         response.errorMessage = `An error occurred while trying to retrieve data for ${postType} "${id}."`
 
         return null
       }
 
-      return post.data[postType]
+      return post
     })
     .then(async (post) => {
+      // Add slug/ID to post.
+      const newPost = {
+        ...post,
+        slug: id
+      }
+
       // Handle blocks.
       if (!post || !post?.blocksJSON) {
         return post
       }
 
-      const newPost = {...post}
-
       newPost.blocks = await formatBlockData(
         JSON.parse(newPost.blocksJSON) ?? []
       )
 
+      delete newPost.blocksJSON
+
       return newPost
     })
     .catch((error) => {