unicorn-list
Advanced tools
The Unicorn framework generates a scaffold for a simple node server. It uses the well known .cats engine to populate pages dynamically.
mkdir <directory name>cd <directory name> to change into the directorynpm install unicorn-listnpm startunicorn-style.css needs to be loaded inbetween the <head> tags</body> tag in order for the interface.js to capture the template after the DOM has loadedunicorn-renderer.js needs to be loaded before any interface scriptsunicorn-container to the element holding the template. This hides the dynamic content of the template until it is rendered.<!-- index.cats -->
<html>
<head>
<link type='text/css' rel='stylesheet' href='stylesheets/unicorn-style.css'>
</head>
<body>
<h1>Title</h1>
<p>Some example static content</p>
<div id="example-container" class="unicorn-container">
{% if object.length > 1 %}
<p>Some example dynamic content</p>
{% endif %}
</div>
<!-- scripts just before closing body tag -->
<script type="text/javascript" src='scripts/unicorn-renderer.js'></script>
<script type="text/javascript" src='scripts/interface.js'></script>
</body>
</html>
Simply pass the object to be rendered into renderView as an argument, and the container holding the template tags as the second argument.
// interface.js
var exampleObject = {
names: ['andreamazza89','mtaner','Jojograndjojo','vannio']
}
var exampleContainer = document.getElementById('example-container');
renderView(exampleObject, exampleContainer);
The index.cats file is a template for the main page, in which regular html syntax can be used along with custom template tags. If you want to use a different route, create a .cats file in the views directory with the matching name of the route.
You can use {% loop array %} template tags to loop through an array and display the contents. In our example, object.names is an array.
{% loop object.names %}
<p>The index of this loop is {{ index }}.</p>
<p>The contents of this loop are {{ item }}.</p>
{% endloop %}
You can use {% if expression %} template tags to render content, based on an expression that returns a boolean. In our example, the expression object.names.length > 1 returns true, therefore the HTML gets rendered.
{% if object.names.length > 1 %}
<li>Hello, this is true</li>
{% endif %}
The unicorn framework is growing in popularity. If you use it in your project, please send it to us and we will add it to the list below:
FAQs
Simple web framework
We found that unicorn-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub has revoked npm classic tokens for publishing; maintainers must migrate, but OpenJS warns OIDC trusted publishing still has risky gaps for critical projects.
Security News
Rustâs crates.io team is advancing an RFC to add a Security tab that surfaces RustSec vulnerability and unsoundness advisories directly on crate pages.
Security News
/Research
Socket found a Rust typosquat (finch-rust) that loads sha-rust to steal credentials, using impersonation and an unpinned dependency to auto-deliver updates.