electron 0.2.0 → 0.2.1

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.
@@ -1,509 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Electron</title>
5
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
6
- <script src="/public/js/main.js"></script>
7
- <link rel="stylesheet" href="/public/css/main.css" type="text/css" media="all">
8
- </head>
9
- <body>
10
- <div class="wrapper">
11
- <header>
12
- <h1>Electron</h1>
13
- <nav>
14
- <div id="installation" class="head"> <a href="#header-installation" class="scroll">Installation</a></div>
15
- <div id="argument_parsing" class="head"><a href="#header-argument_parsing" class="scroll">Argument Parsing</a></div>
16
- <div id="command" class="section argument_parsing"><a href="#argument_parsing-command" class="scroll">command</a></div>
17
- <div id="mode" class="section argument_parsing"><a href="#argument_parsing-mode" class="scroll">mode</a></div>
18
- <div id="param" class="section argument_parsing"><a href="#argument_parsing-param" class="scroll">param</a></div>
19
- <div id="defaults" class="section "><a href="#-defaults" class="scroll">defaults</a></div>
20
- <div id="program_framework" class="head"><a href="#header-program_framework" class="scroll">Program Framework</a></div>
21
- <div id="command" class="section program_framework"><a href="#program_framework-command" class="scroll">command</a></div>
22
- <div id="parse" class="section program_framework"><a href="#program_framework-parse" class="scroll">parse</a></div>
23
- <div id="name" class="section program_framework"><a href="#program_framework-name" class="scroll">name</a></div>
24
- <div id="version" class="section program_framework"><a href="#program_framework-version" class="scroll">version</a></div>
25
- <div id="desc" class="section program_framework"><a href="#program_framework-desc" class="scroll">desc</a></div>
26
- <div id="cwd" class="section program_framework"><a href="#program_framework-cwd" class="scroll">cwd</a></div>
27
- <div id="theme" class="section program_framework"><a href="#program_framework-theme" class="scroll">theme</a></div>
28
- <div id="colorize" class="section program_framework"><a href="#program_framework-colorize" class="scroll">colorize</a></div>
29
- <div id="constructing_commands" class="head"><a href="#header-constructing_commands" class="scroll">Constructing Commands</a></div>
30
- <div id="desc" class="section constructing_commands"><a href="#constructing_commands-desc" class="scroll">desc</a></div>
31
- <div id="option" class="section constructing_commands"><a href="#constructing_commands-option" class="scroll">option</a></div>
32
- <div id="action" class="section constructing_commands"><a href="#constructing_commands-action" class="scroll">action</a></div>
33
- </nav>
34
- </header>
35
- <section id="content">
36
- <div id="header-installation" class="segment">
37
- <div class="description"><blockquote>
38
- <p>A tiny cli framework for node.js.
39
-
40
- </p>
41
- </blockquote>
42
- <h2>Features</h2>
43
- <ul>
44
- <li>tbd</li>
45
- </ul>
46
- <h2>Installation</h2>
47
- <h5>Node</h5>
48
- <p><code>electron</code> package is available through <a href="http://npmjs.org">npm</a>.
49
-
50
- </p>
51
- <pre><code class="lang-bash">npm install electron</code></pre>
52
- </div>
53
- </div>
54
- <div id="header-argument_parsing" class="segment">
55
- <div class="summary"><h2>Argument Parsing</h2>
56
- </div>
57
- <ul class="tags">
58
- </ul>
59
- <div class="description"><p>The electron argument parser takes the node.js standard
60
- <code>process.argv</code> array and constructs an object with helpers
61
- that can easily be queried. This helper is publicly exposed
62
- so it can be used independant of the cli framework.
63
-
64
- </p>
65
- <pre><code><span class="keyword">var</span> electron = require(<span class="string">'electron'</span>)
66
- , argv = electron.argv(process.argv);</code></pre>
67
- <p>When constructed, the electron argv parser recognizes three
68
- types command line arguments: <em>commands</em>, <em>modes</em>, and <em>parameters</em>.
69
-
70
- </p>
71
- <p>Each of these types also has a helper that will provide quick access
72
- to whether a <em>command</em> or <em>mode</em> is present, or the value of a <em>parameter</em>.
73
-
74
- </p>
75
- <h5>Commands</h5>
76
- <p>Commands are the simplest of arguments. They are any arguments
77
- that are listed to that do not start with the <code>-</code> prefix. Essentially,
78
- they are a list of keys.
79
-
80
- </p>
81
- <pre><code><span class="comment">// $ node cli.js hello universe</span>
82
- argv.commands === [ <span class="string">'hello'</span>, <span class="string">'universe'</span> ];</code></pre>
83
- <h5>Modes</h5>
84
- <p>Modes are also a non-value list of keys, but they can be expressed
85
- differently by using the <code>-</code> or <code>--</code> prefix. When using modes, if
86
- it begins with a single <code>-</code>, each letter will be parsed as its own mode.
87
-
88
- </p>
89
- <pre><code><span class="comment">// $ node cli.js --universe -abc</span>
90
- argv.modes === [ <span class="string">'universe'</span>, <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ];</code></pre>
91
- <h5>Parameters</h5>
92
- <p>Paremeters are key:value pairs that are declared in a similiar manner
93
- as modes. They can be declared in any of the following ways.
94
-
95
- </p>
96
- <pre><code><span class="comment">// $ node cli.js --noun unverse -v say --topic=hello -w=now</span>
97
- argv.params === {
98
- noun: <span class="string">'universe'</span>
99
- , v: <span class="string">'say'</span>
100
- , topic: <span class="string">'hello'</span>
101
- , w: <span class="string">'now'</span>
102
- };</code></pre>
103
- </div>
104
- </div>
105
- <div id="argument_parsing-command" class="segment">
106
- <div class="summary"><h3>.command (cmd, [cmd], [...])</h3>
107
- </div>
108
- <ul class="tags">
109
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">command(s)</span><span class="desc">to check</span></li>
110
- </ul>
111
- <div class="description"><p>The <code>command</code> helper takes a list of commands and will
112
- return <code>true</code> if any of them exist in the <em>commands</em> list.
113
-
114
- </p>
115
- <pre><code><span class="comment">// node cli.js hello universe</span>
116
- <span class="keyword">var</span> greeting = argv.command(<span class="string">'hi'</span>, <span class="string">'hello'</span>) <span class="comment">// true</span>
117
- , world = argv.command(<span class="string">'world'</span>, <span class="string">'earth'</span>); <span class="comment">// false</span></code></pre>
118
- </div>
119
- </div>
120
- <div id="argument_parsing-mode" class="segment">
121
- <div class="summary"><h3>.mode (mode, [mode], [...])</h3>
122
- </div>
123
- <ul class="tags">
124
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">mode(s)</span><span class="desc">to check</span></li>
125
- </ul>
126
- <div class="description"><p>The <code>mode</code> helper takes a list of modes and will
127
- return <code>true</code> if any of them exist in the <em>modes</em> list.
128
-
129
- </p>
130
- <pre><code><span class="comment">// node cli.js --hello -abc</span>
131
- <span class="keyword">var</span> greeting = argv.mode(<span class="string">'h'</span>, <span class="string">'hello'</span>) <span class="comment">// true</span>
132
- , world = argv.mode(<span class="string">'w'</span>, <span class="string">'world'</span>); <span class="comment">// false</span></code></pre>
133
- </div>
134
- </div>
135
- <div id="argument_parsing-param" class="segment">
136
- <div class="summary"><h3>.param (param, [param], [...])</h3>
137
- </div>
138
- <ul class="tags">
139
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">mode(s)</span><span class="desc">to check</span></li>
140
- </ul>
141
- <div class="description"><p>The <code>param</code> helper takes a list of parameters and will
142
- return the value of the first parameter that matches, or
143
- <code>null</code> if none of the parameters exist in the <em>params</em> list.
144
-
145
- </p>
146
- <pre><code><span class="comment">// node cli.js --hello universe</span>
147
- <span class="keyword">var</span> greeting = argv.param(<span class="string">'h'</span>, <span class="string">'hello'</span>) <span class="comment">// 'universe'</span>
148
- , world = argv.param(<span class="string">'w'</span>, <span class="string">'world'</span>); <span class="comment">// null</span></code></pre>
149
- </div>
150
- </div>
151
- <div id="header-program_framework" class="segment">
152
- <div class="summary"><h2>Program Framework</h2>
153
- </div>
154
- <ul class="tags">
155
- </ul>
156
- <div class="description"></div>
157
- </div>
158
- <div id="program_framework-command" class="segment">
159
- <div class="summary"><h3>.command (name)</h3>
160
- </div>
161
- <ul class="tags">
162
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">command</span><span class="desc">name</span></li>
163
- </ul>
164
- <div class="description"><p>The most important aspect of an application is defining
165
- the different commands that can be executed for it. Some
166
- people prefer a CLI tool that does one thing based on a
167
- set of options. Others prefer a command line tool that
168
- can pivot based on a command string. Electron supports both.
169
-
170
- </p>
171
- <p>When using the <code>command</code> method, it will return a constructed
172
- command object with a different set of methods for chaining.
173
- Please read the &quot;Constructing Commands&quot; section for all available
174
- chainable methods and their respective purpose.
175
-
176
- </p>
177
- <h5>Single Command</h5>
178
- <p>As you understand how Electron parses command-line options,
179
- you know that a command is any option that does
180
- not start with <code>-</code> or <code>--</code>. Therefor, a single-command electron
181
- application is one that does not require any <code>commands</code>, but
182
- will execute a single action. Best demonstrated...
183
-
184
- </p>
185
- <pre><code>$ node app.js -p <span class="number">8080</span></code></pre>
186
- <p>In the case of single-command applications, we will define
187
- a <code>default</code> command for electron to run.
188
-
189
- </p>
190
- <pre><code>program
191
- .command(<span class="string">'default'</span>)
192
- .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
193
- <span class="keyword">var</span> port = argv.param(<span class="string">'p'</span>, <span class="string">'port'</span>);
194
- <span class="comment">// something cool</span>
195
- });</code></pre>
196
- <p>The <code>default</code> command will run when no commands are passed in,
197
- but it will not run if a command is provided.
198
-
199
- </p>
200
- <h5>Multiple Commands</h5>
201
- <p>You can also create many different commands for your application
202
- based on a simple string. These can be used in conjunction
203
- with <code>default</code> if you would like.
204
-
205
- </p>
206
- <pre><code>$ node app.js hello --universe</code></pre>
207
- <p>In this case we want to only run an action when the comamnd
208
- <code>hello</code> is present. This can easily be achieved.
209
-
210
- </p>
211
- <pre><code>program
212
- .command(<span class="string">'hello'</span>)
213
- .action(fn);</code></pre>
214
- <p>There are also cases where you might want to have multipe layers
215
- of commands.
216
-
217
- </p>
218
- <pre><code>$ node app.js hello universe</code></pre>
219
- <p>Using the same mechanism, we can easily define this action.
220
-
221
- </p>
222
- <pre><code>program
223
- .command(<span class="string">'hello universe'</span>)
224
- .action(fn);</code></pre>
225
- <p>One final option to explore with multiple commands is wildcards.
226
- Wildcards can exist at any level in a multi-word command, but they
227
- only work for entire words, not substrings.
228
-
229
- </p>
230
- <pre><code>program
231
- .command(<span class="string">'hello *'</span>)
232
- .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
233
- <span class="keyword">var</span> where = argv.commands[<span class="number">1</span>];
234
- });</code></pre>
235
- <p>Would respond for any command starting with <code>hello</code> and is two
236
- commands long, such as...
237
-
238
- </p>
239
- <pre><code>$ node app.js hello world
240
- $ node app.js hello universe</code></pre>
241
- <h5>Absent Commands</h5>
242
- <p>Should you want to notify your users when they attempt to use
243
- a command is not support, you may use the <code>absent</code> command. This
244
- is also useful if you want to have a single command app but
245
- support a list of items as &quot;options&quot;, such as a list of files or
246
- directories.
247
-
248
- </p>
249
- <pre><code>$ node build.js file1.js files2.js
250
-
251
- program
252
- .command(<span class="string">'absent'</span>)
253
- .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
254
- <span class="keyword">var</span> files = argv.commands.slice(<span class="number">0</span>);
255
- <span class="comment">// something cool</span>
256
- });</code></pre>
257
- </div>
258
- </div>
259
- <div id="program_framework-parse" class="segment">
260
- <div class="summary"><h3>.parse (process.argv)</h3>
261
- </div>
262
- <ul class="tags">
263
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; Array &#125;</span><span class="name">process.argv</span><span class="desc">or compable array</span></li>
264
- </ul>
265
- <div class="description"><p>The <code>parse</code> method will initiate the program with
266
- selection of arguments and run a matching action. It
267
- should be used once all commands and settings have
268
- been propogated.
269
-
270
- </p>
271
- <pre><code>program.parse();
272
- program.parse(process.argv);
273
- program.parse([ <span class="string">'node'</span>, <span class="string">'app.js'</span>, <span class="string">'--hello'</span>, <span class="string">'--universe'</span> ]);</code></pre>
274
- <p>If no parameter is provided, <code>parse</code> will default to using
275
- the current processes <code>process.argv</code> array. You may alse
276
- provide your own array of commands if you like. Note that
277
- argv parsing expectes the first item to be the executing program
278
- and the second argument to be the script (as is with all node argv).
279
- These will be discarded.
280
- </p>
281
- </div>
282
- </div>
283
- <div id="program_framework-name" class="segment">
284
- <div class="summary"><h3>.name (name)</h3>
285
- </div>
286
- <ul class="tags">
287
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">formal</span><span class="desc">name</span></li>
288
- </ul>
289
- <div class="description"><p>Provide a formal name to be used when displaying
290
- the help for the given program. Returns the program
291
- for chaining.
292
-
293
- </p>
294
- <pre><code>program.name(<span class="string">'Electron Framework'</span>);</code></pre>
295
- </div>
296
- </div>
297
- <div id="program_framework-version" class="segment">
298
- <div class="summary"><h3>.version (version)</h3>
299
- </div>
300
- <ul class="tags">
301
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">application</span><span class="desc">version</span></li>
302
- </ul>
303
- <div class="description"><p>Provide a program version to be used when displaying
304
- the version for the given program. Returns the program
305
- for chaining.
306
-
307
- </p>
308
- <pre><code>program.version(electron.version);</code></pre>
309
- </div>
310
- </div>
311
- <div id="program_framework-desc" class="segment">
312
- <div class="summary"><h3>.desc (description)</h3>
313
- </div>
314
- <ul class="tags">
315
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">application</span><span class="desc">description</span></li>
316
- </ul>
317
- <div class="description"><p>Provide a program discription to be used when displaying
318
- the the help for the given program. Returns the program
319
- for chaining.
320
-
321
- </p>
322
- <pre><code>program.desc(<span class="string">'https://github.com/logicalparadox/electron'</span>);</code></pre>
323
- </div>
324
- </div>
325
- <div id="program_framework-cwd" class="segment">
326
- <div class="summary"><h3>.cwd (fqp)</h3>
327
- </div>
328
- <ul class="tags">
329
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">fully</span><span class="desc">quialified path</span></li>
330
- </ul>
331
- <div class="description"><p>Provide an alternative current working directory to be
332
- passed as part of the <code>argv</code> parameter to the action that has
333
- been executed. Returns the program for chaining.
334
-
335
- </p>
336
- <pre><code><span class="comment">// set</span>
337
- program.cwd(__dirname);
338
-
339
- <span class="comment">// get</span>
340
- program
341
- .command(<span class="string">'universe'</span>)
342
- .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
343
- <span class="keyword">var</span> cwd = argv.cwd;
344
- <span class="comment">// something cool</span>
345
- });</code></pre>
346
- </div>
347
- </div>
348
- <div id="program_framework-theme" class="segment">
349
- <div class="summary"><h3>.theme (theme, specifications)</h3>
350
- </div>
351
- <ul class="tags">
352
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String | Function &#125;</span><span class="name">name</span><span class="desc">of electron theme or custom function</span></li>
353
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; Object &#125;</span><span class="name">options</span><span class="desc">for electron themes</span></li>
354
- </ul>
355
- <div class="description"><p>You may change the appearance of the <code>--help</code> using
356
- a simple theming mechanism. Electron comes bundled with
357
- two themes. Each theme also supports minor tweaks. Returns
358
- the program for chaining.
359
-
360
- </p>
361
- <h5>clean (default)</h5>
362
- <p>A colorful and verbose theme useful for multi-command applications.
363
-
364
- </p>
365
- <pre><code>program
366
- .theme(<span class="string">'clean'</span>, {
367
- noColor: <span class="literal">false</span> <span class="comment">// set to true to disable color coding</span>
368
- , prefix: <span class="string">''</span> <span class="comment">// prefix written before each line, such as 'help:'</span>
369
- });</code></pre>
370
- <p><img alt="Electron Clean Theme" src="http://f.cl.ly/items/10283V3e2o1R0f2d2x32/electron-clean-theme.png" />
371
-
372
- </p>
373
- <h5>simple</h5>
374
- <p>An &quot;options only&quot; theme useful for single command applications.
375
-
376
- </p>
377
- <pre><code>program
378
- .theme(<span class="string">'simple'</span>, {
379
- noColor: <span class="literal">false</span> <span class="comment">// set to true to disable color coding</span>
380
- , command: <span class="string">'default'</span> <span class="comment">// which command to show options for</span>
381
- , usage: <span class="string">'&lt;options>'</span> <span class="comment">// special usage instructions</span>
382
- });</code></pre>
383
- <p><img alt="Electron Simple Theme" src="http://f.cl.ly/items/3z3l162D101e0016320G/electron-simple-theme.png" />
384
-
385
- </p>
386
- <h5>Use Your Own Function</h5>
387
- <p>You may also provide a function to <code>theme</code> to provide your own output.
388
- The following example will list all of the commands present in your
389
- program.
390
-
391
- </p>
392
- <pre><code>program.theme(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
393
- <span class="keyword">this</span>.colorize();
394
- console.log(<span class="string">'Usage: %s &lt;command>'</span>, <span class="keyword">this</span>.opts.base);
395
- <span class="keyword">this</span>.commands.forEach(functioni (cmd) {
396
- console.log(<span class="string">' %s - %s'</span>, cmd.cmd, cmd.desc);
397
- });
398
- });</code></pre>
399
- <p>Those interesting in building custom themes should view Electron
400
- on GitHub and explore
401
- <a href="https://github.com/logicalparadox/electron/tree/master/lib/electron/themes">lib/electron/themes</a>.
402
- </p>
403
- </div>
404
- </div>
405
- <div id="program_framework-colorize" class="segment">
406
- <div class="summary"><h3>.colorize ()</h3>
407
- </div>
408
- <ul class="tags">
409
- </ul>
410
- <div class="description"><p>The <code>colorize</code> helper is available if you wish you implement
411
- a colorized but lightweight logging mechanism in your actions,
412
- or if you are building a custom help theme. <code>colorize</code> works
413
- by extending <code>String.prototype</code> with a number of color options.
414
- Just in case, if the current program is not running as a TTY,
415
- no string changes will be made.
416
-
417
- </p>
418
- <pre><code>console.log(<span class="string">'hello universe'</span>.green);</code></pre>
419
- <h5>Colors</h5>
420
- <ul>
421
- <li>red</li>
422
- <li>green</li>
423
- <li>yellow</li>
424
- <li>blue</li>
425
- <li>magenta</li>
426
- <li>cyan</li>
427
- <li>gray</li>
428
- </ul>
429
- </div>
430
- </div>
431
- <div id="header-constructing_commands" class="segment">
432
- <div class="summary"><h2>Constructing Commands</h2>
433
- </div>
434
- <ul class="tags">
435
- </ul>
436
- <div class="description"><p>Once you have decided to construct a command through <code>program.command</code>
437
- you will be returned a command object that you can manipulate through
438
- chainable methods.
439
- </p>
440
- </div>
441
- </div>
442
- <div id="constructing_commands-desc" class="segment">
443
- <div class="summary"><h3>.desc (description)</h3>
444
- </div>
445
- <ul class="tags">
446
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">description</span><span class="desc"></span></li>
447
- </ul>
448
- <div class="description"><p>Provide a description for this command to be used when
449
- being display in help.
450
-
451
- </p>
452
- <pre><code>program
453
- .command(<span class="string">'hello universe'</span>)
454
- .desc(<span class="string">'Say "Hello" to the Universe.'</span>);</code></pre>
455
- </div>
456
- </div>
457
- <div id="constructing_commands-option" class="segment">
458
- <div class="summary"><h3>.option (opts, description, required)</h3>
459
- </div>
460
- <ul class="tags">
461
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">options</span><span class="desc">to parse</span></li>
462
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; String &#125;</span><span class="name">description</span><span class="desc"></span></li>
463
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; Boolean &#125;</span><span class="name">required.</span><span class="desc">defaults to false</span></li>
464
- </ul>
465
- <div class="description"><p>You may define any number of options for
466
- each command. The <code>opts</code> string expects a comma delimited
467
- list of commands with an optional default value or
468
- indicator surrounded by brackets. You may
469
- also provide a description of the option and whether
470
- it is required.
471
-
472
- </p>
473
- <p>This command may be called multiple times to define multiple
474
- options.
475
-
476
- </p>
477
- <pre><code>program
478
- .command(<span class="string">'build'</span>)
479
- .option(<span class="string">'-m, --minify'</span>, <span class="string">'Flag to build minify version'</span>)
480
- .option(<span class="string">'-f, --file [build.js]'</span>, <span class="string">'Save filename'</span>, <span class="literal">true</span>);</code></pre>
481
- </div>
482
- </div>
483
- <div id="constructing_commands-action" class="segment">
484
- <div class="summary"><h3>.action (function)</h3>
485
- </div>
486
- <ul class="tags">
487
- <li class="tag"><span class="type">&#64;param</span><span class="types">&#123; Function &#125;</span><span class="name">action</span><span class="desc">to perform</span></li>
488
- </ul>
489
- <div class="description"><p>Provide the action to be used should this command be
490
- called. The function will receive one parameter of the
491
- parsed process.argv object. Multiple calls to <code>action</code> will
492
- replace the previous defined action.
493
-
494
- </p>
495
- <pre><code>program
496
- .command(<span class="string">'build'</span>)
497
- .action(<span class="function"><span class="keyword">function</span> <span class="params">(argv)</span> {</span>
498
- <span class="keyword">var</span> minify = argv.mode(<span class="string">'m'</span>, <span class="string">'minify'</span>)
499
- , file = argv.param(<span class="string">'f'</span>, <span class="string">'file'</span>);
500
- <span class="comment">// go!</span>
501
- });</code></pre>
502
- </div>
503
- </div>
504
- </section>
505
- <footer>
506
- </footer>
507
- </div>
508
- </body>
509
- </html>