Skip to content

Commit

Permalink
Examples site and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@thewebartisan7
thewebartisan7 committed Oct 19, 2022
1 parent fc4283c commit 9b853e6
Show file tree
Hide file tree
Showing 15 changed files with 2,333 additions and 48 deletions.
1,028 changes: 1,028 additions & 0 deletions examples/dist/docs.html
View file

Large diffs are not rendered by default.

33 changes: 17 additions & 16 deletions examples/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PostHTML UI</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<meta name="pushed" content="Pushed from home.html">
<meta name="pushed" content="Pushed from page.html">
<style>
.doc-shadow {
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<body class="d-flex flex-column h-100 bg-light">
<header class="py-3 mb-4">
<div class="container-lg">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<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">
<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>
</svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li>
<a class="nav-link px-2 link-dark" href="home.html">Home</a>
<a class="nav-link px-2 link-dark" href="index.html">Home</a>
</li>
<li>
<a class="nav-link px-2 link-dark" href="docs.html">Docs</a>
</li>
<li>
<a class="nav-link px-2 link-dark" href="https://github.com/posthtml">PostHTML</a>
</li>
<li>
<a class="nav-link px-2 link-dark" href="https://github.com/thewebartisan7/posthtml-components/blob/main/changelog.md">Changelog</a>
<a class="nav-link px-2 link-dark" href="https://github.com/posthtml" target="_blank">PostHTML</a>
</li>
<li>
<a class="nav-link px-2 link-dark d-block d-md-none" href="about.html">GitHub</a>
<a class="nav-link px-2 link-dark d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
</li>
</ul>
<div class="col-md-3 text-end d-none d-md-block">
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
<a class="btn btn-light bg-white doc-shadow border-white" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a>
</div>
</div>
</div>
Expand All @@ -52,8 +53,8 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
Powered with PostHTML Components plugin which give you additional superpowers!
</p>
<div class="text-center mb-4">
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary btn-lg me-3">Read the docs</a>
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-outline-secondary btn-lg">Download</a>
<a class="btn btn-light bg-white doc-shadow border-white btn-lg me-3" href="docs.html" target="_blank">Read the docs</a>
<a class="btn btn-light bg-white doc-shadow border-white btn-lg" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">Download</a>
</div>
<p class="text-muted">
Currently
Expand All @@ -63,10 +64,9 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
</p>
</div>
</div>
<!-- Push something in the <head> -->
</div>
</main>
<footer class="footer mt-auto py-3 bg-white">
<footer class="footer mt-auto py-3">
<div class="container-lg">
<div class="text-muted text-center">
Built with
Expand Down Expand Up @@ -110,5 +110,6 @@ <h5>[0.0.1] - 2022.10.xx</h5>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
67 changes: 65 additions & 2 deletions examples/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@ const path = require('path');
const posthtml = require('posthtml');
const components = require('../src');
const beautify = require('posthtml-beautify');
const anchor = require('markdown-it-anchor');
const markdownIt = require('posthtml-markdownit');
const markdownItToc = require('markdown-it-toc-done-right');
// const {render} = require('posthtml-render');
// const hljs = require('highlight.js');

const src = './examples/src/pages/';
const dist = './examples/dist/';
const md = './examples/src/md';

const plugins = [
components({
Expand All @@ -19,13 +25,43 @@ const plugins = [
}
}),

markdownIt({
root: md,
plugins: [
{
plugin: anchor,
options: {
level: [1, 2, 3],
permalink: anchor.permalink.linkInsideHeader({
symbol: '#',
placement: 'before'
})
}
},
{
plugin: markdownItToc,
options: {
level: [1, 2, 3],
containerClass: 'h-100 flex-column align-items-stretch ps-4 p-3 bg-white rounded-3 doc-shadow',
containerId: 'header-toc',
listClass: 'nav flex-column',
itemClass: 'nav-item',
linkClass: 'nav-link',
listType: 'ul'
}
}
]
}),

beautify({
rules: {
indent: 2,
blankLines: false,
sortAttr: false
}
})
}),

processCodeTags()
];

const options = {};
Expand All @@ -36,6 +72,33 @@ readdirSync(src).forEach(file => {
posthtml(plugins)
.process(html, options)
.then(result => {
writeFileSync(path.resolve(`${dist}${file}`), result.html, 'utf8');
writeFileSync(path.resolve(`${dist}${file}`), result.html, 'utf-8');
});
});

function processCodeTags () {
return function(tree) {
tree.match.call(tree, {tag: 'pre'}, function(node) {
node.content = Array.from(node.content).map(content => {
if (typeof content === 'string') {
content = '';
} else if (content.tag === 'code' && content.attrs?.class?.startsWith('language-')) {
Array.from(content.content).forEach((c, i) => {
content.content[i] = c.trim()
});
}
return content;
});
return node;
});

// tree.match.call(tree, {tag: 'code'}, function(node) {
// if (Array.isArray(node.content)) {
// node.content = hljs.highlight(render(node.content), {language: 'html'}).value
// } else {
// node.content = hljs.highlightAuto(node.content).value
// }
// return node;
// });
}
}
1 change: 1 addition & 0 deletions examples/src/components/btn-link.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<a class="btn btn-light bg-white doc-shadow border-white"><yield></yield></a>
3 changes: 2 additions & 1 deletion examples/src/layouts/body.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<body>
<yield></yield>
<stack name="body-bottom"></stack>
<stack name="modals"></stack>
<stack name="scripts"></stack>
</body>
4 changes: 2 additions & 2 deletions examples/src/layouts/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<header class="py-3 mb-4">
<div class="container-lg">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<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">
<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"/>
</svg>
Expand All @@ -10,7 +10,7 @@
<yield></yield>

<div class="col-md-3 text-end d-none d-md-block">
<a href="https://github.com/thewebartisan7/posthtml-components" class="btn btn-primary" target="_blank">GitHub</a>
<x-btn-link href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</x-btn-link>
</div>
</div>
</div>
Expand Down
4 changes: 1 addition & 3 deletions examples/src/layouts/html.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PostHTML UI</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<stack name="head"></stack>
<stack name="styles"></stack>
</head>
<yield></yield>
</html>
28 changes: 19 additions & 9 deletions examples/src/layouts/page.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<x-html class="h-100">
<x-body class="d-flex flex-column h-100">
<x-body class="d-flex flex-column h-100 bg-light">
<x-header>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li><x-nav-link href="home.html">Home</x-nav-link></li>
<li><x-nav-link href="index.html">Home</x-nav-link></li>
<li><x-nav-link href="docs.html">Docs</x-nav-link></li>
<li><x-nav-link href="https://github.com/posthtml">PostHTML</x-nav-link></li>
<li><x-nav-link href="https://github.com/thewebartisan7/posthtml-components/blob/main/changelog.md">Changelog</x-nav-link></li>
<li><x-nav-link class="d-block d-md-none" href="about.html">GitHub</x-nav-link></li>
<li><x-nav-link href="https://github.com/posthtml" target="_blank">PostHTML</x-nav-link></li>
<li><x-nav-link class="d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</x-nav-link></li>
</ul>
</x-header>

Expand All @@ -16,7 +15,7 @@
</div>
</main>

<x-footer class="footer mt-auto py-3 bg-white">
<x-footer class="footer mt-auto py-3">
<div class="text-muted text-center">
Built with
<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">
Expand All @@ -33,11 +32,22 @@
</x-body>
</x-html>

<push name="head">
<meta name="pushed" content="Pushed from page.html">
<push name="styles">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.doc-shadow {
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important;
}
</style>
</push>

<push name="body-bottom">
<push name="scripts">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</push>

<push name="modals">
<x-modal
id="modalWithComponents"
backdrop="true"
Expand Down
Loading

0 comments on commit 9b853e6

Please sign in to comment.