yml2html 0.1.0 
yml2html: ^0.1.0 copied to clipboard
Transforms yml with templates into html
yml2html #
Yml2Html is a Dart package which functions as a pub transformer.
Transformers can be used in pubspec.yaml to convert assets before deploying.
Yml2Html lets you write templates (*.tmpl.html) and yml files which get converted into normal html files.
It's essentially a static site generator, but without all the complicated settings, just yml with templates.
Templates #
Templates are very simple:
- templates are html files in your
weborlibdirectory with a double extension:<template-name>.tmpl.html - templates contain mustaches (the
{{ ... }}and{{{ ... }}}tags) which make the html file function like a template - the templates can be used by yml files
Yml files #
Yml files in the web directory get transformed into html files, while keeping their name.
Yml files in other directories maintained by pub, like the lib directory, are only usable by other yml files
and don't get transformed into their own html file.
Example setup:
web/test.yml:
content:
_: web/normal.tmpl.html
head:
title: Test page
body:
main:
title: Main Content title
content: |
Main content text<br/>
<strong>Test HTML</strong><br/>
{{> test2content}}<br>
{{> lib/test3.yml}}
scripts: |
<script>alert("Test alert!");</script>
test!!!
test2content:
_: web/dartapp.tmpl.html
apptitle: Test app
web/dartapp.tmpl.html:
<h1>{{apptitle}}</h1>
<div id="output"></div>
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
web/normal.tmpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{head.title}}</title>
</head>
<body>
{{{body.main.title}}}
<hr>
{{{body.main.content}}}
<hr>
{{{body.scripts}}}
</body>
</html>
web/test.tmpl.html:
<em>{{test}}</em>
lib/test3.yml:
content:
_: web/test.tmpl.html
test: Answer from test3!
End result:
build/test.html:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Test page</title>
</head>
<body>
Main Content title
<hr>
Main content text<br>
<strong>Test HTML</strong><br>
<h1>Test app</h1>
<div id="output"></div>
<script async="" src="main.dart.js"></script>
<br>
<em>Answer from test3!</em>
<hr>
<script>alert("Test alert!");</script>
test!!!
</body></html>
Every yml file can define entry points at the root level. The default entry point for a file is the content tag.
These entry points can then be used with Mustache partials ({{> partial-name}}) to insert their content.
Entrypoints consist of a key - value pair for the template path name (the _ key) and of some keys with data for the template.
The yml structure is very usable to structure the data and to make templates efficient (by using lists for repeating elements for example).
Usage #
Installation
- List the package as dependency in the pubspec.yaml file of your project.
- List the package as transformer, same file.
- Done!
- Result: conversion of yml files to html files when using
pub build
Warning: Transformers often have incompability issues:
Make sure that the yml2html transformer is listed above the dart_to_js_script_rewriter transformer:
transformers:
- yml2html
- dart_to_js_script_rewriter
The dart_to_js_script_rewriter leaves some artifacts in the builded html files, which results in getting a html, head and body tag at template usage:
Some file in the build directory:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Test page</title>
</head>
<body>
Main Content title
<hr>
Main content text<br/>
<!-- the template content is messed up by the 'dart_to_js_script_rewriter' -->
<html><head></head><body><em>Hello World!</em></body></html>
<hr>
<script>alert("Test alert!");</script>
</body></html>
Advanced #
This transformer renders the html files by iteratively rerendering a template to a specific depth, the default depth is 5.
The tranformer stops a render a soon as it can't find any more {{ in the rendered text to avoid unnecessary render cycles.
The depth is used to prevent infinite loops, which could consume lots of resources. So a depth of 10 could be ok, but it shouldn't go deeper when working with large template files.
A custom depth could be defined with the depth setting in your pubspec.yaml:
transformers:
- yml2html:
depth: 7
Features and bugs #
Please file feature requests and bugs at the issue tracker (at Github)
Some bugs are features, some features are bugs.
Metadata
Publisher
unverified uploader
Weekly Downloads
Metadata
Transforms yml with templates into html
Repository (GitHub)
View/report issues
License
unknown (license)
Dependencies
barback, markdown, mustache4dart, yaml
