gatsby-matrix-theme 3.0.10 → 3.1.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [3.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.10...v3.1.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* add default copyright_disclaimer ([f0c330f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0c330fc779e79be0e6a7bab17cd54989e3e93de))
+* carousel slides ([ae7dea9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae7dea9a0025daca522572efbd6ce27b5c7d3a0a))
+* casino table ([2d0b8ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d0b8ec4cd2e18fc9a21d1b17dcf1c529ac03aab))
+* fixed bonus issue and loadable condition ([7f1f1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1f1a7d6e467da005b60a8806056280fad671e7))
+* fixed copyrightDisclaimer ([1a606d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a606d2990c3883e2a3f0541d369e52dd93457f4))
+* merge ([14a32ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/14a32ab72c7c430e3619755433d5a92a79fe742c))
+* merged master ([5a983ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a983ab64013fe9029d99eea3223ecb2c4145a1b))
+* progress made ([55c3175](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/55c3175b5e827a2d1c3d1b33cb44ff3ca3b23379))
+* remove re-declared copyrightDisclaimer ([598ac18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/598ac182d54e7a62e638ccfe42cda809f899ffc7))
+* small fix ([9d8c24d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d8c24dc18245c6b07c658afce398ddf55802cec))
+* small fix ([a9341ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9341ad547865d2a154c98d55d12c78bd09f5982))
+* spotlight images ([8daaf46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8daaf460f49bafdda908899ae37fe8ff992befe2))
+* spotlight images ([fa886b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa886b6cbe2aa31992a415828f21f2927d5d8c97))
+* style issues ([2881939](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28819392bbfec1ffa64739b42cb9dfc367ef7f82))
+* updated core theme version and fixed disclaimer text bug ([3ce75e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ce75e2c58812fef1ee3177c200a5268a5763f78))
+
+
+### Code Refactoring
+
+* check the data ([dd25ece](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd25ece863cd5956663ab47a34dde6eca5ded85a))
+
+
+* Merge branch 'tm-2613-carousel-fix' into 'master' ([bdf02e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdf02e8b330e9923437ae8a1c68568ce19c2c181))
+* Merge branch 'tm-2597-casino-table' into 'master' ([6861c37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6861c37c160aab7426288b8b4f40b3b8eabad3cf))
+* Update index.js ([056c9bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/056c9bddb0d7e63d0fbe8538968933c4d69d99b8))
+
+
+### Features
+
+* twitter graph ([dfdf8bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfdf8bfe5e9ff07a20b25f2c5f659126767dcffb))
+
 ## [3.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.9...v3.0.10) (2021-12-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.10",
+  "version": "3.1.0",
   "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": "^1.6.22",
+    "gatsby-core-theme": "^2.0.1",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/operators-table/index.js

@@ -0,0 +1,58 @@
+/* eslint-disable camelcase */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate, getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './table.module.scss';
+
+const CasinosTable = ({ module }) => {
+  const { translations } = useContext(Context);
+  const { items } = module || {};
+
+  const oneLiner = ({ one_liner }) => {
+    const [firstLine, secondLine] = one_liner.split('+');
+    return (
+      <>
+        <span className={styles.firstLine}>{firstLine}<br /></span>
+        <span className={styles.secondLine}>{`+${secondLine}`}</span>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <table>
+        <thead>
+          <tr>
+            <th>{`${translate(translations, 'casino', 'Casino')}`}</th>
+            <th>{`${translate(translations, 'bonus', 'Bonus')}`}</th>
+            <th>{`${translate(translations, 'visit_casino', 'Visit casino')}`}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items &&
+            items.map((item) => (
+              <tr>
+                <td>{item.title}</td>
+                <td>{oneLiner(getBonus('main', item?.relation))}</td>
+                <td>
+                  <Link to={item?.path} name={item?.relation?.name}>
+                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CasinosTable;
+
+CasinosTable.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf({}),
+  }).isRequired,
+};

package/src/components/atoms/cards/operators-table/table.module.scss

@@ -0,0 +1,87 @@
+.container {
+  table {
+    width: 100%;
+    border-collapse: inherit;
+    box-shadow: 0 2px 16px #17182f14;
+    thead {
+      tr {
+        th {
+          text-align: left;
+          background-color: var(--table-head-background);
+          color: white;
+          padding: 1.2rem 0 1.2rem 0.8rem;
+          &:first-child {
+            border-top-left-radius: var(--table-border-radius);
+          }
+
+          &:last-child {
+            border-top-right-radius: var(--table-border-radius);
+          }
+        }
+      }
+    }
+    tr {
+      td {
+        padding: 1.2rem 0 1.2rem 0.8rem;
+        a {
+          text-decoration: underline;
+        }
+        .secondLine{
+          color: red;
+        }
+      }
+      &:nth-child(odd) {
+        background-color: var(--table-highlight);
+      }
+    }
+
+    @include max(mobile) {
+      thead {
+        display: none;
+      }
+
+      tbody {
+        tr {
+          &:first-child {
+            
+            td {
+              color: white;
+              background-color: var(--table-head-background);
+              border-radius: 0;
+              .secondLine{
+                color: white;
+              }
+              &:first-child {
+                border-top-left-radius: var(--table-border-radius);
+                border-top-right-radius: var(--table-border-radius);
+              }
+
+                a {
+                  color: white;
+                  text-decoration: underline;
+                }                
+            }
+          }
+
+          td {
+            display: block;
+            text-align: left;
+            border-bottom: 1px solid #bfd3e5;
+            width: 100%;            
+          }
+
+          &:last-child {
+            td {
+              border-radius: 0;
+              &:last-child {
+                border-bottom-right-radius: var(--table-border-radius);
+                border-bottom-left-radius: var(--table-border-radius);
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -42,6 +42,7 @@
             width: 100%;
             img {
               height: 5.6rem;
+              width: auto;
             }
           }
           .label {

package/src/gatsby-core-theme/components/molecules/footer/index.js

@@ -19,6 +19,7 @@ const Footer = ({
   const TopSection = footerTopCustom;
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
+  const copyrightDisclaimerValue = getExtraField(section?.extra_fields, copyrightDisclaimer);
 
   return (
     <footer className={`${styles.footer} ${hasFooterLinks && styles.hasFooterLinks}`}>
@@ -38,20 +39,17 @@ const Footer = ({
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} page={page} />}
         <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimer && getExtraField(section?.extra_fields, copyrightDisclaimer) && (
-            <p
+          {copyrightDisclaimerValue && (
+            <div
               dangerouslySetInnerHTML={{
-                __html: getExtraField(section?.extra_fields, copyrightDisclaimer).replace(
-                  /\. /g,
-                  '.<br />'
-                ),
+                __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
               }}
             />
           )}
           <p>{copyrightText()}</p>
         </div>
         <div className={styles.logos}>
-          {footerLogos && (
+          {footerLogos && getExtraField(section?.extra_fields, footerLogos) && (
             <LinkList
               showListTitle={false}
               imageOnly

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

@@ -22,7 +22,11 @@ const Modules = ({ module, page, pageContext }) => {
       case 'counter':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/counter'));
       case 'cards':
+        return loadable(() => import('../../organisms/cards'));
       case 'cards_v2':
+        if (moduleItem.style === 'stack_table' && moduleItem.cards_page_type === 'operator') {
+          return loadable(() => import('../../../../components/atoms/cards/operators-table'));
+        }
         return loadable(() => import('../../organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));

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

@@ -1,3 +1,27 @@
-.screenshotCarousel > div {
-  outline: none;
+:global {
+  .carousel-module {
+    background-color: var(--color-5);
+  }
+}
+.carouselContainer {
+  .carouselTitle {
+    margin-bottom: 1.5rem;
+  }
+  .slide {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+  .carouselItem {
+    padding: 0.5rem;
+    width: 50%;
+    @include max(tablet) {
+      width: 100%;
+      text-align: center;
+    }
+    img {
+      border-radius: 0.6rem;
+    }
+  }
 }

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { schemaGenerator } from '~helpers/schema';
 import { getUrl, getPageImage, imagePrettyUrl } from '~helpers/getters';
 import keygen from '~helpers/keygen';
+import { getTwitterUsername } from '../../../../helpers/strings';
 
 export function getLanguage(language) {
   const name = process.env.GATSBY_SITE_NAME;
@@ -43,41 +44,55 @@ function setName(string) {
 }
 const Head = ({ page = {}, siteInfo }) => {
   const pageImage = getPageImage(page) ? getPageImage(page) : imagePrettyUrl(siteInfo?.site_logo);
-  // When google re-indexes dev NSA and IRL, remove lines 28, 41, 42, 43 and process.env.GATSBY_ACTIVE_ENV !== 'development' from lines 24, 25, 27, 29, 43
+  const twitterUsername = getTwitterUsername(page.siteSchema?.twitter);
+
   return (
-    <Helmet>
-      <meta charSet="utf-8" />
-      <title>{page.meta_title}</title>
-      <html lang={getLanguage(page.language)} />
-      <meta name="description" content={page.meta_description} />
-      {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
-        <meta name="robots" content={page.meta_robots.join()} />
-      )}
-      {page.robot_options && !page.path.includes('/page/') && (
-        <meta name="robots" content={getRobotOptions(page.robot_options)} />
-      )}
-      {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
-      {process.env.GATSBY_ACTIVE_ENV === 'development' && (
-        <meta name="googlebot" content="noindex,follow" />
-      )}
-      <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={page.meta_description} />
-      <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
-      <meta name="og:image" content={pageImage} />
-      <meta name="og:url" content={getUrl(page.path)} />
-      {schemaGenerator(page, pageImage).map(
-        (schema) =>
-          schema && (
-            <script key={keygen()} type="application/ld+json">
-              {`${schema}`}
-            </script>
-          )
+    <>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{page.meta_title}</title>
+        <html lang={getLanguage(page.language)} />
+        <meta name="description" content={page.meta_description} />
+        {page.meta_robots && process.env.GATSBY_ACTIVE_ENV !== 'development' && (
+          <meta name="robots" content={page.meta_robots.join()} />
+        )}
+        {page.robot_options && !page.path.includes('/page/') && (
+          <meta name="robots" content={getRobotOptions(page.robot_options)} />
+        )}
+        {page.path.includes('/page/') && <meta name="robots" content="noindex,follow" />}
+        {process.env.GATSBY_ACTIVE_ENV === 'development' && (
+          <meta name="googlebot" content="noindex,follow" />
+        )}
+        <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={page.meta_description} />
+        <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
+        <meta name="og:image" content={pageImage} />
+        <meta name="og:url" content={getUrl(page.path)} />
+
+        {schemaGenerator(page, pageImage).map(
+          (schema) =>
+            schema && (
+              <script key={keygen()} type="application/ld+json">
+                {`${schema}`}
+              </script>
+            )
+        )}
+      </Helmet>
+
+      {twitterUsername && (
+        <Helmet>
+          <meta name="twitter:title" content={page.meta_title} />
+          <meta name="twitter:description" content={page.meta_description} />
+          <meta name="twitter:site" content={twitterUsername} />
+          <meta name="twitter:card" content="summary" />
+          <meta name="twitter:image" content={pageImage} />
+        </Helmet>
       )}
-    </Helmet>
+    </>
   );
 };
 

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

@@ -12,6 +12,14 @@
   --modal-background-color: white;
 
   --star-rating-color: orange;
+  --full-star-fill-color: #fba62f;  
+  --full-star-border-color: #fba62f;
+  --halfFull-star-fill-color: #fba62f;
+  --halfEmpty-star-fill-color: white;
+  --half-star-border-color: #fba62f;
+  --empty-star-fill-color: white;
+  --empty-star-border-color: grey;
+  --selling-point-icon-color: #00889e;
 
   --main-font: sans-serif;
 
@@ -64,4 +72,6 @@
   --page-number-background: #393939;
   --page-number-color: #fff;
   --sitemap-background-color: #fff;
+
+
 }

package/src/helpers/strings.js

@@ -1,34 +1,45 @@
 export function capitalize(string) {
-    return string.replace(/^\w/, (c) => c.toUpperCase());
+  return string.replace(/^\w/, (c) => c.toUpperCase());
+}
+
+export function anchorLink(string) {
+  return string.replace(/\s/g, '-').toLowerCase();
+}
+
+export function leftTrim(str) {
+  if (!str) return str;
+  // remove space from begining
+  const trim = str.replace(/^\s+/g, '');
+  // remove multiple spaces
+  const output = trim.replace(/ +(?= )/g, '');
+  return output;
+}
+
+export function truncateString(str, num, dots = '...') {
+  if (!str || str.length <= num) {
+    return str;
   }
-  
-  export function anchorLink(string) {
-    return string.replace(/\s/g, '-').toLowerCase();
-  }
-  
-  export function leftTrim(str) {
-    if (!str) return str;
-    // remove space from begining
-    const trim = str.replace(/^\s+/g, '');
-    // remove multiple spaces
-    const output = trim.replace(/ +(?= )/g, '');
-    return output;
+  let trimmedString = str.substr(0, num);
+
+  if (str.charAt(num) === ' ') {
+    return `${trimmedString}${dots}`;
   }
-  
-  export function truncateString(str, num, dots = '...') {
-    if (!str || str.length <= num) {
-      return str;
-    }
-    let trimmedString = str.substr(0, num);
-  
-    if (str.charAt(num) === ' ') {
-      return `${trimmedString}${dots}`;
-    }
-    const hasSpace = trimmedString.lastIndexOf(' ') !== -1;
-    if (!hasSpace) {
-      return `${trimmedString}${dots}`;
-    }
-    trimmedString = trimmedString.substr(0, trimmedString.lastIndexOf(' '));
+  const hasSpace = trimmedString.lastIndexOf(' ') !== -1;
+  if (!hasSpace) {
     return `${trimmedString}${dots}`;
   }
-  
+  trimmedString = trimmedString.substr(0, trimmedString.lastIndexOf(' '));
+  return `${trimmedString}${dots}`;
+}
+
+export function getTwitterUsername(url) {
+  // eslint-disable-next-line no-useless-escape
+  const regex = /https?:\/\/(www\.)?twitter\.com\/(#!\/)?@?([^\/]*)/;
+  const m = regex.exec(url);
+
+  if (m !== null && m.length >= 3) {
+    return m[3];
+  }
+
+  return null;
+}