@gem-sdk/pages 1.10.20 → 1.10.42
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/Footer.js +114 -33
- package/dist/cjs/components/Header.js +85 -32
- package/dist/cjs/components/ImageToLayout.js +209 -0
- package/dist/cjs/components/PagesSuggestion.js +176 -0
- package/dist/cjs/libs/google-fonts.js +12 -4
- package/dist/cjs/pages/builder.js +3 -1
- package/dist/esm/components/Footer.js +115 -34
- package/dist/esm/components/Header.js +86 -33
- package/dist/esm/components/ImageToLayout.js +205 -0
- package/dist/esm/components/PagesSuggestion.js +174 -0
- package/dist/esm/libs/google-fonts.js +12 -4
- package/dist/esm/pages/builder.js +3 -1
- package/dist/types/index.d.ts +3 -2
- package/package.json +1 -1
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
|
|
7
|
+
const inputRef = react.useRef(null);
|
|
8
|
+
const pages = [
|
|
9
|
+
'https://gempages-demo/1',
|
|
10
|
+
'https://www.apple.com/',
|
|
11
|
+
'https://www.zara.com/ca/'
|
|
12
|
+
];
|
|
13
|
+
react.useEffect(()=>{
|
|
14
|
+
if (isOpen) {
|
|
15
|
+
inputRef.current?.focus();
|
|
16
|
+
}
|
|
17
|
+
}, [
|
|
18
|
+
isOpen
|
|
19
|
+
]);
|
|
20
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
21
|
+
children: [
|
|
22
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
23
|
+
className: `z-9 gps-page-suggestion bg-white p-2 ${isOpen ? 'block' : 'hidden'} absolute left-[-10px] top-[-10px]`,
|
|
24
|
+
children: [
|
|
25
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
26
|
+
className: "image-to-layout-input-wrapper-modal flex w-[600px] items-center rounded-[3px] py-2 pl-4 pr-2",
|
|
27
|
+
children: [
|
|
28
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
29
|
+
width: "54",
|
|
30
|
+
height: "21",
|
|
31
|
+
viewBox: "0 0 54 21",
|
|
32
|
+
fill: "none",
|
|
33
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
34
|
+
children: [
|
|
35
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
36
|
+
d: "M8.12314 9.0696C8.04028 8.80114 7.92593 8.56084 7.7801 8.34872C7.63758 8.13329 7.46523 7.94934 7.26305 7.79688C7.06419 7.64441 6.83549 7.53007 6.57697 7.45383C6.31845 7.37429 6.03672 7.33452 5.7318 7.33452C5.18493 7.33452 4.69771 7.47206 4.27015 7.74716C3.8426 8.02225 3.50618 8.42661 3.26092 8.96023C3.01897 9.49053 2.89799 10.1368 2.89799 10.8991C2.89799 11.6681 3.01897 12.3194 3.26092 12.853C3.50287 13.3866 3.83928 13.7926 4.27015 14.071C4.70102 14.3461 5.2015 14.4837 5.77157 14.4837C6.28862 14.4837 6.73606 14.3842 7.1139 14.1854C7.49506 13.9865 7.78838 13.7048 7.99387 13.3402C8.19937 12.9723 8.30211 12.5414 8.30211 12.0476L8.71973 12.1122H5.95552V10.6705H10.0869V11.8935C10.0869 12.7652 9.90131 13.5192 9.5301 14.1555C9.15888 14.7919 8.64847 15.2824 7.99885 15.6271C7.34922 15.9685 6.60349 16.1392 5.76163 16.1392C4.82366 16.1392 4.00003 15.9287 3.29075 15.5078C2.58478 15.0836 2.03294 14.482 1.63521 13.7031C1.2408 12.9209 1.04359 11.9929 1.04359 10.919C1.04359 10.0971 1.15959 9.36293 1.3916 8.71662C1.62692 8.07031 1.95505 7.52178 2.37598 7.07102C2.7969 6.61695 3.29075 6.27225 3.85751 6.03693C4.42427 5.7983 5.04075 5.67898 5.70694 5.67898C6.27039 5.67898 6.79572 5.76184 7.28294 5.92756C7.77015 6.08996 8.20268 6.32197 8.58052 6.62358C8.96168 6.92519 9.27489 7.28314 9.52015 7.69744C9.76542 8.11174 9.92617 8.56913 10.0024 9.0696H8.12314ZM15.1716 16.1491C14.406 16.1491 13.7448 15.9901 13.1879 15.6719C12.6344 15.3504 12.2085 14.8963 11.9102 14.3097C11.6119 13.7197 11.4628 13.0253 11.4628 12.2266C11.4628 11.4411 11.6119 10.7517 11.9102 10.1584C12.2119 9.56179 12.6328 9.09777 13.173 8.76633C13.7133 8.43158 14.348 8.2642 15.0771 8.2642C15.5478 8.2642 15.9919 8.34044 16.4095 8.4929C16.8305 8.64205 17.2017 8.87405 17.5232 9.18892C17.848 9.50379 18.1032 9.90483 18.2888 10.392C18.4744 10.8759 18.5672 11.4527 18.5672 12.1222V12.674H12.308V11.4609H16.8421C16.8387 11.1162 16.7642 10.8097 16.6183 10.5412C16.4725 10.2694 16.2687 10.0556 16.0068 9.89986C15.7483 9.74408 15.4467 9.66619 15.102 9.66619C14.7341 9.66619 14.411 9.75568 14.1325 9.93466C13.8541 10.1103 13.637 10.3423 13.4813 10.6307C13.3288 10.9157 13.2509 11.2289 13.2476 11.5703V12.6293C13.2476 13.0734 13.3288 13.4545 13.4912 13.7727C13.6536 14.0876 13.8807 14.3295 14.1723 14.4986C14.464 14.6643 14.8054 14.7472 15.1965 14.7472C15.4583 14.7472 15.6953 14.7107 15.9074 14.6378C16.1195 14.5616 16.3035 14.4505 16.4593 14.3047C16.615 14.1589 16.7327 13.9782 16.8122 13.7628L18.4926 13.9517C18.3866 14.3958 18.1844 14.7836 17.8861 15.1151C17.5911 15.4432 17.2133 15.6984 16.7526 15.8807C16.2919 16.0597 15.7649 16.1491 15.1716 16.1491ZM20.0898 16V8.36364H21.8099V9.66122H21.8994C22.0585 9.22372 22.322 8.88234 22.6899 8.63707C23.0578 8.38849 23.497 8.2642 24.0074 8.2642C24.5244 8.2642 24.9603 8.39015 25.3149 8.64205C25.6729 8.89062 25.9247 9.23035 26.0706 9.66122H26.1501C26.3192 9.23698 26.6042 8.89891 27.0052 8.64702C27.4096 8.39181 27.8885 8.2642 28.442 8.2642C29.1447 8.2642 29.7181 8.48627 30.1622 8.9304C30.6063 9.37453 30.8284 10.0225 30.8284 10.8743V16H29.0237V11.1527C29.0237 10.6787 28.8978 10.3324 28.6459 10.1136C28.394 9.89157 28.0857 9.78054 27.7211 9.78054C27.287 9.78054 26.9472 9.91643 26.702 10.1882C26.46 10.4567 26.339 10.8063 26.339 11.2372V16H24.5741V11.0781C24.5741 10.6837 24.4548 10.3688 24.2162 10.1335C23.9809 9.8982 23.6726 9.78054 23.2915 9.78054C23.0329 9.78054 22.7976 9.84683 22.5855 9.9794C22.3734 10.1087 22.2043 10.2926 22.0784 10.5312C21.9524 10.7666 21.8895 11.0417 21.8895 11.3565V16H20.0898ZM34.0413 16H32.0725L35.657 5.81818H37.934L41.5235 16H39.5548L36.8353 7.90625H36.7558L34.0413 16ZM34.1059 12.0078H39.4752V13.4893H34.1059V12.0078ZM44.7091 5.81818V16H42.8646V5.81818H44.7091Z",
|
|
37
|
+
fill: "url(#paint0_linear_1825_211216)"
|
|
38
|
+
}),
|
|
39
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
40
|
+
d: "M49.7612 1.0282C49.8335 0.792683 50.1669 0.792683 50.2392 1.0282L50.7184 2.58942C50.8115 2.89264 51.0429 3.13372 51.3421 3.23913L52.8311 3.76382C53.0536 3.84224 53.0536 4.15698 52.8311 4.2354L51.3421 4.76008C51.0429 4.86549 50.8115 5.10658 50.7184 5.4098L50.2392 6.97101C50.1669 7.20653 49.8335 7.20653 49.7612 6.97101L49.282 5.4098C49.1889 5.10658 48.9575 4.86549 48.6584 4.76008L47.1694 4.2354C46.9468 4.15698 46.9468 3.84224 47.1694 3.76382L48.6584 3.23913C48.9575 3.13372 49.1889 2.89264 49.282 2.58942L49.7612 1.0282Z",
|
|
41
|
+
fill: "url(#paint1_linear_1825_211216)"
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ jsxRuntime.jsxs("defs", {
|
|
44
|
+
children: [
|
|
45
|
+
/*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
|
|
46
|
+
id: "paint0_linear_1825_211216",
|
|
47
|
+
x1: "46",
|
|
48
|
+
y1: "16.0338",
|
|
49
|
+
x2: "-0.000777919",
|
|
50
|
+
y2: "15.9189",
|
|
51
|
+
gradientUnits: "userSpaceOnUse",
|
|
52
|
+
children: [
|
|
53
|
+
/*#__PURE__*/ jsxRuntime.jsx("stop", {
|
|
54
|
+
stopColor: "#874CFD"
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ jsxRuntime.jsx("stop", {
|
|
57
|
+
offset: "1",
|
|
58
|
+
stopColor: "#3C38E1"
|
|
59
|
+
})
|
|
60
|
+
]
|
|
61
|
+
}),
|
|
62
|
+
/*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
|
|
63
|
+
id: "paint1_linear_1825_211216",
|
|
64
|
+
x1: "52.105",
|
|
65
|
+
y1: "2.62234",
|
|
66
|
+
x2: "47.7267",
|
|
67
|
+
y2: "2.92341",
|
|
68
|
+
gradientUnits: "userSpaceOnUse",
|
|
69
|
+
children: [
|
|
70
|
+
/*#__PURE__*/ jsxRuntime.jsx("stop", {
|
|
71
|
+
stopColor: "#3C67FF"
|
|
72
|
+
}),
|
|
73
|
+
/*#__PURE__*/ jsxRuntime.jsx("stop", {
|
|
74
|
+
offset: "1",
|
|
75
|
+
stopColor: "#874CFD"
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
})
|
|
79
|
+
]
|
|
80
|
+
})
|
|
81
|
+
]
|
|
82
|
+
}),
|
|
83
|
+
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
84
|
+
value: link,
|
|
85
|
+
ref: inputRef,
|
|
86
|
+
onChange: (event)=>{
|
|
87
|
+
setLink(event.target.value);
|
|
88
|
+
},
|
|
89
|
+
id: "gp-img-to-layout-input-link",
|
|
90
|
+
placeholder: "Paste web link to generate layout",
|
|
91
|
+
className: "ml-2 flex-1 text-[#676767] outline-none"
|
|
92
|
+
}),
|
|
93
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
94
|
+
id: "gp-img-to-layout-generate-btn",
|
|
95
|
+
className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] font-medium text-white",
|
|
96
|
+
children: "Generate"
|
|
97
|
+
})
|
|
98
|
+
]
|
|
99
|
+
}),
|
|
100
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
101
|
+
className: "mt-2 max-h-[500px]",
|
|
102
|
+
children: pages.map((page)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
103
|
+
className: "gps-suggestion-item flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] hover:bg-[#F4F4F4]",
|
|
104
|
+
"aria-hidden": true,
|
|
105
|
+
onClick: ()=>{
|
|
106
|
+
setOpenSuggestion(false);
|
|
107
|
+
setLink(page);
|
|
108
|
+
},
|
|
109
|
+
children: [
|
|
110
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
111
|
+
className: "flex items-center",
|
|
112
|
+
children: [
|
|
113
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
114
|
+
width: "24",
|
|
115
|
+
height: "27",
|
|
116
|
+
viewBox: "0 0 24 27",
|
|
117
|
+
fill: "none",
|
|
118
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
119
|
+
children: [
|
|
120
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
121
|
+
d: "M20.8872 5.01303C20.8714 4.87466 20.7446 4.81316 20.6496 4.79778C20.5545 4.78241 18.6535 4.76703 18.6535 4.76703C18.6535 4.76703 17.0534 3.26028 16.895 3.10653C16.7366 2.95278 16.4356 2.9989 16.3089 3.02965C16.3089 3.02965 16.0079 3.1219 15.5009 3.27565C15.4217 3.01428 15.295 2.6914 15.1207 2.36852C14.5504 1.30765 13.7266 0.754146 12.7127 0.754146C12.6493 0.754146 12.5701 0.754146 12.5068 0.769521C12.4751 0.738771 12.4434 0.708021 12.4117 0.661896C11.9681 0.200644 11.4137 -0.0146069 10.7483 0.000768183C9.44924 0.0315183 8.16604 0.938647 7.10462 2.5684C6.36004 3.70615 5.80557 5.13603 5.64715 6.24304C4.158 6.68891 3.11242 6.99642 3.09658 7.01179C2.352 7.24242 2.32032 7.25779 2.22527 7.94967C2.14606 8.45705 0.181641 23.2325 0.181641 23.2325L16.6732 26L23.818 24.278C23.818 24.278 20.9031 5.13603 20.8872 5.01303ZM14.6771 3.52165C14.2969 3.62928 13.8692 3.76765 13.3939 3.90603C13.3781 3.27565 13.2989 2.3839 12.9979 1.61515C13.9959 1.79965 14.4712 2.8759 14.6771 3.52165ZM12.5384 4.16741C11.6671 4.42878 10.7325 4.70553 9.78193 4.99766C10.0512 4.01366 10.5582 3.02965 11.176 2.3839C11.4137 2.1379 11.7305 1.87652 12.1107 1.72277C12.4751 2.4454 12.5384 3.47553 12.5384 4.16741ZM10.7641 0.846397C11.0651 0.846397 11.3186 0.907897 11.5404 1.04627C11.1919 1.2154 10.8433 1.47677 10.5265 1.81502C9.70272 2.67603 9.06904 3.99828 8.81556 5.28979C8.02346 5.52041 7.26304 5.75104 6.55015 5.96629C7.02541 3.93678 8.76804 0.907897 10.7641 0.846397Z",
|
|
122
|
+
fill: "#95BF47"
|
|
123
|
+
}),
|
|
124
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
125
|
+
d: "M20.6492 4.79913C20.5542 4.78376 18.6531 4.76838 18.6531 4.76838C18.6531 4.76838 17.0531 3.26163 16.8946 3.10788C16.8313 3.04638 16.7521 3.01562 16.6729 3.01562V26.0013L23.8176 24.2793C23.8176 24.2793 20.9027 5.15276 20.8868 5.01438C20.8552 4.87601 20.7443 4.81451 20.6492 4.79913Z",
|
|
126
|
+
fill: "#5E8E3E"
|
|
127
|
+
}),
|
|
128
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
129
|
+
d: "M12.7131 8.36403L11.8893 11.3775C11.8893 11.3775 10.9705 10.9624 9.86155 11.0393C8.24565 11.1315 8.22983 12.1155 8.24567 12.3769C8.34072 13.7299 11.9844 14.0221 12.1903 17.1739C12.3488 19.6647 10.8279 21.356 8.64172 21.4943C6.01194 21.6481 4.57031 20.1567 4.57031 20.1567L5.12478 17.8658C5.12478 17.8658 6.58225 18.9267 7.73872 18.8652C8.49914 18.8191 8.76846 18.2194 8.73677 17.7889C8.62588 16.0362 5.64756 16.1284 5.45745 13.2533C5.29903 10.824 6.94661 8.36403 10.5744 8.13341C12.0002 8.01041 12.7131 8.36403 12.7131 8.36403Z",
|
|
130
|
+
fill: "white"
|
|
131
|
+
})
|
|
132
|
+
]
|
|
133
|
+
}),
|
|
134
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
135
|
+
className: "item-link ml-[16px] text-xs text-[#212121]",
|
|
136
|
+
children: page
|
|
137
|
+
})
|
|
138
|
+
]
|
|
139
|
+
}),
|
|
140
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
141
|
+
className: "star-icon hidden",
|
|
142
|
+
width: "32",
|
|
143
|
+
height: "32",
|
|
144
|
+
viewBox: "0 0 32 32",
|
|
145
|
+
fill: "none",
|
|
146
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
147
|
+
children: [
|
|
148
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
149
|
+
fillRule: "evenodd",
|
|
150
|
+
clipRule: "evenodd",
|
|
151
|
+
d: "M19.0478 10.6714C19.0955 10.5236 19.3045 10.5236 19.3523 10.6714L19.5708 11.348C19.6489 11.5897 19.8372 11.78 20.0781 11.8607L20.7469 12.0846C20.8925 12.1334 20.8925 12.3393 20.7469 12.3881L20.0781 12.6121C19.8372 12.6927 19.6489 12.883 19.5708 13.1248L19.3523 13.8014C19.3045 13.9491 19.0955 13.9491 19.0478 13.8014L18.8292 13.1248C18.7511 12.883 18.5629 12.6927 18.322 12.6121L17.6531 12.3881C17.5075 12.3393 17.5075 12.1334 17.6531 12.0846L18.322 11.8607C18.5629 11.78 18.7511 11.5897 18.8292 11.348L19.0478 10.6714ZM18.6611 12.2364C18.891 12.1161 19.079 11.9287 19.2 11.6994C19.321 11.9287 19.509 12.1161 19.739 12.2364C19.509 12.3566 19.321 12.544 19.2 12.7733C19.079 12.544 18.891 12.3566 18.6611 12.2364Z",
|
|
152
|
+
fill: "#212121"
|
|
153
|
+
}),
|
|
154
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
155
|
+
fillRule: "evenodd",
|
|
156
|
+
clipRule: "evenodd",
|
|
157
|
+
d: "M14.8716 11.307C14.9432 11.0854 15.2568 11.0854 15.3284 11.307L16.0887 13.6608C16.3229 14.386 16.8877 14.9569 17.6104 15.1989L19.9204 15.9724C20.1388 16.0456 20.1388 16.3545 19.9204 16.4276L17.6104 17.2011C16.8877 17.4431 16.3229 18.014 16.0887 18.7392L15.3284 21.093C15.2568 21.3146 14.9432 21.3146 14.8716 21.093L14.1113 18.7392C13.8771 18.014 13.3123 17.4431 12.5896 17.2011L10.2796 16.4276C10.0612 16.3545 10.0612 16.0456 10.2796 15.9724L12.5896 15.1989C13.3123 14.9569 13.8771 14.386 14.1113 13.6608L14.8716 11.307ZM14.8726 13.9067L15.1 13.2027L15.3274 13.9067C15.6397 14.8737 16.3928 15.6348 17.3564 15.9575L18.0806 16.2L17.3564 16.4425C16.3928 16.7652 15.6397 17.5263 15.3274 18.4933L15.1 19.1973L14.8726 18.4933C14.5603 17.5263 13.8072 16.7652 12.8436 16.4425L12.1195 16.2L12.8436 15.9575C13.8072 15.6348 14.5603 14.8737 14.8726 13.9067Z",
|
|
158
|
+
fill: "#212121"
|
|
159
|
+
})
|
|
160
|
+
]
|
|
161
|
+
})
|
|
162
|
+
]
|
|
163
|
+
}, page))
|
|
164
|
+
})
|
|
165
|
+
]
|
|
166
|
+
}),
|
|
167
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
168
|
+
onClick: ()=>setOpenSuggestion(false),
|
|
169
|
+
"aria-hidden": true,
|
|
170
|
+
className: `fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
|
|
171
|
+
})
|
|
172
|
+
]
|
|
173
|
+
});
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
exports.PagesSuggestion = PagesSuggestion;
|
|
@@ -29,7 +29,7 @@ const createFontUrl = (fonts, option)=>{
|
|
|
29
29
|
}
|
|
30
30
|
return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
|
|
31
31
|
};
|
|
32
|
-
async function getFonts(fonts, option) {
|
|
32
|
+
async function getFonts(fonts, option, maxSize) {
|
|
33
33
|
/**
|
|
34
34
|
* The order of IE -> Chrome is important, other wise chrome starts loading woff1.
|
|
35
35
|
* CSS cascading 🤷♂️.
|
|
@@ -40,12 +40,20 @@ async function getFonts(fonts, option) {
|
|
|
40
40
|
getFontForUA(url, IE_UA),
|
|
41
41
|
getFontForUA(url, CHROME_UA)
|
|
42
42
|
]);
|
|
43
|
-
|
|
43
|
+
const value = ie + chrome;
|
|
44
|
+
if (maxSize) {
|
|
45
|
+
const textEncoder = new TextEncoder();
|
|
46
|
+
const size = value ? textEncoder.encode(value).length : 0;
|
|
47
|
+
if (Math.ceil(size / 1024) >= maxSize) {
|
|
48
|
+
return `@import url('${url}');`;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
return value;
|
|
44
52
|
} catch (e) {
|
|
45
53
|
return '';
|
|
46
54
|
}
|
|
47
55
|
}
|
|
48
|
-
const getFontFromGlobalStyle = (data)=>{
|
|
56
|
+
const getFontFromGlobalStyle = (data, maxSize)=>{
|
|
49
57
|
if (!data) return '';
|
|
50
58
|
try {
|
|
51
59
|
const globalStyle = JSON.parse(data);
|
|
@@ -53,7 +61,7 @@ const getFontFromGlobalStyle = (data)=>{
|
|
|
53
61
|
const fonts = Object.entries(fontData).map(([, value])=>{
|
|
54
62
|
return value;
|
|
55
63
|
});
|
|
56
|
-
return getFonts(fonts);
|
|
64
|
+
return getFonts(fonts, undefined, maxSize);
|
|
57
65
|
} catch {
|
|
58
66
|
return '';
|
|
59
67
|
}
|
|
@@ -10,8 +10,9 @@ var Header = require('../components/Header.js');
|
|
|
10
10
|
var Footer = require('../components/Footer.js');
|
|
11
11
|
var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
|
|
12
12
|
var PopupManager = require('../components/builder/PopupManager.js');
|
|
13
|
+
var ImageToLayout = require('../components/ImageToLayout.js');
|
|
13
14
|
|
|
14
|
-
const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType })=>{
|
|
15
|
+
const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData , pageType , editorImageToLayout })=>{
|
|
15
16
|
const [loadSuccess, setLoadSuccess] = react.useState(false);
|
|
16
17
|
const initState = react.useMemo(()=>({
|
|
17
18
|
ROOT: {
|
|
@@ -70,6 +71,7 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
|
|
|
70
71
|
uid: "ROOT"
|
|
71
72
|
})
|
|
72
73
|
}),
|
|
74
|
+
editorImageToLayout && /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {}),
|
|
73
75
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
74
76
|
id: "visual-content"
|
|
75
77
|
}),
|
|
@@ -1,43 +1,124 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useShopStore, cls } from '@gem-sdk/core';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
3
4
|
|
|
4
5
|
const Footer = ()=>{
|
|
5
6
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const [shouldFixed, setShouldFixed] = useState(false);
|
|
8
|
+
useEffect(()=>{
|
|
9
|
+
const $iframe = parent.document.querySelector('.iframe');
|
|
10
|
+
if (!$iframe) return;
|
|
11
|
+
const $storefront = document.querySelector('#storefront');
|
|
12
|
+
if (!$storefront) return;
|
|
13
|
+
const headerHeight = 40;
|
|
14
|
+
const footerHeight = 48;
|
|
15
|
+
const iframeHeight = $iframe.clientHeight;
|
|
16
|
+
const comparedHeight = layoutSetting?.showHeader ? iframeHeight - headerHeight - footerHeight : iframeHeight - footerHeight;
|
|
17
|
+
const observer = new ResizeObserver((entries)=>{
|
|
18
|
+
const currentEditingFrameHeight = entries[0]?.target.clientHeight;
|
|
19
|
+
if (currentEditingFrameHeight && comparedHeight) setShouldFixed(currentEditingFrameHeight < comparedHeight);
|
|
20
|
+
});
|
|
21
|
+
observer.observe($storefront);
|
|
22
|
+
return ()=>{
|
|
23
|
+
observer.unobserve($storefront);
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
27
|
+
className: cls('gp-footer-container flex h-[48px] items-center justify-between border-y border-1 border-[#EEEEEE] group px-[68px] ', {
|
|
28
|
+
hidden: !layoutSetting?.showFooter,
|
|
29
|
+
'fixed w-full bottom-0 z-50': shouldFixed
|
|
9
30
|
}),
|
|
10
|
-
children:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
children: [
|
|
32
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
33
|
+
width: "192",
|
|
34
|
+
height: "8",
|
|
35
|
+
viewBox: "0 0 192 8",
|
|
36
|
+
fill: "none",
|
|
37
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
38
|
+
children: [
|
|
39
|
+
/*#__PURE__*/ jsx("rect", {
|
|
40
|
+
width: "56",
|
|
41
|
+
height: "8",
|
|
42
|
+
rx: "3",
|
|
43
|
+
fill: "#E1E1E1"
|
|
44
|
+
}),
|
|
45
|
+
/*#__PURE__*/ jsx("rect", {
|
|
46
|
+
x: "68",
|
|
47
|
+
width: "56",
|
|
48
|
+
height: "8",
|
|
49
|
+
rx: "3",
|
|
50
|
+
fill: "#E1E1E1"
|
|
51
|
+
}),
|
|
52
|
+
/*#__PURE__*/ jsx("rect", {
|
|
53
|
+
x: "136",
|
|
54
|
+
width: "56",
|
|
55
|
+
height: "8",
|
|
56
|
+
rx: "3",
|
|
57
|
+
fill: "#E1E1E1"
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxs("div", {
|
|
62
|
+
className: "gp-footer invisible flex h-[32px] cursor-pointer items-center justify-center rounded bg-[#151617] p-[4px] group-hover:visible absolute left-1/2 -translate-x-1/2",
|
|
63
|
+
children: [
|
|
64
|
+
/*#__PURE__*/ jsx("div", {
|
|
65
|
+
className: "flex items-center pl-[4px] pr-[8px] py-[3px]",
|
|
66
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
67
|
+
className: "text-[12px] leading-[150%] text-[#E2E2E2]",
|
|
68
|
+
children: "Shopify theme’s footer"
|
|
69
|
+
})
|
|
70
|
+
}),
|
|
71
|
+
/*#__PURE__*/ jsx("div", {
|
|
72
|
+
className: "border-r border-1 border-[#D6D6D6] h-full mx-[4px] opacity-10"
|
|
73
|
+
}),
|
|
74
|
+
/*#__PURE__*/ jsx("div", {
|
|
75
|
+
className: "h-[24px] w-[24px] flex items-center justify-center",
|
|
76
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
77
|
+
width: "14",
|
|
78
|
+
height: "14",
|
|
79
|
+
viewBox: "0 0 14 14",
|
|
80
|
+
fill: "none",
|
|
81
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
82
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
83
|
+
fillRule: "evenodd",
|
|
84
|
+
clipRule: "evenodd",
|
|
85
|
+
d: "M8.71393 0.409265L9.01371 2.03382C9.54464 2.23024 10.0362 2.50205 10.4741 2.83548L12.1413 2.25585C12.3668 2.17743 12.6164 2.26947 12.737 2.47558L13.9315 4.51667C14.0568 4.73077 14.0062 5.00437 13.8126 5.15946L12.5134 6.2001C12.5546 6.46109 12.5759 6.72829 12.5759 7.00025C12.5759 7.27213 12.5546 7.53925 12.5134 7.80017L13.8126 8.84079C14.0062 8.99588 14.0568 9.26948 13.9315 9.48358L12.737 11.5247C12.6164 11.7308 12.3668 11.8228 12.1413 11.7444L10.4743 11.1648C10.0364 11.4984 9.5447 11.7702 9.01367 11.9667L8.71393 13.591C8.67017 13.8281 8.46337 14.0003 8.22223 14.0003H5.77778C5.53663 14.0003 5.32984 13.8281 5.28607 13.591L4.98636 11.9669C4.45521 11.7704 3.96343 11.4985 3.52544 11.1649L1.85874 11.7444C1.63317 11.8228 1.38363 11.7308 1.26301 11.5247L0.0684979 9.48358C-0.0568018 9.26948 -0.0061728 8.99588 0.187445 8.84079L1.48622 7.80047C1.44502 7.53946 1.42366 7.27223 1.42366 7.00025C1.42366 6.72818 1.44503 6.46089 1.48625 6.19981L0.187445 5.15946C-0.00617262 5.00437 -0.0568016 4.73077 0.0684982 4.51667L1.26301 2.47558C1.38364 2.26947 1.63317 2.17743 1.85874 2.25585L3.52566 2.83538C3.96358 2.5019 4.45527 2.23007 4.98632 2.03365L5.28607 0.409265C5.32984 0.172121 5.53663 0 5.77778 0H8.22223C8.46337 0 8.67017 0.172121 8.71393 0.409265ZM6.99986 9.41584C8.37352 9.41584 9.48709 8.33452 9.48709 7.00065C9.48709 5.66677 8.37352 4.58545 6.99986 4.58545C5.6262 4.58545 4.51264 5.66677 4.51264 7.00065C4.51264 8.33452 5.6262 9.41584 6.99986 9.41584Z",
|
|
86
|
+
fill: "#E2E2E2"
|
|
87
|
+
})
|
|
36
88
|
})
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
89
|
+
})
|
|
90
|
+
]
|
|
91
|
+
}),
|
|
92
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
93
|
+
width: "82",
|
|
94
|
+
height: "8",
|
|
95
|
+
viewBox: "0 0 82 8",
|
|
96
|
+
fill: "none",
|
|
97
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
98
|
+
children: [
|
|
99
|
+
/*#__PURE__*/ jsx("rect", {
|
|
100
|
+
width: "22",
|
|
101
|
+
height: "8",
|
|
102
|
+
rx: "3",
|
|
103
|
+
fill: "#E1E1E1"
|
|
104
|
+
}),
|
|
105
|
+
/*#__PURE__*/ jsx("rect", {
|
|
106
|
+
x: "30",
|
|
107
|
+
width: "22",
|
|
108
|
+
height: "8",
|
|
109
|
+
rx: "3",
|
|
110
|
+
fill: "#E1E1E1"
|
|
111
|
+
}),
|
|
112
|
+
/*#__PURE__*/ jsx("rect", {
|
|
113
|
+
x: "60",
|
|
114
|
+
width: "22",
|
|
115
|
+
height: "8",
|
|
116
|
+
rx: "3",
|
|
117
|
+
fill: "#E1E1E1"
|
|
118
|
+
})
|
|
119
|
+
]
|
|
120
|
+
})
|
|
121
|
+
]
|
|
41
122
|
});
|
|
42
123
|
};
|
|
43
124
|
|
|
@@ -1,43 +1,96 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useShopStore, cls } from '@gem-sdk/core';
|
|
3
3
|
|
|
4
4
|
const Header = ()=>{
|
|
5
5
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
6
|
-
return /*#__PURE__*/
|
|
7
|
-
className: cls('flex h-
|
|
6
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
7
|
+
className: cls('gp-header-container flex h-[40px] items-center justify-between border-b border-1 border-[#EEEEEE] group relative px-[68px]', {
|
|
8
8
|
hidden: !layoutSetting?.showHeader
|
|
9
9
|
}),
|
|
10
|
-
children:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
10
|
+
children: [
|
|
11
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
12
|
+
width: "84",
|
|
13
|
+
height: "8",
|
|
14
|
+
viewBox: "0 0 84 8",
|
|
15
|
+
fill: "none",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
+
children: [
|
|
18
|
+
/*#__PURE__*/ jsx("rect", {
|
|
19
|
+
width: "22",
|
|
20
|
+
height: "8",
|
|
21
|
+
rx: "3",
|
|
22
|
+
fill: "#9E9E9E"
|
|
23
|
+
}),
|
|
24
|
+
/*#__PURE__*/ jsx("rect", {
|
|
25
|
+
x: "28",
|
|
26
|
+
width: "56",
|
|
27
|
+
height: "8",
|
|
28
|
+
rx: "3",
|
|
29
|
+
fill: "#E1E1E1"
|
|
30
|
+
})
|
|
31
|
+
]
|
|
32
|
+
}),
|
|
33
|
+
/*#__PURE__*/ jsxs("div", {
|
|
34
|
+
className: "gp-header invisible flex h-[32px] cursor-pointer items-center justify-center rounded bg-[#151617] p-[4px] group-hover:visible absolute left-1/2 -translate-x-1/2",
|
|
35
|
+
children: [
|
|
36
|
+
/*#__PURE__*/ jsx("div", {
|
|
37
|
+
className: "flex items-center pl-[4px] pr-[8px] py-[3px]",
|
|
38
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
39
|
+
className: "text-[12px] leading-[150%] text-[#E2E2E2]",
|
|
40
|
+
children: "Shopify theme’s header"
|
|
36
41
|
})
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ jsx("div", {
|
|
44
|
+
className: "border-r border-1 border-[#D6D6D6] h-full mx-[4px] opacity-10"
|
|
45
|
+
}),
|
|
46
|
+
/*#__PURE__*/ jsx("div", {
|
|
47
|
+
className: "h-[24px] w-[24px] flex items-center justify-center",
|
|
48
|
+
children: /*#__PURE__*/ jsx("svg", {
|
|
49
|
+
width: "14",
|
|
50
|
+
height: "14",
|
|
51
|
+
viewBox: "0 0 14 14",
|
|
52
|
+
fill: "none",
|
|
53
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
54
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
55
|
+
fillRule: "evenodd",
|
|
56
|
+
clipRule: "evenodd",
|
|
57
|
+
d: "M8.71393 0.409265L9.01371 2.03382C9.54464 2.23024 10.0362 2.50205 10.4741 2.83548L12.1413 2.25585C12.3668 2.17743 12.6164 2.26947 12.737 2.47558L13.9315 4.51667C14.0568 4.73077 14.0062 5.00437 13.8126 5.15946L12.5134 6.2001C12.5546 6.46109 12.5759 6.72829 12.5759 7.00025C12.5759 7.27213 12.5546 7.53925 12.5134 7.80017L13.8126 8.84079C14.0062 8.99588 14.0568 9.26948 13.9315 9.48358L12.737 11.5247C12.6164 11.7308 12.3668 11.8228 12.1413 11.7444L10.4743 11.1648C10.0364 11.4984 9.5447 11.7702 9.01367 11.9667L8.71393 13.591C8.67017 13.8281 8.46337 14.0003 8.22223 14.0003H5.77778C5.53663 14.0003 5.32984 13.8281 5.28607 13.591L4.98636 11.9669C4.45521 11.7704 3.96343 11.4985 3.52544 11.1649L1.85874 11.7444C1.63317 11.8228 1.38363 11.7308 1.26301 11.5247L0.0684979 9.48358C-0.0568018 9.26948 -0.0061728 8.99588 0.187445 8.84079L1.48622 7.80047C1.44502 7.53946 1.42366 7.27223 1.42366 7.00025C1.42366 6.72818 1.44503 6.46089 1.48625 6.19981L0.187445 5.15946C-0.00617262 5.00437 -0.0568016 4.73077 0.0684982 4.51667L1.26301 2.47558C1.38364 2.26947 1.63317 2.17743 1.85874 2.25585L3.52566 2.83538C3.96358 2.5019 4.45527 2.23007 4.98632 2.03365L5.28607 0.409265C5.32984 0.172121 5.53663 0 5.77778 0H8.22223C8.46337 0 8.67017 0.172121 8.71393 0.409265ZM6.99986 9.41584C8.37352 9.41584 9.48709 8.33452 9.48709 7.00065C9.48709 5.66677 8.37352 4.58545 6.99986 4.58545C5.6262 4.58545 4.51264 5.66677 4.51264 7.00065C4.51264 8.33452 5.6262 9.41584 6.99986 9.41584Z",
|
|
58
|
+
fill: "#E2E2E2"
|
|
59
|
+
})
|
|
60
|
+
})
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
}),
|
|
64
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
65
|
+
width: "192",
|
|
66
|
+
height: "8",
|
|
67
|
+
viewBox: "0 0 192 8",
|
|
68
|
+
fill: "none",
|
|
69
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ jsx("rect", {
|
|
72
|
+
width: "56",
|
|
73
|
+
height: "8",
|
|
74
|
+
rx: "3",
|
|
75
|
+
fill: "#E1E1E1"
|
|
76
|
+
}),
|
|
77
|
+
/*#__PURE__*/ jsx("rect", {
|
|
78
|
+
x: "68",
|
|
79
|
+
width: "56",
|
|
80
|
+
height: "8",
|
|
81
|
+
rx: "3",
|
|
82
|
+
fill: "#E1E1E1"
|
|
83
|
+
}),
|
|
84
|
+
/*#__PURE__*/ jsx("rect", {
|
|
85
|
+
x: "136",
|
|
86
|
+
width: "56",
|
|
87
|
+
height: "8",
|
|
88
|
+
rx: "3",
|
|
89
|
+
fill: "#E1E1E1"
|
|
90
|
+
})
|
|
91
|
+
]
|
|
92
|
+
})
|
|
93
|
+
]
|
|
41
94
|
});
|
|
42
95
|
};
|
|
43
96
|
|