asd

style.html.j2

@@ -1,2 +1,76 @@
+{% macro figure_layer(figure) -%}
+    {%- set figure_style %}{% filter cull_whitespace %}
+        {% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
+        {% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
+        transform:
+        {% if figure.offset|any %}translate({{ figure.offset[0]*100 }}%, {{ figure.offset[1]*100 }}%){% endif %}
+        {% if figure.rotation %}rotate({{ figure.rotation }}deg){% endif %}
+        {% if figure.flip_x %}scaleX(-1){% endif %}
+        {% if figure.flip_y %}scaleY(-1){% endif %}
+        {% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
+        ;
+    {% endfilter %}{% endset -%}
 
-asdasd
+    <div style="{{ figure_style }}">
+        {%- if   figure.type == "material-icons" -%}
+            {#- https://material.io/icons/ -#}
+            <i class="material-icons figure">{{ figure.name }}</i>
+        {%- elif figure.type == "mdi" -%}
+            {#- https://materialdesignicons.com/ -#}
+            <i class="mdi mdi-{{ figure.name }}"></i>
+        {%- elif figure.type == "fa" -%}
+            {#- http://fontawesome.io/icons/ -#}
+            <i class="fa fa-{{ figure.name }}"></i>
+        {%- elif figure.type == "lnr" -%}
+            {#- https://linearicons.com/free -#}
+            <span class="lnr lnr-{{ figure.name }}"></span>
+        {%- elif figure.type == "svg" -%}
+            {#- /cards/svg -#}
+            <img src="/svg/{{ figure.name }}">
+        {%- elif figure.type == "img" -%}
+            {#- /cards/img -#}
+            <img src="/img/{{ figure.name }}">
+        {%- endif -%}
+    </div>
+{%- endmacro -%}
+
+<div class="{{ card.template }}">
+    <header>{{ card.title }}</header>
+    <figure>
+        {% for figure in card.figures -%}
+            {{ figure_layer(figure) }}
+        {% endfor %}
+    </figure>
+    <aside><ul>
+        {% for property in card.properties -%}
+            <li>{{ property }}</li>
+        {% endfor %}
+    </ul></aside>
+    <summary>
+        {%- for cost in card.costs %}
+            <section>
+                {%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
+                    <big>{{ cost.split()[0] }}</big><br>
+                    <small>{{ cost.split()[1] }}</small>
+                {% else %}
+                    {{ cost }}
+                {% endif %}
+            </section>
+        {%- endfor %}
+    </summary>
+    <article>
+        <center><i>"{{ card.flavor }}"</i></center>
+        <center>{{ card.description | markdown | safe }}</center>
+
+        {%- if card.steps %}
+        <ul>
+            {% for step in card.steps -%}
+                <li>{{ step }}</li>
+            {% endfor %}
+        </ul>
+        {%- endif %}
+
+    </article>
+</div>
+
+{#- <br><pre>{{ card }}</pre> -#}

style.js

@@ -1,13 +1,31 @@
+var md = window.markdownit();
+var context = {
+	'card' : jsyaml.load(document.getElementById("yaml_data").innerHTML),
+	'alert' : alert,
+};
 
-var template = new plate.Template(jinja_template)
+var env = new nunjucks.Environment({
-var context = jsyaml.load(document.getElementById("yaml_data").innerHTML);
+	autoescape: true
+});
+env.addFilter('markdown', function(str) {
+	return md.render(str);
+});
+env.addFilter('cull_whitespace', function(str) {
+    return str.split(/\s+/).join(' ').trim();
+});
+env.addFilter('any', function(iterable) {
+    for (var index = 0; index < iterable.length; index++) {
+        if (iterable[index]) return true;
+    }
+    return false;
+});
+env.addFilter('all', function(iterable) {
+    for (var index = 0; index < iterable.length; index++) {
+        if (!iterable[index]) return false;
+    }
+    return true;
+});
 
-
+rendered = env.renderString(jinja_template, context);
-
+console.log(rendered);
-console.log(yaml_data);
+document.getElementById("my_card").innerHTML = rendered;
-
-template.render(context, function(err, data) {
-	if (err) throw err;
-	document.getElementById("my_card").innerHTML = data;
-//	document.write(data);
-})

templates/card.xml.j2

@@ -1,3 +1,3 @@
-<ability_card>
+<ability_card><yaml_data>
-	<yaml_data>{{ data }}</yaml_data>
+{{ data }}
-</ability_card>
+</yaml_data></ability_card>

templates/style.xsl.j2

@@ -4,28 +4,48 @@
 <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;
 </xsl:text>
 
+{% set newline = "<xsl:text disable-output-escaping='yes'>\n</xsl:text>" %}
+{% set async = "media=\"none\" onload=\"if(media!='all')media='all'\"" %}
+
+{% filter replace("\n", newline) %}
 <script type="text/javascript" src="/dist/js-yaml.min.js"/>
-<script type="text/javascript" src="/dist/plate.min.js"/>
+<script type="text/javascript" src="http://mozilla.github.io/nunjucks/files/nunjucks.min.js"/>
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"/>
+
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" {{async}}/>
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" {{async}}/>
+<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" {{async}}/>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" {{async}}/>
+<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" {{async}}/>
 
 <title>Status Card</title>
 
+{% endfilter %}
+
 <style type="text/css">
 {{ css_data }}
 </style>
 
+{{ newline*2 }}
+
 <script type="text/html" id="yaml_data">---
 <xsl:value-of select="yaml_data"/>
 </script>
 
+{{ newline*2 }}
 
 <script type="text/javascript">
 var jinja_template = {{ jinja_data | tojson }};
 </script>
 
+{{ newline*2 }}
+
 <div id="my_card"></div>
 <script type="text/javascript">
-{{ js_data }}
+{{ js_data
+	| replace(">", ">foobarhuehuehue")
+	| replace("<", "<xsl:text disable-output-escaping='yes'>&lt;</xsl:text>")
+	| replace(">foobarhuehuehue", "<xsl:text disable-output-escaping='yes'>&gt;</xsl:text>") }}
 </script>
 
 </xsl:template>