gatsby-matrix-theme 6.0.2 → 6.0.3

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [6.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.2...v6.0.3) (2022-04-13)
+
+
+### Bug Fixes
+
+* add endpoint for bacom ([8fb13db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8fb13dbea8b9863c9586c28000163f176408e179))
+* add onestar design for game, operator card and toplist ([bf53abe](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bf53abefee45f6d4d73e2b730615b0bfe9e4658d))
+* added default width and height for game cards ([5d5a488](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5d5a488167854b04c7cdfccf221c23e0a6e51c88))
+* added reading time meta tag for twitter ([6e84e86](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6e84e86d2a7f6ab592ddfa3b85936a0118ca8b39))
+* head meta tag and added header extended part ([01808d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/01808d217d31af35bcec881eea3dced5d3584353))
+* heading sequence hide titles that dont have data ([7a72a8b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a72a8b9a36655bf625124e371f8c357484cf7a9))
+
+
+### Code Refactoring
+
+* extended header ([d3674f1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d3674f167e9001b8bb521aa990070fc7d43ba3bb))
+* made changes to new component ([0cec052](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0cec05271de2e888a0bab6c98f644d48943ff68a))
+* made changes to new component ([a1ad73d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1ad73d0088e30a90894a782464930f6c41dc63e))
+* replace env check with prop ([0d6a7fd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d6a7fd8770199d61487821377dc34a489e8a35f))
+
+
+### Config
+
+* resolve conflicts ([fa897c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa897c8dbf240040b5745fd2bf2815feedae4a1d))
+* update theme ([2f90038](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2f90038d19fd30e2bb7f832a5045fd9646263850))
+
+
+* Merge branch 'extended-page-header' into 'master' ([e81be14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e81be144dc2139d57436fb84768fe6859202fd49))
+* Merge branch 'tm-2813-heading-sequence' into 'master' ([38c4cd1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/38c4cd134a610ab0aa4720382419993ff429d6d6))
+* Merge branch 'fix-star-ratings' into 'master' ([d0da5b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d0da5b4709e7cea67c45469460d97f31ae442da3))
+* Merge branch 'revert-8fb13dbe' into 'master' ([b212c7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b212c7e184d0f942d0a96d82ba9a546d4570ebe7))
+* Revert "fix: add endpoint for bacom" ([6a5880f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a5880ffd7def8560756c3a3ea961f3e27c7f22e))
+
 ## [6.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.1...v6.0.2) (2022-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -28,7 +28,7 @@
     "gatsby-transformer-sharp": "^4.10.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^6.1.1"
+    "gatsby-core-theme": "^6.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/article-card/index.js

@@ -24,7 +24,6 @@ const ArticleCard = ({ item, width, height }) => {
   };
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
   const featured = !!cardBackgroundImage;
-  const AuthorProfile = author && author.profile_page_path;
   const AuthorName = author && author.name;
   const { translations } = useContext(Context) || {};
 
@@ -58,7 +57,7 @@ const ArticleCard = ({ item, width, height }) => {
           gtmClass="article-card-gtm btn-cta"
         />
         <div className={styles.cardMeta}>
-          <Author authorProfile={AuthorProfile} name={AuthorName} date={created_at} />
+          <Author prefix="by" name={AuthorName} date={created_at} isCardsAuthor />
         </div>
       </div>
     </BaseCard>
@@ -67,7 +66,11 @@ const ArticleCard = ({ item, width, height }) => {
 
 ArticleCard.propTypes = {
   item: PropTypes.shape({
-    author: PropTypes.shape({ name: PropTypes.string, profile_page_path: PropTypes.string }),
+    author: PropTypes.shape({
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      twitter_profile: PropTypes.string,
+    }),
     title: PropTypes.string,
     created_at: PropTypes.string,
     path: PropTypes.string,

package/src/components/atoms/cards/game-card/index.js

@@ -1,7 +1,7 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FaStar } from 'react-icons/fa';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import loadable from '@loadable/component';
 import Button from 'gatsby-core-theme/src/components/atoms/button';
 import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import Link from 'gatsby-core-theme/src/hooks/link';
@@ -16,11 +16,20 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import BaseCard from '../base-card';
 import styles from './game-card.module.scss';
 
-const GameCard = ({ item, button_text = 'play_now', width, height }) => {
+const GameCard = ({
+  item,
+  button_text = 'play_now',
+  width = 300,
+  height = 250,
+  useOneStarRating = false,
+}) => {
   const { relation, title, path, banner } = item;
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
   const featured = !!cardBackgroundImage;
   const { translations } = useContext(Context) || {};
+  const StarRating = useOneStarRating
+    ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
+    : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
     <BaseCard item={item} isLinked cardType="game">
@@ -31,7 +40,12 @@ const GameCard = ({ item, button_text = 'play_now', width, height }) => {
           aria-label={`${title} Link`}
         >
           {banner ? (
-            <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+            <LazyImage
+              width={width}
+              height={height}
+              src={imagePrettyUrl(banner, width, height)}
+              alt={title}
+            />
           ) : (
             <GatsbyImg filename="default-slot.jpg" alt={title} />
           )}
@@ -48,8 +62,6 @@ const GameCard = ({ item, button_text = 'play_now', width, height }) => {
               <StarRating
                 numOfStars={5}
                 halfStars={false}
-                iconEmpty={<FaStar />}
-                iconFull={<FaStar />}
                 rating={[
                   relation.first_rating,
                   relation.second_rating,
@@ -88,6 +100,7 @@ GameCard.propTypes = {
   button_text: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,
+  useOneStarRating: PropTypes.bool,
 };
 
 export default GameCard;

package/src/components/atoms/cards/operator-card/index.js

@@ -1,8 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FaStar } from 'react-icons/fa';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import loadable from '@loadable/component';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
@@ -13,13 +13,23 @@ import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import BaseCard from '../base-card';
 import styles from './operator-card.module.scss';
 
-const OperatorCard = ({ item, featured = false, number, width, height }) => {
+const OperatorCard = ({
+  item,
+  featured = false,
+  number,
+  width,
+  height,
+  useOneStarRating = false,
+}) => {
   const { relation, path } = item;
   const reviewPath = path || relation.path;
   const status = relation?.status;
   const isInactive = status === 'inactive';
   const backgroundImage = number === 1 ? 'featuredCasino' : null;
   const { translations } = useContext(Context) || {};
+  const StarRating = useOneStarRating
+    ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
+    : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
 
   return (
     <BaseCard featured={featured} backgroundImage={backgroundImage} item={item} cardType="operator">
@@ -40,13 +50,7 @@ const OperatorCard = ({ item, featured = false, number, width, height }) => {
             alt={relation.name}
           />
         </Link>
-        <StarRating
-          numOfStars={5}
-          halfStars={false}
-          iconEmpty={<FaStar />}
-          iconFull={<FaStar />}
-          rating={relation.rating}
-        />
+        <StarRating numOfStars={5} halfStars={false} rating={relation.rating} />
       </div>
       <div
         className={`${styles.cardContent} ${featured && styles.featured} ${
@@ -106,6 +110,7 @@ OperatorCard.propTypes = {
   number: PropTypes.number,
   width: PropTypes.number,
   height: PropTypes.number,
+  useOneStarRating: PropTypes.bool,
 };
 
 export default OperatorCard;

package/src/components/molecules/toplist/row/variant-one.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdCheck } from 'react-icons/md';
@@ -10,7 +11,7 @@ import {
 import Link from 'gatsby-core-theme/src/hooks/link';
 import Label from 'gatsby-core-theme/src/components/atoms/label';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';

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

@@ -0,0 +1,68 @@
+.authorWraper {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  font-size: var(--author-text-fontSize);
+  color: var(--author-primary-text-color);
+  .infoContainer {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    .prefixStyle {
+      margin: 0px;
+    }
+    .authorImg {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      margin: 0px 8px 0px 6px;
+    }
+    > a {
+      color: var(--author-link-text-color);
+      font-weight: var(--author-fontweight);
+      text-decoration: underline;
+
+      &:before {
+        content: '';
+        padding: 0px 2px;
+      }
+
+      &:after {
+        content: '';
+        padding: 0px 2px;
+      }
+    }
+  }
+  .dateTimeWrapper {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    .readingWithBorder {
+      &:before {
+        content: '|';
+        padding: 0px 3px;
+      }
+    }
+  }
+
+  @include min(tablet) {
+    display: flex;
+  }
+}
+
+.authorCard {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  color: var( --author-card-text-color);
+
+  @include min(tablet){
+    display: flex;
+    justify-content: space-between;
+
+  }
+}
+
+.prefixCardText {
+  padding-right: 2px;
+}

package/src/gatsby-core-theme/components/atoms/author/index.js

@@ -0,0 +1,77 @@
+/* eslint-disable arrow-body-style */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { formatDate } from '~helpers/date-time';
+import Link from '~hooks/link';
+import styles from './author.module.scss';
+
+const Author = ({
+  name,
+  date,
+  authorImg,
+  readingTime,
+  link,
+  prefix = '',
+  type = 'default',
+  icon = false,
+  splitDateFormat = '.',
+  dateFormat = 'DD.MM.YYYY',
+  isCardsAuthor = false,
+}) => {
+  const { translations } = useContext(Context) || {};
+  const prefixstyle = !link || !authorImg;
+
+  const getPrefixBasedOnPage = type.includes('review')
+    ? translate(translations, 'reviewed_by', 'Review by')
+    : translate(translations, 'written_by', 'Written by');
+
+  const getRoundMinutes = (time) => {
+    const [minutes, seconds] = time.split(':');
+    const value = seconds > 30 ? Number(minutes) + 1 : Number(minutes);
+    return value === 0 ? 1 : value;
+  };
+
+  return (
+    <div className={`${styles.authorWraper} ${isCardsAuthor && styles.authorCard} `}>
+      <div className={`${styles.infoContainer} ${isCardsAuthor && styles.infoCardContainer}`}>
+        <p className={`${styles.prefixStyle} ${prefixstyle && styles.prefixCardText}`}>
+          {prefix || getPrefixBasedOnPage}
+        </p>
+        <Link to={link} title={name}>
+          {name}
+        </Link>
+        {icon}
+        {authorImg && <img src={authorImg} alt={name} className={styles.authorImg} />}
+      </div>
+      <div className={styles.dateTimeWrapper}>
+        {date && <div>{formatDate(date, dateFormat, splitDateFormat, 'en-GB')}</div>}
+        {readingTime && (
+          <div className={date && styles.readingWithBorder}>
+            {`${translate(translations, 'reading_time', 'Reading time')} ${getRoundMinutes(
+              readingTime
+            )} ${translate(translations, 'minutes', 'min')}`}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Author.propTypes = {
+  prefix: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  date: PropTypes.string,
+  dateFormat: PropTypes.string,
+  type: PropTypes.string,
+  link: PropTypes.string,
+  authorImg: PropTypes.string,
+  readingTime: PropTypes.string,
+  icon: PropTypes.string,
+  splitDateFormat: PropTypes.string,
+  isCardsAuthor: PropTypes.bool,
+};
+
+export default Author;

package/src/gatsby-core-theme/components/atoms/module-title/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaAngleRight } from 'react-icons/fa';
@@ -34,8 +35,7 @@ const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = nu
 
   const getTitle = (className) => {
     const moduleTitle = module?.title || module?.module_title;
-
-    if (!module?.module_title_tag) {
+    if (!module?.module_title_tag && moduleTitle) {
       return (
         <h2 className={`${styles.noTag} ${className}`}>
           {moduleTitle}
@@ -61,16 +61,19 @@ const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = nu
           ) : null}
         </CustomTag>
       );
+
     return (
-      <span className={`${styles.noTag} ${className}`}>
-        {moduleTitle}
-        {currentMonth ? (
-          <span className={styles.toplistDate}>
-            <small>•</small>
-            {`${currentMonth} ${year}`}
-          </span>
-        ) : null}
-      </span>
+      moduleTitle && (
+        <span className={`${styles.noTag} ${className}`}>
+          {moduleTitle}
+          {currentMonth ? (
+            <span className={styles.toplistDate}>
+              <small>•</small>
+              {`${currentMonth} ${year}`}
+            </span>
+          ) : null}
+        </span>
+      )
     );
   };
 

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

@@ -67,12 +67,15 @@ const Head = ({ page = {}, siteInfo }) => {
         <link rel="canonical" href={getCanonicalUrl(page)} />
         {page.preconnect_links &&
           page.preconnect_links.map((link) => <link key={keygen()} rel="preconnect" href={link} />)}
-        <meta name="og:title" content={page.meta_title} />
-        <meta name="og:site_name" content={siteInfo?.site_name && setName(siteInfo?.site_name)} />
-        <meta name="og:description" content={parsedMetaDescr} />
-        <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
-        <meta name="og:image" content={pageImage} />
-        <meta name="og:url" content={getUrl(page.path)} />
+        <meta property="og:title" content={page.meta_title} />
+        <meta
+          property="og:site_name"
+          content={siteInfo?.site_name && setName(siteInfo?.site_name)}
+        />
+        <meta property="og:description" content={parsedMetaDescr} />
+        <meta property="og:type" content={page.path === '/' ? 'website' : 'article'} />
+        <meta property="og:image" content={pageImage} />
+        <meta property="og:url" content={getUrl(page.path)} />
         <meta
           property="og:locale"
           content={
@@ -99,6 +102,8 @@ const Head = ({ page = {}, siteInfo }) => {
           <meta name="twitter:creator" content={`@${twitterUsername}`} />
           <meta name="twitter:card" content="summary" />
           <meta name="twitter:image" content={pageImage} />
+          <meta property="twitter:label1" content="Reading time" />
+          <meta property="twitter:data1" content={`${page.reading_time}`} />
         </Helmet>
       )}
     </>

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

@@ -112,5 +112,13 @@
   
   --primaryText-bonus: '#e00028'
   --secondaryText-bonus: '#17182f';
+
+  // Extended Header Part - Author -  
+  --author-text-fontSize: 1.4rem;
+  --author-primary-text-color:  #151824;
+  --author-link-text-color: #151824;
+  --author-fontweight: 100;
+  --author-card-text-color: #151824;
+
   
 }

package/src/hooks/tabs/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/jsx-no-bind */
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -53,7 +55,7 @@ const Tabs = ({
     styles[headerClass]
   } ${tabsAlign === 'right' && styles.invertOrder}`;
   const getTitle = () => {
-    if (!module?.module_title) {
+    if (!module?.module_title && module.title) {
       return (
         <h2 className={styles.noTag}>
           {module.title}