Is a component based static website builder!
npm i poopy-di-scoop
var poopDiScoop = require('poopy-di-scoop').default;
var pds = new poopDiScoop({
rootDir: './',
githubName: 'blog' // optinal and is used for deploying to github
});
pds.load(); // by default will push to prod if it is configured correctly above
pds.load(false); // build without pushing to prod.
pds.pushToProd(); // you can push to prod manually
Components are segments of html that are compiled into creating a static website. They get there name from their folder struture. Example: components/home/index.html: home components/blog/post.html: blog-post
Is a compiled directory that is used for prod.
Is a compiled directory that enables you to test locally.
Pages are used to pass data into a component and generate html in html and local directory.
{
"name": "home",
"url": "/",
"component": "home",
"params": {
"hello": "kevin was here!"
}
}
a params can be print by adding {} around param key
<div>{ example }</div>
<div class="{ example }">{ example }</div>
<a href="{ link.href }">{ link.title }</a>
<ul>
<li each="num in [1, 2, 3]">{num}</li>
</ul>
<ul>
<li each="link in links">
<a href="{ link.href }">{ link.title }</a>
</li>
</ul>
my-nav/index.html
<ul>
<li each="link in links">
<a href="{ link.href }">{ link.title }</a>
</li>
</ul>
home/index.html
<html>
<body>
<my-nav />
<h2>Hello World</h2>
</body>
</html>
layout/index.html
<html>
<body>{children}</body>
</html>
home/index.html
<layout>
<h2>Hello World</h2>
</layout>
default params can only have one options and it will run eval on the default value only if params is not found
<div>{ test || 'example' }</div>
<div raw="html">{ test }</div>
<div raw>{ test }</div>
Href will use the relative path and if it is found, it will embed it. If you would like to compress the css, add attr compressed. If you would like to namespace css, add attr scoped or namespaced. Sometimes a component will be included multiple times and if you want the css to only be included once add attr once.
<link href="blogCard.scss" type="text/css" compressed/>
<link href="blogCard.scss" type="text/css" scoped/>
<link href="blogCard.scss" type="text/css" namespaced/>
<link href="blogCard.scss" type="text/css" once/>
Href will use the relative path and if it is found, it will embed it. If you would like to compress the css, add attr compressed. Sometimes a component will be included multiple times and if you want the js to only be included once add attr once.
<script type="text/javascript" src="mode/python.js" compressed></script>
<script type="text/javascript" src="mode/python.js" once></script>
text, html, number are support type. Do the following to get it work with the CMS
<div>{ test:text }</div>
<div>{ test:html }</div>
<div>{ test:number }</div>
<link rel="stylesheet" href="styles.css" inline>