Skip to content

Commit 9b853e6

Browse files
thewebartisan7thewebartisan7
committed
Examples site and docs
1 parent fc4283c commit 9b853e6

15 files changed

+2333
-48
lines changed

‎examples/dist/docs.html

+1,028
Large diffs are not rendered by default.

‎examples/dist/index.html

+17-16
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,39 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>PostHTML UI</title>
77
<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">
8+
<style>
9+
.doc-shadow {
10+
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
11+
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
12+
rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
13+
}
14+
</style>
1115
</head>
12-
<body class="d-flex flex-column h-100">
16+
<body class="d-flex flex-column h-100 bg-light">
1317
<header class="py-3 mb-4">
1418
<div class="container-lg">
1519
<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">
20+
<a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
1721
<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">
1822
<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>
1923
</svg>
2024
</a>
2125
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
2226
<li>
23-
<a class="nav-link px-2 link-dark" href="home.html">Home</a>
27+
<a class="nav-link px-2 link-dark" href="index.html">Home</a>
2428
</li>
2529
<li>
2630
<a class="nav-link px-2 link-dark" href="docs.html">Docs</a>
2731
</li>
2832
<li>
29-
<a class="nav-link px-2 link-dark" href="https://github.com/posthtml">PostHTML</a>
30-
</li>
31-
<li>
32-
<a class="nav-link px-2 link-dark" href="https://github.com/thewebartisan7/posthtml-components/blob/main/changelog.md">Changelog</a>
33+
<a class="nav-link px-2 link-dark" href="https://github.com/posthtml" target="_blank">PostHTML</a>
3334
</li>
3435
<li>
35-
<a class="nav-link px-2 link-dark d-block d-md-none" href="about.html">GitHub</a>
36+
<a class="nav-link px-2 link-dark d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
3637
</li>
3738
</ul>
3839
<div class="col-md-3 text-end d-none d-md-block">
39-
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
40+
<a class="btn btn-light bg-white doc-shadow border-white" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
4041
</div>
4142
</div>
4243
</div>
@@ -52,8 +53,8 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
5253
Powered with PostHTML Components plugin which give you additional superpowers!
5354
</p>
5455
<div class="text-center mb-4">
55-
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary btn-lg me-3">Read the docs</a>
56-
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-outline-secondary btn-lg">Download</a>
56+
<a class="btn btn-light bg-white doc-shadow border-white btn-lg me-3" href="docs.html" target="_blank">Read the docs</a>
57+
<a class="btn btn-light bg-white doc-shadow border-white btn-lg" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">Download</a>
5758
</div>
5859
<p class="text-muted">
5960
Currently
@@ -63,10 +64,9 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
6364
</p>
6465
</div>
6566
</div>
66-
<!-- Push something in the <head> -->
6767
</div>
6868
</main>
69-
<footer class="footer mt-auto py-3 bg-white">
69+
<footer class="footer mt-auto py-3">
7070
<div class="container-lg">
7171
<div class="text-muted text-center">
7272
Built with
@@ -110,5 +110,6 @@ <h5>[0.0.1] - 2022.10.xx</h5>
110110
<!-- /.modal-dialog -->
111111
</div>
112112
<!-- /.modal -->
113+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
113114
</body>
114115
</html>

‎examples/index.js

+65-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@ const path = require('path');
33
const posthtml = require('posthtml');
44
const components = require('../src');
55
const beautify = require('posthtml-beautify');
6+
const anchor = require('markdown-it-anchor');
7+
const markdownIt = require('posthtml-markdownit');
8+
const markdownItToc = require('markdown-it-toc-done-right');
9+
// const {render} = require('posthtml-render');
10+
// const hljs = require('highlight.js');
611

712
const src = './examples/src/pages/';
813
const dist = './examples/dist/';
14+
const md = './examples/src/md';
915

1016
const plugins = [
1117
components({
@@ -19,13 +25,43 @@ const plugins = [
1925
}
2026
}),
2127

28+
markdownIt({
29+
root: md,
30+
plugins: [
31+
{
32+
plugin: anchor,
33+
options: {
34+
level: [1, 2, 3],
35+
permalink: anchor.permalink.linkInsideHeader({
36+
symbol: '#',
37+
placement: 'before'
38+
})
39+
}
40+
},
41+
{
42+
plugin: markdownItToc,
43+
options: {
44+
level: [1, 2, 3],
45+
containerClass: 'h-100 flex-column align-items-stretch ps-4 p-3 bg-white rounded-3 doc-shadow',
46+
containerId: 'header-toc',
47+
listClass: 'nav flex-column',
48+
itemClass: 'nav-item',
49+
linkClass: 'nav-link',
50+
listType: 'ul'
51+
}
52+
}
53+
]
54+
}),
55+
2256
beautify({
2357
rules: {
2458
indent: 2,
2559
blankLines: false,
2660
sortAttr: false
2761
}
28-
})
62+
}),
63+
64+
processCodeTags()
2965
];
3066

3167
const options = {};
@@ -36,6 +72,33 @@ readdirSync(src).forEach(file => {
3672
posthtml(plugins)
3773
.process(html, options)
3874
.then(result => {
39-
writeFileSync(path.resolve(`${dist}${file}`), result.html, 'utf8');
75+
writeFileSync(path.resolve(`${dist}${file}`), result.html, 'utf-8');
4076
});
4177
});
78+
79+
function processCodeTags () {
80+
return function(tree) {
81+
tree.match.call(tree, {tag: 'pre'}, function(node) {
82+
node.content = Array.from(node.content).map(content => {
83+
if (typeof content === 'string') {
84+
content = '';
85+
} else if (content.tag === 'code' && content.attrs?.class?.startsWith('language-')) {
86+
Array.from(content.content).forEach((c, i) => {
87+
content.content[i] = c.trim()
88+
});
89+
}
90+
return content;
91+
});
92+
return node;
93+
});
94+
95+
// tree.match.call(tree, {tag: 'code'}, function(node) {
96+
// if (Array.isArray(node.content)) {
97+
// node.content = hljs.highlight(render(node.content), {language: 'html'}).value
98+
// } else {
99+
// node.content = hljs.highlightAuto(node.content).value
100+
// }
101+
// return node;
102+
// });
103+
}
104+
}

‎examples/src/components/btn-link.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a class="btn btn-light bg-white doc-shadow border-white"><yield></yield></a>

‎examples/src/layouts/body.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<body>
22
<yield></yield>
3-
<stack name="body-bottom"></stack>
3+
<stack name="modals"></stack>
4+
<stack name="scripts"></stack>
45
</body>

‎examples/src/layouts/header.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<header class="py-3 mb-4">
22
<div class="container-lg">
33
<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">
4+
<a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
55
<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">
66
<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"/>
77
</svg>
@@ -10,7 +10,7 @@
1010
<yield></yield>
1111

1212
<div class="col-md-3 text-end d-none d-md-block">
13-
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
13+
<x-btn-link href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</x-btn-link>
1414
</div>
1515
</div>
1616
</div>

‎examples/src/layouts/html.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<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>
7+
<stack name="styles"></stack>
108
</head>
119
<yield></yield>
1210
</html>

‎examples/src/layouts/page.html

+19-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<x-html class="h-100">
2-
<x-body class="d-flex flex-column h-100">
2+
<x-body class="d-flex flex-column h-100 bg-light">
33
<x-header>
44
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
5-
<li><x-nav-link href="home.html">Home</x-nav-link></li>
5+
<li><x-nav-link href="index.html">Home</x-nav-link></li>
66
<li><x-nav-link href="docs.html">Docs</x-nav-link></li>
7-
<li><x-nav-link href="https://github.com/posthtml">PostHTML</x-nav-link></li>
8-
<li><x-nav-link href="https://github.com/thewebartisan7/posthtml-components/blob/main/changelog.md">Changelog</x-nav-link></li>
9-
<li><x-nav-link class="d-block d-md-none" href="about.html">GitHub</x-nav-link></li>
7+
<li><x-nav-link href="https://github.com/posthtml" target="_blank">PostHTML</x-nav-link></li>
8+
<li><x-nav-link class="d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</x-nav-link></li>
109
</ul>
1110
</x-header>
1211

@@ -16,7 +15,7 @@
1615
</div>
1716
</main>
1817

19-
<x-footer class="footer mt-auto py-3 bg-white">
18+
<x-footer class="footer mt-auto py-3">
2019
<div class="text-muted text-center">
2120
Built with
2221
<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">
@@ -33,11 +32,22 @@
3332
</x-body>
3433
</x-html>
3534

36-
<push name="head">
37-
<meta name="pushed" content="Pushed from page.html">
35+
<push name="styles">
36+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
37+
<style>
38+
.doc-shadow {
39+
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
40+
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
41+
rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
42+
}
43+
</style>
3844
</push>
3945

40-
<push name="body-bottom">
46+
<push name="scripts">
47+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
48+
</push>
49+
50+
<push name="modals">
4151
<x-modal
4252
id="modalWithComponents"
4353
backdrop="true"

0 commit comments

Comments
 (0)