0.0.1-alpha.2 • Published 6 years ago
pgae v0.0.1-alpha.2
pgae
compose html pages
Example
Template file (./src/template.html
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style>{{ styles }}</style>
{{ meta-tags }}
</head>
<body>
<script>{{ head-scripts }}</script>
<header>{{ header }}</header>
<article>{{ articles/article-1 }}</article>
<article>{{ articles/article-2 }}</article>
<article>{{ forms/contact-form }}</article>
<article>{{ articles/article-3 }}</article>
<script>{{ enhancements }}</script>
</body>
</html>
File tree
└── src
├── articles
│ ├── article-1.md
│ ├── article-2.md
│ └── article-3.md
├── enhancements.js
├── forms
│ └── contact-form.html
│ └── contact-form-handler.js
├── head-scripts.js
├── header.html
├── meta-tags.html
├── title.txt
├── styles.scss
└── template.html
Recursive file inclusion ./src/forms/contact-form.html
<form id="contact-form">
<label for="name">Name</label>
<input type="text" name="name" value="" required>
<label for="contact">contact information</label>
<input type="text" name="contact" value="" required>
<label for="message">Message</label>
<textarea name="message" pattern="[\w\s]{7,}"></textarea>
<button>Send</button>
</form>
<script>{{ forms/contact-form-handler }}</script>
Trigger
require('pgae')({
template: `./src/template.html`,
sources: `./src`,
destination: `./docs/index.html`,
});