Project Structure
Rino 2 is different from version 1. Everything is just automation with project directory and file structure.
Which means it is easy to learn and easy to build a website with standard HTML, CSS, Javascript and Node.js, after reading about poject structure.
- pages
- components
- mds
- public
- scripts
- export
- styles
- export
rino-config.js
image-compression.bat
image-compression.sh
image-compression.html
image-compression.js
/pages
/pages directory is for putting base HTML files. So Rino
is going to build your web pages based on this directory. File and
directory structure is going to be exactly same.
/components
/components directory is for putting component HTML
files. Component can contain other components. But don't try to cause
infinite error by looping with the same component. You can use
component by syntax like this:
<component @path="" @tag="" />
@path: This attribute is required for importing a
component. You need to place a path of component. For example,
@path="/header" or @path="/ko/footer".
@tag: This attribute is optional. However if you want to
use HTML attribute on component tag, then you need to place a name of
html element. For example, @tag="div" or
<component @path="/button" @tag="button" onclick="myFunction()" />/mds
/mds directory is for putting markdown files. Rino is
going to load all of them and parse Markdown to HTML on request.
<script @type="md" @path="" @tag="" type="text/markdowns"></script>
@type: This attribute is required for using a markdown.
You need to place md or markdown.
@path: This attribute is required for importing a
markdown. You need to place a path of markdown.
@tag: This attribute is optional. However if you want to
use HTML attribute on component tag, then you need to place a name of
html element.
/public
/public directory is for putting any static files.
Images, external css, javascript library and any other assets can be
placed here.
/scripts
/scripts directory is for building your javascript
library. You can use npm packages. And you can choose which one to be
exported by placing javascript files in
/scripts/export/ directory. Rino is going to build your
javascript and export to /scripts directory. So you can
use the exported javascript file like how you normally would do in
HTML. From version 2.1.1, you can use typescript as well.
We are handling script with import/export, the module
type. So the file name will be the name of script instance. So if it
is hello.js or hello.ts Then you got to call
the function from outside like hello.FunctionName(). You
can import them and do anything that is
javascript/typescript browser development standard.
<script src="/scripts/example.js" />/styles
/styles directory is for building your css library. And
you can choose which one to be exported by placing css files in
/styles/export/ directory. Rino is going to import local
css files and build your css library and export to
/styles directory. So you can use the exported css file
like how you normally would do in HTML.
<link rel="stylesheet" href="/styles/example.css" />Example of importing local css files:
@import "../header.css";
@import "../sidebar.css";
@import "../footer.css";
rino-config.js
rino-config.js is for confiuration of Rino. You can
change distribution directory for
npm run generate command, change port number for
development server for npm run dev, set site url for
sitemap and adding sitemap for npm run sitemap or
npm run generate-sitemap.
image-compression files
image-compression files are for running image compression
app. This is developed after it is found that other web frameworks
cannot handle image compression problem well. You can run this image
compression app to compress and place image in the public directory.