@gem-sdk/pages 2.0.0-dev.549 → 2.0.0-dev.570

package/dist/cjs/components/builder/Toolbox.js

@@ -8,11 +8,12 @@ var core = require('@gem-sdk/core');
 var react = require('react');
 var getStorefrontApi = require('../../libs/get-storefront-api.js');
 var googleFonts = require('../../libs/google-fonts.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
 var libsStore = require('../../store/libs-store.js');
-var checkOptionFont = require('../../libs/helpers/check-option-font.js');
+var getListFontWeightTypos = require('../composable/getListFontWeightTypos.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -137,9 +138,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCss.genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = getListFontWeightTypos.getListFontWeightTypos(detail.data?.typography);
+                const font = Object.entries(detail.data?.font).map(([, value])=>({
+                        ...value,
+                        variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
+                    })).map((item)=>{
                     if (item.type == 'custom') {
                         const isGoogleFont = shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {

package/dist/cjs/components/composable/getListFontWeightTypos.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const getListFontWeightTypos = (font)=>{
+    const fontWeights = new Set();
+    Object.values(font).forEach((fontStyle)=>{
+        // Check desktop fontWeight
+        if (fontStyle.desktop?.fontWeight) {
+            fontWeights.add(fontStyle.desktop.fontWeight);
+        }
+    });
+    return Array.from(fontWeights);
+};
+
+exports.getListFontWeightTypos = getListFontWeightTypos;

package/dist/cjs/libs/google-fonts.js

@@ -36,7 +36,27 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option, fontType)=>{
+const handleGenerateFontParams = (variants, fontType = 'google')=>{
+    const regularWeights = [];
+    if (!variants.length) {
+        return fontType === 'bunny' ? '400' : 'wght@400';
+    }
+    // Get regular weights and remove italic variants
+    variants.forEach((variant)=>{
+        if (variant.includes('italic')) {
+            return;
+        }
+        const weight = variant === 'regular' ? '400' : variant;
+        regularWeights.push(weight);
+    });
+    // Sort weights numerically (ex: [900, 700, 400] -> [400, 700, 900])
+    const sortedRegularWeights = regularWeights.sort((a, b)=>Number(a) - Number(b));
+    // Build the variant string with only regular weights
+    const axisPrefix = 'wght@';
+    const listVariantsGoogleFonts = sortedRegularWeights.map((weight)=>weight);
+    return fontType === 'google' ? `${axisPrefix}${listVariantsGoogleFonts.join(';')}` : sortedRegularWeights.join(',');
+};
+const createFontUrl = (fonts, option, fontType = 'google')=>{
     const mainFonts = fonts.filter((font)=>{
         return !([
             'bunny',
@@ -50,8 +70,8 @@ const createFontUrl = (fonts, option, fontType)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
-        return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
-    }).join('|');
+        return `${font.family.replace(/ /g, '+')}:${handleGenerateFontParams(font.variants, fontType)}`;
+    }).join(fontType === 'google' ? '&family=' : '|');
     params.append('family', family);
     params.append('display', display);
     if (option?.subset) {
@@ -61,7 +81,7 @@ const createFontUrl = (fonts, option, fontType)=>{
         params.append('effect', option.effect);
     }
     const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
-    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css2?${decodeURIComponent(params.toString())}`;
     return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
 // eslint-disable-next-line max-params

package/dist/esm/components/builder/Toolbox.js

@@ -4,11 +4,12 @@ import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, use
 import { memo, useMemo, useCallback, useEffect } from 'react';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
+import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
 import { libsStore } from '../../store/libs-store.js';
-import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
+import { getListFontWeightTypos } from '../composable/getListFontWeightTypos.js';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -133,9 +134,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = getListFontWeightTypos(detail.data?.typography);
+                const font = Object.entries(detail.data?.font).map(([, value])=>({
+                        ...value,
+                        variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
+                    })).map((item)=>{
                     if (item.type == 'custom') {
                         const isGoogleFont = shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {

package/dist/esm/components/composable/getListFontWeightTypos.js

@@ -0,0 +1,12 @@
+const getListFontWeightTypos = (font)=>{
+    const fontWeights = new Set();
+    Object.values(font).forEach((fontStyle)=>{
+        // Check desktop fontWeight
+        if (fontStyle.desktop?.fontWeight) {
+            fontWeights.add(fontStyle.desktop.fontWeight);
+        }
+    });
+    return Array.from(fontWeights);
+};
+
+export { getListFontWeightTypos };

package/dist/esm/libs/google-fonts.js

@@ -34,7 +34,27 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option, fontType)=>{
+const handleGenerateFontParams = (variants, fontType = 'google')=>{
+    const regularWeights = [];
+    if (!variants.length) {
+        return fontType === 'bunny' ? '400' : 'wght@400';
+    }
+    // Get regular weights and remove italic variants
+    variants.forEach((variant)=>{
+        if (variant.includes('italic')) {
+            return;
+        }
+        const weight = variant === 'regular' ? '400' : variant;
+        regularWeights.push(weight);
+    });
+    // Sort weights numerically (ex: [900, 700, 400] -> [400, 700, 900])
+    const sortedRegularWeights = regularWeights.sort((a, b)=>Number(a) - Number(b));
+    // Build the variant string with only regular weights
+    const axisPrefix = 'wght@';
+    const listVariantsGoogleFonts = sortedRegularWeights.map((weight)=>weight);
+    return fontType === 'google' ? `${axisPrefix}${listVariantsGoogleFonts.join(';')}` : sortedRegularWeights.join(',');
+};
+const createFontUrl = (fonts, option, fontType = 'google')=>{
     const mainFonts = fonts.filter((font)=>{
         return !([
             'bunny',
@@ -48,8 +68,8 @@ const createFontUrl = (fonts, option, fontType)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
-        return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
-    }).join('|');
+        return `${font.family.replace(/ /g, '+')}:${handleGenerateFontParams(font.variants, fontType)}`;
+    }).join(fontType === 'google' ? '&family=' : '|');
     params.append('family', family);
     params.append('display', display);
     if (option?.subset) {
@@ -59,7 +79,7 @@ const createFontUrl = (fonts, option, fontType)=>{
         params.append('effect', option.effect);
     }
     const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
-    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css2?${decodeURIComponent(params.toString())}`;
     return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
 // eslint-disable-next-line max-params

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "2.0.0-dev.549",
+  "version": "2.0.0-dev.570",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "next": "14.2.20"
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.0.0-dev.540",
+    "@gem-sdk/core": "2.0.0-dev.569",
     "@gem-sdk/plugin-cookie-bar": "2.0.0-dev.348",
     "@gem-sdk/plugin-quick-view": "2.0.0-dev.348",
     "@gem-sdk/plugin-sticky-add-to-cart": "2.0.0-dev.348"