Rinco Static Generator
See the official webpage:
Install
$ npm install -g rinco
Create a new project
$ rinco
CLI Commands
$ 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
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.
moduleexports = 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:
About Variables
Loading images:
CSS and Javascript files:
/>///),);
r-include
To include a file, use r-include
tag:
// include _file.html from (templates) // include _file.html from (templates/_path) // 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:
// include _user.html from (templates)
r-data
To import a data file into your page use r-data
tag:
// include file.json from (data) // include file.json from (data/path)
You can create a alias for an imported file and use it in your template:
myalias/> // include file.json from (data)
... data/> {{data.title}}...
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>newObjname</h1>...
You can also use the values of the imported data (global data) like this:
...<r-data configjson/><r-object> var name = globalconfigname; return data: name:name name: 'newObj' </r-object> <h1>newObjname</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 globalname;</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 configjson/><h1><r-script return globalconfigname;/></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 --><!-- refers to file assets/css/colors.less --><!-- refers to file assets/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 --><!-- refers to file assets/js/es6.babel -->
The order will be respected.
Ignoring files
You can ignore a file putting " _
" at the beginning of the filename like this:
_headhtml_navhtml_footerhtml
This is helpful to avoid that partial files are generated.
Example
- index.html (refers to file
templates/index.html
)
<!-- data usage --> menu/> <!-- include usage -->
- header.html (refers to file
templates/_header.html
)
{{config.title}}
- content.html (refers to file
templates/_content.html
)
- footer.html (refers to file
templates/_footer.html
)
{{#menu.items}} {{name}}; {{/menu.items}}
- welcome.md (refers to file
templates/_content/_welcome.md
)
# Rinco Static GeneratorIf 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.