@cntrl-site/sdk 1.25.3 → 1.25.4
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/LICENSE +21 -21
- package/README.md +2 -2
- package/lib/FontFaceGenerator/FontFaceGenerator.js +6 -6
- package/lib/schemas/article/Item.schema.js +7 -14
- package/lib/schemas/article/RichTextItem.schema.d.ts +0 -5
- package/lib/schemas/article/RichTextItem.schema.js +1 -2
- package/lib/types/article/Item.d.ts +0 -9
- package/lib/utils.js +2 -2
- package/package.json +62 -62
- package/resources/template.scss.ejs +50 -50
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 CNTRL
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 CNTRL
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
# CNTRL SDK
|
|
2
|
-
This is a root SDK module for CNTRL. Should be used along with other framework-specific modules like `@cntrl-site/sdk-react`
|
|
1
|
+
# CNTRL SDK
|
|
2
|
+
This is a root SDK module for CNTRL. Should be used along with other framework-specific modules like `@cntrl-site/sdk-react`
|
|
@@ -15,12 +15,12 @@ class FontFaceGenerator {
|
|
|
15
15
|
const otherFiles = font.files
|
|
16
16
|
.filter(file => file.type !== 'eot')
|
|
17
17
|
.map(file => `url('${file.url}') format('${FILE_TYPES_MAP[file.type] || file.type}')`);
|
|
18
|
-
return `
|
|
19
|
-
@font-face {
|
|
20
|
-
font-family: "${font.name}";
|
|
21
|
-
font-weight: ${font.weight};
|
|
22
|
-
font-style: ${font.style};
|
|
23
|
-
${eotFile ? `src: url('${eotFile.url}');\n ` : ''}src: ${otherFiles.join(', ')};
|
|
18
|
+
return `
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: "${font.name}";
|
|
21
|
+
font-weight: ${font.weight};
|
|
22
|
+
font-style: ${font.style};
|
|
23
|
+
${eotFile ? `src: url('${eotFile.url}');\n ` : ''}src: ${otherFiles.join(', ')};
|
|
24
24
|
}`;
|
|
25
25
|
}).join('\n');
|
|
26
26
|
}
|
|
@@ -47,8 +47,7 @@ const ImageItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
47
47
|
strokeWidth: zod_1.z.number(),
|
|
48
48
|
strokeFill: zod_1.z.array(FillLayer_schema_1.FillLayerSchema),
|
|
49
49
|
blur: zod_1.z.number(),
|
|
50
|
-
isDraggable: zod_1.z.boolean().optional()
|
|
51
|
-
blendMode: zod_1.z.string().optional()
|
|
50
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
52
51
|
})),
|
|
53
52
|
state: zod_1.z.record(ItemState_schema_1.MediaStateParamsSchema)
|
|
54
53
|
});
|
|
@@ -73,7 +72,6 @@ const VideoItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
73
72
|
strokeFill: zod_1.z.array(FillLayer_schema_1.FillLayerSchema),
|
|
74
73
|
blur: zod_1.z.number(),
|
|
75
74
|
isDraggable: zod_1.z.boolean().optional(),
|
|
76
|
-
blendMode: zod_1.z.string().optional(),
|
|
77
75
|
play: zod_1.z.enum(['on-hover', 'on-click', 'auto']),
|
|
78
76
|
muted: zod_1.z.boolean(),
|
|
79
77
|
controls: zod_1.z.boolean(),
|
|
@@ -98,8 +96,7 @@ const RectangleItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
98
96
|
blur: zod_1.z.number(),
|
|
99
97
|
backdropBlur: zod_1.z.number(),
|
|
100
98
|
blurMode: zod_1.z.enum(['default', 'backdrop']),
|
|
101
|
-
isDraggable: zod_1.z.boolean().optional()
|
|
102
|
-
blendMode: zod_1.z.string().optional()
|
|
99
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
103
100
|
})),
|
|
104
101
|
state: zod_1.z.record(ItemState_schema_1.RectangleStateParamsSchema)
|
|
105
102
|
});
|
|
@@ -114,8 +111,7 @@ const CustomItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
114
111
|
to: zod_1.z.number().optional()
|
|
115
112
|
}).nullable()),
|
|
116
113
|
layoutParams: zod_1.z.record(zod_1.z.object({
|
|
117
|
-
isDraggable: zod_1.z.boolean().optional()
|
|
118
|
-
blendMode: zod_1.z.string().optional()
|
|
114
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
119
115
|
})),
|
|
120
116
|
state: zod_1.z.record(ItemState_schema_1.CustomItemStateParamsSchema)
|
|
121
117
|
});
|
|
@@ -139,8 +135,7 @@ const VimeoEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
139
135
|
controls: zod_1.z.boolean(),
|
|
140
136
|
loop: zod_1.z.boolean(),
|
|
141
137
|
muted: zod_1.z.boolean(),
|
|
142
|
-
pictureInPicture: zod_1.z.boolean()
|
|
143
|
-
blendMode: zod_1.z.string().optional()
|
|
138
|
+
pictureInPicture: zod_1.z.boolean()
|
|
144
139
|
})),
|
|
145
140
|
state: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
|
|
146
141
|
});
|
|
@@ -162,7 +157,6 @@ const YoutubeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
162
157
|
play: zod_1.z.enum(['on-hover', 'on-click', 'auto']),
|
|
163
158
|
controls: zod_1.z.boolean(),
|
|
164
159
|
loop: zod_1.z.boolean(),
|
|
165
|
-
blendMode: zod_1.z.string().optional()
|
|
166
160
|
})),
|
|
167
161
|
state: zod_1.z.record(ItemState_schema_1.EmbedStateParamsSchema)
|
|
168
162
|
});
|
|
@@ -182,8 +176,7 @@ const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
182
176
|
areaAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor),
|
|
183
177
|
opacity: zod_1.z.number().nonnegative(),
|
|
184
178
|
blur: zod_1.z.number(),
|
|
185
|
-
isDraggable: zod_1.z.boolean().optional()
|
|
186
|
-
blendMode: zod_1.z.string().optional()
|
|
179
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
187
180
|
})),
|
|
188
181
|
state: zod_1.z.record(ItemState_schema_1.CodeEmbedStateParamsSchema)
|
|
189
182
|
});
|
|
@@ -227,7 +220,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
|
|
|
227
220
|
layoutParams: zod_1.z.record(zod_1.z.object({
|
|
228
221
|
opacity: zod_1.z.number().nonnegative(),
|
|
229
222
|
blur: zod_1.z.number(),
|
|
230
|
-
|
|
223
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
231
224
|
})),
|
|
232
225
|
state: zod_1.z.record(ItemState_schema_1.GroupStateParamsSchema)
|
|
233
226
|
}),
|
|
@@ -244,7 +237,7 @@ exports.ItemSchema = zod_1.z.lazy(() => zod_1.z.discriminatedUnion('type', [
|
|
|
244
237
|
}).nullable()),
|
|
245
238
|
layoutParams: zod_1.z.record(zod_1.z.object({
|
|
246
239
|
opacity: zod_1.z.number().nonnegative(),
|
|
247
|
-
|
|
240
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
248
241
|
})),
|
|
249
242
|
state: zod_1.z.record(ItemState_schema_1.CompoundStateParamsSchema)
|
|
250
243
|
})
|
|
@@ -150,7 +150,6 @@ export declare const RichTextItemSchema: z.ZodObject<{
|
|
|
150
150
|
fontWeight: z.ZodNumber;
|
|
151
151
|
fontVariant: z.ZodString;
|
|
152
152
|
isDraggable: z.ZodOptional<z.ZodBoolean>;
|
|
153
|
-
blendMode: z.ZodOptional<z.ZodString>;
|
|
154
153
|
}, "strip", z.ZodTypeAny, {
|
|
155
154
|
color: string;
|
|
156
155
|
letterSpacing: number;
|
|
@@ -173,7 +172,6 @@ export declare const RichTextItemSchema: z.ZodObject<{
|
|
|
173
172
|
value?: string | undefined;
|
|
174
173
|
}[] | undefined;
|
|
175
174
|
isDraggable?: boolean | undefined;
|
|
176
|
-
blendMode?: string | undefined;
|
|
177
175
|
}, {
|
|
178
176
|
color: string;
|
|
179
177
|
letterSpacing: number;
|
|
@@ -196,7 +194,6 @@ export declare const RichTextItemSchema: z.ZodObject<{
|
|
|
196
194
|
value?: string | undefined;
|
|
197
195
|
}[] | undefined;
|
|
198
196
|
isDraggable?: boolean | undefined;
|
|
199
|
-
blendMode?: string | undefined;
|
|
200
197
|
}>>;
|
|
201
198
|
state: z.ZodRecord<z.ZodString, z.ZodObject<{
|
|
202
199
|
color: z.ZodOptional<z.ZodObject<{
|
|
@@ -1030,7 +1027,6 @@ export declare const RichTextItemSchema: z.ZodObject<{
|
|
|
1030
1027
|
value?: string | undefined;
|
|
1031
1028
|
}[] | undefined;
|
|
1032
1029
|
isDraggable?: boolean | undefined;
|
|
1033
|
-
blendMode?: string | undefined;
|
|
1034
1030
|
}>;
|
|
1035
1031
|
commonParams: {
|
|
1036
1032
|
text: string;
|
|
@@ -1220,7 +1216,6 @@ export declare const RichTextItemSchema: z.ZodObject<{
|
|
|
1220
1216
|
value?: string | undefined;
|
|
1221
1217
|
}[] | undefined;
|
|
1222
1218
|
isDraggable?: boolean | undefined;
|
|
1223
|
-
blendMode?: string | undefined;
|
|
1224
1219
|
}>;
|
|
1225
1220
|
commonParams: {
|
|
1226
1221
|
text: string;
|
|
@@ -54,8 +54,7 @@ exports.RichTextItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
|
|
|
54
54
|
fontStyle: zod_1.z.string(),
|
|
55
55
|
fontWeight: zod_1.z.number(),
|
|
56
56
|
fontVariant: zod_1.z.string(),
|
|
57
|
-
isDraggable: zod_1.z.boolean().optional()
|
|
58
|
-
blendMode: zod_1.z.string().optional()
|
|
57
|
+
isDraggable: zod_1.z.boolean().optional()
|
|
59
58
|
})),
|
|
60
59
|
state: zod_1.z.record(ItemState_schema_1.RichTextStateParamsSchema)
|
|
61
60
|
});
|
|
@@ -97,29 +97,24 @@ interface MediaLayoutParams {
|
|
|
97
97
|
strokeFill: FillLayer[];
|
|
98
98
|
blur: number;
|
|
99
99
|
isDraggable?: boolean;
|
|
100
|
-
blendMode?: string;
|
|
101
100
|
}
|
|
102
101
|
interface CustomLayoutParams {
|
|
103
102
|
isDraggable?: boolean;
|
|
104
|
-
blendMode?: string;
|
|
105
103
|
}
|
|
106
104
|
interface GroupLayoutParams {
|
|
107
105
|
opacity: number;
|
|
108
106
|
blur: number;
|
|
109
107
|
isDraggable?: boolean;
|
|
110
|
-
blendMode?: string;
|
|
111
108
|
}
|
|
112
109
|
interface CompoundLayoutParams {
|
|
113
110
|
opacity: number;
|
|
114
111
|
isDraggable?: boolean;
|
|
115
|
-
blendMode?: string;
|
|
116
112
|
}
|
|
117
113
|
interface CodeEmbedLayoutParams {
|
|
118
114
|
areaAnchor: AreaAnchor;
|
|
119
115
|
opacity: number;
|
|
120
116
|
blur: number;
|
|
121
117
|
isDraggable?: boolean;
|
|
122
|
-
blendMode?: string;
|
|
123
118
|
}
|
|
124
119
|
interface VimeoEmbedLayoutParams {
|
|
125
120
|
play: 'on-hover' | 'on-click' | 'auto';
|
|
@@ -130,7 +125,6 @@ interface VimeoEmbedLayoutParams {
|
|
|
130
125
|
radius: number;
|
|
131
126
|
blur: number;
|
|
132
127
|
opacity: number;
|
|
133
|
-
blendMode?: string;
|
|
134
128
|
}
|
|
135
129
|
interface YoutubeEmbedLayoutParams {
|
|
136
130
|
play: 'on-hover' | 'on-click' | 'auto';
|
|
@@ -139,7 +133,6 @@ interface YoutubeEmbedLayoutParams {
|
|
|
139
133
|
radius: number;
|
|
140
134
|
blur: number;
|
|
141
135
|
opacity: number;
|
|
142
|
-
blendMode?: string;
|
|
143
136
|
}
|
|
144
137
|
interface ImageLayoutParams extends MediaLayoutParams {
|
|
145
138
|
}
|
|
@@ -166,7 +159,6 @@ interface RichTextLayoutParams {
|
|
|
166
159
|
fontWeight: number;
|
|
167
160
|
fontVariant: string;
|
|
168
161
|
isDraggable?: boolean;
|
|
169
|
-
blendMode?: string;
|
|
170
162
|
}
|
|
171
163
|
interface RectangleLayoutParams {
|
|
172
164
|
radius: number;
|
|
@@ -177,7 +169,6 @@ interface RectangleLayoutParams {
|
|
|
177
169
|
backdropBlur: number;
|
|
178
170
|
blurMode: 'default' | 'backdrop';
|
|
179
171
|
isDraggable?: boolean;
|
|
180
|
-
blendMode?: string;
|
|
181
172
|
}
|
|
182
173
|
export type FillLayer = SolidFillLayer | LinearGradientFillLayer | RadialGradientFillLayer | ConicGradientFillLayer | ImageLayer;
|
|
183
174
|
type ColorPoint = {
|
package/lib/utils.js
CHANGED
|
@@ -8,8 +8,8 @@ function getLayoutStyles(layouts, layoutValues, mapToStyles) {
|
|
|
8
8
|
.sort((a, b) => a.startsWith - b.startsWith)
|
|
9
9
|
.reduce((acc, layout) => {
|
|
10
10
|
const values = layoutValues.map(lv => lv[layout.id]);
|
|
11
|
-
return `
|
|
12
|
-
${acc}
|
|
11
|
+
return `
|
|
12
|
+
${acc}
|
|
13
13
|
${layout.startsWith !== 0
|
|
14
14
|
? `@media (min-width: ${layout.startsWith}px) {${mapToStyles(values, layout.exemplary)}}`
|
|
15
15
|
: `${mapToStyles(values, layout.exemplary)}`}`;
|
package/package.json
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@cntrl-site/sdk",
|
|
3
|
-
"version": "1.25.
|
|
4
|
-
"description": "Generic SDK for use in public websites.",
|
|
5
|
-
"main": "lib/index.js",
|
|
6
|
-
"types": "lib/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"test": "jest",
|
|
9
|
-
"prebuild": "rimraf ./lib",
|
|
10
|
-
"build": "tsc --project tsconfig.build.json",
|
|
11
|
-
"prepublishOnly": "cross-env NODE_ENV=production npm run build"
|
|
12
|
-
},
|
|
13
|
-
"bin": {
|
|
14
|
-
"cntrl-sdk": "lib/cli.js"
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"lib",
|
|
18
|
-
"resources"
|
|
19
|
-
],
|
|
20
|
-
"repository": {
|
|
21
|
-
"type": "git",
|
|
22
|
-
"url": "git+https://github.com/cntrl-site/sdk.git"
|
|
23
|
-
},
|
|
24
|
-
"author": "arsen@momdesign.nyc",
|
|
25
|
-
"license": "MIT",
|
|
26
|
-
"bugs": {
|
|
27
|
-
"url": "https://github.com/cntrl-site/sdk/issues"
|
|
28
|
-
},
|
|
29
|
-
"homepage": "https://github.com/cntrl-site/sdk#readme",
|
|
30
|
-
"directories": {
|
|
31
|
-
"lib": "lib"
|
|
32
|
-
},
|
|
33
|
-
"dependencies": {
|
|
34
|
-
"@splidejs/react-splide": "^0.7.12",
|
|
35
|
-
"@types/ejs": "^3.1.2",
|
|
36
|
-
"@types/isomorphic-fetch": "^0.0.36",
|
|
37
|
-
"@types/ua-parser-js": "^0.7.39",
|
|
38
|
-
"commander": "^10.0.1",
|
|
39
|
-
"dotenv": "^16.1.3",
|
|
40
|
-
"ejs": "^3.1.9",
|
|
41
|
-
"isomorphic-fetch": "^3.0.0",
|
|
42
|
-
"mp4box": "^0.5.2",
|
|
43
|
-
"styled-jsx": "^5.1.6",
|
|
44
|
-
"ts-node": "^10.9.1",
|
|
45
|
-
"ua-parser-js": "^1.0.37",
|
|
46
|
-
"url": "^0.11.0",
|
|
47
|
-
"zod": "^3.22.4"
|
|
48
|
-
},
|
|
49
|
-
"devDependencies": {
|
|
50
|
-
"@tsconfig/node16": "^1.0.3",
|
|
51
|
-
"@tsconfig/recommended": "^1.0.1",
|
|
52
|
-
"@types/jest": "^29.0.0",
|
|
53
|
-
"@types/node": "^18.11.7",
|
|
54
|
-
"@types/react": "^18.2.0",
|
|
55
|
-
"@types/react-dom": "^18.2.0",
|
|
56
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
57
|
-
"cross-env": "^10.1.0",
|
|
58
|
-
"jest": "^28.1.3",
|
|
59
|
-
"ts-jest": "^28.0.8",
|
|
60
|
-
"typescript": "^5.2.2"
|
|
61
|
-
}
|
|
62
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@cntrl-site/sdk",
|
|
3
|
+
"version": "1.25.4",
|
|
4
|
+
"description": "Generic SDK for use in public websites.",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"types": "lib/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"test": "jest",
|
|
9
|
+
"prebuild": "rimraf ./lib",
|
|
10
|
+
"build": "tsc --project tsconfig.build.json",
|
|
11
|
+
"prepublishOnly": "cross-env NODE_ENV=production npm run build"
|
|
12
|
+
},
|
|
13
|
+
"bin": {
|
|
14
|
+
"cntrl-sdk": "lib/cli.js"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"lib",
|
|
18
|
+
"resources"
|
|
19
|
+
],
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/cntrl-site/sdk.git"
|
|
23
|
+
},
|
|
24
|
+
"author": "arsen@momdesign.nyc",
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"bugs": {
|
|
27
|
+
"url": "https://github.com/cntrl-site/sdk/issues"
|
|
28
|
+
},
|
|
29
|
+
"homepage": "https://github.com/cntrl-site/sdk#readme",
|
|
30
|
+
"directories": {
|
|
31
|
+
"lib": "lib"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@splidejs/react-splide": "^0.7.12",
|
|
35
|
+
"@types/ejs": "^3.1.2",
|
|
36
|
+
"@types/isomorphic-fetch": "^0.0.36",
|
|
37
|
+
"@types/ua-parser-js": "^0.7.39",
|
|
38
|
+
"commander": "^10.0.1",
|
|
39
|
+
"dotenv": "^16.1.3",
|
|
40
|
+
"ejs": "^3.1.9",
|
|
41
|
+
"isomorphic-fetch": "^3.0.0",
|
|
42
|
+
"mp4box": "^0.5.2",
|
|
43
|
+
"styled-jsx": "^5.1.6",
|
|
44
|
+
"ts-node": "^10.9.1",
|
|
45
|
+
"ua-parser-js": "^1.0.37",
|
|
46
|
+
"url": "^0.11.0",
|
|
47
|
+
"zod": "^3.22.4"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@tsconfig/node16": "^1.0.3",
|
|
51
|
+
"@tsconfig/recommended": "^1.0.1",
|
|
52
|
+
"@types/jest": "^29.0.0",
|
|
53
|
+
"@types/node": "^18.11.7",
|
|
54
|
+
"@types/react": "^18.2.0",
|
|
55
|
+
"@types/react-dom": "^18.2.0",
|
|
56
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
57
|
+
"cross-env": "^10.1.0",
|
|
58
|
+
"jest": "^28.1.3",
|
|
59
|
+
"ts-jest": "^28.0.8",
|
|
60
|
+
"typescript": "^5.2.2"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
|
|
2
|
-
// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
|
|
3
|
-
// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
|
|
4
|
-
@use "sass:map";
|
|
5
|
-
|
|
6
|
-
$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %>;
|
|
7
|
-
|
|
8
|
-
$layout: (
|
|
9
|
-
<% ranges.forEach(function(range) { %>
|
|
10
|
-
<%= range.name %>: (
|
|
11
|
-
start: <%= range.start %>,
|
|
12
|
-
end: <%= range.end %>,
|
|
13
|
-
exemplary: <%= range.exemplary %>,
|
|
14
|
-
isFirst: <%= range.isFirst %>,
|
|
15
|
-
isLast: <%= range.isLast %>
|
|
16
|
-
),
|
|
17
|
-
<% }); %>
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
@function size($value) {
|
|
21
|
-
@return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin for($name) {
|
|
25
|
-
$start: map.get(map.get($layout, $name), "start");
|
|
26
|
-
$end: map.get(map.get($layout, $name), "end");
|
|
27
|
-
$isFirst: map.get(map.get($layout, $name), "isFirst");
|
|
28
|
-
$isLast: map.get(map.get($layout, $name), "isLast");
|
|
29
|
-
$exemplary: map.get(map.get($layout, $name), "exemplary");
|
|
30
|
-
$__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
|
|
31
|
-
|
|
32
|
-
@if $isFirst == true and $isLast == true {
|
|
33
|
-
@content;
|
|
34
|
-
} @else if $isFirst == true {
|
|
35
|
-
@media (max-width: #{$end}px) {
|
|
36
|
-
@content;
|
|
37
|
-
}
|
|
38
|
-
} @else if $isLast == true {
|
|
39
|
-
@media (min-width: #{$start}px) {
|
|
40
|
-
@content;
|
|
41
|
-
}
|
|
42
|
-
} @else {
|
|
43
|
-
@media (min-width: #{$start}px) and (max-width: #{$end}px) {
|
|
44
|
-
@content;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// reset global variable back to first layout's exemplary (mobile-first)
|
|
49
|
-
$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %> !global;
|
|
50
|
-
}
|
|
1
|
+
// CAUTION: THIS FILE IS AUTO-GENERATED BASED ON
|
|
2
|
+
// LAYOUT CONFIGURATION IN YOUR CNTRL PROJECT
|
|
3
|
+
// WE HIGHLY ADVICE YOU TO NOT CHANGE IT MANUALLY
|
|
4
|
+
@use "sass:map";
|
|
5
|
+
|
|
6
|
+
$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %>;
|
|
7
|
+
|
|
8
|
+
$layout: (
|
|
9
|
+
<% ranges.forEach(function(range) { %>
|
|
10
|
+
<%= range.name %>: (
|
|
11
|
+
start: <%= range.start %>,
|
|
12
|
+
end: <%= range.end %>,
|
|
13
|
+
exemplary: <%= range.exemplary %>,
|
|
14
|
+
isFirst: <%= range.isFirst %>,
|
|
15
|
+
isLast: <%= range.isLast %>
|
|
16
|
+
),
|
|
17
|
+
<% }); %>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
@function size($value) {
|
|
21
|
+
@return #{$value/$__CNTRL_LAYOUT_WIDTH__*100}vw;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@mixin for($name) {
|
|
25
|
+
$start: map.get(map.get($layout, $name), "start");
|
|
26
|
+
$end: map.get(map.get($layout, $name), "end");
|
|
27
|
+
$isFirst: map.get(map.get($layout, $name), "isFirst");
|
|
28
|
+
$isLast: map.get(map.get($layout, $name), "isLast");
|
|
29
|
+
$exemplary: map.get(map.get($layout, $name), "exemplary");
|
|
30
|
+
$__CNTRL_LAYOUT_WIDTH__: $exemplary !global;
|
|
31
|
+
|
|
32
|
+
@if $isFirst == true and $isLast == true {
|
|
33
|
+
@content;
|
|
34
|
+
} @else if $isFirst == true {
|
|
35
|
+
@media (max-width: #{$end}px) {
|
|
36
|
+
@content;
|
|
37
|
+
}
|
|
38
|
+
} @else if $isLast == true {
|
|
39
|
+
@media (min-width: #{$start}px) {
|
|
40
|
+
@content;
|
|
41
|
+
}
|
|
42
|
+
} @else {
|
|
43
|
+
@media (min-width: #{$start}px) and (max-width: #{$end}px) {
|
|
44
|
+
@content;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// reset global variable back to first layout's exemplary (mobile-first)
|
|
49
|
+
$__CNTRL_LAYOUT_WIDTH__: <%= ranges[0].exemplary %> !global;
|
|
50
|
+
}
|