Skip to content

Commit 60a86fd

Browse files
thewebartisan7thewebartisan7
committed
Added examples
1 parent 9f660c7 commit 60a86fd

19 files changed

+913
-3
lines changed

‎.clintonrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"tmp/**",
55
"src/**",
66
"lib/**",
7+
"examples/**",
78
".idea/**",
89
"*.{html,jpg}",
910
"cache.json"

‎.npmignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules
22
.gitignore
33
.travis.yml
44
coverage
5-
.nyc_output
5+
.nyc_output
6+
examples

‎changelog.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Change Log
2+
All notable changes to this project will be documented in this file.
3+
4+
The format is based on [Keep a Changelog](http://keepachangelog.com/)
5+
and this project adheres to [Semantic Versioning](http://semver.org/).
6+
7+
## [0.0.1] - 2022-10-xx
8+
9+
Not yet released.
10+
11+
### Added
12+
13+
### Changed
14+
15+
### Fixed

‎examples/dist/index.html

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="h-100">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>PostHTML UI</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
9+
<meta name="pushed" content="Pushed from home.html">
10+
<meta name="pushed" content="Pushed from page.html">
11+
</head>
12+
<body class="d-flex flex-column h-100">
13+
<header class="py-3 mb-4">
14+
<div class="container">
15+
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
16+
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
17+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" fill="currentColor" class="bi bi-code-slash me-2" viewbox="0 0 16 16">
18+
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
19+
</svg>
20+
</a>
21+
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
22+
<li>
23+
<a href="#" class="nav-link px-2 link-secondary">Home</a>
24+
</li>
25+
<li>
26+
<a href="#" class="nav-link px-2 link-dark">Features</a>
27+
</li>
28+
<li>
29+
<a href="#" class="nav-link px-2 link-dark">Pricing</a>
30+
</li>
31+
<li>
32+
<a href="#" class="nav-link px-2 link-dark">FAQs</a>
33+
</li>
34+
<li>
35+
<a href="#" class="nav-link px-2 link-dark">About</a>
36+
</li>
37+
</ul>
38+
<div class="col-md-3 text-end">
39+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-outline-secondary me-2" target="_blank">Docs</a>
40+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
41+
</div>
42+
</div>
43+
</div>
44+
</header>
45+
<main class="flex-shrink-0">
46+
<div class="container">
47+
<div class="row justify-content-center align-items-center">
48+
<div class="col-lg-8 text-center">
49+
<h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
50+
<p class="lead mb-4">
51+
Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end
52+
open source toolkit, and with PostHTML, the simple, yet powerful tool for transforming HTML/XML with JS plugins.
53+
Powered with PostHTML Components plugin which give you additional superpowers!
54+
</p>
55+
<div class="text-center mb-4">
56+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary btn-lg me-3">Read the docs</a>
57+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-outline-secondary btn-lg">Download</a>
58+
</div>
59+
<p class="text-muted">
60+
Currently
61+
<strong>v0.0.1</strong>
62+
<span class="px-1">·</span>
63+
<a href="#" class="link-secondary" data-bs-toggle="modal" data-bs-target="#modalWithComponents">Changelog</a>
64+
</p>
65+
</div>
66+
</div>
67+
<!-- Push something in the <head> -->
68+
</div>
69+
</main>
70+
<footer class="footer mt-auto py-3 bg-white">
71+
<div class="container">
72+
<div class="text-muted text-center">
73+
Built with
74+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill d-inline mx-1 text-danger" viewbox="0 0 16 16">
75+
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
76+
</svg>
77+
and
78+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-hot-fill d-inline mx-1 text-warning" viewbox="0 0 16 16">
79+
<path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6H.5ZM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5Z"></path>
80+
<path d="m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8Zm3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8Zm3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8Z"></path>
81+
</svg>
82+
in Swiss Alp by
83+
<a href="https://github.com/thewebartisan7" class="text-muted text-decoration-none fst-italic" target="_blank">@thewebartisan7</a>
84+
</div>
85+
</div>
86+
</footer>
87+
<div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
88+
<div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
89+
<div class="modal-content modal-content-custom">
90+
<div class="modal-header">
91+
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
92+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
93+
</div>
94+
<!-- /.modal-header -->
95+
<div class="modal-body">
96+
<p>
97+
All notable changes to this project will be documented in this file.
98+
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
99+
</p>
100+
<h5>[0.0.1] - 2022.10.xx</h5>
101+
<p>Not yet released.</p>
102+
</div>
103+
<!-- /.modal-body -->
104+
<div class="modal-footer">
105+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
106+
</div>
107+
<!-- /.modal-footer -->
108+
</div>
109+
<!-- /.modal-content -->
110+
</div>
111+
<!-- /.modal-dialog -->
112+
</div>
113+
<!-- /.modal -->
114+
</body>
115+
</html>

‎examples/index.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const {readdirSync, readFileSync, writeFileSync} = require('fs');
2+
const path = require('path');
3+
const posthtml = require('posthtml');
4+
const components = require('../src');
5+
const beautify = require('posthtml-beautify');
6+
7+
const src = './src/pages/';
8+
const dist = './dist/';
9+
10+
const plugins = [
11+
components({
12+
root: './src',
13+
roots: ['components', 'layouts'],
14+
strict: true,
15+
expressions: {
16+
locals: {
17+
title: 'PostHTML Components'
18+
}
19+
}
20+
}),
21+
22+
beautify({
23+
rules: {
24+
indent: 2,
25+
blankLines: false,
26+
sortAttr: false
27+
}
28+
})
29+
];
30+
31+
const options = {};
32+
33+
readdirSync(src).forEach(file => {
34+
const html = readFileSync(path.resolve(`${src}${file}`), 'utf-8');
35+
36+
posthtml(plugins)
37+
.process(html, options)
38+
.then(result => {
39+
writeFileSync(path.resolve(`${dist}${file}`), result.html, 'utf8');
40+
});
41+
});

‎examples/src/components/button.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<button type="button" class="btn"><yield></yield></button>

‎examples/src/components/modal/body.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="modal-body">
2+
<yield></yield>
3+
</div><!-- /.modal-body -->

‎examples/src/components/modal/footer.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script props>
2+
module.exports = {
3+
close: true
4+
};
5+
</script>
6+
<div class="modal-footer">
7+
<if condition="close">
8+
<x-button class="btn-secondary" data-bs-dismiss="modal">Close</x-button>
9+
</if>
10+
11+
<yield></yield>
12+
</div><!-- /.modal-footer -->

‎examples/src/components/modal/header.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script props>
2+
module.exports = {
3+
close: true
4+
};
5+
</script>
6+
<div class="modal-header">
7+
<yield></yield>
8+
9+
<if condition="close">
10+
<x-button
11+
override:class="btn-close"
12+
data-bs-dismiss="modal"
13+
aria-label="Close"
14+
></x-button>
15+
</if>
16+
</div><!-- /.modal-header -->

‎examples/src/components/modal/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script props>
2+
/**
3+
* Bootstrap Modal
4+
* @see https://getbootstrap.com/docs/5.0/components/modal/
5+
*
6+
* Props
7+
*
8+
* backdrop: static|true|false
9+
* keyboard: true|false
10+
* scrollable: true|false
11+
* centered: true|false
12+
* size: sm|lg|xl
13+
* fullscreen: true|false|sm|md|lg|xl|xxl
14+
* dialogClass: any additional class for modal-dialog
15+
* contentClass: any additional class for modal-content
16+
*/
17+
module.exports = {
18+
dialogClass: '',
19+
contentClass: '',
20+
backdrop: true,
21+
keyboard: locals.backdrop === "static" || locals.keyboard === true,
22+
scrollable: locals.scrollable === true ? 'modal-dialog-scrollable' : '',
23+
centered: locals.centered === true ? 'modal-dialog-centered' : '',
24+
size: locals.size ? `modal-${locals.size}` : '',
25+
fullscreen: [true, "sm", "md", "lg", "xl", "xxl"].includes(locals.fullscreen)
26+
? (locals.fullscreen === true ? "modal-fullscreen" : `modal-fullscreen-${locals.fullscreen}-down`)
27+
: ''
28+
};
29+
</script>
30+
31+
<div
32+
class="modal fade"
33+
id="{{ id }}"
34+
data-bs-backdrop="{{ backdrop }}"
35+
data-bs-keyboard="{{ keyboard }}"
36+
aria-labelledby="{{ id }}"
37+
tabindex="-1"
38+
aria-hidden="true"
39+
aria-modal="true"
40+
role="dialog"
41+
>
42+
<div
43+
class="modal-dialog {{ size }} {{ fullscreen }} {{ centered }} {{ scrollable }} {{ dialogClass }}"
44+
>
45+
<div class="modal-content {{ contentClass }}">
46+
<yield></yield>
47+
<if condition="$slots.header?.filled">
48+
<x-modal.header>
49+
<!-- Alternative way to <fill:header></fill:header> -->
50+
{{{ $slots.header?.source }}}
51+
</x-modal.header>
52+
</if>
53+
<if condition="$slots.body?.filled">
54+
<x-modal.body>
55+
<fill:body></fill:body>
56+
</x-modal.body>
57+
</if>
58+
<if condition="$slots.footer?.filled">
59+
<x-modal.footer close="{{ $slots.footer?.locals.close }}">
60+
<fill:footer></fill:footer>
61+
</x-modal.footer>
62+
</if>
63+
</div><!-- /.modal-content -->
64+
</div><!-- /.modal-dialog -->
65+
</div><!-- /.modal -->

‎examples/src/layouts/body.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<body>
2+
<yield></yield>
3+
<stack name="body-bottom"></stack>
4+
</body>

‎examples/src/layouts/footer.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<footer>
2+
<div class="container">
3+
<yield></yield>
4+
</div>
5+
</footer>

‎examples/src/layouts/header.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<header class="py-3 mb-4">
2+
<div class="container">
3+
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
4+
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
5+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" fill="currentColor" class="bi bi-code-slash me-2" viewBox="0 0 16 16">
6+
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
7+
</svg>
8+
</a>
9+
10+
<yield></yield>
11+
12+
<div class="col-md-3 text-end">
13+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-outline-secondary me-2" target="_blank">Docs</a>
14+
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
15+
</div>
16+
</div>
17+
</div>
18+
</header>

‎examples/src/layouts/html.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>PostHTML UI</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
9+
<stack name="head"></stack>
10+
</head>
11+
<yield></yield>
12+
</html>

0 commit comments

Comments
 (0)