Rinco Static Generator

See the official webpage:

http://rincojs.com

Install

$ npm install -g rinco

Create a new project

$ rinco

CLI Commands

$ rinco (command)
    server // Development server
    add // Add a library from CDNJS
    update // Update library list from CDNJS
    build // Generate the static files
    build-uncss // Generate the static files with CSS optimization

CDNJS

To add a library from CDNJS use the command add in rinco cli .

$ rinco add jquery

After to chose your library, you need to select the pages that the library will be included.

Development server

To run the development server use:

// within of your project's folder
$ rinco server port(optional)

The default port is 3000.

Structure

Rinco has a simple path convention that you need to follow:

Rinco Project  // path of your project
  assets       // assets path
     css       // stylus, sass, less or pure css
     img       // images
     js        // coffescript, babel or pure js
  data         // json to be imported
  build        // generated static files (build)
  Public       // Public files like robots.txt, favicon.ico etc.
  templates    // main pages and partials (.html|.md) to be imported

r-path

To ensure that all links and assets will be called correctly, you need to configure the path variable in your rconf.js file.

module.exports = {
     path_dev: '',
     path_build: '/sg', // empty for root folder ex: rincojs.com
     mustache_delimiter: '{{=<% %>=}}' // empty for default delimiter
};

In this example, the path_build was configured to /sg folder, it means that the project will be hosted inside the folder /sg.

http://rincojs.com/sg

To use it within the project, use the r-path tag:

<ul class="navbar-nav">
    <li><a href="<r-path/>/index.html">About</a></li>
    <li><a href="<r-path/>/documentation/variables/index.html">Variables</a></li>
</ul>

Loading images:

<img width="200" src="<r-path/>/assets/img/pagespeed.png" alt="pagespeed">

CSS and Javascript files:

background-image: url("<r-path/>/assets/img/bg.png"), radial-gradient(circle at 0 0, #0F3476, #87B9D7);

r-include

To include a file, use r-include tag:

<r-include _file.html/> // include _file.html from (templates)
<r-include _path/_file.html/> // include _file.html from (templates/_path)
<r-include _articles/_somearticle.md/> // include _somearticle.md from (templates/_articles)

r-render

Similar from r-include tag, you can render a partial page with a specific data, just passing through the tag as a json:

<r-render _user.html {"data":{"name":"John Doe"}}/> // include _user.html from (templates)

r-data

To import a data file into your page use r-data tag:

<r-data file.json/> // include file.json from (data)
<r-data path/file.json/> // include file.json from (data/path)

You can create a alias for an imported file and use it in your template:

<r-data file.json => myalias/> // include file.json from (data)

...
	<r-data en-en.json => data/>
	<h1>{{data.title}}</h1>
...

r-object

Instead you import a data with r-data tag, you can return a javascript object as data in your page. This object need to have two properties, name and data, which name is the key to access the value into the mustache template and data as the content of this object.

...
<r-object>
    return {
        data: {
            name:"Rinco"
        },
        name: 'newObj'
    }
</r-object>

<h1>{{newObj.name}}</h1>
...

You can also use the values of the imported data (global data) like this:

...
<r-data config.json/>
<r-object>
    var name = global.config.name.replace(/a/g,'e');
    return {
        data: {
            name:name
        },
        name: 'newObj'
    }
</r-object>

<h1>{{newObj.name}}</h1>
...

The global variable refers to global data.

script

Differently from r-object tag, the script tag returns a string:

...
<h1>
<r-script>
    var name = "Rinco";
    return global.name.replace(/o/g,'a');
</r-script>
</h1>
...

Or the shorthand:

...
<a href="<r-path/>/user.html" class="<r-script return _system.current_page == 'user.html' ? 'active' : ''/>">User</a>
...

You can also use the imported data:

...
<r-data config.json/>
<h1><r-script return global.config.name.replace(/a/g,'e');/></h1>
...

r-css

Rinco supports many CSS extension languages like sass, less and stylus. To use it, just change the extension to your prefered language and Rinco compile it to you. Don't worry about the choice, you can use all together.

<!-- refers to file assets/css/styles.sass -->
<r-css styles.sass/>
<!-- refers to file assets/css/colors.less -->
<r-css colors.less/>
<!-- refers to file assets/css/custom.styl -->
<r-css custom.styl/>

The order will be respected.

r-js

Rinco allows you to code in coffeescript, and ES6 with Babel language, it's similar of the CSS compile behavior, so you just need to change the file extension to .coffee and .babel.

<!-- refers to file assets/js/app.coffee -->
<r-js app.coffee/>
<!-- refers to file assets/js/es6.babel -->
<r-js es6.babel/>

The order will be respected.

Ignoring files

You can ignore a file putting " _ " at the beginning of the filename like this:

_head.html
_nav.html
_footer.html

This is helpful to avoid that partial files are generated.

Example

• index.html (refers to file templates/index.html)

<!-- data usage -->
<r-data config.json/>
<r-data areas.json => menu/>

<!-- include usage -->
<r-include _header.html/>
<r-include _content.html/>
<r-include _footer.html/>

• header.html (refers to file templates/_header.html)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{config.title}}</title>
	<r-css styles.scss/>
</head>
<body>

• content.html (refers to file templates/_content.html)

<section>
    <figure class="logo-wrapper">
        <img src="<r-path/>/assets/img/logo.png" alt="">
    </figure>
</section>

<r-include _content/_welcome.md/>

• footer.html (refers to file templates/_footer.html)

<footer>
    <nav>
    {{#menu.items}}
        <a href="{{link}}">{{name}}</a>;
    {{/menu.items}}
    </nav>
</footer>
<r-js app.coffee/>
</body>
</html>

• welcome.md (refers to file templates/_content/_welcome.md)

# Rinco Static Generator
If you find a bug, please, [send to us](https://github.com/rincojs/rinco-staticgen/issues).

• site.json (refers to file data/site.json)

{
	"title": "Rinco Static Generator",
	"github": "https://github.com/rincojs/rinco-staticgen"
}

• areas.json (refers to file data/areas.json)

{
	"items": [
		{
			"link": "https://github.com/rincojs/rinco-staticgen",
			"name": "Github"
		},
		{
			"link": "https://rincojs.com/sg/",
			"name": "Documentation"
		}
	]
}

Generate static files

There's two ways to generate the statics files.

• To generate the static files without uncss feature use the build task.

$ rinco build

• To generate the static files with uncss feature use the build-uncss task.
• You need to install uncss module. uncss npm

$ rinco build-uncss

The static files will be in build folder.