@azuro-org/images-generator 1.3.7 → 1.3.9
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/templates/trendle-social/index.d.ts +1 -0
- package/dist/templates/trendle-social/index.html +46 -26
- package/dist/templates/trendle-social/index.js +9 -6
- package/dist/templates/trendle-trading/images/bg.png +0 -0
- package/dist/templates/trendle-trading/index.html +1 -0
- package/lib/templates/trendle-social/index.d.ts +1 -0
- package/lib/templates/trendle-social/index.html +46 -26
- package/lib/templates/trendle-social/index.js +9 -6
- package/lib/templates/trendle-trading/images/bg.png +0 -0
- package/lib/templates/trendle-trading/index.html +1 -0
- package/package.json +1 -1
|
@@ -127,17 +127,18 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.card {
|
|
130
|
-
width:
|
|
131
|
-
height:
|
|
132
|
-
padding-top:
|
|
130
|
+
width: 850px;
|
|
131
|
+
height: 1060px;
|
|
132
|
+
padding-top: 260px;
|
|
133
133
|
position: relative;
|
|
134
|
+
z-index: 1;
|
|
134
135
|
}
|
|
135
136
|
|
|
136
137
|
.bg {
|
|
137
138
|
position: absolute;
|
|
138
139
|
mix-blend-mode: difference;
|
|
139
|
-
top:
|
|
140
|
-
left:
|
|
140
|
+
top: 0px;
|
|
141
|
+
left: 0px;
|
|
141
142
|
width: 100%;
|
|
142
143
|
height: 100%;
|
|
143
144
|
}
|
|
@@ -145,18 +146,18 @@
|
|
|
145
146
|
.bottom-img {
|
|
146
147
|
position: absolute;
|
|
147
148
|
mix-blend-mode: multiply;
|
|
148
|
-
bottom:
|
|
149
|
-
left:
|
|
149
|
+
bottom: 0px;
|
|
150
|
+
left: 0px;
|
|
150
151
|
width: 100%;
|
|
151
152
|
}
|
|
152
153
|
|
|
153
154
|
.avatar {
|
|
154
|
-
width:
|
|
155
|
-
height:
|
|
155
|
+
width: 300px;
|
|
156
|
+
height: 300px;
|
|
156
157
|
border-radius: 100%;
|
|
157
|
-
border:
|
|
158
|
+
border: 3.5px solid white;
|
|
158
159
|
overflow: hidden;
|
|
159
|
-
margin:
|
|
160
|
+
margin: 40px auto 0;
|
|
160
161
|
position: relative;
|
|
161
162
|
z-index: 10;
|
|
162
163
|
}
|
|
@@ -168,36 +169,55 @@
|
|
|
168
169
|
.username {
|
|
169
170
|
background-color: #111;
|
|
170
171
|
color: #fff;
|
|
171
|
-
padding:
|
|
172
|
-
margin: -
|
|
172
|
+
padding: 8px 20px 13px;
|
|
173
|
+
margin: -14px auto 0;
|
|
173
174
|
width: fit-content;
|
|
174
175
|
position: relative;
|
|
175
176
|
z-index: 10;
|
|
176
|
-
font-size:
|
|
177
|
+
font-size: 36px;
|
|
177
178
|
line-height: 100%;
|
|
178
179
|
font-weight: 400;
|
|
179
180
|
}
|
|
180
181
|
|
|
181
182
|
.stamp-img {
|
|
182
|
-
width:
|
|
183
|
-
height:
|
|
183
|
+
width: 240px;
|
|
184
|
+
height: 240px;
|
|
184
185
|
position: absolute;
|
|
185
|
-
top:
|
|
186
|
-
right:
|
|
186
|
+
top: 270px;
|
|
187
|
+
right: 140px;
|
|
187
188
|
z-index: 20;
|
|
188
189
|
}
|
|
190
|
+
|
|
191
|
+
.wrapper {
|
|
192
|
+
width: --wrapper-width;
|
|
193
|
+
position: relative;
|
|
194
|
+
background: #393939;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.wrapper__img {
|
|
198
|
+
position: absolute;
|
|
199
|
+
display: block;
|
|
200
|
+
top: 0;
|
|
201
|
+
left: 50%;
|
|
202
|
+
transform: translateX(-50%);
|
|
203
|
+
height: 100%;
|
|
204
|
+
mix-blend-mode: multiply;
|
|
205
|
+
}
|
|
189
206
|
</style>
|
|
190
207
|
</head>
|
|
191
208
|
<body>
|
|
192
|
-
<div class="
|
|
193
|
-
<img src="{
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<img src="{
|
|
209
|
+
<div class="wrapper flex justify-center">
|
|
210
|
+
<img src="{wrapperImg}" alt="" class="wrapper__img">
|
|
211
|
+
<div class="card">
|
|
212
|
+
<img src="{bgImg}" alt="" class="bg">
|
|
213
|
+
<img src="{bottomImg}" alt="" class="bottom-img">
|
|
214
|
+
<img src="{titleImg}" alt="" class="title-img">
|
|
215
|
+
<div class="avatar flex items-center justify-center">
|
|
216
|
+
<img src="{avatar}" alt="">
|
|
217
|
+
</div>
|
|
218
|
+
<img src="{stampImg}" alt="" class="stamp-img">
|
|
219
|
+
<div class="username geist-mono">{username}</div>
|
|
198
220
|
</div>
|
|
199
|
-
<img src="{stampImg}" alt="" class="stamp-img">
|
|
200
|
-
<div class="username geist-mono">{username}</div>
|
|
201
221
|
</div>
|
|
202
222
|
</body>
|
|
203
223
|
</html>
|
|
@@ -20,26 +20,29 @@ import {_ as __awaiter,a as __generator,g as getFile,b as getBase64Image,d as do
|
|
|
20
20
|
bgImg: 'images/bg-fomo.png',
|
|
21
21
|
},
|
|
22
22
|
};
|
|
23
|
+
// 2020
|
|
23
24
|
var template = {
|
|
24
25
|
width: 850,
|
|
25
26
|
height: 1060,
|
|
26
27
|
type: 'jpeg',
|
|
27
28
|
html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
|
|
28
|
-
var type, avatarUrl, username, _a, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
|
|
29
|
-
return __generator(this, function (
|
|
30
|
-
switch (
|
|
29
|
+
var type, avatarUrl, username, _a, isWide, _b, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
|
|
30
|
+
return __generator(this, function (_c) {
|
|
31
|
+
switch (_c.label) {
|
|
31
32
|
case 0:
|
|
32
|
-
type = props.type, avatarUrl = props.avatarUrl, username = props.username;
|
|
33
|
-
|
|
33
|
+
type = props.type, avatarUrl = props.avatarUrl, username = props.username, _a = props.isWide, isWide = _a === void 0 ? true : _a;
|
|
34
|
+
_b = cardTypes[type], bottomImg = _b.bottomImg, bgImg = _b.bgImg;
|
|
34
35
|
html = getFile(path.join(__dirname, 'index.html'));
|
|
35
36
|
stampImage = getBase64Image(path.resolve(__dirname, 'images/stamp.png'));
|
|
36
37
|
bottomImage = getBase64Image(path.resolve(__dirname, bottomImg));
|
|
37
38
|
bgImage = getBase64Image(path.resolve(__dirname, bgImg));
|
|
38
39
|
return [4 /*yield*/, downloadImage(avatarUrl)];
|
|
39
40
|
case 1:
|
|
40
|
-
avatarImage =
|
|
41
|
+
avatarImage = _c.sent();
|
|
41
42
|
return [2 /*return*/, html
|
|
43
|
+
.replace('--wrapper-width', "".concat(isWide ? 2020 : 850, "px"))
|
|
42
44
|
.replace('{bgImg}', bgImage)
|
|
45
|
+
.replace('{wrapperImg}', bottomImage)
|
|
43
46
|
.replace('{bottomImg}', bottomImage)
|
|
44
47
|
.replace('{stampImg}', stampImage)
|
|
45
48
|
.replace('{avatar}', avatarImage)
|
|
Binary file
|
|
@@ -127,17 +127,18 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.card {
|
|
130
|
-
width:
|
|
131
|
-
height:
|
|
132
|
-
padding-top:
|
|
130
|
+
width: 850px;
|
|
131
|
+
height: 1060px;
|
|
132
|
+
padding-top: 260px;
|
|
133
133
|
position: relative;
|
|
134
|
+
z-index: 1;
|
|
134
135
|
}
|
|
135
136
|
|
|
136
137
|
.bg {
|
|
137
138
|
position: absolute;
|
|
138
139
|
mix-blend-mode: difference;
|
|
139
|
-
top:
|
|
140
|
-
left:
|
|
140
|
+
top: 0px;
|
|
141
|
+
left: 0px;
|
|
141
142
|
width: 100%;
|
|
142
143
|
height: 100%;
|
|
143
144
|
}
|
|
@@ -145,18 +146,18 @@
|
|
|
145
146
|
.bottom-img {
|
|
146
147
|
position: absolute;
|
|
147
148
|
mix-blend-mode: multiply;
|
|
148
|
-
bottom:
|
|
149
|
-
left:
|
|
149
|
+
bottom: 0px;
|
|
150
|
+
left: 0px;
|
|
150
151
|
width: 100%;
|
|
151
152
|
}
|
|
152
153
|
|
|
153
154
|
.avatar {
|
|
154
|
-
width:
|
|
155
|
-
height:
|
|
155
|
+
width: 300px;
|
|
156
|
+
height: 300px;
|
|
156
157
|
border-radius: 100%;
|
|
157
|
-
border:
|
|
158
|
+
border: 3.5px solid white;
|
|
158
159
|
overflow: hidden;
|
|
159
|
-
margin:
|
|
160
|
+
margin: 40px auto 0;
|
|
160
161
|
position: relative;
|
|
161
162
|
z-index: 10;
|
|
162
163
|
}
|
|
@@ -168,36 +169,55 @@
|
|
|
168
169
|
.username {
|
|
169
170
|
background-color: #111;
|
|
170
171
|
color: #fff;
|
|
171
|
-
padding:
|
|
172
|
-
margin: -
|
|
172
|
+
padding: 8px 20px 13px;
|
|
173
|
+
margin: -14px auto 0;
|
|
173
174
|
width: fit-content;
|
|
174
175
|
position: relative;
|
|
175
176
|
z-index: 10;
|
|
176
|
-
font-size:
|
|
177
|
+
font-size: 36px;
|
|
177
178
|
line-height: 100%;
|
|
178
179
|
font-weight: 400;
|
|
179
180
|
}
|
|
180
181
|
|
|
181
182
|
.stamp-img {
|
|
182
|
-
width:
|
|
183
|
-
height:
|
|
183
|
+
width: 240px;
|
|
184
|
+
height: 240px;
|
|
184
185
|
position: absolute;
|
|
185
|
-
top:
|
|
186
|
-
right:
|
|
186
|
+
top: 270px;
|
|
187
|
+
right: 140px;
|
|
187
188
|
z-index: 20;
|
|
188
189
|
}
|
|
190
|
+
|
|
191
|
+
.wrapper {
|
|
192
|
+
width: --wrapper-width;
|
|
193
|
+
position: relative;
|
|
194
|
+
background: #393939;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.wrapper__img {
|
|
198
|
+
position: absolute;
|
|
199
|
+
display: block;
|
|
200
|
+
top: 0;
|
|
201
|
+
left: 50%;
|
|
202
|
+
transform: translateX(-50%);
|
|
203
|
+
height: 100%;
|
|
204
|
+
mix-blend-mode: multiply;
|
|
205
|
+
}
|
|
189
206
|
</style>
|
|
190
207
|
</head>
|
|
191
208
|
<body>
|
|
192
|
-
<div class="
|
|
193
|
-
<img src="{
|
|
194
|
-
<
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<img src="{
|
|
209
|
+
<div class="wrapper flex justify-center">
|
|
210
|
+
<img src="{wrapperImg}" alt="" class="wrapper__img">
|
|
211
|
+
<div class="card">
|
|
212
|
+
<img src="{bgImg}" alt="" class="bg">
|
|
213
|
+
<img src="{bottomImg}" alt="" class="bottom-img">
|
|
214
|
+
<img src="{titleImg}" alt="" class="title-img">
|
|
215
|
+
<div class="avatar flex items-center justify-center">
|
|
216
|
+
<img src="{avatar}" alt="">
|
|
217
|
+
</div>
|
|
218
|
+
<img src="{stampImg}" alt="" class="stamp-img">
|
|
219
|
+
<div class="username geist-mono">{username}</div>
|
|
198
220
|
</div>
|
|
199
|
-
<img src="{stampImg}" alt="" class="stamp-img">
|
|
200
|
-
<div class="username geist-mono">{username}</div>
|
|
201
221
|
</div>
|
|
202
222
|
</body>
|
|
203
223
|
</html>
|
|
@@ -20,26 +20,29 @@
|
|
|
20
20
|
bgImg: 'images/bg-fomo.png',
|
|
21
21
|
},
|
|
22
22
|
};
|
|
23
|
+
// 2020
|
|
23
24
|
var template = {
|
|
24
25
|
width: 850,
|
|
25
26
|
height: 1060,
|
|
26
27
|
type: 'jpeg',
|
|
27
28
|
html: function (props) { return index._(void 0, void 0, void 0, function () {
|
|
28
|
-
var type, avatarUrl, username, _a, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
|
|
29
|
-
return index.a(this, function (
|
|
30
|
-
switch (
|
|
29
|
+
var type, avatarUrl, username, _a, isWide, _b, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
|
|
30
|
+
return index.a(this, function (_c) {
|
|
31
|
+
switch (_c.label) {
|
|
31
32
|
case 0:
|
|
32
|
-
type = props.type, avatarUrl = props.avatarUrl, username = props.username;
|
|
33
|
-
|
|
33
|
+
type = props.type, avatarUrl = props.avatarUrl, username = props.username, _a = props.isWide, isWide = _a === void 0 ? true : _a;
|
|
34
|
+
_b = cardTypes[type], bottomImg = _b.bottomImg, bgImg = _b.bgImg;
|
|
34
35
|
html = index.g(path__default["default"].join(__dirname, 'index.html'));
|
|
35
36
|
stampImage = index.b(path__default["default"].resolve(__dirname, 'images/stamp.png'));
|
|
36
37
|
bottomImage = index.b(path__default["default"].resolve(__dirname, bottomImg));
|
|
37
38
|
bgImage = index.b(path__default["default"].resolve(__dirname, bgImg));
|
|
38
39
|
return [4 /*yield*/, index.d(avatarUrl)];
|
|
39
40
|
case 1:
|
|
40
|
-
avatarImage =
|
|
41
|
+
avatarImage = _c.sent();
|
|
41
42
|
return [2 /*return*/, html
|
|
43
|
+
.replace('--wrapper-width', "".concat(isWide ? 2020 : 850, "px"))
|
|
42
44
|
.replace('{bgImg}', bgImage)
|
|
45
|
+
.replace('{wrapperImg}', bottomImage)
|
|
43
46
|
.replace('{bottomImg}', bottomImage)
|
|
44
47
|
.replace('{stampImg}', stampImage)
|
|
45
48
|
.replace('{avatar}', avatarImage)
|
|
Binary file
|