@gem-sdk/pages 1.57.12 → 1.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/builder/Toolbox.js +21 -1
- package/dist/cjs/libs/api/get-static-page-props-v2.js +13 -3
- package/dist/cjs/libs/google-fonts.js +20 -11
- package/dist/cjs/libs/helpers/check-option-font.js +65 -0
- package/dist/cjs/store/libs-store.js +14 -0
- package/dist/esm/components/builder/Toolbox.js +21 -1
- package/dist/esm/libs/api/get-static-page-props-v2.js +14 -4
- package/dist/esm/libs/google-fonts.js +20 -11
- package/dist/esm/libs/helpers/check-option-font.js +63 -0
- package/dist/esm/store/libs-store.js +12 -0
- package/dist/types/index.d.ts +5 -3
- package/package.json +5 -5
|
@@ -10,6 +10,8 @@ var googleFonts = require('../../libs/google-fonts.js');
|
|
|
10
10
|
var genCss = require('../../libs/helpers/gen-css.js');
|
|
11
11
|
var genFonts = require('../../libs/helpers/gen-fonts.js');
|
|
12
12
|
var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
|
|
13
|
+
var libsStore = require('../../store/libs-store.js');
|
|
14
|
+
var checkOptionFont = require('../../libs/helpers/check-option-font.js');
|
|
13
15
|
|
|
14
16
|
const globalStyleId = 'global-style';
|
|
15
17
|
const Toolbox = ()=>{
|
|
@@ -35,6 +37,8 @@ const Toolbox = ()=>{
|
|
|
35
37
|
const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
|
|
36
38
|
const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
|
|
37
39
|
const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
|
|
40
|
+
const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
|
|
41
|
+
const fontType = libsStore.libsStore((s)=>s.fontType);
|
|
38
42
|
const clearModal = core.useModalStore((s)=>s.clearModal);
|
|
39
43
|
const changeLimitCreateThemeSection = core.useShopStore((s)=>s.changeLimitCreateThemeSection);
|
|
40
44
|
const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
@@ -70,6 +74,12 @@ const Toolbox = ()=>{
|
|
|
70
74
|
});
|
|
71
75
|
// append new fonts
|
|
72
76
|
for (const font of fonts){
|
|
77
|
+
if ([
|
|
78
|
+
'bunny',
|
|
79
|
+
'google'
|
|
80
|
+
].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType)) {
|
|
81
|
+
continue;
|
|
82
|
+
}
|
|
73
83
|
if (font.type !== 'custom') {
|
|
74
84
|
if (font.variants?.length) {
|
|
75
85
|
for (const variant of font.variants){
|
|
@@ -81,7 +91,7 @@ const Toolbox = ()=>{
|
|
|
81
91
|
const variantName = variant;
|
|
82
92
|
const url = googleFonts.createFontUrl([
|
|
83
93
|
cloneFont
|
|
84
|
-
]);
|
|
94
|
+
], undefined, fontType);
|
|
85
95
|
if (url) {
|
|
86
96
|
const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
|
|
87
97
|
if (googleFont) {
|
|
@@ -284,6 +294,13 @@ const Toolbox = ()=>{
|
|
|
284
294
|
}, [
|
|
285
295
|
changeShopPlan
|
|
286
296
|
]);
|
|
297
|
+
const onUpdateFontType = react.useCallback((e)=>{
|
|
298
|
+
const fontType = e.detail;
|
|
299
|
+
if (!fontType) return;
|
|
300
|
+
changeFontType(fontType);
|
|
301
|
+
}, [
|
|
302
|
+
changeFontType
|
|
303
|
+
]);
|
|
287
304
|
const onUpdateDynamicProduct = react.useCallback((e)=>{
|
|
288
305
|
const product = e.detail;
|
|
289
306
|
if (!product) return;
|
|
@@ -405,6 +422,7 @@ const Toolbox = ()=>{
|
|
|
405
422
|
window.addEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
406
423
|
window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
|
|
407
424
|
window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
|
|
425
|
+
window.addEventListener('update-font-type', onUpdateFontType);
|
|
408
426
|
return ()=>{
|
|
409
427
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
410
428
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
@@ -428,6 +446,7 @@ const Toolbox = ()=>{
|
|
|
428
446
|
window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
429
447
|
window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
430
448
|
window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
|
|
449
|
+
window.removeEventListener('update-font-type', onUpdateFontType);
|
|
431
450
|
};
|
|
432
451
|
}, [
|
|
433
452
|
onAddEntity,
|
|
@@ -453,6 +472,7 @@ const Toolbox = ()=>{
|
|
|
453
472
|
onUpdateInteractionItem,
|
|
454
473
|
onUpdateInteractionIsSelectOnPage,
|
|
455
474
|
onUpdateInteractionSettingType,
|
|
475
|
+
onUpdateFontType,
|
|
456
476
|
onChangeSidebarMode
|
|
457
477
|
]);
|
|
458
478
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -18,7 +18,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
18
18
|
slug,
|
|
19
19
|
slugType: pageType
|
|
20
20
|
};
|
|
21
|
-
const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
|
|
21
|
+
const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
|
|
22
22
|
fetcher([
|
|
23
23
|
core.PublishedThemePagesDocument,
|
|
24
24
|
variables
|
|
@@ -28,11 +28,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
28
28
|
]),
|
|
29
29
|
shopifyFetcher([
|
|
30
30
|
adapterShopify.ShopMetaDocument
|
|
31
|
+
]),
|
|
32
|
+
fetcher([
|
|
33
|
+
core.PublishedShopMetasDocument,
|
|
34
|
+
{
|
|
35
|
+
keys: [
|
|
36
|
+
'source_font'
|
|
37
|
+
]
|
|
38
|
+
}
|
|
31
39
|
])
|
|
32
40
|
]);
|
|
33
41
|
if (theme.status === 'rejected') {
|
|
34
42
|
throw new Error(theme.reason?.[0]);
|
|
35
43
|
}
|
|
44
|
+
const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
|
|
45
|
+
const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
|
|
36
46
|
const dataBuilder = theme.value.publishedThemePages?.[0];
|
|
37
47
|
const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
|
|
38
48
|
if (!dataBuilder) {
|
|
@@ -40,8 +50,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
40
50
|
}
|
|
41
51
|
const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
|
|
42
52
|
const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
|
|
43
|
-
googleFonts.getFontStyleFromPageTemplate(pageTemplate),
|
|
44
|
-
googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
|
|
53
|
+
googleFonts.getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
|
|
54
|
+
googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
|
|
45
55
|
getFallback.getFallbackV2(fetcher, pageTemplate),
|
|
46
56
|
customFonts.getCustomFonts(themePageCustomFonts)
|
|
47
57
|
]);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var checkOptionFont = require('./helpers/check-option-font.js');
|
|
3
4
|
var genFonts = require('./helpers/gen-fonts.js');
|
|
4
5
|
|
|
5
6
|
const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
|
|
@@ -35,12 +36,17 @@ const composeFonts = (fonts)=>{
|
|
|
35
36
|
};
|
|
36
37
|
});
|
|
37
38
|
};
|
|
38
|
-
const createFontUrl = (fonts, option)=>{
|
|
39
|
-
const
|
|
40
|
-
|
|
39
|
+
const createFontUrl = (fonts, option, fontType)=>{
|
|
40
|
+
const mainFonts = fonts.filter((font)=>{
|
|
41
|
+
return !([
|
|
42
|
+
'bunny',
|
|
43
|
+
'google'
|
|
44
|
+
].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
|
|
45
|
+
});
|
|
46
|
+
if (!mainFonts.length) return;
|
|
41
47
|
const params = new URLSearchParams();
|
|
42
48
|
const display = option?.display || 'swap';
|
|
43
|
-
const uniqFonts =
|
|
49
|
+
const uniqFonts = mainFonts.filter((font, index, arr)=>{
|
|
44
50
|
return index === arr.findIndex((t)=>t.family === font.family);
|
|
45
51
|
});
|
|
46
52
|
const family = composeFonts(uniqFonts).map((font)=>{
|
|
@@ -54,13 +60,16 @@ const createFontUrl = (fonts, option)=>{
|
|
|
54
60
|
if (option?.effect) {
|
|
55
61
|
params.append('effect', option.effect);
|
|
56
62
|
}
|
|
57
|
-
|
|
63
|
+
const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
|
|
64
|
+
const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
|
|
65
|
+
return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
|
|
58
66
|
};
|
|
59
|
-
|
|
67
|
+
// eslint-disable-next-line max-params
|
|
68
|
+
async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
|
|
60
69
|
/**
|
|
61
70
|
* The order of IE -> Chrome is important, other wise chrome starts loading woff1.
|
|
62
71
|
* CSS cascading 🤷♂️.
|
|
63
|
-
*/ const url = createFontUrl(fonts, option);
|
|
72
|
+
*/ const url = createFontUrl(fonts, option, fontType);
|
|
64
73
|
if (!url) return '';
|
|
65
74
|
try {
|
|
66
75
|
if (isImportFontByUrl) return `@import url('${url}');`;
|
|
@@ -82,7 +91,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
|
|
|
82
91
|
return '';
|
|
83
92
|
}
|
|
84
93
|
}
|
|
85
|
-
const getFontFromGlobalStyle = (data)=>{
|
|
94
|
+
const getFontFromGlobalStyle = (data, sourceFont)=>{
|
|
86
95
|
if (!data) return '';
|
|
87
96
|
try {
|
|
88
97
|
const globalStyle = JSON.parse(data);
|
|
@@ -90,14 +99,14 @@ const getFontFromGlobalStyle = (data)=>{
|
|
|
90
99
|
const fonts = Object.entries(fontData).map(([, value])=>{
|
|
91
100
|
return value;
|
|
92
101
|
});
|
|
93
|
-
return getFonts(fonts);
|
|
102
|
+
return getFonts(fonts, undefined, undefined, sourceFont);
|
|
94
103
|
} catch {
|
|
95
104
|
return '';
|
|
96
105
|
}
|
|
97
106
|
};
|
|
98
|
-
async function getFontStyleFromPageTemplate(pageTemplate) {
|
|
107
|
+
async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
|
|
99
108
|
const fontStyle = pageTemplate.map((sectionData)=>{
|
|
100
|
-
return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data));
|
|
109
|
+
return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
|
|
101
110
|
});
|
|
102
111
|
return await Promise.all(fontStyle);
|
|
103
112
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const listFontsNotInBunny = [
|
|
4
|
+
'Anton SC',
|
|
5
|
+
'Arsenal SC',
|
|
6
|
+
'Baskervville SC',
|
|
7
|
+
'Beiruti',
|
|
8
|
+
'Bodoni Moda SC',
|
|
9
|
+
'Bona Nova SC',
|
|
10
|
+
'Bungee Tint',
|
|
11
|
+
'Edu AU VIC WA NT Hand',
|
|
12
|
+
'Fustat',
|
|
13
|
+
'Ga Maamli',
|
|
14
|
+
'Kalnia Glaze',
|
|
15
|
+
'Maname',
|
|
16
|
+
'Matemasie',
|
|
17
|
+
'Material Icons',
|
|
18
|
+
'Material Icons Outlined',
|
|
19
|
+
'Material Icons Round',
|
|
20
|
+
'Material Icons Sharp',
|
|
21
|
+
'Material Icons Two Tone',
|
|
22
|
+
'Material Symbols Outlined',
|
|
23
|
+
'Material Symbols Rounded',
|
|
24
|
+
'Material Symbols Sharp',
|
|
25
|
+
'Moderustic',
|
|
26
|
+
'New Amsterdam',
|
|
27
|
+
'Playwrite AR',
|
|
28
|
+
'Playwrite AT',
|
|
29
|
+
'Playwrite BE VLG',
|
|
30
|
+
'Playwrite BE WAL',
|
|
31
|
+
'Playwrite CL',
|
|
32
|
+
'Playwrite CU',
|
|
33
|
+
'Playwrite CZ',
|
|
34
|
+
'Playwrite DK Loopet',
|
|
35
|
+
'Playwrite DK Uloopet',
|
|
36
|
+
'Playwrite HR',
|
|
37
|
+
'Playwrite HR Lijeva',
|
|
38
|
+
'Playwrite HU',
|
|
39
|
+
'Playwrite PE',
|
|
40
|
+
'SUSE',
|
|
41
|
+
'Sankofa Display',
|
|
42
|
+
'Wittgenstein',
|
|
43
|
+
'Zain'
|
|
44
|
+
];
|
|
45
|
+
const listFontsNotInGoogle = [
|
|
46
|
+
'Arima Madurai',
|
|
47
|
+
'Coda Caption',
|
|
48
|
+
'Fredoka One',
|
|
49
|
+
'Gentium Book Basic',
|
|
50
|
+
'Kantumruy',
|
|
51
|
+
'Merienda One',
|
|
52
|
+
'Source Sans Pro',
|
|
53
|
+
'Source Serif Pro',
|
|
54
|
+
'Briem Hand',
|
|
55
|
+
'Pushster'
|
|
56
|
+
];
|
|
57
|
+
const objectFont = {
|
|
58
|
+
bunny: listFontsNotInBunny,
|
|
59
|
+
google: listFontsNotInGoogle
|
|
60
|
+
};
|
|
61
|
+
const checkNotInOptionFont = (currentfont, type)=>{
|
|
62
|
+
return objectFont?.[type]?.includes(currentfont);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
exports.checkNotInOptionFont = checkNotInOptionFont;
|
|
@@ -6,6 +6,8 @@ import { createFontUrl } from '../../libs/google-fonts.js';
|
|
|
6
6
|
import { genCSS } from '../../libs/helpers/gen-css.js';
|
|
7
7
|
import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
|
|
8
8
|
import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
|
|
9
|
+
import { libsStore } from '../../store/libs-store.js';
|
|
10
|
+
import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
|
|
9
11
|
|
|
10
12
|
const globalStyleId = 'global-style';
|
|
11
13
|
const Toolbox = ()=>{
|
|
@@ -31,6 +33,8 @@ const Toolbox = ()=>{
|
|
|
31
33
|
const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
|
|
32
34
|
const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
|
|
33
35
|
const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
|
|
36
|
+
const changeFontType = libsStore((s)=>s.changeFontType);
|
|
37
|
+
const fontType = libsStore((s)=>s.fontType);
|
|
34
38
|
const clearModal = useModalStore((s)=>s.clearModal);
|
|
35
39
|
const changeLimitCreateThemeSection = useShopStore((s)=>s.changeLimitCreateThemeSection);
|
|
36
40
|
const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
|
|
@@ -66,6 +70,12 @@ const Toolbox = ()=>{
|
|
|
66
70
|
});
|
|
67
71
|
// append new fonts
|
|
68
72
|
for (const font of fonts){
|
|
73
|
+
if ([
|
|
74
|
+
'bunny',
|
|
75
|
+
'google'
|
|
76
|
+
].includes(font.type) && checkNotInOptionFont(font.family, fontType)) {
|
|
77
|
+
continue;
|
|
78
|
+
}
|
|
69
79
|
if (font.type !== 'custom') {
|
|
70
80
|
if (font.variants?.length) {
|
|
71
81
|
for (const variant of font.variants){
|
|
@@ -77,7 +87,7 @@ const Toolbox = ()=>{
|
|
|
77
87
|
const variantName = variant;
|
|
78
88
|
const url = createFontUrl([
|
|
79
89
|
cloneFont
|
|
80
|
-
]);
|
|
90
|
+
], undefined, fontType);
|
|
81
91
|
if (url) {
|
|
82
92
|
const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
|
|
83
93
|
if (googleFont) {
|
|
@@ -280,6 +290,13 @@ const Toolbox = ()=>{
|
|
|
280
290
|
}, [
|
|
281
291
|
changeShopPlan
|
|
282
292
|
]);
|
|
293
|
+
const onUpdateFontType = useCallback((e)=>{
|
|
294
|
+
const fontType = e.detail;
|
|
295
|
+
if (!fontType) return;
|
|
296
|
+
changeFontType(fontType);
|
|
297
|
+
}, [
|
|
298
|
+
changeFontType
|
|
299
|
+
]);
|
|
283
300
|
const onUpdateDynamicProduct = useCallback((e)=>{
|
|
284
301
|
const product = e.detail;
|
|
285
302
|
if (!product) return;
|
|
@@ -401,6 +418,7 @@ const Toolbox = ()=>{
|
|
|
401
418
|
window.addEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
402
419
|
window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
|
|
403
420
|
window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
|
|
421
|
+
window.addEventListener('update-font-type', onUpdateFontType);
|
|
404
422
|
return ()=>{
|
|
405
423
|
window.removeEventListener('update-shop-info', onChangeShopInfo);
|
|
406
424
|
window.removeEventListener('revalidate-query', onRevalidateQuery);
|
|
@@ -424,6 +442,7 @@ const Toolbox = ()=>{
|
|
|
424
442
|
window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
|
|
425
443
|
window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
|
|
426
444
|
window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
|
|
445
|
+
window.removeEventListener('update-font-type', onUpdateFontType);
|
|
427
446
|
};
|
|
428
447
|
}, [
|
|
429
448
|
onAddEntity,
|
|
@@ -449,6 +468,7 @@ const Toolbox = ()=>{
|
|
|
449
468
|
onUpdateInteractionItem,
|
|
450
469
|
onUpdateInteractionIsSelectOnPage,
|
|
451
470
|
onUpdateInteractionSettingType,
|
|
471
|
+
onUpdateFontType,
|
|
452
472
|
onChangeSidebarMode
|
|
453
473
|
]);
|
|
454
474
|
return /*#__PURE__*/ jsx("div", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
|
|
1
|
+
import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument } from '@gem-sdk/core';
|
|
2
2
|
import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
|
|
3
3
|
import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
|
|
4
4
|
import { genCSS } from '../helpers/gen-css.js';
|
|
@@ -16,7 +16,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
16
16
|
slug,
|
|
17
17
|
slugType: pageType
|
|
18
18
|
};
|
|
19
|
-
const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
|
|
19
|
+
const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
|
|
20
20
|
fetcher([
|
|
21
21
|
PublishedThemePagesDocument,
|
|
22
22
|
variables
|
|
@@ -26,11 +26,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
26
26
|
]),
|
|
27
27
|
shopifyFetcher([
|
|
28
28
|
ShopMetaDocument
|
|
29
|
+
]),
|
|
30
|
+
fetcher([
|
|
31
|
+
PublishedShopMetasDocument,
|
|
32
|
+
{
|
|
33
|
+
keys: [
|
|
34
|
+
'source_font'
|
|
35
|
+
]
|
|
36
|
+
}
|
|
29
37
|
])
|
|
30
38
|
]);
|
|
31
39
|
if (theme.status === 'rejected') {
|
|
32
40
|
throw new Error(theme.reason?.[0]);
|
|
33
41
|
}
|
|
42
|
+
const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
|
|
43
|
+
const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
|
|
34
44
|
const dataBuilder = theme.value.publishedThemePages?.[0];
|
|
35
45
|
const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
|
|
36
46
|
if (!dataBuilder) {
|
|
@@ -38,8 +48,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
|
|
|
38
48
|
}
|
|
39
49
|
const pageTemplate = parseBuilderTemplateV2(dataBuilder);
|
|
40
50
|
const [elementFontStyle, fontStyle, fallback, customFonts] = await Promise.all([
|
|
41
|
-
getFontStyleFromPageTemplate(pageTemplate),
|
|
42
|
-
getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
|
|
51
|
+
getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
|
|
52
|
+
getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
|
|
43
53
|
getFallbackV2(fetcher, pageTemplate),
|
|
44
54
|
getCustomFonts(themePageCustomFonts)
|
|
45
55
|
]);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { checkNotInOptionFont } from './helpers/check-option-font.js';
|
|
1
2
|
import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
|
|
2
3
|
|
|
3
4
|
const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
|
|
@@ -33,12 +34,17 @@ const composeFonts = (fonts)=>{
|
|
|
33
34
|
};
|
|
34
35
|
});
|
|
35
36
|
};
|
|
36
|
-
const createFontUrl = (fonts, option)=>{
|
|
37
|
-
const
|
|
38
|
-
|
|
37
|
+
const createFontUrl = (fonts, option, fontType)=>{
|
|
38
|
+
const mainFonts = fonts.filter((font)=>{
|
|
39
|
+
return !([
|
|
40
|
+
'bunny',
|
|
41
|
+
'google'
|
|
42
|
+
].includes(font.type) && checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
|
|
43
|
+
});
|
|
44
|
+
if (!mainFonts.length) return;
|
|
39
45
|
const params = new URLSearchParams();
|
|
40
46
|
const display = option?.display || 'swap';
|
|
41
|
-
const uniqFonts =
|
|
47
|
+
const uniqFonts = mainFonts.filter((font, index, arr)=>{
|
|
42
48
|
return index === arr.findIndex((t)=>t.family === font.family);
|
|
43
49
|
});
|
|
44
50
|
const family = composeFonts(uniqFonts).map((font)=>{
|
|
@@ -52,13 +58,16 @@ const createFontUrl = (fonts, option)=>{
|
|
|
52
58
|
if (option?.effect) {
|
|
53
59
|
params.append('effect', option.effect);
|
|
54
60
|
}
|
|
55
|
-
|
|
61
|
+
const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
|
|
62
|
+
const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
|
|
63
|
+
return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
|
|
56
64
|
};
|
|
57
|
-
|
|
65
|
+
// eslint-disable-next-line max-params
|
|
66
|
+
async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
|
|
58
67
|
/**
|
|
59
68
|
* The order of IE -> Chrome is important, other wise chrome starts loading woff1.
|
|
60
69
|
* CSS cascading 🤷♂️.
|
|
61
|
-
*/ const url = createFontUrl(fonts, option);
|
|
70
|
+
*/ const url = createFontUrl(fonts, option, fontType);
|
|
62
71
|
if (!url) return '';
|
|
63
72
|
try {
|
|
64
73
|
if (isImportFontByUrl) return `@import url('${url}');`;
|
|
@@ -80,7 +89,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
|
|
|
80
89
|
return '';
|
|
81
90
|
}
|
|
82
91
|
}
|
|
83
|
-
const getFontFromGlobalStyle = (data)=>{
|
|
92
|
+
const getFontFromGlobalStyle = (data, sourceFont)=>{
|
|
84
93
|
if (!data) return '';
|
|
85
94
|
try {
|
|
86
95
|
const globalStyle = JSON.parse(data);
|
|
@@ -88,14 +97,14 @@ const getFontFromGlobalStyle = (data)=>{
|
|
|
88
97
|
const fonts = Object.entries(fontData).map(([, value])=>{
|
|
89
98
|
return value;
|
|
90
99
|
});
|
|
91
|
-
return getFonts(fonts);
|
|
100
|
+
return getFonts(fonts, undefined, undefined, sourceFont);
|
|
92
101
|
} catch {
|
|
93
102
|
return '';
|
|
94
103
|
}
|
|
95
104
|
};
|
|
96
|
-
async function getFontStyleFromPageTemplate(pageTemplate) {
|
|
105
|
+
async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
|
|
97
106
|
const fontStyle = pageTemplate.map((sectionData)=>{
|
|
98
|
-
return getFonts(getFontsFromDataBuilder(sectionData.data));
|
|
107
|
+
return getFonts(getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
|
|
99
108
|
});
|
|
100
109
|
return await Promise.all(fontStyle);
|
|
101
110
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const listFontsNotInBunny = [
|
|
2
|
+
'Anton SC',
|
|
3
|
+
'Arsenal SC',
|
|
4
|
+
'Baskervville SC',
|
|
5
|
+
'Beiruti',
|
|
6
|
+
'Bodoni Moda SC',
|
|
7
|
+
'Bona Nova SC',
|
|
8
|
+
'Bungee Tint',
|
|
9
|
+
'Edu AU VIC WA NT Hand',
|
|
10
|
+
'Fustat',
|
|
11
|
+
'Ga Maamli',
|
|
12
|
+
'Kalnia Glaze',
|
|
13
|
+
'Maname',
|
|
14
|
+
'Matemasie',
|
|
15
|
+
'Material Icons',
|
|
16
|
+
'Material Icons Outlined',
|
|
17
|
+
'Material Icons Round',
|
|
18
|
+
'Material Icons Sharp',
|
|
19
|
+
'Material Icons Two Tone',
|
|
20
|
+
'Material Symbols Outlined',
|
|
21
|
+
'Material Symbols Rounded',
|
|
22
|
+
'Material Symbols Sharp',
|
|
23
|
+
'Moderustic',
|
|
24
|
+
'New Amsterdam',
|
|
25
|
+
'Playwrite AR',
|
|
26
|
+
'Playwrite AT',
|
|
27
|
+
'Playwrite BE VLG',
|
|
28
|
+
'Playwrite BE WAL',
|
|
29
|
+
'Playwrite CL',
|
|
30
|
+
'Playwrite CU',
|
|
31
|
+
'Playwrite CZ',
|
|
32
|
+
'Playwrite DK Loopet',
|
|
33
|
+
'Playwrite DK Uloopet',
|
|
34
|
+
'Playwrite HR',
|
|
35
|
+
'Playwrite HR Lijeva',
|
|
36
|
+
'Playwrite HU',
|
|
37
|
+
'Playwrite PE',
|
|
38
|
+
'SUSE',
|
|
39
|
+
'Sankofa Display',
|
|
40
|
+
'Wittgenstein',
|
|
41
|
+
'Zain'
|
|
42
|
+
];
|
|
43
|
+
const listFontsNotInGoogle = [
|
|
44
|
+
'Arima Madurai',
|
|
45
|
+
'Coda Caption',
|
|
46
|
+
'Fredoka One',
|
|
47
|
+
'Gentium Book Basic',
|
|
48
|
+
'Kantumruy',
|
|
49
|
+
'Merienda One',
|
|
50
|
+
'Source Sans Pro',
|
|
51
|
+
'Source Serif Pro',
|
|
52
|
+
'Briem Hand',
|
|
53
|
+
'Pushster'
|
|
54
|
+
];
|
|
55
|
+
const objectFont = {
|
|
56
|
+
bunny: listFontsNotInBunny,
|
|
57
|
+
google: listFontsNotInGoogle
|
|
58
|
+
};
|
|
59
|
+
const checkNotInOptionFont = (currentfont, type)=>{
|
|
60
|
+
return objectFont?.[type]?.includes(currentfont);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export { checkNotInOptionFont };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -189,7 +189,9 @@ declare const BuilderPage: React.FC<BuilderPageProps>;
|
|
|
189
189
|
|
|
190
190
|
declare const getStaticPaths: GetStaticPaths;
|
|
191
191
|
|
|
192
|
-
type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme';
|
|
192
|
+
type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme' | 'bunny';
|
|
193
|
+
|
|
194
|
+
type FontType = 'bunny' | 'google';
|
|
193
195
|
|
|
194
196
|
type FontItem = {
|
|
195
197
|
type: TypographyV2FontFamilyType;
|
|
@@ -202,8 +204,8 @@ type FontOption = {
|
|
|
202
204
|
subset?: string;
|
|
203
205
|
effect?: string;
|
|
204
206
|
};
|
|
205
|
-
declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean): Promise<string>;
|
|
206
|
-
declare const getFontFromGlobalStyle: (data?: string) => "" | Promise<string>;
|
|
207
|
+
declare function getFonts(fonts: FontItem[], option?: FontOption, isImportFontByUrl?: boolean, fontType?: FontType): Promise<string>;
|
|
208
|
+
declare const getFontFromGlobalStyle: (data?: string, sourceFont?: FontType) => "" | Promise<string>;
|
|
207
209
|
|
|
208
210
|
declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
|
|
209
211
|
declare const getFontFromGroupSetting: (fonts: FontItem[], groupSetting: Record<string, any>) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.58.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"next": "latest"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "1.
|
|
30
|
-
"@gem-sdk/plugin-cookie-bar": "1.
|
|
31
|
-
"@gem-sdk/plugin-quick-view": "1.
|
|
32
|
-
"@gem-sdk/plugin-sticky-add-to-cart": "1.
|
|
29
|
+
"@gem-sdk/core": "1.58.0",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.58.0",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.58.0",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.58.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|