gatsby-matrix-theme 6.0.2 → 6.0.5

package/CHANGELOG.md

@@ -1,3 +1,75 @@
+## [6.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.4...v6.0.5) (2022-04-20)
+
+
+### Bug Fixes
+
+* changed img to use the core component ([fa8249a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa8249adb3e32f3b1f16e7a98e0437be846af468))
+* downgraded sitemap and fixed configurations ([4496968](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44969687c41e2d5bbd86bce65c5a4e4874d062f4))
+
+
+### Config
+
+* update core theme version ([82abd8f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/82abd8fc2b165f4caffe0540211d6964439493a0))
+
+
+* Merge branch 'tm-2799-header-changes' into 'master' ([6c00830](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c00830f245191869d3e1124bf4d0ec28f1c9665))
+* Merge branch 'tm-2812-sitemap-fixes' into 'master' ([2de799f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2de799f494ff6c3632089ac7b3da1534835ea0cf))
+
+## [6.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v6.0.3...v6.0.4) (2022-04-18)
+
+
+### Bug Fixes
+
+* add configuration for NSA in demo ([e26004e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e26004e30c1f5b97ab5d0c1719a5a0ca9cca6c04))
+* add configuration for pcsa in demo ([ab34c89](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ab34c891708212b5a6d5e6ead4aa55160612881f))
+* add configuration for pcsa in demo ([0950b5b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0950b5b76f617d884a5bcdd2a885fed03e592f20))
+* add endpoint for bacom ([a231826](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a2318260b1eea50b64f92ed360554e1df019f812))
+* clean up and fix endpoint ([6a94a2f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a94a2fca9cc743ac34a97e9f6ef706232ae12d8))
+* fix empty h2s ([689c730](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/689c730b8b96501802e4e33bcb17fdc20b567ebd))
+* fix format of timestamp ([e2ac8cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e2ac8cce223b7db152127dca319b38404ee99455))
+* fix status ([01b018e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/01b018e6bccac1b634171528056acd9f502ab998))
+* fixed name and url ([b08b07b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b08b07b491f6020bde3c4ce9b9c4a009bfadf40c))
+* handel error ([38726a0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/38726a0d542c79eb2b70c0b3f60aeae43e4e3e06))
+* remove redirect for testing ([29e8d4d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29e8d4d2fcf6aa1b180eccaa9d1a70039be6e16e))
+* updated to latest core theme ([f092a3d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f092a3d66c647cdb1913a093a288e79f230e4258))
+
+
+* Merge branch 'tm-2813-fix-emptyh2s' into 'master' ([f902077](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f902077693d7e43681bfcbc994716f3ea6fe141b))
+* Merge branch 'tm-2810-singup-form' into 'master' ([dfc9673](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfc96738050b6e013bf398a62d04c9967dc7adb9))
+
+## [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/gatsby-config.js

@@ -1,5 +1,6 @@
 const activeEnv = process.env.GATSBY_ACTIVE_ENV || 'development';
 const siteMapExcludes = process.env.SITEMAP_EXCLUDE.split(',') || [];
+const { getSitemap } = require('./src/helpers/sitemap');
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 require('dotenv').config({
@@ -21,42 +22,25 @@ module.exports = {
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
-        output: '/',
-        excludes: siteMapExcludes,
-        resolveSiteUrl: () => process.env.GATSBY_SITE_URL,
+        output: `/sitemap.xml`,
+        sitemapSize: 5000,
+        exclude: siteMapExcludes,
         query: `
-          {
-            allSitePage {
-              nodes {
-                path
-                pageContext
-              }
+        {
+          site {
+            siteMetadata {
+              siteUrl
             }
           }
-        `,
-        resolvePages: ({ allSitePage: { nodes: allPages } }) =>
-          allPages
-            .map((edge) => {
-              try {
-                if (
-                  edge.pageContext.page &&
-                  edge.pageContext.page.robot_options &&
-                  edge.pageContext.page.robot_options.page_index === 0
-                ) {
-                  return null;
-                }
-              } catch (err) {
-                // eslint-disable-next-line no-console
-                console.log(err);
-              }
-              return { ...edge };
-            })
-            .filter((edge) => edge),
-        serialize: (page) => ({
-          url: process.env.GATSBY_SITE_URL + page.pageContext.page.path,
-          changefreq: `daily`,
-          priority: 0.7,
-        }),
+          allSitePage {
+            nodes {
+              path
+              pageContext
+            }
+          }
+        }
+      `,
+        serialize: ({ site, allSitePage }) => getSitemap(site, allSitePage),
       },
     },
     `gatsby-plugin-image`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -27,8 +27,9 @@
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-transformer-sharp": "^4.10.0",
     "react": "^17.0.2",
+    "gatsby-plugin-sitemap": "^3.3.0",
     "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^6.1.1"
+    "gatsby-core-theme": "^6.1.7"
   },
   "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/atoms/newsletter/form/index.js

@@ -1,57 +1,120 @@
-import React,{useRef} from 'react';
-
-import styles from './newsletter-form.module.scss'
-
-const NewsletterForm =({
-    placeholderName="Name",
-    placeholderEmail="Email",
-    buttonText="Submit",
-    formAction="",
-    newsletterListId='',
-    redirectUrl= ''
-})=>{
-    const form = useRef(null);
-
-    const handelSubmit =(e) =>{
-        e.preventDefault();
-        validationForm(e.target.elements) && form.current.submit();
+/* eslint-disable no-unused-expressions */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useRef, useState, useEffect, useContext } 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 styles from './newsletter-form.module.scss';
+
+const NewsletterForm = ({
+  placeholderName = 'Name',
+  placeholderEmail = 'Email',
+  buttonText = 'Submit',
+  redirectUrl,
+}) => {
+  const form = useRef(null);
+  const [ip, setIP] = useState('');
+  const [error, setError] = useState(false);
+  const { translations } = useContext(Context) || {};
+
+  const validationForm = (e) => {
+    let nameValidate = false;
+    let emailValidate = false;
+    if (!e.name.value && e.name.value.trim() === '') {
+      nameValidate = false;
+      e.name.classList.add(styles.error);
+    } else {
+      nameValidate = true;
+      e.name.classList.remove(styles.error);
+    }
+
+    if (!e.email.value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)) {
+      emailValidate = false;
+      e.email.classList.add(styles.error);
+    } else {
+      emailValidate = true;
+      e.email.classList.remove(styles.error);
     }
-    
-    const validationForm =(e)=>{
-        let nameValidate = false;
-        let emailValidate = false;
-        if(!e.name.value && e.name.value.trim() ===''){
-            nameValidate = false;
-            e.name.classList.add(styles.error);
-        }else{
-            nameValidate = true;
-            e.name.classList.remove(styles.error);
-        }
-
-        if(!e.email.value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i)){
-            emailValidate = false;
-            e.email.classList.add(styles.error);
-        }
-        else{
-            emailValidate = true;
-            e.email.classList.remove(styles.error);
-        }
-        if(nameValidate && emailValidate){
-            return true;
-        }
-        else{
-            return false;
-        }
+    if (nameValidate && emailValidate) {
+      return true;
     }
-    return(
-        <form action={formAction} method="post" ref={form} onSubmit={handelSubmit}>
-            <input type="hidden" name="listname" aria-label="listname-hidden" value={newsletterListId} />
-            <input type="hidden" name="redirect" aria-label="redirect-hidden" value={redirectUrl} />
-            <input className={styles.input} placeholder={placeholderName} type="text" name="name" />
-            <input className={styles.input} placeholder={placeholderEmail}  type="email" name="email"  />
-            <button className={styles.button} type="submit">{buttonText}</button>
-        </form>
-    )
-}
+    return false;
+  };
+
+  const getData = async () => {
+    await fetch('https://geolocation-db.com/json/', {
+      method: 'GET',
+    })
+      .then((response) => response.json())
+      .then((data) => setIP(data.IPv4))
+      .catch((err) => {
+        console.log(`Error ${err}`);
+      });
+  };
 
-export default NewsletterForm;
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const bacomApi = async (name, email) => {
+    // eslint-disable-next-line no-bitwise
+    const timestamp = (Date.now() / 1000) | 0;
+
+    await fetch(
+      `https://bacom.dk/subscribe/gig/?firstname=${name}&user_ip=${ip}&ref_name=${process.env.BACOM_REF_NAME}&ref_url=${process.env.BACOM_REF_URL}&timestamp=${timestamp}&country=${process.env.COUNTRY}&email=${email}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+      }
+    ).then((res) =>
+      res.text().then((text) => {
+        text === 'OK' ? (window.location.href = redirectUrl) : setError(true);
+      })
+    );
+  };
+
+  const handelSubmit = (e) => {
+    e.preventDefault();
+    const { elements } = e.target;
+    if (validationForm(elements)) {
+      bacomApi(elements.name.value, elements.email.value);
+    }
+  };
+
+  return (
+    <>
+      {!error ? (
+        <form ref={form} onSubmit={handelSubmit}>
+          <input className={styles.input} placeholder={placeholderName} type="text" name="name" />
+          <input
+            className={styles.input}
+            placeholder={placeholderEmail}
+            type="email"
+            name="email"
+          />
+          <button className={styles.button} type="submit">
+            {buttonText}
+          </button>
+        </form>
+      ) : (
+        <span>
+          {translate(
+            translations,
+            'fail_error_newsletter',
+            'Something went wrong. Please try again later!'
+          )}{' '}
+        </span>
+      )}
+    </>
+  );
+};
+NewsletterForm.propTypes = {
+  placeholderName: PropTypes.string,
+  placeholderEmail: PropTypes.string,
+  buttonText: PropTypes.string,
+  redirectUrl: PropTypes.string,
+};
+export default NewsletterForm;

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/no-danger */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-expressions */
@@ -20,8 +21,6 @@ const Newsletter = ({
   privacyText = 'By subscribing, you confirm that you are over 18 years of age and that you accept our',
   openBtnText = 'FÅ 405 FREE SPINS UMIDDELBART',
   buttonText = 'Hent dine freespins',
-  formAction = '',
-  newsletterListId = '',
   hideButtonOnScroll = true,
   footer = false,
 }) => {
@@ -31,6 +30,7 @@ const Newsletter = ({
     page?.path === '/'
       ? `${getUrl(page?.path)}?subscribed=true`
       : `${getUrl(page?.path)}/?subscribed=true`;
+
   const newsletterFloatingContainer = useRef(React.createRef());
 
   const registerScroll = () => {
@@ -84,8 +84,6 @@ const Newsletter = ({
           placeholderEmail={placeholderEmail}
           buttonText={buttonText}
           redirectUrl={redirectUrl}
-          formAction={formAction}
-          newsletterListId={newsletterListId}
         />
         {privacyText ? (
           <p className={styles.privacytext} dangerouslySetInnerHTML={{ __html: privacyText }} />
@@ -106,8 +104,6 @@ Newsletter.propTypes = {
   privacyText: PropTypes.string,
   openBtnText: PropTypes.string,
   buttonText: PropTypes.string,
-  formAction: PropTypes.string,
-  newsletterListId: PropTypes.string,
   page: PropTypes.shape({
     path: PropTypes.string,
     template: PropTypes.string,

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,70 @@
+.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;
+    }
+
+    img {
+      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;
+}