@page-libs/static-generator
v1.1.3
Published
Static generator for Page framework.
Downloads
14
Readme
page-static-generator
Static generator for Page framework (based on 'cuties' libs and Async Tree Pattern).
Install
npm install @page-libs/static-generator
Run test
npm test
Run build
npm run build
Usage
const {
// Needed async objects here from the table below
} = require('@page-libs/static-generator');
| Async Object | Description | Parameters(default value/description) | Representation result |
| ------------- | ----------------| ---------- | --------------------- |
| Base | Creates base tag | href, attrs(string like 'attr="value"') | <base href=${href} ${attrs}> |
| Body | Creates body tag | attrs(string like 'attr="value"'), ...elms(elements inside of body tag) | <body ${attrs}>${elms.join('')}</body> |
| Head | Creates head tag | ...elms(elements inside of head tag) | <head>${elms.join('')}</head> |
| Link | Creates link tag | attrs(string like 'attr="value"') | <link ${attrs}> |
| Meta | Creates meta tag | attrs(string like 'attr="value"') | <meta ${attrs}> |
| NoScript | Creates noscript tag | text | <noscript>${text}</noscript> |
| Page | Creates html tag | attrs(string like 'attr="value"'), head, body | <!DOCTYPE html>\n<html ${attrs}>${head}${body}</html>\n |
| PrettyPage | Makes page pretty | page | Pretty html document(page) |
| SavedPage | Saves page to the specified file(as path) | path, page | file(as path) |
| Script | Creates script tag(for head tag) | src, attrs(string like 'attr="value"') | <script src="${src}" ${attrs}></script> |
| Style | Creates link tag with rel="stylesheet | href, attrs(string like 'attr="value"') | <link rel="stylesheet" href="${href}" ${attrs}> |
| Template | Read html as string from the specified file(as path) | path | html string |
| TemplateWithParams | Replace all placeholders in a template with the specified ...params | template, ...params | html string |
| Title | Creates title tag | text | <title>${text}</title> |
Example
Let's say we have templates: outer.html, inner.html:
<!-- outer.html -->
<div class="outer">
{{ text }}
<div class="place-for-inner-template">
{{ innerTemplate }}
</div>
</div>
<!-- inner.html -->
<div class="inner">
{{ text }}
</div>
Then we can create a page that contains these templates:
'use strict'
const {
SavedPage,
PrettyPage,
Page,
Head,
Body,
Script,
Style,
TemplateWithParams,
Template
} = require('@page-libs/static-generator');
new SavedPage(
'page.html',
new PrettyPage(
new Page(
'xmlns="http://www.w3.org/1999/xhtml" lang="en"',
new Head(
new Script('script1.js', 'type="text/javascript"'),
new Script('script2.js', 'type="text/javascript"'),
new Style('main.css', 'type="text/css"'),
new Style('mobile.css', 'type="text/css"')
),
new Body(
'class="main"',
new TemplateWithParams(
new Template('outer.html'),
'text in outer template',
new TemplateWithParams(
new Template('inner.html'),
'text in inner template'
)
)
)
)
)
).call();
The result is
<!-- page.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script src="script1.js" type="text/javascript"></script>
<script src="script2.js" type="text/javascript"></script>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="mobile.css" type="text/css">
</head>
<body class="main">
<div class="outer">
text in outer template
<div class="place-for-inner-template">
<div class="inner">
text in inner template
</div>
</div>
</div>
</body>
</html>
Full example is here.