gatsby-matrix-theme 53.23.0 → 53.25.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [53.25.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.24.0...v53.25.0) (2026-07-02)
+
+
+* Merge branch 'EN-574/update-lottery-api' into 'master' ([3d24359](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/3d24359cb39c9ec8d592e6bb83d7cf04124821d0))
+* Merge branch 'master' of gitlab.com:g2m-gentoo/team-floyd/themes/matrix-theme into EN-574/update-lottery-api ([5e77ea7](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/5e77ea7b15a7298f11f10b3b4d258227c1fa4f95))
+
+
+### Features
+
+* replace sportstake api with matchplay ([f2e3410](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/f2e34100aa28cecf371abd16e9f6e10d87ff20fa))
+
+# [53.24.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.23.0...v53.24.0) (2026-07-02)
+
+
+* Merge branch 'critical-css-ssr' into 'master' ([5115877](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/511587745fa68b230b04f579251690bb8434e2fe))
+
+
+### Features
+
+* inject render-blocking module css on ssr routes ([aa36c7c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/aa36c7c57be4f6eba6981cb1c1f55462eacbf871))
+
 # [53.23.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.22.4...v53.23.0) (2026-06-29)
 
 

package/gatsby-node.js

@@ -4,7 +4,10 @@
  * Critical-CSS split (default OFF; enable per-site via options.criticalCss.enabled):
  *   1. onCreateWebpackConfig — split CSS so only initial-chunk CSS stays inlined; lazy-module CSS
  *      goes to separate cacheable chunks.
- *   2. onPostBuild — make each page's own chunks render-blocking (no async => no FOUC/CLS).
+ *   2. onPostBuild — make each STATIC page's own chunks render-blocking (no async => no FOUC/CLS).
+ *
+ * SSR routes (no static HTML; listed in options.criticalCss.skipRoutes) are handled by the SSR
+ * counterpart in ./gatsby-ssr.js, which injects the full module CSS render-blocking at request time.
  *
  * All hooks are guarded so a failure degrades gracefully and never breaks a consumer build.
  */

package/gatsby-ssr.js

@@ -0,0 +1,92 @@
+/**
+ * gatsby-matrix-theme — SSR-side half of the critical-CSS split (default OFF; enabled per-site via
+ * options.criticalCss.enabled).
+ *
+ * The split (see gatsby-node.js) moves lazy-module CSS into async chunks. On STATIC pages,
+ * `onPostBuild` re-links the chunks each page needs render-blocking by rewriting the emitted HTML.
+ * SSR routes (app-ssr.js + getServerData, e.g. the search page `/s`) have no static HTML on disk,
+ * so `onPostBuild` cannot touch them — it explicitly `skipRoutes` them — and their module CSS would
+ * otherwise load async at hydration => FOUC/CLS.
+ *
+ * This hook is the SSR counterpart: for exactly the `skipRoutes` (the dynamic/SSR routes) it injects
+ * every module CSS chunk render-blocking at request time, restoring the pre-split "full CSS at first
+ * paint" behaviour. That is precisely what `skipRoutes` documents — "route prefixes to leave with
+ * default (full) inlining" — so one config list drives both halves of the feature:
+ *   - onPostBuild  -> static pages: detect + render-block per page
+ *   - onRenderBody -> skipRoutes (SSR) pages: render-block the full module set
+ *
+ * Matches on the first path segment, so `/s` and `/preview` are covered without touching static
+ * pages. (SSR templates that live at arbitrary slugs — settings.app_ssr: event/tournament/… — are
+ * NOT segment-addressable; covering those needs a build-emitted SSR-path manifest, a later change.)
+ *
+ * Fully guarded — a failure degrades to split-only (no worse than before) and never breaks SSR.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const React = require('react');
+const { resolveConfig } = require('./critical-css/config');
+
+// module chunks = every emitted stylesheet except the base (`styles.*`) and route shells
+// (`component---*`), which Gatsby already inlines render-blocking for the matched route.
+const isModuleChunk = (f) =>
+  f.endsWith('.css') && !/^styles\./.test(f) && !/^component---/.test(f);
+
+let cachedLinks; // built once per server process (public/ is immutable for a given build)
+
+// Resolve the consumer site's build output dir at request time (cwd is the site root under
+// `gatsby serve` / gatsby-plugin-fastify). chunk-map.json marks a real Gatsby public/ dir.
+function resolvePublicDir() {
+  const candidates = [path.join(process.cwd(), 'public'), path.join(__dirname, 'public')];
+  for (const dir of candidates) {
+    try {
+      if (fs.existsSync(path.join(dir, 'chunk-map.json'))) return dir;
+    } catch (e) {
+      /* try next */
+    }
+  }
+  return null;
+}
+
+function getModuleCssLinks() {
+  // only cache a non-empty success; retry on failure (dir may not be resolvable on an early call)
+  if (cachedLinks && cachedLinks.length) return cachedLinks;
+  try {
+    const dir = resolvePublicDir();
+    if (!dir) return [];
+    const files = fs.readdirSync(dir).filter(isModuleChunk);
+    cachedLinks = files.map((f) =>
+      React.createElement('link', {
+        key: f,
+        rel: 'stylesheet',
+        href: `/${f}`,
+        'data-crit-ssr': f,
+      })
+    );
+    return cachedLinks;
+  } catch (e) {
+    return [];
+  }
+}
+
+function firstSegment(pathname) {
+  return (
+    String(pathname || '')
+      .split('?')[0]
+      .split('/')
+      .filter(Boolean)[0] || ''
+  );
+}
+
+exports.onRenderBody = ({ setHeadComponents, pathname }, pluginOptions) => {
+  try {
+    const cfg = resolveConfig(pluginOptions);
+    if (!cfg.enabled) return;
+    if (!cfg.skipRoutes.includes(firstSegment(pathname))) return;
+
+    const links = getModuleCssLinks();
+    if (links.length) setHeadComponents(links);
+  } catch (e) {
+    /* never break SSR over a CSS optimisation */
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.23.0",
+  "version": "53.25.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/molecules/sportstake/fixtures/index.js

@@ -24,10 +24,9 @@ const Fixtures = ({ module, serverData }) => {
     return;
   }
 
-  const isCricket = moduleName.includes('cricket');
-  const isSportstake4 = moduleName.includes('sportstake4');
-  const hasTwoTables = moduleName.includes('sportstake8') || isSportstake4;
   const query = getApiQueryParams(moduleName);
+  const isMatchplay8 = query.lotteryName === 'matchplay8';
+  const hasTwoTables = query.lotteryName === 'matchplay8' || query.lotteryName === 'matchplay14';
 
   const headerList = tableHeader.slice(0, 4);
 
@@ -69,7 +68,7 @@ const Fixtures = ({ module, serverData }) => {
       const { games } = activeFixture?.drawDetails || {};
 
       const firstTableGames = games
-        ? hasTwoTables || isCricket
+        ? hasTwoTables
           ? Object.values(games).slice(...query.firstTable)
           : Object.values(games)
         : [];
@@ -94,11 +93,11 @@ const Fixtures = ({ module, serverData }) => {
         return (
           <div label={label} results={results} key={res} className={`${styles.sportstake} ${hasTwoTables && styles.twoHalfs}`}>
             <SportstakeHeader fixture={activeFixture} />
-            {isSportstake4 && <h3>1st half</h3>}
+            {isMatchplay8 && <h3>1st half</h3>}
             <Table headerList={headerList} rowList={firstTableGames} />
             {hasTwoTables && (
               <>
-                <h3>{!isSportstake4 ? '2nd Half' : 'Full Time'}</h3>
+                <h3>{!isMatchplay8 ? '2nd Half' : 'Full Time'}</h3>
                 <Table headerList={headerList} rowList={secondTableGames} />
               </>
             )}
@@ -121,15 +120,18 @@ Fixtures.propTypes = {
     module_introduction: PropTypes.string,
   }).isRequired,
   pageContext: PropTypes.shape({}),
-  serverData: PropTypes.arrayOf(
-    PropTypes.shape({
-      _id: PropTypes.string,
-      data: PropTypes.shape({}),
-      drawDate: PropTypes.string,
-      drawDetails: PropTypes.shape({
-        games: PropTypes.shape({}),
-        divs: PropTypes.shape({}),
-      }),
-    }),
-  ) 
+  serverData: PropTypes.shape({
+    data: PropTypes.objectOf(
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          _id: PropTypes.string,
+          drawDate: PropTypes.string,
+          drawDetails: PropTypes.shape({
+            games: PropTypes.shape({}),
+            divs: PropTypes.shape({}),
+          }),
+        })
+      )
+    ),
+  }),
 };

package/src/components/molecules/sportstake/results/index.js

@@ -5,11 +5,8 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import Tabs from 'gatsby-core-theme/src/hooks/tabs';
 import { getResultsById } from '../../../../gatsby-core-theme/helpers/services';
-import { getApiQueryParams } from '../../../../gatsby-core-theme/helpers/sportstake';
-import {
-  tableHeader,
-  tableHeaderCricket,
-} from '../../../../gatsby-core-theme/constants/sportstake';
+import { getApiQueryParams, formatMatchResult } from '../../../../gatsby-core-theme/helpers/sportstake';
+import { tableHeader } from '../../../../gatsby-core-theme/constants/sportstake';
 import SportstakeHeader from './header';
 import SportstakeTable from './table';
 import Table from '../table';
@@ -29,11 +26,10 @@ const Results = ({ module, serverData }) => {
     setTabData(response);
   }
 
-  const isCricket = moduleName.includes('cricket');
-  const isSportstake4 = moduleName.includes('sportstake4');
-  const hasTwoTables = moduleName.includes('sportstake8') || isSportstake4;
   const query = getApiQueryParams(moduleName);
-  const headerList = isCricket ? tableHeaderCricket : tableHeader;
+  const isMatchplay8 = query.lotteryName === 'matchplay8';
+  const hasTwoTables = query.lotteryName === 'matchplay8' || query.lotteryName === 'matchplay14';
+  const headerList = tableHeader;
 
   if(!serverData?.data[moduleName]) return;
   const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
@@ -51,10 +47,8 @@ const Results = ({ module, serverData }) => {
         awayTeam: element.awayTeam,
         toss: element.toss_winner || element.toss,
         dateTime: element.eventDate || element.dateTime || fallbackDate,
-        score: isCricket
-          ? `${element.homeScore || element.score || '0/0'}`
-          : element.score || fallbackScore,
-        results: element.result || element.results,
+        score: element.score || fallbackScore,
+        results: formatMatchResult(element.result ?? element.results),
       };
     });
   };
@@ -73,7 +67,7 @@ const Results = ({ module, serverData }) => {
       const { games } = activeFixture?.drawDetails || {};
 
       const firstTableGames = games
-        ? hasTwoTables || isCricket
+        ? hasTwoTables
           ? Object.values(games).slice(...query.firstTable)
           : Object.values(games)
         : [];
@@ -98,15 +92,15 @@ const Results = ({ module, serverData }) => {
         return (
           <div label={label} results={results} key={res} className={`${styles.sportstake} ${hasTwoTables && styles.twoHalfs}`}>
             <SportstakeHeader fixture={activeFixture} />
-            {isSportstake4 && <h3>1st half</h3>}
+            {isMatchplay8 && <h3>1st half</h3>}
             <Table headerList={headerList} rowList={firstTableGames} isResult />
             {hasTwoTables && (
               <>
-                <h3>{!isSportstake4 ? '2nd Half' : 'Full Time'}</h3>
+                <h3>{!isMatchplay8 ? '2nd Half' : 'Full Time'}</h3>
                 <Table headerList={headerList} rowList={secondTableGames} isResult />
               </>
             )}
-            <SportstakeTable fixture={activeFixture} query={query} isCricket={isCricket} />
+            <SportstakeTable fixture={activeFixture} query={query} />
           </div>
         );
     })}

package/src/components/molecules/sportstake/results/table/index.js

@@ -4,16 +4,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Table from '../../table';
-import { divHeader, tossResultsHeader } from '../../../../../gatsby-core-theme/constants/sportstake';
+import { divHeader } from '../../../../../gatsby-core-theme/constants/sportstake';
 import { commaSeperate } from '../../../../../gatsby-core-theme/helpers/lotto';
 import styles from '../results.module.scss';
 
-const SportstakeTable = ({ 
-    fixture, 
-    query, 
-    isCricket = false 
-}) => {
-    if (!fixture) {return;}
+const SportstakeTable = ({ fixture, query }) => {
+  if (!fixture) {
+    return null;
+  }
+
     const { divs } = fixture?.drawDetails || {};
     const { winnerData } = fixture?.more_info || {};
     const { totalPrizePool, estimatedJackpot, nextEstimatedJackpotAmt } = fixture?.more_info || {};
@@ -56,15 +55,6 @@ const SportstakeTable = ({
             isDivTable
             resultTableNumber={query.secondTableStart}
             />
-
-            {isCricket && fixture?.toss_results?.winnerData && (
-            <Table
-                headerList={tossResultsHeader}
-                rowList={fixture?.toss_results?.winnerData}
-                isDivTable
-                resultTableNumber={query.secondTableStart}
-            />
-            )}
         </div>
         {(totalPrizePoolValue !== null || nextEstimatedJackpotValue !== null) && (
           <div className={styles.jackpotDiv}>
@@ -97,14 +87,10 @@ SportstakeTable.propTypes = {
         divs: PropTypes.shape({}),
       }),
       more_info: PropTypes.shape({}),
-      toss_results: PropTypes.shape({
-        winnerData: PropTypes.arrayOf(PropTypes.shape({})),
-      }),
       winnerData: PropTypes.arrayOf(PropTypes.shape({})),
     }),
     query: PropTypes.shape({
-        secondTableStart: PropTypes.shape({})
+      secondTableStart: PropTypes.number,
     }).isRequired,
-    isCricket: PropTypes.bool
   };
   

package/src/components/molecules/sportstake/table/index.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { commaSeperate, formatDate } from '../../../../gatsby-core-theme/helpers/lotto';
-import { formatScore, formatLowerCase } from '../../../../gatsby-core-theme/helpers/sportstake';
+import { formatScore, formatLowerCase, formatMatchResult } from '../../../../gatsby-core-theme/helpers/sportstake';
 import styles from './table.module.scss';
 
 const Table = ({
@@ -13,7 +13,7 @@ const Table = ({
   resultTableNumber = 0,
 }) => {
   const getIcon = (result) => {
-    switch (result?.toLowerCase()) {
+    switch (formatMatchResult(result)) {
       case 'home':
       case 'home win':
         return (

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

@@ -1,21 +1,13 @@
 export const SPORTSTAKE_FIXTURE_MODULES = [
-  'sportstake4fixturesmidweek',
-  'sportstake8fixturesmidweek',
-  'sportstake8fixturesweekend',
-  'sportstake13fixturesmidweek',
-  'sportstake13fixturesweekend',
-  'sportstakecricketfixturesweekend',
-  'sportstakerugbyfixturesweekend',
+  'matchplay8fixtures',
+  'matchplay14fixtures',
+  'matchplay13fixtures',
 ];
 
 export const SPORTSTAKE_RESULT_MODULES = [
-  'sportstake4resultsmidweek',
-  'sportstake8resultsmidweek',
-  'sportstake8resultsweekend',
-  'sportstake13resultsmidweek',
-  'sportstake13resultsweekend',
-  'sportstakecricketresultsweekend',
-  'sportstakerugbyresultsweekend',
+  'matchplay8results',
+  'matchplay14results',
+  'matchplay13results',
 ];
 
 export const SPORTSTAKE_MODULES = [...SPORTSTAKE_FIXTURE_MODULES, ...SPORTSTAKE_RESULT_MODULES];

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

@@ -21,12 +21,15 @@ import {
   getSportstakeResultProps,
 } from './module-props';
 
+const hasSportstakeServerData = (dataKey) => (module, ctx) =>
+  Boolean(ctx.serverData?.[dataKey]?.data?.[module?.name]?.length);
+
 const sportstakeFixtureEntries = Object.fromEntries(
   SPORTSTAKE_FIXTURE_MODULES.map((name) => [
     name,
     {
       load: () => import('../../../../components/molecules/sportstake/fixtures'),
-      shouldRender: (_, ctx) => Boolean(ctx.serverData?.fixtures?.data?.length),
+      shouldRender: hasSportstakeServerData('fixtures'),
       getProps: getSportstakeFixtureProps,
       sportstakeSuspense: true,
     },
@@ -38,7 +41,7 @@ const sportstakeResultEntries = Object.fromEntries(
     name,
     {
       load: () => import('../../../../components/molecules/sportstake/results'),
-      shouldRender: (_, ctx) => Boolean(ctx.serverData?.results?.data?.length),
+      shouldRender: hasSportstakeServerData('results'),
       getProps: getSportstakeResultProps,
       sportstakeSuspense: true,
     },

package/src/gatsby-core-theme/constants/sportstake.js

@@ -1,15 +1,3 @@
 export const tableHeader = ['Fixture', 'Home Team', 'Away Team', 'Date', 'Score', 'Result'];
 
-export const tableHeaderCricket = [
-  'Fixture',
-  'Home Team',
-  'Away Team',
-  'Toss',
-  'Date',
-  'Score',
-  'Result',
-];
-
 export const divHeader = ['DIV', 'Matches', 'Number of Winners', 'Payout per Winner'];
-
-export const tossResultsHeader = ['DIV', 'Toss Results', 'Number of Winners', 'Payout per Winner'];

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

@@ -108,23 +108,9 @@ export const generateCustomHeadings = (moduleName, title = '') => {
     case 'daily_lotto':
       todaysDate.setDate(todaysDate.getDate() - 1);
       return `Daily Lotto Results for ${formatDate(todaysDate, 'dd/MMM/yy')}`;
-    case 'sportstake-4': {
-      const sportstake4Dates = [getLastWeekday(6), getLastWeekday(3)];
-      return `${title} for ${formatDate(sportstake4Dates.sort((a, b) => b - a)[0], 'dd/MMM/yy')}`;
-    }
-    case 'sportstake-cricket': {
-      const sportstakeCricketDates = [getLastWeekday(6)];
-      return `${title} for ${formatDate(
-        sportstakeCricketDates.sort((a, b) => b - a)[0],
-        'dd/MMM/yy'
-      )}`;
-    }
-    case 'sportstake-rugby': {
-      const sportstakeRugbyDates = [getLastWeekday(6)];
-      return `${title} for ${formatDate(
-        sportstakeRugbyDates.sort((a, b) => b - a)[0],
-        'dd/MMM/yy'
-      )}`;
+    case 'matchplay-8': {
+      const matchplay8Dates = [getLastWeekday(6), getLastWeekday(3)];
+      return `${title} for ${formatDate(matchplay8Dates.sort((a, b) => b - a)[0], 'dd/MMM/yy')}`;
     }
     default:
       return null;

package/src/gatsby-core-theme/helpers/server-data.js

@@ -123,20 +123,12 @@ export async function getAPIData(page, url, header, preview) {
   }
 
   const sportstakeTemplateBlocks = [
-    'sportstake4resultsmidweek',
-    'sportstake8resultsmidweek',
-    'sportstake8resultsweekend',
-    'sportstake13resultsmidweek',
-    'sportstake13resultsweekend',
-    'sportstakecricketresultsweekend',
-    'sportstakerugbyresultsweekend',
-    'sportstake4fixturesmidweek',
-    'sportstake8fixturesmidweek',
-    'sportstake8fixturesweekend',
-    'sportstake13fixturesmidweek',
-    'sportstake13fixturesweekend',
-    'sportstakecricketfixturesweekend',
-    'sportstakerugbyfixturesweekend',
+    'matchplay8results',
+    'matchplay14results',
+    'matchplay13results',
+    'matchplay8fixtures',
+    'matchplay14fixtures',
+    'matchplay13fixtures',
     'lotto',
     'daily_lotto',
     'powerball',
@@ -157,15 +149,22 @@ export async function getAPIData(page, url, header, preview) {
     (page?.categories &&
       page?.categories.filter((category) => category.short_name === 'lotto_uk_49')) ||
     [];
+  const sportstakeModules =
+    page?.sections?.main?.modules?.filter(
+      (x) => x.value_type === 'template_block' && sportstakeTemplateBlocks.includes(x.name)
+    ) || [];
+  const hasFixtureModules = sportstakeModules.some((m) => m.name.includes('fixtures'));
+  const hasResultModules = sportstakeModules.some((m) => m.name.includes('results'));
+  const hasLottoModules = sportstakeModules.some((m) =>
+    ['lotto', 'daily_lotto', 'powerball'].includes(m.name)
+  );
   let responseFixtures = {};
   let responseResults = {};
   let responseLotto = {};
   let lottoUK49 = [];
 
-  if (containsFixtures.length >= 1) {
-    const filteredArray = page?.sections?.main?.modules.filter(
-      (x) => x.value_type === 'template_block' && sportstakeTemplateBlocks.includes(x.name)
-    );
+  if (containsFixtures.length >= 1 || hasFixtureModules) {
+    const filteredArray = sportstakeModules;
 
     const date = new Date();
     const fixtureData = await Promise.all(
@@ -213,13 +212,11 @@ export async function getAPIData(page, url, header, preview) {
       data: Object.assign({}, ...fixtureData.filter(Boolean)),
     };
   } else {
-    responseFixtures = { data: [] };
+    responseFixtures = { data: {} };
   }
 
-  if (containsResults.length >= 1) {
-    const filteredArray = page?.sections?.main?.modules.filter(
-      (x) => x.value_type === 'template_block' && sportstakeTemplateBlocks.includes(x.name)
-    );
+  if (containsResults.length >= 1 || hasResultModules) {
+    const filteredArray = sportstakeModules;
 
     const date = new Date();
     const resultData = await Promise.all(
@@ -268,13 +265,11 @@ export async function getAPIData(page, url, header, preview) {
       data: Object.assign({}, ...resultData.filter(Boolean)),
     };
   } else {
-    responseResults = { data: [] };
+    responseResults = { data: {} };
   }
 
-  if (containsLotto.length >= 1) {
-    const filteredArray = page?.sections?.main?.modules.filter(
-      (x) => x.value_type === 'template_block' && sportstakeTemplateBlocks.includes(x.name)
-    );
+  if (containsLotto.length >= 1 || hasLottoModules) {
+    const filteredArray = sportstakeModules;
 
     const responseArray = await Promise.all(
       filteredArray.map(async (module) => {