gatsby-matrix-theme 4.0.4 → 5.0.2

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+## [5.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.1...v5.0.2) (2022-03-02)
+
+
+### Bug Fixes
+
+* content frame styling ([9bfb496](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9bfb4969fc1408b29a71300935a381fe7818eaa7))
+* updated core theme ([71588bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/71588bfa5c26fc76ac9dbbadd64fc8215608ddd3))
+
+## [5.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v5.0.0...v5.0.1) (2022-03-02)
+
+
+### Bug Fixes
+
+* add alt tags for carousel and author card ([2f0f4be](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2f0f4bebd55391205b8580ebe0c6eaef7b7574f8))
+* export the function, to use them in sites if needed ([74672e6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/74672e6453b2be210525461ab7f4cbc398494763))
+* temporarily fix for schema ([a255ed9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a255ed92ffe4f60cc809201227594c33cf65b2d6))
+
+
+### Code Refactoring
+
+* use isMobile instead of width ([8e9e4e3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8e9e4e31f01e7e59cebc769e6392011628be844e))
+
+
+### Config
+
+* update theme version ([b1d896e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b1d896e7d1cd796ad23d848b33f0d50b107deb09))
+
+
+* Merge branch 'tm-2747-remove-webschema' into 'master' ([e519030](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5190308df96783c81c384b2afc46f8b3ff5ecb0))
+* Merge branch 'tm-2729-alt-tags' into 'master' ([374c3aa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/374c3aaba05826d915588359d7c03af61ebc9ba9))
+
+# [5.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v4.0.4...v5.0.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* spotlight styling ([d329a15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d329a15dc62e62aec155fd33e7d0d2a3a0d63fec))
+
+
+### Code Refactoring
+
+* add active env for demo content deploy ([4f35c35](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4f35c3523b4318971422d942d24102bb8f722ca4))
+* remove anchorTitle ([1bedbc5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1bedbc5925ef1a163a569901b55bc9aadf67dc3f))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([124e121](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/124e12144dbc7feaa11b6499bdf553d3d45337aa))
+* Merge branch 'remove-anchorTitle' into 'master' ([2570a32](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2570a329997924cc37721bdce3bd8ad2aceeb78d))
+* Merge branch 'tm-2706-custom-demo-deployment' into 'master' ([0f4d6ba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f4d6ba19a809a75cdfabee864c197f791439493))
+* Merge branch 'master' into tm-2706-custom-demo-deployment ([aaf6237](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aaf6237e6e5b64e1c30224d9ac19be9236c650f3))
+
 ## [4.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v4.0.3...v4.0.4) (2022-02-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "4.0.4",
+  "version": "5.0.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^4.0.0",
+    "gatsby-core-theme": "^5.0.1",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

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

@@ -6,12 +6,17 @@ import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './author-card.module.scss';
 
 const AuthorCard = ({ author, width = 60, height = 60 }) => {
-  const { name, author_title, email_address, image } = author || {};
+  const { name, author_title, email_address, image, image_alt } = author || {};
 
   return (
     <div className={styles.authorCard}>
       <div className={styles.img}>
-        <LazyImage src={imagePrettyUrl(image)} alt={name} width={width} height={height} />
+        <LazyImage
+          src={imagePrettyUrl(image)}
+          alt={image_alt || name}
+          width={width}
+          height={height}
+        />
       </div>
       <div className={styles.txt}>
         <div className={styles.name}>{name}</div>

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

@@ -7,7 +7,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './screenshot-slide.module.scss';
 
-const Slide = ({ item = {} }) => (
+const Slide = ({ item = {}, slideTitle = '' }) => (
   <>
     {item.image && (
       <LazyImage
@@ -15,7 +15,7 @@ const Slide = ({ item = {} }) => (
         height={item?.image_object?.height}
         className={styles.image}
         src={imagePrettyUrl(item.image)}
-        alt={item.title}
+        alt={item.title || slideTitle}
       />
     )}
     {item.content && <p className={styles.content}>{parse(item.content)}</p>}
@@ -28,6 +28,7 @@ Slide.propTypes = {
     content: PropTypes.string,
     title: PropTypes.string,
   }),
+  slideTitle: PropTypes.string,
 };
 
 export default Slide;

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights-theme.module.scss

@@ -50,7 +50,7 @@
       border: 1px solid var(--spotlight-boxes-border-color);
       background-color: var(--spotlight-boxes-background-color);
       box-sizing: border-box;
-      border-radius: .6rem;
+      border-radius: var(--spotlight-boxes-border-radius);
       position: relative;
       max-width: 568px;
       margin-left: 4.5rem;
@@ -84,6 +84,8 @@
       > label {
         font-size: var(--spotlight-boxes-label-size);
         color: var(--spotlight-boxes-label-color);
+        line-height: var(--spotlight-boxes-label-line-height);
+        padding: var(--spotlight-boxes-label-padding);
       }
        
       > div {

package/src/gatsby-core-theme/components/molecules/content/content.module.scss

@@ -193,6 +193,22 @@
     }
   }
 
+  .contentFrame {
+    background-color: #E0EAEA;
+    padding: 1.6rem 2.4rem 2.4rem;
+    border-radius: .8rem;
+    box-sizing: border-box;
+    img {
+      border-radius: .8rem;
+    }
+    @include max(mobile) {
+      img {
+        margin-left: 0;
+        width: 100%;
+      }
+    }
+  }
+
   ul,
   ol {
     color: var(--color-6);
@@ -291,19 +307,3 @@
 .alignRight {
   @include content-img-align(right);
 }
-
-.contentFrame {
-  background-color: #E0EAEA;
-  padding: 1.6rem 2.4rem 2.4rem;
-  border-radius: .8rem;
-  box-sizing: border-box;
-  img {
-    border-radius: .8rem;
-  }
-  @include max(mobile) {
-    img {
-      margin-left: 0;
-      width: 100%;
-    }
-  }
-}

package/src/gatsby-core-theme/components/organisms/anchor/anchor.module.scss

@@ -33,10 +33,6 @@
   }
 }
 
-.anchorTitle {
-  line-height: 3.5rem;
-}
-
 .storyDivs {
   width: 100%;
   display: block;

package/src/gatsby-core-theme/components/organisms/anchor/index.js

@@ -1,14 +1,11 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import keygen from '~helpers/keygen';
 import { anchorLink } from '~helpers/strings';
 import styles from './anchor.module.scss';
 
 function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon = null }) {
   const [isFixedMenu, setIsFixedMenu] = useState(false);
-  const { translations } = useContext(Context) || {};
 
   if (isFixed && typeof window !== 'undefined') {
     window.addEventListener('scroll', () => {
@@ -44,26 +41,21 @@ function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon =
   };
 
   return (
-    <>
-      <div className={styles.anchorTitle}>
-        {translate(translations, 'anchor_title', 'Table of Contents')}
-      </div>
-      <ul id="faq-container" className={`${styles.anchor} ${isFixedMenu && styles.isFixed}`}>
-        {items?.map((anchor) => (
-          <li>
-            <a
-              className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
-              key={keygen()}
-              onClick={handleClick}
-              href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
-            >
-              {anchor.label}
-              {icon}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </>
+    <ul id="faq-container" className={`${styles.anchor} ${isFixedMenu && styles.isFixed}`}>
+      {items?.map((anchor) => (
+        <li>
+          <a
+            className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
+            key={keygen()}
+            onClick={handleClick}
+            href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
+          >
+            {anchor.label}
+            {icon}
+          </a>
+        </li>
+      ))}
+    </ul>
   );
 }
 

package/src/gatsby-core-theme/components/organisms/carousel/index.js

@@ -3,21 +3,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Slider from 'gatsby-core-theme/src/components/molecules/slider';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
-import useWindowSize from 'gatsby-core-theme/src/hooks/useWindowSize';
+import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
 
 import Slide from '../../../../components/molecules/carousel/screenshot-slide';
 
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
-  const [width] = useWindowSize();
+const Carousel = ({ page = {}, module = {}, settings = {}, gtmClass = '' }) => {
+  const isMobile = isMobileDevice();
   // render one item per slide
   const renderOne = (items) => {
     const arr = [];
     for (let i = 0; i < items.length; i += 1) {
+      const slideTitle = `${page.title}-carousel-${i + 1}`;
+
       arr.push(
         <div key={keygen()} className={styles.carouselItem}>
-          <Slide item={items[i]} gtmClass={gtmClass} />
+          <Slide item={items[i]} slideTitle={slideTitle} gtmClass={gtmClass} />
         </div>
       );
     }
@@ -30,11 +32,19 @@ const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
       arr.push(
         <div className={styles.slide} key={keygen()}>
           <div key={keygen()} className={styles.carouselItem}>
-            <Slide item={items[i]} gtmClass={gtmClass} />
+            <Slide
+              item={items[i]}
+              slideTitle={`${page.title}-carousel-${i + 1}`}
+              gtmClass={gtmClass}
+            />
           </div>
           {items[i + 1] && (
             <div key={keygen()} className={styles.carouselItem}>
-              <Slide item={items[i + 1]} gtmClass={gtmClass} />
+              <Slide
+                item={items[i + 1]}
+                slideTitle={`${page.title}-carousel-${i + 2}`}
+                gtmClass={gtmClass}
+              />
             </div>
           )}
         </div>
@@ -43,8 +53,7 @@ const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
     return arr;
   };
 
-  const renderedItems =
-    width < 991 && width > 0 ? renderOne(module.items) : renderTwo(module.items);
+  const renderedItems = isMobile ? renderOne(module.items) : renderTwo(module.items);
 
   return (
     <div className={styles.carouselContainer}>
@@ -61,6 +70,7 @@ const Carousel = ({ module = {}, settings = {}, gtmClass = '' }) => {
 };
 
 Carousel.propTypes = {
+  page: PropTypes.shape({}),
   module: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({

package/src/gatsby-core-theme/helpers/schema.js

@@ -0,0 +1,148 @@
+/* eslint-disable import/prefer-default-export */
+import {
+  generateSchemaObject,
+  breadcrumbsSchema,
+  organizationSchema,
+  moduleSchemas,
+  templateSchemas,
+} from 'gatsby-core-theme/src/helpers/schema';
+import { getUrl, getLanguage } from 'gatsby-core-theme/src/helpers/getters';
+
+/* HardCoded Start */
+const isIL = process.env.GATSBY_SITE_NAME === 'irishluck.ie';
+const isNSA = process.env.GATSBY_SITE_NAME === 'norskespilleautomater.com';
+const publishingPrinciples = isIL
+  ? 'https://www.irishluck.ie/editorial-principles'
+  : 'https://www.norskespilleautomater.com/om-oss/prinsipper';
+const knowsAbout = [
+  {
+    '@type': 'Thing',
+    name: 'Norway',
+    sameAs: [
+      'https://no.wikipedia.org/wiki/Norge',
+      'https://www.google.no/search?q=Norge&pws=0&nord=1&hl=no&gl=NO',
+    ],
+  },
+  {
+    '@type': 'Thing',
+    name: 'LottStift',
+    sameAs: [
+      'https://no.wikipedia.org/wiki/Lotteri-_og_stiftelsestilsynet',
+      'https://www.google.no/search?q=lottstift&pws=0&nord=1&hl=no&gl=NO',
+    ],
+  },
+  {
+    '@type': 'Thing',
+    name: 'Kasino',
+    sameAs: [
+      'https://no.wikipedia.org/wiki/Kasino',
+      'https://www.google.no/search?q=Kasino&pws=0&nord=1&hl=no&gl=NO',
+    ],
+  },
+  {
+    '@type': 'Thing',
+    name: 'Norsk Tipping Kommisjonær',
+    sameAs: [
+      'https://no.wikipedia.org/wiki/Norsk_Tipping',
+      'https://www.google.no/search?q=norsk+tipping&pws=0&nord=1&hl=no&gl=NO',
+    ],
+  },
+];
+
+const socialLinks = [
+  'facebook',
+  'instagram',
+  'linkedin',
+  'spotify',
+  'twitter',
+  'wikipedia',
+  'youtube',
+];
+
+function webPageSchema(page, pageImage) {
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    '@id': `${getUrl(page.path)}#webpage`,
+    url: getUrl(page.path),
+    name: page.meta_title || '',
+    description: page.meta_description || '',
+    inLanguage: getLanguage(page.language),
+    datePublished: page.created_at,
+    dateModified: page.updated_at,
+    isPartOf: {
+      '@type': 'WebSite',
+      '@id': `${process.env.GATSBY_SITE_URL}#website`,
+      url: `${process.env.GATSBY_SITE_URL}`,
+      inLanguage: getLanguage(page.language),
+    },
+    author: {
+      '@type': 'Organization',
+      name: page.siteSchema?.site_name || '',
+      alternateName: page.siteSchema?.alias_site_name || '',
+      foundingDate: page.siteSchema?.organization_founding_date || '',
+      publishingPrinciples:
+        page.siteSchema?.publishing_principles || (isIL || isNSA ? publishingPrinciples : null),
+      logo: {
+        '@type': 'ImageObject',
+        url: pageImage,
+      },
+      contactPoint: page.authors?.map((author) => ({
+        '@type': 'ContactPoint',
+        contactType: 'Author',
+        name: author.name || '',
+        email: author.email_address || '',
+        url: getUrl(author.profile_page_path || '/'),
+      })),
+      sameAs: socialLinks
+        .map((socialLink) => page.siteSchema?.[socialLink])
+        .filter((socialLink) => socialLink),
+      ...(isNSA ? { knowsAbout } : {}),
+    },
+  };
+
+  if (pageImage) {
+    schema.primaryImageOfPage = {
+      '@type': 'ImageObject',
+      '@id': `${getUrl(page.path)}#primaryimage`,
+      url: pageImage,
+      inLanguage: getLanguage(page.language),
+    };
+  }
+
+  if (page.seo_keywords) {
+    schema.keywords = page.seo_keywords;
+  }
+
+  return JSON.stringify(generateSchemaObject(schema));
+}
+
+function schemaGenerator(page = {}, pageImage) {
+  const isReviewPage = page.type === 'operator' || page.type === 'game';
+  const jsonSchema = [
+    // Page Schema
+    page.seo_json_schema,
+    // Breadcrumbs Schema
+    page.breadcrumbs?.length ? breadcrumbsSchema(page.breadcrumbs, page.path) : null,
+    // Modules Schemas
+    // Temporary Change for removing webpageschema
+    !isReviewPage ? webPageSchema(page, pageImage) : null,
+    organizationSchema(page, pageImage),
+    templateSchemas(page, pageImage),
+    ...(page.sections?.main?.modules
+      ? moduleSchemas(page.sections.main.modules, page.path)
+      : [null]),
+  ];
+
+  return jsonSchema;
+}
+
+export {
+  generateSchemaObject,
+  breadcrumbsSchema,
+  organizationSchema,
+  moduleSchemas,
+  templateSchemas,
+  webPageSchema,
+  schemaGenerator,
+};

package/src/gatsby-core-theme/styles/utils/variables/_main.scss

@@ -96,9 +96,12 @@
   --spotlight-testimonials-text-size: 1.6rem;
 
   --spotlight-boxes-border-color: #000;
+  --spotlight-boxes-border-radius: 1.6rem;
   --spotlight-boxes-background-color: #fff;
   --spotlight-boxes-label-color: #000;
+  --spotlight-boxes-label-line-height: 3rem;
   --spotlight-boxes-label-size: 1.8rem;
+  --spotlight-boxes-label-padding: 0;
   --spotlight-boxes-text-color: #000;
   --spotlight-boxes-text-size: 1.4rem;
 }