gatsby-core-theme 1.6.12 → 1.6.16

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+## [1.6.16](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.15...v1.6.16) (2021-12-03)
+
+
+### Bug Fixes
+
+* fix event hour format based on site name ([d1c275c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d1c275ccc5ed429f04208c1cf8ae4c5d4841aac7))
+
+
+* Merge branch 'format_event_hour' into 'master' ([1b8c999](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1b8c999064676973c55360cc04820f0be122496e))
+
+## [1.6.15](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.14...v1.6.15) (2021-12-02)
+
+
+### Bug Fixes
+
+* html sitemap page translations ([3bd7093](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3bd70937dc819d9a98d951ce3946ba71c1ad7055))
+
+## [1.6.14](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.13...v1.6.14) (2021-12-01)
+
+
+### Bug Fixes
+
+* added clean up html tags in faq schema data ([0b9ae93](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0b9ae937928ede9f1f710ee0749108bf99b16757))
+* added clean up html tags in faq schema data ([1b22637](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1b22637bfadd48e9731e01d82b39e7db97e156ac))
+* added new cdn env var for gifs ([e5bb4bc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e5bb4bc6507688fbb8060a4df349fe5ff534a009))
+* geturl func ([c531ed3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c531ed335ae4e35aaa5b94010cb136d419826ac7))
+
+
+* Merge branch 'fix-gif-images' into 'master' ([0fd8aab](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0fd8aab0d3798b6487d0cc5a3d1a5a8c14d45c7f))
+
+## [1.6.13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.12...v1.6.13) (2021-11-28)
+
+
+### Bug Fixes
+
+* added no script tag for all lazyimages ([76ee02f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/76ee02f235bcdab777b961fe19068e9033cdb514))
+* fixes on accessibility score ([b0e213e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b0e213e09741e2fbcb40356db77c600a39327885))
+* noscript tag ([d922b66](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d922b66d5ac8b4312a623ff0a37b213e3d07b908))
+* noscript tag ([d97e54d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d97e54d035e1bd580fec1b1c9cf2f6cca8a24308))
+* noscript tag ([2571d26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2571d2624b28db40db235f65916623dc51abd41a))
+* noscript tag ([844db38](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/844db385179f7a291148de789d62629c6950c4bc))
+* noscript tag ([45deece](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/45deececbc31fdaef83e90a7924b5e5084d8e7bf))
+* noscript tag ([6ea5975](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6ea5975e81bdf29b25c57a93e8996fd83a155e9b))
+* noscript tag ([09fa187](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/09fa1876c0142f042fdb81f47f01713492c8d487))
+* noscript tag ([a7ecfb4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a7ecfb45c772460d62aad290a91e463c68eebcfa))
+
+
+### Code Refactoring
+
+* add missing aria label ([a670669](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a670669eb29a136d57228824900cb2a3a64b6f56))
+* replace div with ul for performance imporvements ([5373d6c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5373d6c0d3fafdd1dfd17c91deaf79e8bc96eb06))
+
+
+### Config
+
+* increased pagespeed performance score to 90 ([143b68a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/143b68a0107811d366afa08223e672f26227322b))
+
+
+* Merge branch 'tm-2609-lazyload-noscript-tag' into 'master' ([6669bad](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6669bad97a1817b01033a42c8686f09c565dca37))
+* Merge branch 'tm-2595-accessibility-scores-fix' into 'master' ([048a617](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/048a6175d4025e4fcd4a7999dced518f97f6140b))
+
 ## [1.6.12](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.6.11...v1.6.12) (2021-11-25)
 
 

package/gatsby-node.esm.js

@@ -219,6 +219,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           marketSections,
           prefilledModules,
           siteInfo,
+          translations,
           ...themeOptions,
         };
 
@@ -247,7 +248,6 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
             context: {
               ...contextData,
               siteSchema,
-              translations,
               isPreview: page.path === 'preview',
             },
           });

package/package.json

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

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

@@ -11,8 +11,8 @@ describe('author box component', () => {
     const { container, getByText } = render(<AuthorBox author={author} />);
     expect(container).toBeTruthy();
     // Logo
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
     // Name
     expect(getByText('Ida Moen Olsen')).toBeTruthy();
     // Title

package/src/components/atoms/carousel/arrow/index.js

@@ -10,6 +10,7 @@ const Arrow = ({ direction, content = '', onClick, onKeyDown, disabled, gtmClass
     onClick={onClick}
     onKeyDown={onKeyDown}
     disabled={disabled}
+    aria-label={`Arrow ${direction} Link`}
   >
     {content}
   </button>

package/src/components/atoms/image/image.test.js

@@ -16,8 +16,8 @@ describe('Image Component', () => {
     expect(container).toBeTruthy();
 
     // Lazy image
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
 });
 afterEach(() => {

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

@@ -18,7 +18,7 @@ const Spotlights = ({ module }) => {
     return (
       <>
         <span className={styles.itemImage}>
-          <LazyImage alt={item.label} src={imagePrettyUrl(img)} />
+          <LazyImage alt={item.label || item?.link_text} src={imagePrettyUrl(img)} />
         </span>
         <span className={styles.label}>{item.label}</span>
       </>
@@ -43,11 +43,17 @@ const Spotlights = ({ module }) => {
                 title={item.label}
                 target="_blank"
                 rel="noreferrer"
+                aria-label={`${item?.label || item?.link_text} Link`}
               >
                 {content(item)}
               </a>
             ) : (
-              <Link to={item.link.value} title={item.label} className="spotlights-gtm">
+              <Link
+                to={item.link.value}
+                title={item.label}
+                className="spotlights-gtm"
+                aria-label={`${item?.label || item?.link_text} Link`}
+              >
                 {content(item)}
               </Link>
             )}

package/src/components/molecules/content/content.test.js

@@ -17,8 +17,8 @@ describe('Content Component', () => {
     expect(container.querySelectorAll('i')).toHaveLength(1);
 
     // Lazy image
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
 });
 afterEach(() => {

package/src/components/molecules/pagination/with-midpoints.js

@@ -57,7 +57,7 @@ const PaginationWithMidPoints = ({
         )}
       </li>
 
-      <div className={styles.padd}>
+      <ul className={styles.padd}>
         {/* first page link */}
         {current !== 1 && (
           <li>
@@ -122,7 +122,7 @@ const PaginationWithMidPoints = ({
             {total}
           </Link>
         </li>
-      </div>
+      </ul>
 
       {/* next button */}
       <li className={styles.showInAll}>

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

@@ -200,6 +200,7 @@ function Slider({
           className={`${styles.sliderContent}`}
           style={style}
           ref={sliderContentRef}
+          aria-label="Slider Content Button"
         >
           {children.map((slide, index) => (
             <div

package/src/helpers/getters.js

@@ -90,8 +90,15 @@ export function image(filename, width, height, fit = 'cover') {
   return `${cloudFrontUrl}/${Buffer.from(imageRequest).toString('base64')}`;
 }
 
+export function getImageExtension(filename) {
+  return filename && filename.split('.').pop();
+}
+
 export function imagePrettyUrl(filename = 'image.png', width = null, height = null) {
-  const cdnURL = process.env.IMAGE_CDN_URL || process.env.STORYBOOK_IMAGE_CDN_URL;
+  const cdnURL =
+    (getImageExtension(filename) === 'gif'
+      ? process.env.GIFS_CDN_URL
+      : process.env.IMAGE_CDN_URL) || process.env.STORYBOOK_IMAGE_CDN_URL;
 
   if (width && height) {
     const urlPath = '/fit-in';
@@ -262,7 +269,8 @@ export function getUrl(path) {
   if (path === '/') {
     return process.env.GATSBY_SITE_URL;
   }
-  return `${process.env.GATSBY_SITE_URL}${path}`;
+
+  return `${process.env.GATSBY_SITE_URL}${path.replace(/^\//, '')}`;
 }
 
 export function getLanguage(language) {

package/src/helpers/getters.test.js

@@ -68,6 +68,12 @@ describe('Getters Helper', () => {
     );
   });
 
+  test('getImageExtension()', () => {
+    expect(Getters.getImageExtension('photo.jpg')).toBeTruthy();
+    expect(Getters.getImageExtension('photo.jpg')).toEqual('jpg');
+    expect(Getters.getImageExtension(null)).toEqual(null);
+  });
+
   test('getPageImage()', () => {
     expect(
       Getters.getPageImage({ type: 'operator', relation: { default_logo_url: 'foo.jpg' } })
@@ -191,8 +197,9 @@ describe('Getters Helper', () => {
   });
 
   test('getUrl()', () => {
-    expect(Getters.getUrl('/')).toEqual('http://urltest.com');
+    expect(Getters.getUrl('/')).toEqual('http://urltest.com/');
     expect(Getters.getUrl('/games')).toEqual('http://urltest.com/games');
+    expect(Getters.getUrl('games')).toEqual('http://urltest.com/games');
   });
 
   test('getLanguage()', () => {

package/src/helpers/processor/sports.js

@@ -6,9 +6,11 @@ import {
   filterEvents,
   findTournaments,
   getSortedEvents,
+  formatEvents,
 } from '../schedule';
 
 export function prepareSportsData(sportsData) {
+  sportsData.events = formatEvents(sportsData.events);
   Object.keys(sportsData.tournaments).forEach((key) => {
     if (sportsData.tournaments[key].events) {
       sportsData.tournaments[key].events = filterEvents(

package/src/helpers/schedule.js

@@ -120,3 +120,44 @@ export function filterEvents(tournamentEvents, events) {
 
   return futureEvents;
 }
+
+export function changeEventHour(event, hour = 1) {
+  if (!event || !event.date || !event.date.time) {
+    return event;
+  }
+
+  const timeArr = event.date.time.split(':');
+  timeArr[0] = Number(timeArr[0]) - hour;
+  event.date.time = timeArr.join(':');
+
+  return event;
+}
+
+export function formatEvents(events) {
+  const eventsArr = Object.values(events);
+  const siteName = process.env.GATSBY_SITE_NAME;
+  let prefix = '0';
+
+  switch (siteName) {
+    case 'sefodbold.dk':
+      prefix = 1;
+      break;
+    case 'sesport.dk':
+      prefix = 1;
+      break;
+    case 'bekijksport.nl':
+      prefix = 1;
+      break;
+    case 'livestreamsvoetbal.nl':
+      prefix = 1;
+      break;
+    default:
+      prefix = 0;
+  }
+
+  return eventsArr.reduce((acc, current) => {
+    const event = changeEventHour(current, prefix);
+    acc[event.id] = event;
+    return acc;
+  }, {});
+}

package/src/helpers/schema.js

@@ -1,4 +1,5 @@
 import { getGameRating, getUrl, getLanguage } from './getters';
+import { cleanHTML } from './strings';
 
 /* HardCoded Start */
 const isIL = process.env.GATSBY_SITE_NAME === 'Irishluck.ie';
@@ -178,9 +179,9 @@ export function moduleSchemas(modules) {
             '@type': 'Question',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: item.answer,
+              text: cleanHTML(item.answer),
             },
-            name: item.question,
+            name: cleanHTML(item.question),
           })),
         };
 

package/src/helpers/schema.test.js

@@ -370,8 +370,9 @@ describe('Schema Helper', () => {
   test('schemaGenerator()', () => {
     const output = Schema.schemaGenerator({
       seo_json_schema: 'SEO JSON Schema',
-      breadcrumbs: [{}],
+      breadcrumbs: [{ path: '/test' }],
       type: 'article',
+      path: '/test-path',
       sections: { main: { modules: [{ name: 'faq' }] } },
     });
 

package/src/helpers/strings.js

@@ -51,3 +51,7 @@ export function truncateString(str, num, dots = '...') {
   trimmedString = trimmedString.substr(0, trimmedString.lastIndexOf(' '));
   return `${trimmedString}${dots}`;
 }
+
+export function cleanHTML(string) {
+  return string && string.replace(/(<([^>]+)>)/gi, '');
+}

package/src/helpers/strings.test.js

@@ -26,7 +26,11 @@ describe('Strings Helper', () => {
   });
 
   test('truncateString()', () => {
-    expect(Strings.truncateString('hello i think',5)).toEqual('hello...');
-    expect(Strings.truncateString('hello i think',10)).toEqual('hello i...');
+    expect(Strings.truncateString('hello i think', 5)).toEqual('hello...');
+    expect(Strings.truncateString('hello i think', 10)).toEqual('hello i...');
+  });
+
+  test('cleanHTML()', () => {
+    expect(Strings.cleanHTML('<p>hello <a>i</a> think</p>')).toEqual('hello i think');
   });
 });

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import LazyLoad from 'react-lazyload';
+// import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
 
 // When to use this component:
@@ -9,49 +9,68 @@ import PropTypes from 'prop-types';
 export default function LazyImage({
   height,
   width,
-  offset = 200,
+  // offset = 200,
   style = {},
   className,
   src = '#',
-  srcSet = '',
+  // srcSet = '',
   alt = '',
-  sizes,
-  defaultImg,
-  once = false,
+  // sizes,
+  // defaultImg,
+  // once = false,
 }) {
-  const [errorImage, setErrorImage] = useState(false);
+  // const [errorImage, setErrorImage] = useState(false);
 
-  if ((defaultImg && !src) || errorImage === true) {
-    return defaultImg;
-  }
+  // if ((defaultImg && !src) || errorImage === true) {
+  //   return defaultImg;
+  // }
 
   return (
-    <LazyLoad height={`${height}px`} width={`${width}px`} offset={offset} debounce={0} once={once}>
+    <>
+      {/* <LazyLoad
+        height={`${height}px`}
+        width={`${width}px`}
+        offset={offset}
+        debounce={0}
+        once={once}
+      >
+        <img
+          src={src}
+          className={className}
+          height={height}
+          width={width}
+          alt={alt}
+          style={style}
+          srcSet={srcSet}
+          sizes={sizes}
+          onError={() => setErrorImage(true)}
+        />
+      </LazyLoad> */}
+      {/* <noscript> */}
       <img
         src={src}
+        loading="lazy"
         className={className}
         height={height}
         width={width}
         alt={alt}
         style={style}
-        srcSet={srcSet}
-        sizes={sizes}
-        onError={() => setErrorImage(true)}
       />
-    </LazyLoad>
+      {/* </noscript> */}
+    </>
   );
 }
 
 LazyImage.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
-  offset: PropTypes.number,
+  // offset: PropTypes.number,
   style: PropTypes.shape({}),
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
-  sizes: PropTypes.string,
-  srcSet: PropTypes.string,
-  defaultImg: PropTypes.element,
-  once: PropTypes.bool,
+  // sizes: PropTypes.string,
+  // srcSet: PropTypes.string,
+  // defaultImg: PropTypes.element,
+  // once: PropTypes.bool,
 };

package/src/hooks/modal/modal-content.js

@@ -60,7 +60,12 @@ const ModalContent = ({ closeIcon }) => {
       <div className={styles.modalOverlay} onClick={close} />
       <div className={styles.modalContent}>
         {closeIcon && (
-          <button className={`${styles.closeIcon} modal-gtm btn-cta`} type="button" onClick={close}>
+          <button
+            className={`${styles.closeIcon} modal-gtm btn-cta`}
+            aria-label="Close Icon"
+            type="button"
+            onClick={close}
+          >
             {closeIcon}
           </button>
         )}

package/tests/envVars.js

@@ -1,5 +1,5 @@
 process.env.GATSBY_SITE_NAME = 'norskespilleautomater.com';
-process.env.GATSBY_SITE_URL = 'http://urltest.com';
+process.env.GATSBY_SITE_URL = 'http://urltest.com/';
 process.env.IMAGE_CDN_URL = 'https://cdn.images.com';
 process.env.TRACKER_LINK_FORMAT_MAIN = '[no],[visit],short_name';
 process.env.TRACKER_LINK_FORMAT_NON_MAIN = '[no],[visit],short_name,type,[tracker]';