page-templator 1.0.1 → 1.0.2
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/lib/index.d.ts +4 -0
- package/lib/index.js +3 -1
- package/lib/index.js.map +1 -1
- package/lib/templates/base.js +20 -20
- package/lib/templates/bootstrapDark.js +142 -142
- package/package.json +1 -1
package/lib/index.d.ts
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ITemplateBase, TArticleItem, TTemplateSettings } from './consts/types';
|
|
2
|
+
import { TemplateDarkBootstrap } from './templates/bootstrapDark';
|
|
3
|
+
import { TemplateBase } from './templates/base';
|
|
4
|
+
export { TemplateDarkBootstrap, TemplateBase, ITemplateBase, TArticleItem, TTemplateSettings };
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAE/C,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAkD,CAAA"}
|
package/lib/templates/base.js
CHANGED
|
@@ -3,16 +3,16 @@ class TemplateBase {
|
|
|
3
3
|
this._settings = settings;
|
|
4
4
|
}
|
|
5
5
|
getHeadSection() {
|
|
6
|
-
return `<meta charset="UTF-8" />
|
|
7
|
-
<meta
|
|
8
|
-
name="viewport"
|
|
9
|
-
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
10
|
-
/>
|
|
11
|
-
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
12
|
-
<title>{TITLE}</title>
|
|
13
|
-
<meta name="description" content="{DESCRIPTION}">
|
|
14
|
-
<meta name="keywords" content="{KEYWORDS}">
|
|
15
|
-
<meta name="author" content="{AUTHOR}">
|
|
6
|
+
return `<meta charset="UTF-8" />
|
|
7
|
+
<meta
|
|
8
|
+
name="viewport"
|
|
9
|
+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
|
10
|
+
/>
|
|
11
|
+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
12
|
+
<title>{TITLE}</title>
|
|
13
|
+
<meta name="description" content="{DESCRIPTION}">
|
|
14
|
+
<meta name="keywords" content="{KEYWORDS}">
|
|
15
|
+
<meta name="author" content="{AUTHOR}">
|
|
16
16
|
<link rel="icon" href="favicon.ico" type="image/x-icon" />`;
|
|
17
17
|
}
|
|
18
18
|
getBodyStart() {
|
|
@@ -28,16 +28,16 @@ class TemplateBase {
|
|
|
28
28
|
return ``;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
export const fullpageTmpl = `<!DOCTYPE html>
|
|
32
|
-
<html lang="{LANG}">
|
|
33
|
-
<head>
|
|
34
|
-
{HEAD_SECTION}
|
|
35
|
-
</head>
|
|
36
|
-
<body>
|
|
37
|
-
{BODY_START}
|
|
38
|
-
{CONTENT}
|
|
39
|
-
{BODY_END}
|
|
40
|
-
</body>
|
|
31
|
+
export const fullpageTmpl = `<!DOCTYPE html>
|
|
32
|
+
<html lang="{LANG}">
|
|
33
|
+
<head>
|
|
34
|
+
{HEAD_SECTION}
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
{BODY_START}
|
|
38
|
+
{CONTENT}
|
|
39
|
+
{BODY_END}
|
|
40
|
+
</body>
|
|
41
41
|
</html>`;
|
|
42
42
|
export { TemplateBase };
|
|
43
43
|
//# sourceMappingURL=base.js.map
|
|
@@ -2,70 +2,70 @@ import _ from 'lodash';
|
|
|
2
2
|
import { fullpageTmpl, TemplateBase } from './base';
|
|
3
3
|
class TemplateDarkBootstrap extends TemplateBase {
|
|
4
4
|
getHeadSection() {
|
|
5
|
-
return `
|
|
6
|
-
${super.getHeadSection()}
|
|
7
|
-
<link
|
|
8
|
-
rel="stylesheet"
|
|
9
|
-
href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
|
|
10
|
-
/>
|
|
11
|
-
<link
|
|
12
|
-
rel="stylesheet"
|
|
13
|
-
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
|
14
|
-
/>
|
|
15
|
-
<link rel="stylesheet" href="/wp-content/themes/wp/css/mdb.dark.min.css" />
|
|
5
|
+
return `
|
|
6
|
+
${super.getHeadSection()}
|
|
7
|
+
<link
|
|
8
|
+
rel="stylesheet"
|
|
9
|
+
href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
|
|
10
|
+
/>
|
|
11
|
+
<link
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
|
|
14
|
+
/>
|
|
15
|
+
<link rel="stylesheet" href="/wp-content/themes/wp/css/mdb.dark.min.css" />
|
|
16
16
|
`;
|
|
17
17
|
}
|
|
18
18
|
getBodyStart() {
|
|
19
|
-
return `
|
|
20
|
-
<header>
|
|
21
|
-
<div
|
|
22
|
-
class="p-5 text-center bg-image "
|
|
23
|
-
style="
|
|
24
|
-
height: 350px;
|
|
25
|
-
background-image: url(<!--BACKGROUNDURL-->);
|
|
26
|
-
"
|
|
27
|
-
>
|
|
28
|
-
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
|
|
29
|
-
<div class="d-flex justify-content-center align-items-center h-100">
|
|
30
|
-
<div class="text-white">
|
|
31
|
-
<h1 class="mb-3">{H1}</h1>
|
|
32
|
-
<h4 class="mb-3">
|
|
33
|
-
<!--SUBHEADING-->
|
|
34
|
-
</h4>
|
|
35
|
-
<form class="d-flex input-group w-auto" method="GET" action="/">
|
|
36
|
-
<div class="input-group">
|
|
37
|
-
<input
|
|
38
|
-
name="q"
|
|
39
|
-
type="search"
|
|
40
|
-
class="form-control rounded"
|
|
41
|
-
placeholder="<!--SEARCHPLACEHOLDER-->"
|
|
42
|
-
aria-label="Search"
|
|
43
|
-
aria-describedby="search-addon"
|
|
44
|
-
/>
|
|
45
|
-
<div class="input-group-text">
|
|
46
|
-
<button class="input-group-text border-0">
|
|
47
|
-
<i class="fas fa-search"></i>
|
|
48
|
-
</button>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</form>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</header>
|
|
19
|
+
return `
|
|
20
|
+
<header>
|
|
21
|
+
<div
|
|
22
|
+
class="p-5 text-center bg-image "
|
|
23
|
+
style="
|
|
24
|
+
height: 350px;
|
|
25
|
+
background-image: url(<!--BACKGROUNDURL-->);
|
|
26
|
+
"
|
|
27
|
+
>
|
|
28
|
+
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
|
|
29
|
+
<div class="d-flex justify-content-center align-items-center h-100">
|
|
30
|
+
<div class="text-white">
|
|
31
|
+
<h1 class="mb-3">{H1}</h1>
|
|
32
|
+
<h4 class="mb-3">
|
|
33
|
+
<!--SUBHEADING-->
|
|
34
|
+
</h4>
|
|
35
|
+
<form class="d-flex input-group w-auto" method="GET" action="/">
|
|
36
|
+
<div class="input-group">
|
|
37
|
+
<input
|
|
38
|
+
name="q"
|
|
39
|
+
type="search"
|
|
40
|
+
class="form-control rounded"
|
|
41
|
+
placeholder="<!--SEARCHPLACEHOLDER-->"
|
|
42
|
+
aria-label="Search"
|
|
43
|
+
aria-describedby="search-addon"
|
|
44
|
+
/>
|
|
45
|
+
<div class="input-group-text">
|
|
46
|
+
<button class="input-group-text border-0">
|
|
47
|
+
<i class="fas fa-search"></i>
|
|
48
|
+
</button>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</form>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</header>
|
|
57
57
|
`;
|
|
58
58
|
}
|
|
59
59
|
getBodyEnd() {
|
|
60
|
-
return `
|
|
61
|
-
<script type="text/javascript" src="/wp-content/themes/wp/js/mdb.min.js"></script>
|
|
60
|
+
return `
|
|
61
|
+
<script type="text/javascript" src="/wp-content/themes/wp/js/mdb.min.js"></script>
|
|
62
62
|
`;
|
|
63
63
|
}
|
|
64
64
|
getContent(opts) {
|
|
65
65
|
switch (opts?.pageType) {
|
|
66
66
|
case 'main':
|
|
67
|
-
return `
|
|
68
|
-
${this.getNewsList(opts?.articleItems)}
|
|
67
|
+
return `
|
|
68
|
+
${this.getNewsList(opts?.articleItems)}
|
|
69
69
|
`;
|
|
70
70
|
case 'article':
|
|
71
71
|
return this.getArticle(opts?.articleContent);
|
|
@@ -93,14 +93,14 @@ class TemplateDarkBootstrap extends TemplateBase {
|
|
|
93
93
|
return html;
|
|
94
94
|
}
|
|
95
95
|
getArticle(articleContent) {
|
|
96
|
-
return `
|
|
97
|
-
<div class="container my-5">
|
|
98
|
-
<div class="row">
|
|
99
|
-
<div class="col-lg-8 col-md-12 mb-4">
|
|
100
|
-
${articleContent || 'Loading...'}
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
96
|
+
return `
|
|
97
|
+
<div class="container my-5">
|
|
98
|
+
<div class="row">
|
|
99
|
+
<div class="col-lg-8 col-md-12 mb-4">
|
|
100
|
+
${articleContent || 'Loading...'}
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
104
|
`;
|
|
105
105
|
}
|
|
106
106
|
getNewsList(articleItems) {
|
|
@@ -122,39 +122,39 @@ class TemplateDarkBootstrap extends TemplateBase {
|
|
|
122
122
|
const continueText = _.shuffle(['Watch', 'Read'])[0];
|
|
123
123
|
rows += this.getRow(articleItems.slice(i, i + rowPerCount), rowType, continueText);
|
|
124
124
|
}
|
|
125
|
-
return `
|
|
126
|
-
<div class="container h-100 my-5">
|
|
127
|
-
<section>
|
|
128
|
-
<div class="text-center">
|
|
129
|
-
<h4><strong>TREND NEWS</strong></h4>
|
|
130
|
-
<hr class="my-4" />
|
|
131
|
-
</div>
|
|
132
|
-
${rows}
|
|
133
|
-
<hr class="my-4" />
|
|
134
|
-
</section>
|
|
135
|
-
</div>
|
|
125
|
+
return `
|
|
126
|
+
<div class="container h-100 my-5">
|
|
127
|
+
<section>
|
|
128
|
+
<div class="text-center">
|
|
129
|
+
<h4><strong>TREND NEWS</strong></h4>
|
|
130
|
+
<hr class="my-4" />
|
|
131
|
+
</div>
|
|
132
|
+
${rows}
|
|
133
|
+
<hr class="my-4" />
|
|
134
|
+
</section>
|
|
135
|
+
</div>
|
|
136
136
|
`;
|
|
137
137
|
}
|
|
138
138
|
getRow(articleItems, rowType, continueText) {
|
|
139
139
|
if (!articleItems?.length) {
|
|
140
140
|
return ``;
|
|
141
141
|
}
|
|
142
|
-
const block1 = `
|
|
143
|
-
<div class="col-lg-4 col-md-12 mb-4 align-self-center">
|
|
144
|
-
${this.getRowItem(articleItems[0], rowType, continueText)}
|
|
145
|
-
</div>
|
|
142
|
+
const block1 = `
|
|
143
|
+
<div class="col-lg-4 col-md-12 mb-4 align-self-center">
|
|
144
|
+
${this.getRowItem(articleItems[0], rowType, continueText)}
|
|
145
|
+
</div>
|
|
146
146
|
`;
|
|
147
147
|
const rowItem2 = this.getRowItem(articleItems[1], rowType, continueText);
|
|
148
148
|
const block2 = (rowItem2 &&
|
|
149
|
-
`<div class="col-lg-4 col-md-6 mb-4 align-self-center ">
|
|
150
|
-
${rowItem2}
|
|
151
|
-
</div>
|
|
149
|
+
`<div class="col-lg-4 col-md-6 mb-4 align-self-center ">
|
|
150
|
+
${rowItem2}
|
|
151
|
+
</div>
|
|
152
152
|
`) ||
|
|
153
153
|
'';
|
|
154
154
|
const rowItem3 = this.getRowItem(articleItems[2], rowType, continueText);
|
|
155
155
|
const block3 = (rowItem3 &&
|
|
156
|
-
`<div class="col-lg-4 col-md-6 mb-4 align-self-center ">
|
|
157
|
-
${rowItem3}
|
|
156
|
+
`<div class="col-lg-4 col-md-6 mb-4 align-self-center ">
|
|
157
|
+
${rowItem3}
|
|
158
158
|
</div>`) ||
|
|
159
159
|
'';
|
|
160
160
|
return `<div class="row justify-content-center">${_.shuffle([block1, block2, block3]).join('')}</div>`;
|
|
@@ -170,75 +170,75 @@ class TemplateDarkBootstrap extends TemplateBase {
|
|
|
170
170
|
const lastUpdated = '';
|
|
171
171
|
switch (type) {
|
|
172
172
|
case 'micro':
|
|
173
|
-
return `
|
|
174
|
-
<div class="card mb-4">
|
|
175
|
-
<div class="card-body">
|
|
176
|
-
<h5 class="card-title">${title}</h5>
|
|
177
|
-
<p class="card-text"></p>
|
|
178
|
-
<a href='${href}' target="_blank" class="btn btn-primary">${continueText}</a>
|
|
179
|
-
</div>
|
|
180
|
-
</div>
|
|
173
|
+
return `
|
|
174
|
+
<div class="card mb-4">
|
|
175
|
+
<div class="card-body">
|
|
176
|
+
<h5 class="card-title">${title}</h5>
|
|
177
|
+
<p class="card-text"></p>
|
|
178
|
+
<a href='${href}' target="_blank" class="btn btn-primary">${continueText}</a>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
181
|
`;
|
|
182
182
|
case 'img-overlay':
|
|
183
|
-
return `
|
|
184
|
-
<a href="${href}" target="_blank" class="card bg-dark text-white shadow-1-strong mb-4">
|
|
185
|
-
<div class="bg-image">
|
|
186
|
-
<img src="${thumb}" alt="${title}" class="img-fluid" loading="lazy" />
|
|
187
|
-
<div class="mask" style="background-color: rgba(${_.random(0, 255)}, ${_.random(0, 255)}, ${_.random(0, 255)}, 0.${_.random(600, 700)})"></div>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="card-img-overlay">
|
|
190
|
-
<h2 class="card-title" style="background: #0000008c;padding: 10px;">${title}</h2>
|
|
191
|
-
<p class="card-text">${description}</p>
|
|
192
|
-
<p class="card-text">${lastUpdated}</p>
|
|
193
|
-
</div>
|
|
194
|
-
</a>
|
|
183
|
+
return `
|
|
184
|
+
<a href="${href}" target="_blank" class="card bg-dark text-white shadow-1-strong mb-4">
|
|
185
|
+
<div class="bg-image">
|
|
186
|
+
<img src="${thumb}" alt="${title}" class="img-fluid" loading="lazy" />
|
|
187
|
+
<div class="mask" style="background-color: rgba(${_.random(0, 255)}, ${_.random(0, 255)}, ${_.random(0, 255)}, 0.${_.random(600, 700)})"></div>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="card-img-overlay">
|
|
190
|
+
<h2 class="card-title" style="background: #0000008c;padding: 10px;">${title}</h2>
|
|
191
|
+
<p class="card-text">${description}</p>
|
|
192
|
+
<p class="card-text">${lastUpdated}</p>
|
|
193
|
+
</div>
|
|
194
|
+
</a>
|
|
195
195
|
`;
|
|
196
196
|
case 'card':
|
|
197
|
-
return `
|
|
198
|
-
<div class="card mb-4">
|
|
199
|
-
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
|
|
200
|
-
<img src="${thumb}" alt="${title}" class="img-fluid" loading="lazy" />
|
|
201
|
-
<a href="${href}" target="_blank" >
|
|
202
|
-
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
|
|
203
|
-
</a>
|
|
204
|
-
</div>
|
|
205
|
-
<div class="card-body">
|
|
206
|
-
<h5 class="card-title">${title}</h5>
|
|
207
|
-
<p class="card-text">${description}</p>
|
|
208
|
-
<a href="${href}" target="_blank" class="btn btn-primary">${continueText}</a>
|
|
209
|
-
</div>
|
|
210
|
-
</div>
|
|
197
|
+
return `
|
|
198
|
+
<div class="card mb-4">
|
|
199
|
+
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
|
|
200
|
+
<img src="${thumb}" alt="${title}" class="img-fluid" loading="lazy" />
|
|
201
|
+
<a href="${href}" target="_blank" >
|
|
202
|
+
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
|
|
203
|
+
</a>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="card-body">
|
|
206
|
+
<h5 class="card-title">${title}</h5>
|
|
207
|
+
<p class="card-text">${description}</p>
|
|
208
|
+
<a href="${href}" target="_blank" class="btn btn-primary">${continueText}</a>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
211
|
`;
|
|
212
212
|
case 'card-featured':
|
|
213
|
-
return `
|
|
214
|
-
<div class="card text-center mb-4">
|
|
215
|
-
<div class="card-header bg-white">${featured}</div>
|
|
216
|
-
<div class="card-body">
|
|
217
|
-
<h5 class="card-title">${title}</h5>
|
|
218
|
-
<p class="card-text">${description}</p>
|
|
219
|
-
<a href="${href}" target="_blank" class="btn btn-primary">${continueText}</a>
|
|
220
|
-
</div>
|
|
221
|
-
<div class="card-footer bg-white text-muted">${lastUpdated}</div>
|
|
222
|
-
</div>
|
|
213
|
+
return `
|
|
214
|
+
<div class="card text-center mb-4">
|
|
215
|
+
<div class="card-header bg-white">${featured}</div>
|
|
216
|
+
<div class="card-body">
|
|
217
|
+
<h5 class="card-title">${title}</h5>
|
|
218
|
+
<p class="card-text">${description}</p>
|
|
219
|
+
<a href="${href}" target="_blank" class="btn btn-primary">${continueText}</a>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="card-footer bg-white text-muted">${lastUpdated}</div>
|
|
222
|
+
</div>
|
|
223
223
|
`;
|
|
224
224
|
case 'card-vertical':
|
|
225
|
-
return `
|
|
226
|
-
<a href="${href}" target="_blank" class="card mb-4" style="max-width: 540px">
|
|
227
|
-
<div class="row g-0">
|
|
228
|
-
<div class="col-md-4">
|
|
229
|
-
<img src="${thumb}" alt="${title}" loading="lazy" class="accordion-body img-fluid" />
|
|
230
|
-
</div>
|
|
231
|
-
<div class="col-md-8">
|
|
232
|
-
<div class="card-body">
|
|
233
|
-
<h5 class="card-title">${title}</h5>
|
|
234
|
-
<p class="card-text">${description}</p>
|
|
235
|
-
<p class="card-text">
|
|
236
|
-
<small class="text-muted">${lastUpdated}</small>
|
|
237
|
-
</p>
|
|
238
|
-
</div>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
</a>
|
|
225
|
+
return `
|
|
226
|
+
<a href="${href}" target="_blank" class="card mb-4" style="max-width: 540px">
|
|
227
|
+
<div class="row g-0">
|
|
228
|
+
<div class="col-md-4">
|
|
229
|
+
<img src="${thumb}" alt="${title}" loading="lazy" class="accordion-body img-fluid" />
|
|
230
|
+
</div>
|
|
231
|
+
<div class="col-md-8">
|
|
232
|
+
<div class="card-body">
|
|
233
|
+
<h5 class="card-title">${title}</h5>
|
|
234
|
+
<p class="card-text">${description}</p>
|
|
235
|
+
<p class="card-text">
|
|
236
|
+
<small class="text-muted">${lastUpdated}</small>
|
|
237
|
+
</p>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</a>
|
|
242
242
|
`;
|
|
243
243
|
}
|
|
244
244
|
return '';
|