gatsby-core-theme 4.0.0 → 5.0.2

package/CHANGELOG.md

@@ -1,3 +1,71 @@
+## [5.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v5.0.1...v5.0.2) (2022-03-03)
+
+
+### Bug Fixes
+
+* disabled lighthouse ([cb06eaf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cb06eaf1cd70de80cfc4eabc17bea8effde1d4d3))
+* tracker link default to main if toplist custom tracker name not exist ([8f9b25f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8f9b25f284d779f57e53edb05533feec78d71207))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([591ffa4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/591ffa4a83cfc72d3dd11bb9b453b0296fe6d792))
+
+## [5.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v5.0.0...v5.0.1) (2022-03-02)
+
+
+### Bug Fixes
+
+* google bot images ([53fc90c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/53fc90c24cc7bacc9d5911fb05c29dae611fbc1f))
+* lazy image tests ([ef63ea8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ef63ea88cd2ff7b3dac335afd30e75e872cdff61))
+
+
+* Merge branch 'tm-2743-googlebot-images' into 'master' ([2156666](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/21566661cd703480bb5e58bba9b2b6e1ecb49121))
+
+# [5.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v4.0.0...v5.0.0) (2022-03-01)
+
+
+### Bug Fixes
+
+* add slidetitle alt to images ([669ebdf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/669ebdf4f352558569ac5d122f1d790ae5f1a4e1))
+* add src name as a title ([71afdbf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/71afdbf9a6c2de26022978aecc9313f1132981fa))
+* add src name as a title ([4e4cae2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4e4cae288a80364c2d824673c08abb6cd7ea2738))
+* added no script tag for all images even when using native lazy loading ([513dd8b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/513dd8b8501fbb0ea0a7e4210503826da942828a))
+* author box alt tag ([7a1a76c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7a1a76c8ad1cbde35952e0eb12bcbbcce030cb47))
+* fix html for anchor ([11518ca](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/11518caa9246edb373e2a6b590c2e6d371426d7e))
+* schema fixes ([95f3adf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/95f3adf1ca366ed01184d5b93bcb7c721bf38177))
+* schema fixes ([c684519](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c6845195c7b37f02cf09d795db27ccfd31f9c5bf))
+* set interface of cssstyledeclaration on each render ([7c0060a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c0060af75a13409a36ce67243f9afd92642a7f4))
+
+
+### Code Refactoring
+
+* added image cdn urls ([1eeba30](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1eeba30c042b85ff0a814944484f33ad814dcb92))
+* changes to image cdn url ([052df45](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/052df45ad2eb9e38c9b147b3477cd6b3f82ec505))
+* changes to image cdn url ([c3eb17e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c3eb17e4f71e50aaacaf1eb5845d472ca9f188c2))
+* create fileName getter fnc ([a1dc8ac](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1dc8acbd40c362e73aafa19eecf7814ba9df17f))
+* remove cross-env ([a12e65b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a12e65b4f7d5fc277103f860dd702195b1bda97c))
+* remove test data ([657abde](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/657abdeef0ad948c64c1120e055db8d0a924106e))
+* remove test data ([04649e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/04649e649b2e1a4ca497f61e520bf2b1cc032f4f))
+
+
+* Merge branch 'tm-2729-alt-tags' into 'master' ([f2776f2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f2776f2c31520822848b7b811df38405df26bef5))
+* Merge branch 'tm-2743-noscript-tag' into 'master' ([26bc7d2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/26bc7d296af7175f31eac582d031b3bc7eb5fe6b))
+* Merge branch 'tm-2740-carousel-fix' into 'master' ([a537f2f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a537f2f41d665e661e1486015f99ceb47d59fbce))
+* Merge branch 'test-schema' into 'master' ([29641f7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/29641f7e2142ff0fb0a4b76f4201e758cf150aed))
+* Merge branch 'tm-2706-custom-demo-deployment' into 'master' ([7383e0d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7383e0daddf51de0901dd4c441e6016c61d60224))
+* Merge branch 'master' into tm-2706-custom-demo-deployment ([8a3d1ed](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a3d1ed442250caa2be532138dba244b95cb1378))
+* Merge branch 'tm-2721-fixhtml-anchor' into 'master' ([39a160c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/39a160cb88d7a352427e99a90fb4dc6655e9a877))
+
+
+### Tests
+
+* schema changes ([c59116f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c59116f5d2122c97b2dd18e62b85358685cca277))
+* temp test ([fb1bb3f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fb1bb3f44d07e2e8d96a8bdf4008e9d58c16e233))
+* temp test ([11a0b99](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/11a0b99c235cabb9f11831c8647f2ba0aa0c7f31))
+* temp test ([f81d84a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f81d84a3114d7ff4159a482e2db23dd8872c70ab))
+* temp test ([03ab914](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/03ab914910aeb4180448f66f5abd09a92af087a5))
+* temp test ([ec052c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ec052c0dc395b8428e214db526c0000dcc8b2b68))
+* temp test ([b2227b0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b2227b0170703795fce93e6d4ecfe6d1b8dd4446))
+
 # [4.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v3.0.0...v4.0.0) (2022-02-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "4.0.0",
+  "version": "5.0.2",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/author-box/index.js

@@ -16,6 +16,7 @@ export default function AuthorBox({ author }) {
     { id: 'li', link: author.linkedin_profile, icon: <FaLinkedin /> },
     { id: 'tw', link: author.twitter_profile, icon: <FaTwitter /> },
   ];
+
   return (
     <div className={styles.container}>
       <div className={styles.innerContainer}>
@@ -23,7 +24,7 @@ export default function AuthorBox({ author }) {
           {author.image_object && (
             <LazyImage
               src={imagePrettyUrl(author.image_object.filename)}
-              alt={author.image_alt}
+              alt={author.image_alt || author.name}
               width={author.image_object?.width}
               height={author.image_object?.height}
             />

package/src/components/atoms/spotlights/index.js

@@ -7,7 +7,7 @@ import { GrFormNextLink } from 'react-icons/gr';
 import Button from '~atoms/button';
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
-import { imagePrettyUrl } from '~helpers/getters';
+import { imagePrettyUrl, getImageFilename } from '~helpers/getters';
 import Link from '~hooks/link';
 import styles from './spotlights.module.scss';
 
@@ -16,13 +16,16 @@ const Spotlights = ({ module, themeStyles = {} }) => {
 
   const content = (item) => {
     const img = mode === 'icon' ? item.icon : item.image;
+    const imageSrc = imagePrettyUrl(img);
+    const fileName = getImageFilename(imageSrc);
+
     return (
       <>
         <LazyImage
           width={100}
           height={50}
-          alt={item.label || item?.link_text}
-          src={imagePrettyUrl(img)}
+          alt={item.label || item?.link_text || fileName}
+          src={imageSrc}
         />
         <label>{item.label}</label>
         {item.subtitle && <span>{item.subtitle}</span>}

package/src/components/molecules/carousel/default-slide/index.js

@@ -13,6 +13,7 @@ const Slide = ({
   primaryBtnText = '',
   secondaryBtnText = '',
   imageSizes = { width: null, height: 930 },
+  slideTitle = '',
 }) => {
   return (
     <>
@@ -21,7 +22,7 @@ const Slide = ({
         <LazyImage
           className={styles.image}
           src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
-          alt={item.title}
+          alt={item.title || slideTitle}
         />
       )}
       {item.content && <p className={styles.content}>{item.content}</p>}
@@ -62,6 +63,7 @@ Slide.propTypes = {
   primaryBtnText: PropTypes.string,
   secondaryBtnText: PropTypes.string,
   imageSizes: PropTypes.shape({ width: PropTypes.any, height: PropTypes.any }),
+  slideTitle: PropTypes.string,
 };
 
 export default Slide;

package/src/components/molecules/slider/index.js

@@ -132,6 +132,12 @@ function Slider({
     // Keep slider node reference for multiple carousels in an instance
     const sliderContentNode = sliderContentRef.current;
 
+    sliderContentNode.style.setProperty('width', style.width);
+    sliderContentNode.style.setProperty('transition', style.transition);
+    sliderContentNode.style.setProperty('transform', style.transform);
+    sliderContentNode.style.setProperty('grid-template-columns', style.gridTemplateColumns);
+    sliderContentNode.style.setProperty('gap', style.gridGap);
+
     const mousedown = (e) => {
       sliderIsActive.current = true;
       swipeStart(e, updateOnSwipe);

package/src/components/organisms/anchor/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -22,18 +23,20 @@ function Anchor({ module: { items }, headerOffset = 80 }) {
   };
 
   return (
-    <div className={styles.anchor}>
-      {items.map((anchor) => (
-        <a
-          className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
-          key={keygen()}
-          onClick={handleClick}
-          href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
-        >
-          {anchor?.label}
-        </a>
+    <ul className={styles.anchor}>
+      {items.map((anchor, index) => (
+        <li key={index}>
+          <a
+            className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
+            key={keygen()}
+            onClick={handleClick}
+            href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
+          >
+            {anchor?.label}
+          </a>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 }
 

package/src/components/organisms/carousel/index.js

@@ -6,15 +6,25 @@ import Slide from '~molecules/carousel/default-slide';
 import keygen from '~helpers/keygen';
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass = '' }) => (
+const Carousel = ({
+  page = {},
+  module = {},
+  settings = {},
+  CustomSlideComponent,
+  gtmClass = '',
+}) => (
   <div className={styles.carouselContainer}>
     <Slider {...settings} gtmClass={gtmClass}>
-      {module.items.map((item) => (
+      {module.items.map((item, index) => (
         <div key={keygen()} className={styles.carouselItem}>
           {CustomSlideComponent !== undefined ? (
             <CustomSlideComponent item={item} gtmClass={gtmClass} />
           ) : (
-            <Slide item={item} gtmClass={gtmClass} />
+            <Slide
+              slideTitle={`${page.title}-carousel-${index + 1}`}
+              item={item}
+              gtmClass={gtmClass}
+            />
           )}
         </div>
       ))}
@@ -23,6 +33,9 @@ const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass =
 );
 
 Carousel.propTypes = {
+  page: PropTypes.shape({
+    title: PropTypes.string,
+  }),
   module: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({

package/src/helpers/getters.js

@@ -90,6 +90,15 @@ export function image(filename, width, height, fit = 'cover') {
   return `${cloudFrontUrl}/${Buffer.from(imageRequest).toString('base64')}`;
 }
 
+export function getImageFilename(src) {
+  const srcArr = src?.substring(src?.lastIndexOf('/') + 1)?.split('.');
+  if (!srcArr.length) {
+    return '';
+  }
+
+  return srcArr[0];
+}
+
 export function getImageExtension(filename) {
   return filename && filename.split('.').pop();
 }
@@ -143,6 +152,11 @@ export function prettyTracker(operator, trackerType = 'main') {
     return null;
   }
 
+  // if tracker is not main, check if the tracker exists,  if not use main
+  if (trackerType !== 'main' && operator.links[trackerType] === undefined) {
+    trackerType = 'main';
+  }
+
   return generateTrackerLink(operator, trackerType);
 }
 

package/src/helpers/schema.js

@@ -98,10 +98,11 @@ export function generateSchemaObject(schema) {
   }, {});
 }
 
-export function breadcrumbsSchema(breadcrumbs) {
+export function breadcrumbsSchema(breadcrumbs, path) {
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
+    '@id': `${getUrl(path)}#breadcrumblist`,
     itemListElement: breadcrumbs.map((breadcrumb, index) => ({
       '@type': 'ListItem',
       name: breadcrumb.path,
@@ -177,6 +178,7 @@ export function organizationSchema(page, pageImage) {
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'Organization',
+    '@id': `${getUrl(page.path)}#organization`,
     url: process.env.GATSBY_SITE_URL,
     name: page.siteSchema?.site_name,
     logo: pageImage,
@@ -188,13 +190,14 @@ export function organizationSchema(page, pageImage) {
   return JSON.stringify(generateSchemaObject(schema));
 }
 
-export function moduleSchemas(modules) {
-  const schema = modules.map((module) => {
+export function moduleSchemas(modules, path) {
+  const schema = modules.map((module, index) => {
     switch (module.name) {
       case 'faq': {
         const moduleSchema = {
           '@context': 'https://schema.org',
           '@type': 'FAQPage',
+          '@id': `${getUrl(path)}#faqpage${index === 0 ? '' : index}`,
           mainEntity: module.items?.map((item) => ({
             '@type': 'Question',
             acceptedAnswer: {
@@ -243,6 +246,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'Article',
+        '@id': `${getUrl(page.path)}#article`,
         url: getUrl(page.path),
         headline: page.title,
         datePublished: page.created_at,
@@ -260,6 +264,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'Review',
+        '@id': `${getUrl(page.path)}#review`,
         name: page.relation?.name || '',
         reviewBody: page.extra_fields?.operator_summary || '',
         itemReviewed: {
@@ -284,6 +289,7 @@ export function templateSchemas(page, pageImage) {
       const schema = {
         '@context': 'https://schema.org',
         '@type': 'VideoGame',
+        '@id': `${getUrl(page.path)}#videogame`,
         url: getUrl(page.path),
         name: page.relation?.name || '',
         description: page.extra_fields?.game_summary || '',
@@ -319,12 +325,14 @@ export function schemaGenerator(page = {}, pageImage) {
     // Page Schema
     page.seo_json_schema,
     // Breadcrumbs Schema
-    page.breadcrumbs?.length ? breadcrumbsSchema(page.breadcrumbs) : null,
+    page.breadcrumbs?.length ? breadcrumbsSchema(page.breadcrumbs, page.path) : null,
     // Modules Schemas
     webPageSchema(page, pageImage),
     organizationSchema(page, pageImage),
     templateSchemas(page, pageImage),
-    ...(page.sections?.main?.modules ? moduleSchemas(page.sections.main.modules) : [null]),
+    ...(page.sections?.main?.modules
+      ? moduleSchemas(page.sections.main.modules, page.path)
+      : [null]),
   ];
 
   return jsonSchema;

package/src/helpers/schema.test.js

@@ -175,16 +175,19 @@ describe('Schema Helper', () => {
   });
 
   test('moduleSchemas(faq)', () => {
-    const output = Schema.moduleSchemas([
-      {
-        name: 'faq',
-        items: [
-          { answer: 'Answer A', question: 'Question A' },
-          { answer: 'Answer B', question: 'Question B' },
-          { answer: 'Answer C', question: 'Question C' },
-        ],
-      },
-    ])[0];
+    const output = Schema.moduleSchemas(
+      [
+        {
+          name: 'faq',
+          items: [
+            { answer: 'Answer A', question: 'Question A' },
+            { answer: 'Answer B', question: 'Question B' },
+            { answer: 'Answer C', question: 'Question C' },
+          ],
+        },
+      ],
+      '/'
+    )[0];
 
     const json = parseCheckSchema(output);
     expect(json['@type']).toEqual('FAQPage');

package/src/hooks/lazy-image/index.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
+import LazyLoad from 'react-lazyload';
 import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 
 export default function LazyImage({
@@ -15,45 +15,17 @@ export default function LazyImage({
   loading = 'lazy',
 }) {
   const [errorImage, setErrorImage] = useState(false);
+  const [nonNativeLazyLoaded, setNonNativeLazyLoaded] = useState(false);
+
+  useEffect(() => {
+    setNonNativeLazyLoaded(!isNativeImageLazyLoadingSupported());
+  }, []);
 
   if ((defaultImg && !src) || errorImage === true) {
     return defaultImg;
   }
 
-  if (!isNativeImageLazyLoadingSupported()) {
-    const LazyLoad = loadable(() => import(`react-lazyload`));
-    return (
-      <>
-        <LazyLoad
-          height={height ? `${height}px` : null}
-          width={width ? `${width}px` : null}
-          placeholder={<span className="lazyload-placeholder" />}
-          debounce={0}
-        >
-          <img
-            src={src}
-            className={className}
-            height={height}
-            width={width}
-            alt={alt}
-            style={style}
-          />
-        </LazyLoad>
-        <noscript>
-          <img
-            src={src}
-            className={className}
-            height={height}
-            width={width}
-            alt={alt}
-            style={style}
-          />
-        </noscript>
-      </>
-    );
-  }
-
-  return (
+  return !nonNativeLazyLoaded ? (
     <img
       src={src}
       loading={loading}
@@ -64,6 +36,34 @@ export default function LazyImage({
       style={style}
       onError={() => setErrorImage(true)}
     />
+  ) : (
+    <>
+      <LazyLoad
+        height={height ? `${height}px` : null}
+        width={width ? `${width}px` : null}
+        placeholder={<span className="lazyload-placeholder" />}
+        debounce={0}
+      >
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+        />
+      </LazyLoad>
+      <noscript>
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+        />
+      </noscript>
+    </>
   );
 }