create-wirejs-app 1.0.0 → 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/bin.js +47 -43
- package/package.json +21 -21
- package/template/_gitignore +4 -0
- package/template/package.json +5 -6
- package/template/src/api/sample.js +10 -0
- package/template/src/api/todo.js +76 -0
- package/template/src/build_id.json +1 -0
- package/template/src/components/countdown.js +23 -10
- package/template/src/layouts/bare.html +1 -1
- package/template/src/layouts/core.css +3 -3
- package/template/src/layouts/default.css +222 -222
- package/template/src/layouts/default.html +41 -31
- package/template/src/layouts/default.js +10 -35
- package/template/src/lib/sample-lib.js +8 -0
- package/template/src/routes/html.html +3 -3
- package/template/src/routes/index.md +30 -30
- package/template/.gitignore +0 -2
- package/template/src/components/countdown.tpl +0 -6
package/bin.js
CHANGED
|
@@ -1,43 +1,47 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
const fs = require('fs');
|
|
4
|
-
const process = require('process');
|
|
5
|
-
const { exec, execSync } = require('child_process');
|
|
6
|
-
const copy = require('recursive-copy');
|
|
7
|
-
|
|
8
|
-
const [
|
|
9
|
-
nodeBinPath,
|
|
10
|
-
scriptPath,
|
|
11
|
-
projectName,
|
|
12
|
-
] = process.argv;
|
|
13
|
-
|
|
14
|
-
(async () => {
|
|
15
|
-
fs.mkdirSync(projectName);
|
|
16
|
-
|
|
17
|
-
console.log("Writing base package files ...");
|
|
18
|
-
await copy(`${__dirname}/template`, `./${projectName}`);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
console.log(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const fs = require('fs');
|
|
4
|
+
const process = require('process');
|
|
5
|
+
const { exec, execSync } = require('child_process');
|
|
6
|
+
const copy = require('recursive-copy');
|
|
7
|
+
|
|
8
|
+
const [
|
|
9
|
+
nodeBinPath,
|
|
10
|
+
scriptPath,
|
|
11
|
+
projectName,
|
|
12
|
+
] = process.argv;
|
|
13
|
+
|
|
14
|
+
(async () => {
|
|
15
|
+
fs.mkdirSync(projectName);
|
|
16
|
+
|
|
17
|
+
console.log("Writing base package files ...");
|
|
18
|
+
await copy(`${__dirname}/template`, `./${projectName}`);
|
|
19
|
+
await copy(
|
|
20
|
+
`${__dirname}/template/_gitignore`,
|
|
21
|
+
`./${projectName}/.gitignore`
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
const packageJson = await fs.readFileSync(`./${projectName}/package.json`);
|
|
25
|
+
fs.writeFileSync(
|
|
26
|
+
`./${projectName}/package.json`,
|
|
27
|
+
packageJson.toString().replace(
|
|
28
|
+
/project-name/, projectName
|
|
29
|
+
)
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
console.log("Fetching dependencies ...");
|
|
33
|
+
process.chdir(projectName);
|
|
34
|
+
execSync('npm install');
|
|
35
|
+
|
|
36
|
+
console.log(`
|
|
37
|
+
Done creating ${projectName}!
|
|
38
|
+
|
|
39
|
+
To get started:
|
|
40
|
+
|
|
41
|
+
cd ${projectName}
|
|
42
|
+
npm start
|
|
43
|
+
|
|
44
|
+
Happy coding!
|
|
45
|
+
`);
|
|
46
|
+
|
|
47
|
+
})();
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "create-wirejs-app",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Initializes a wirejs package.",
|
|
5
|
-
"author": "Jon Wire",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"bin": {
|
|
8
|
-
"create-wirejs-app": "./bin.js"
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"recursive-copy": "^2.0.14"
|
|
12
|
-
},
|
|
13
|
-
"files": [
|
|
14
|
-
"bin.js",
|
|
15
|
-
"package.json",
|
|
16
|
-
"template/src/*",
|
|
17
|
-
"template/static/*",
|
|
18
|
-
"template
|
|
19
|
-
"template/package.json*"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "create-wirejs-app",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Initializes a wirejs package.",
|
|
5
|
+
"author": "Jon Wire",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"bin": {
|
|
8
|
+
"create-wirejs-app": "./bin.js"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"recursive-copy": "^2.0.14"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"bin.js",
|
|
15
|
+
"package.json",
|
|
16
|
+
"template/src/*",
|
|
17
|
+
"template/static/*",
|
|
18
|
+
"template/_gitignore",
|
|
19
|
+
"template/package.json*"
|
|
20
|
+
]
|
|
21
|
+
}
|
package/template/package.json
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "project-name",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"private": true,
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"
|
|
7
|
-
"wirejs-dom": "^1.0.
|
|
8
|
-
"highlight.js": "^11.5.1"
|
|
6
|
+
"highlight.js": "^11.5.1",
|
|
7
|
+
"wirejs-dom": "^1.0.7"
|
|
9
8
|
},
|
|
10
9
|
"devDependencies": {
|
|
11
|
-
"wirejs-scripts": "^
|
|
10
|
+
"wirejs-scripts": "^2.0.0"
|
|
12
11
|
},
|
|
13
12
|
"scripts": {
|
|
14
13
|
"start": "wirejs-scripts start",
|
|
15
14
|
"build": "wirejs-scripts build"
|
|
16
15
|
}
|
|
17
|
-
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const { defaultGreeting } = require('../lib/sample-lib');
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
/**
|
|
5
|
+
* Given a name, this will return a friendly, personalized greeting.
|
|
6
|
+
* @param {string} name
|
|
7
|
+
* @returns {string} A friendly greeting.
|
|
8
|
+
*/
|
|
9
|
+
hello: async (name) => `${defaultGreeting()}, ${name}.`
|
|
10
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
// included from local template during development.
|
|
2
|
+
// long term, maybe this goes into the wirejs-scripts repo, or possibly as a
|
|
3
|
+
// dep thereof. but, the collection class provided may eventually depend on
|
|
4
|
+
// which deployment target is specified.
|
|
5
|
+
const { Collection } = require('../api-lib/collection');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Simple API example demonstrating interaction with a collection without auth.
|
|
9
|
+
*
|
|
10
|
+
* The `Note` class used shows how you might perform simple validation on data
|
|
11
|
+
* as it enters the API boundary.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* A simple sample class we'll be saving and loading from the API.
|
|
17
|
+
*
|
|
18
|
+
* We could just as easily *not* use a class at all. (Maybe that would actually
|
|
19
|
+
* be better for this example ...)
|
|
20
|
+
*/
|
|
21
|
+
class Note {
|
|
22
|
+
/**
|
|
23
|
+
* Construct a new note with an id (optional), title, and body.
|
|
24
|
+
*
|
|
25
|
+
* If an id is not given, one will be generated.
|
|
26
|
+
*/
|
|
27
|
+
constructor({id, title, body}) {
|
|
28
|
+
this.id = id || this.makeId();
|
|
29
|
+
this.title = title;
|
|
30
|
+
this.body = body;
|
|
31
|
+
this.validate();
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Semi-random, semi-increasing string. Date + rand.
|
|
36
|
+
*/
|
|
37
|
+
makeId() {
|
|
38
|
+
return Date.now() + '-' + String(Math.random()).substring(2, 10);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Throw an error if the note doesn't contain all required fields with the
|
|
43
|
+
* required constraints. In this case, id, title, and body must all be
|
|
44
|
+
* "truthy" values.
|
|
45
|
+
*/
|
|
46
|
+
validate() {
|
|
47
|
+
if (!(this.id && this.title && this.body)) {
|
|
48
|
+
throw new Error(
|
|
49
|
+
"A note must contain a truthy id, title, and body!"
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* The actual API.
|
|
57
|
+
*/
|
|
58
|
+
module.exports = {
|
|
59
|
+
/**
|
|
60
|
+
* Adds a new note.
|
|
61
|
+
*/
|
|
62
|
+
add: async (note) => {
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
/*
|
|
66
|
+
*
|
|
67
|
+
*/
|
|
68
|
+
remove: async (id) => {
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
/*
|
|
72
|
+
*
|
|
73
|
+
*/
|
|
74
|
+
list: async () => {
|
|
75
|
+
}
|
|
76
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"1677445565514"
|
|
@@ -1,20 +1,33 @@
|
|
|
1
1
|
const { DomClass } = require('wirejs-dom');
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
const markup = `<sample:countdown>
|
|
4
|
+
<h3>Limited time offer!</h3>
|
|
5
|
+
<div data-id='countdown'>
|
|
6
|
+
<b>
|
|
7
|
+
<span data-id='remaining'></span>
|
|
8
|
+
<span data-id='label'>seconds</span>
|
|
9
|
+
</b> left!
|
|
10
|
+
</div>
|
|
11
|
+
</sample:countdown>`;
|
|
3
12
|
|
|
4
13
|
const Countdown = DomClass(markup, function() {
|
|
5
|
-
this.
|
|
14
|
+
this.remaining = this.from || 60;
|
|
6
15
|
|
|
7
|
-
|
|
8
|
-
this.
|
|
16
|
+
const tick = () => {
|
|
17
|
+
this.remaining = this.remaining - 1;
|
|
18
|
+
|
|
19
|
+
if (this.remaining == 1) {
|
|
20
|
+
this.label = 'second';
|
|
21
|
+
} else if (this.remaining == 0) {
|
|
22
|
+
this.countdown = '<b>ALL DONE! <i>You missed it!!!</i></b>';
|
|
23
|
+
}
|
|
9
24
|
|
|
10
|
-
if (this.
|
|
11
|
-
|
|
12
|
-
} else {
|
|
13
|
-
setTimeout(() => this.tick, 1000);
|
|
25
|
+
if (this.remaining > 0) {
|
|
26
|
+
setTimeout(() => tick(), 1000);
|
|
14
27
|
}
|
|
15
28
|
};
|
|
16
29
|
|
|
17
|
-
|
|
30
|
+
tick();
|
|
18
31
|
});
|
|
19
32
|
|
|
20
|
-
module.exports = Countdown;
|
|
33
|
+
module.exports = Countdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
${body}
|
|
1
|
+
${body}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
body {
|
|
2
|
-
font-size: 12pt;
|
|
3
|
-
}
|
|
1
|
+
body {
|
|
2
|
+
font-size: 12pt;
|
|
3
|
+
}
|
|
@@ -1,222 +1,222 @@
|
|
|
1
|
-
@import url('core.css');
|
|
2
|
-
|
|
3
|
-
/*****************
|
|
4
|
-
BASIC TAGS
|
|
5
|
-
*****************/
|
|
6
|
-
|
|
7
|
-
body {
|
|
8
|
-
margin: 0px;
|
|
9
|
-
padding: 0px;
|
|
10
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
11
|
-
font-size: 11pt;
|
|
12
|
-
line-height: 1.2;
|
|
13
|
-
color: #333333;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@media (max-width: 50rem) {
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
img {
|
|
20
|
-
border: 0px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
a, tpdc\:start {
|
|
24
|
-
/* text-decoration: none; */
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
a:hover, tpdc\:start:hover {
|
|
28
|
-
text-decoration: underline;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
a.nohoverdecoration, tpcd\:start.nohoverdecoration {
|
|
32
|
-
text-decoration: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
hr {
|
|
36
|
-
margin: 2rem auto;
|
|
37
|
-
width: 65%;
|
|
38
|
-
height: 1px;
|
|
39
|
-
border: 0px;
|
|
40
|
-
background-color: silver;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
#header h1 {
|
|
44
|
-
font-size: 1.6em;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
#header h1 a {
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
#header h1 img {
|
|
52
|
-
vertical-align: text-bottom;
|
|
53
|
-
height: 1.25em;
|
|
54
|
-
border: 2px solid saddlebrown;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/******************
|
|
58
|
-
TEMPLATE PARTS
|
|
59
|
-
******************/
|
|
60
|
-
|
|
61
|
-
#container {
|
|
62
|
-
position: relative;
|
|
63
|
-
width: 90%;
|
|
64
|
-
max-width: 60rem;
|
|
65
|
-
margin: 2rem auto;
|
|
66
|
-
padding: 0.5rem;
|
|
67
|
-
background-color: #f5f5f5;
|
|
68
|
-
border: 1px solid #cccccc;
|
|
69
|
-
border-radius: 0.25em;
|
|
70
|
-
overflow: hidden; /* float containment */
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
#content {
|
|
74
|
-
overflow: hidden;
|
|
75
|
-
padding: 0.85rem;
|
|
76
|
-
padding-top: 0px;
|
|
77
|
-
line-height: 1.3rem;
|
|
78
|
-
text-align: justify;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
#footer {
|
|
82
|
-
clear: both;
|
|
83
|
-
text-align: center;
|
|
84
|
-
font-family: monospace;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
#sub-footer {
|
|
88
|
-
margin-top: 2rem;
|
|
89
|
-
font-size: smaller;
|
|
90
|
-
color: #555555;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.footer-plug {
|
|
94
|
-
margin-top: 2.5rem;
|
|
95
|
-
padding-top: 1.75rem;
|
|
96
|
-
text-align: right;
|
|
97
|
-
color: gray;
|
|
98
|
-
border-top: 1px dashed silver;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.footer-plug a {
|
|
102
|
-
font-size: 1.2rem;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.padded {
|
|
106
|
-
padding: 10px 20px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
#footer > #sub-footer tpdc\:pagebuildtime {
|
|
110
|
-
font-weight: bold;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.modal {
|
|
114
|
-
position: fixed;
|
|
115
|
-
display: table-cell;
|
|
116
|
-
text-align: center;
|
|
117
|
-
vertical-align: middle;
|
|
118
|
-
overflow: hidden;
|
|
119
|
-
top: 0px;
|
|
120
|
-
left: 0px;
|
|
121
|
-
width: 100%;
|
|
122
|
-
height: 100%;
|
|
123
|
-
margin: 0;
|
|
124
|
-
padding: 1em 0 0 0 ;
|
|
125
|
-
background-color: #ffffff;
|
|
126
|
-
opacity: 0.8;
|
|
127
|
-
filter: alpha(opacity=80);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
tpdc\:teaser {
|
|
131
|
-
display: block;
|
|
132
|
-
margin-top: 2em;
|
|
133
|
-
border-top: 1px dashed silver;
|
|
134
|
-
text-align: right;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
tpdc\:fork {
|
|
138
|
-
display: block;
|
|
139
|
-
position: absolute;
|
|
140
|
-
background-color: transparent;
|
|
141
|
-
top: 0;
|
|
142
|
-
right: 0;
|
|
143
|
-
width: 7em;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
tpdc\:fork > .banner {
|
|
147
|
-
-webkit-transform: rotate(45deg);
|
|
148
|
-
-moz-transform: rotate(45deg);
|
|
149
|
-
-ms-transform: rotate(45deg);
|
|
150
|
-
-o-transform: rotate(45deg);
|
|
151
|
-
transform: rotate(45deg);
|
|
152
|
-
width: 150%;
|
|
153
|
-
text-align: center;
|
|
154
|
-
position: absolute;
|
|
155
|
-
top: 1.5em;
|
|
156
|
-
left: -0.5em;
|
|
157
|
-
font-weight: bold;
|
|
158
|
-
background-color: green;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
tpdc\:fork > .banner > a {
|
|
162
|
-
color: white;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
tpdc\:resultcard {
|
|
166
|
-
display: block;
|
|
167
|
-
border: 15px solid #fce890;
|
|
168
|
-
padding: 15px;
|
|
169
|
-
margin: 15px;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.result-title {
|
|
173
|
-
text-align: center;
|
|
174
|
-
margin: 0px;
|
|
175
|
-
color: #aa3939;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.result-result {
|
|
179
|
-
text-align: center;
|
|
180
|
-
color: #3399cc;
|
|
181
|
-
border: 2px dashed #99ccee;
|
|
182
|
-
border-radius: 10px;
|
|
183
|
-
padding: 1em;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.result-description {
|
|
187
|
-
text-align: left;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.result-follow {
|
|
191
|
-
text-align: center;
|
|
192
|
-
margin-top: 2em;
|
|
193
|
-
padding-top: 1em;
|
|
194
|
-
border-top: 1px dotted silver;
|
|
195
|
-
vertical-align: bottom;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.result-follow span {
|
|
199
|
-
color: #bb3333;
|
|
200
|
-
font-weight: bold;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.result-buttons {
|
|
204
|
-
padding-top: 1em;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
@media (max-width:420px) {
|
|
209
|
-
#footer a {
|
|
210
|
-
font-size: larger;
|
|
211
|
-
display: inline-block;
|
|
212
|
-
margin: 0.25em;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.link-list li {
|
|
216
|
-
height: 2em;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.link-list li a {
|
|
220
|
-
font-size: larger;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
1
|
+
@import url('core.css');
|
|
2
|
+
|
|
3
|
+
/*****************
|
|
4
|
+
BASIC TAGS
|
|
5
|
+
*****************/
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
margin: 0px;
|
|
9
|
+
padding: 0px;
|
|
10
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
11
|
+
font-size: 11pt;
|
|
12
|
+
line-height: 1.2;
|
|
13
|
+
color: #333333;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (max-width: 50rem) {
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
img {
|
|
20
|
+
border: 0px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
a, tpdc\:start {
|
|
24
|
+
/* text-decoration: none; */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a:hover, tpdc\:start:hover {
|
|
28
|
+
text-decoration: underline;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
a.nohoverdecoration, tpcd\:start.nohoverdecoration {
|
|
32
|
+
text-decoration: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
hr {
|
|
36
|
+
margin: 2rem auto;
|
|
37
|
+
width: 65%;
|
|
38
|
+
height: 1px;
|
|
39
|
+
border: 0px;
|
|
40
|
+
background-color: silver;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
#header h1 {
|
|
44
|
+
font-size: 1.6em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
#header h1 a {
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
#header h1 img {
|
|
52
|
+
vertical-align: text-bottom;
|
|
53
|
+
height: 1.25em;
|
|
54
|
+
border: 2px solid saddlebrown;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/******************
|
|
58
|
+
TEMPLATE PARTS
|
|
59
|
+
******************/
|
|
60
|
+
|
|
61
|
+
#container {
|
|
62
|
+
position: relative;
|
|
63
|
+
width: 90%;
|
|
64
|
+
max-width: 60rem;
|
|
65
|
+
margin: 2rem auto;
|
|
66
|
+
padding: 0.5rem;
|
|
67
|
+
background-color: #f5f5f5;
|
|
68
|
+
border: 1px solid #cccccc;
|
|
69
|
+
border-radius: 0.25em;
|
|
70
|
+
overflow: hidden; /* float containment */
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
#content {
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
padding: 0.85rem;
|
|
76
|
+
padding-top: 0px;
|
|
77
|
+
line-height: 1.3rem;
|
|
78
|
+
text-align: justify;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
#footer {
|
|
82
|
+
clear: both;
|
|
83
|
+
text-align: center;
|
|
84
|
+
font-family: monospace;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
#sub-footer {
|
|
88
|
+
margin-top: 2rem;
|
|
89
|
+
font-size: smaller;
|
|
90
|
+
color: #555555;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.footer-plug {
|
|
94
|
+
margin-top: 2.5rem;
|
|
95
|
+
padding-top: 1.75rem;
|
|
96
|
+
text-align: right;
|
|
97
|
+
color: gray;
|
|
98
|
+
border-top: 1px dashed silver;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.footer-plug a {
|
|
102
|
+
font-size: 1.2rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.padded {
|
|
106
|
+
padding: 10px 20px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
#footer > #sub-footer tpdc\:pagebuildtime {
|
|
110
|
+
font-weight: bold;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.modal {
|
|
114
|
+
position: fixed;
|
|
115
|
+
display: table-cell;
|
|
116
|
+
text-align: center;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
top: 0px;
|
|
120
|
+
left: 0px;
|
|
121
|
+
width: 100%;
|
|
122
|
+
height: 100%;
|
|
123
|
+
margin: 0;
|
|
124
|
+
padding: 1em 0 0 0 ;
|
|
125
|
+
background-color: #ffffff;
|
|
126
|
+
opacity: 0.8;
|
|
127
|
+
filter: alpha(opacity=80);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
tpdc\:teaser {
|
|
131
|
+
display: block;
|
|
132
|
+
margin-top: 2em;
|
|
133
|
+
border-top: 1px dashed silver;
|
|
134
|
+
text-align: right;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
tpdc\:fork {
|
|
138
|
+
display: block;
|
|
139
|
+
position: absolute;
|
|
140
|
+
background-color: transparent;
|
|
141
|
+
top: 0;
|
|
142
|
+
right: 0;
|
|
143
|
+
width: 7em;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
tpdc\:fork > .banner {
|
|
147
|
+
-webkit-transform: rotate(45deg);
|
|
148
|
+
-moz-transform: rotate(45deg);
|
|
149
|
+
-ms-transform: rotate(45deg);
|
|
150
|
+
-o-transform: rotate(45deg);
|
|
151
|
+
transform: rotate(45deg);
|
|
152
|
+
width: 150%;
|
|
153
|
+
text-align: center;
|
|
154
|
+
position: absolute;
|
|
155
|
+
top: 1.5em;
|
|
156
|
+
left: -0.5em;
|
|
157
|
+
font-weight: bold;
|
|
158
|
+
background-color: green;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
tpdc\:fork > .banner > a {
|
|
162
|
+
color: white;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
tpdc\:resultcard {
|
|
166
|
+
display: block;
|
|
167
|
+
border: 15px solid #fce890;
|
|
168
|
+
padding: 15px;
|
|
169
|
+
margin: 15px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.result-title {
|
|
173
|
+
text-align: center;
|
|
174
|
+
margin: 0px;
|
|
175
|
+
color: #aa3939;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.result-result {
|
|
179
|
+
text-align: center;
|
|
180
|
+
color: #3399cc;
|
|
181
|
+
border: 2px dashed #99ccee;
|
|
182
|
+
border-radius: 10px;
|
|
183
|
+
padding: 1em;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.result-description {
|
|
187
|
+
text-align: left;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.result-follow {
|
|
191
|
+
text-align: center;
|
|
192
|
+
margin-top: 2em;
|
|
193
|
+
padding-top: 1em;
|
|
194
|
+
border-top: 1px dotted silver;
|
|
195
|
+
vertical-align: bottom;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.result-follow span {
|
|
199
|
+
color: #bb3333;
|
|
200
|
+
font-weight: bold;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.result-buttons {
|
|
204
|
+
padding-top: 1em;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
@media (max-width:420px) {
|
|
209
|
+
#footer a {
|
|
210
|
+
font-size: larger;
|
|
211
|
+
display: inline-block;
|
|
212
|
+
margin: 0.25em;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.link-list li {
|
|
216
|
+
height: 2em;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.link-list li a {
|
|
220
|
+
font-size: larger;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
@@ -1,31 +1,41 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<title>${title + " - example.com"}</title>
|
|
5
|
-
<link rel="shortcut icon" type="image/ico" href="/images/wirejs.svg"/>
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
|
7
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<div
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>${title + " - example.com"}</title>
|
|
5
|
+
<link rel="shortcut icon" type="image/ico" href="/images/wirejs.svg"/>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
|
7
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
8
|
+
${metatags}
|
|
9
|
+
<script src='/layouts/default.js?v=${BUILD_ID}'></script>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div id='container'>
|
|
13
|
+
<div id='header'>
|
|
14
|
+
<h1>
|
|
15
|
+
<a href='/'><img src='images/wirejs.svg' /> home</a> / ${title || "example.com"}
|
|
16
|
+
</h1>
|
|
17
|
+
</div>
|
|
18
|
+
<div class='navbar'><tpdc:menu></tpdc:menu></div>
|
|
19
|
+
<div id='content'>
|
|
20
|
+
${body}
|
|
21
|
+
</div>
|
|
22
|
+
<tpdc:teaser></tpdc:teaser>
|
|
23
|
+
</div>
|
|
24
|
+
<div id='footer'>
|
|
25
|
+
<div id='sub-footer'>
|
|
26
|
+
Do only awesome things.
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<!-- diagrams rendering for markdown files -->
|
|
31
|
+
<script type="module">
|
|
32
|
+
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
|
|
33
|
+
[...document.body.getElementsByClassName('language-mermaid')]
|
|
34
|
+
.forEach(node => {
|
|
35
|
+
node.classList.add('mermaid');
|
|
36
|
+
});
|
|
37
|
+
mermaid.init({});
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
</body>
|
|
41
|
+
</html>
|
|
@@ -1,35 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
require('
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
// no ads at "home".
|
|
13
|
-
if (!location.hostname.match(/^localhost|127\.0\.0\.\d+|192\.168\.\d+\.\d+$/)) {
|
|
14
|
-
// delayed in an attempt to prevent ads from block rendering of
|
|
15
|
-
// other components.
|
|
16
|
-
setTimeout(() => {
|
|
17
|
-
new GoogleAds().install();
|
|
18
|
-
}, 250);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// expose DomClass to inlines scripts, etc.
|
|
22
|
-
Object.assign(window, wirejs);
|
|
23
|
-
|
|
24
|
-
// because this script is intended to be loaded at the top, and DomClass
|
|
25
|
-
// doesn't currently handle this, we need to bless() the document async (after the DOM is built).
|
|
26
|
-
// we may even want to do this repeatedly over the course of a few seconds to
|
|
27
|
-
// allow for "settling". (it should be safe to call "bless" repeatedly.)
|
|
28
|
-
|
|
29
|
-
function init() {
|
|
30
|
-
document.readyState === 'complete' ?
|
|
31
|
-
wirejs.bless(document) :
|
|
32
|
-
setTimeout(init, 1);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
setTimeout(init, 1);
|
|
1
|
+
// core deps
|
|
2
|
+
const wirejs = require('wirejs-dom');
|
|
3
|
+
require('highlight.js/styles/github.css');
|
|
4
|
+
require('./default.css');
|
|
5
|
+
|
|
6
|
+
// expose wirejs to inline scripts
|
|
7
|
+
Object.assign(window, wirejs);
|
|
8
|
+
|
|
9
|
+
// common components
|
|
10
|
+
require('../components/countdown');
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
${meta({
|
|
2
2
|
title: "an html page"
|
|
3
3
|
})}
|
|
4
|
-
<p
|
|
4
|
+
<p><code>html</code> pages use the default template by default too.</p>
|
|
5
5
|
<p>And, it's important to remember that pages are parsed like
|
|
6
|
-
<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals'>template literals</a>
|
|
6
|
+
<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals' target='_blank'>template literals</a>
|
|
7
7
|
<b>at build time</b>.
|
|
8
|
-
</p>
|
|
8
|
+
</p>
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
${meta({
|
|
2
|
-
title: "First Page"
|
|
3
|
-
})}
|
|
4
|
-
|
|
5
|
-
# markdown!
|
|
6
|
-
|
|
7
|
-
If all you need is markdown, you can do that!
|
|
8
|
-
|
|
9
|
-
We can even do code blocks with syntax highlighting.
|
|
10
|
-
|
|
11
|
-
```js
|
|
12
|
-
const result = getResult();
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Or mermaid diagrams:
|
|
16
|
-
|
|
17
|
-
```mermaid
|
|
18
|
-
graph LR;
|
|
19
|
-
x --> y(probably y)
|
|
20
|
-
y --> z(definitely z)
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Of course, you can also build [normal html pages](html.html).
|
|
24
|
-
|
|
25
|
-
And of course, you can also embed HTML with custom components directly in your
|
|
26
|
-
markdown:
|
|
27
|
-
|
|
28
|
-
<div>
|
|
29
|
-
<sample:countdown from=
|
|
30
|
-
</div>
|
|
1
|
+
${meta({
|
|
2
|
+
title: "First Page"
|
|
3
|
+
})}
|
|
4
|
+
|
|
5
|
+
# markdown!
|
|
6
|
+
|
|
7
|
+
If all you need is markdown, you can do that!
|
|
8
|
+
|
|
9
|
+
We can even do code blocks with syntax highlighting.
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
const result = getResult();
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Or mermaid diagrams:
|
|
16
|
+
|
|
17
|
+
```mermaid
|
|
18
|
+
graph LR;
|
|
19
|
+
x --> y(probably y)
|
|
20
|
+
y --> z(definitely z)
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Of course, you can also build [normal html pages](html.html).
|
|
24
|
+
|
|
25
|
+
And of course, you can also embed HTML with custom components directly in your
|
|
26
|
+
markdown:
|
|
27
|
+
|
|
28
|
+
<div>
|
|
29
|
+
<sample:countdown from=10></sample:countdown>
|
|
30
|
+
</div>
|
package/template/.gitignore
DELETED