asd

Makefile

@@ -1,5 +1,5 @@
 
-all: build/card.html
+all: build/card.html build/card_rendered.html
 
 .PHONY: dev
 dev:
@@ -15,6 +15,26 @@ build/card.html: build/card.xml build/style.xsl
         build/style.xsl \
         build/card.xml
 
+
+define PYTHON_MAKE_RENDERED_CARD
+from jinja2 import Environment, FileSystemLoader
+from markdown import markdown
+import yaml
+with open("card.yaml") as f: data = f.read()
+with open("build/card_rendered.html", "w") as f:
+	e = Environment(trim_blocks=True, lstrip_blocks=True, loader=FileSystemLoader(''))
+	e.filters.update({
+		"markdown":markdown,
+		"any":any,
+		"all":all,
+		"cull_whitespace":(lambda x: " ".join(x.split())) })
+	f.write(e.get_template('style.html.j2').render(card=yaml.load(data)))
+endef
+export PYTHON_MAKE_RENDERED_CARD
+build/card_rendered.html: card.yaml style.html.j2
+	python3 -c "$$PYTHON_MAKE_RENDERED_CARD"
+
+
 define PYTHON_MAKE_CARD_XML
 from jinja2 import Environment, FileSystemLoader
 with open("card.yaml") as f: data = f.read()
@@ -24,7 +44,6 @@ with open("build/card.xml", "w") as f:
 	    .get_template('card.xml.j2')
 	    .render(data=data))
 endef
-
 export PYTHON_MAKE_CARD_XML
 build/card.xml: card.yaml templates/card.xml.j2
 	python3 -c "$$PYTHON_MAKE_CARD_XML"
@@ -43,7 +62,6 @@ with open("build/style.xsl", "w") as f:
 	    .get_template('style.xsl.j2')
 	    .render( css_data=css_data, jinja_data=jinja_data, js_data=js_data))
 endef
-
 export PYTHON_MAKE_STYLE_XSL
 build/style.xsl: build/style.css templates/style.xsl.j2 style.html.j2 style.js
 	python3 -c "$$PYTHON_MAKE_STYLE_XSL"
@@ -55,7 +73,6 @@ with open("style.scss") as f:
 	with open("build/style.css", "w") as of:
 		of.write(sass.compile(string=f.read(), output_style="expanded"))
 endef
-
 export PYTHON_MAKE_SASS
 build/style.css: style.scss
 	python3 -c "$$PYTHON_MAKE_SASS"

card.yaml

@@ -11,12 +11,14 @@ flavor: Enemies sure are squishy
 description: Perform an attack
 steps:
 - Do A
+- Do A
+- Do A
 - Then B
 notes: ''
 figures:
-- name: users
+- name: batman
-  type: fa
+  type: svg
-  color: "#ff0000"
+  color: false
   scale: 0.8
   flip_x: false
   flip_y: false

style.html.j2

@@ -1,5 +1,5 @@
-{% macro figure_layer(figure) -%}
+{% macro figure_layer(figure) %}
-    {%- set figure_style %}{% filter cull_whitespace %}
+    {% set figure_style %}{% filter cull_whitespace %}
         {% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
         {% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
         transform:
@@ -9,68 +9,82 @@
         {% if figure.flip_y %}scaleY(-1){% endif %}
         {% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
         ;
-    {% endfilter %}{% endset -%}
+    {% endfilter %}{% endset %}
 
     <div style="{{ figure_style }}">
-        {%- if   figure.type == "material-icons" -%}
+        {% if   figure.type == "material-icons" %}
-            {#- https://material.io/icons/ -#}
+            {# https://material.io/icons/ #}
             <i class="material-icons figure">{{ figure.name }}</i>
-        {%- elif figure.type == "mdi" -%}
+        {% elif figure.type == "mdi" %}
-            {#- https://materialdesignicons.com/ -#}
+            {# https://materialdesignicons.com/ #}
             <i class="mdi mdi-{{ figure.name }}"></i>
-        {%- elif figure.type == "fa" -%}
+        {% elif figure.type == "fa" %}
-            {#- http://fontawesome.io/icons/ -#}
+            {# http://fontawesome.io/icons/ #}
             <i class="fa fa-{{ figure.name }}"></i>
-        {%- elif figure.type == "lnr" -%}
+        {% elif figure.type == "lnr" %}
-            {#- https://linearicons.com/free -#}
+            {# https://linearicons.com/free #}
             <span class="lnr lnr-{{ figure.name }}"></span>
-        {%- elif figure.type == "svg" -%}
+        {% elif figure.type == "oi" %}
-            {#- /cards/svg -#}
+            {# https://useiconic.com/open #}
-            <img src="/svg/{{ figure.name }}">
+            <span class="oi" data-glyph="{{ figure.name }}"></span>
-        {%- elif figure.type == "img" -%}
+        {% elif figure.type == "svg" %}
-            {#- /cards/img -#}
+            {# /cards/svg #}
-            <img src="/img/{{ figure.name }}">
+            {% if figure.color != false %}
-        {%- endif -%}
+                {% if figure.color %}
+                <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
+                {% else %}
+                <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored">
+                {% endif %}
+            {% else %}
+            <img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}">
+            {% endif %}
+        {% elif figure.type == "img" %}
+            {# /cards/img #}
+            {% if figure.color %}
+            <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
+            {% else %}
+            <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
+            {% endif %}
+
+        {% endif %}
     </div>
-{%- endmacro -%}
+{% endmacro %}
 
 <div class="fjomp_card">
     <header>{{ card.title }}</header>
     <figure>
-        {% for figure in card.figures -%}
+    {% for figure in card.figures %}
         {{ figure_layer(figure) }}
     {% endfor %}
     </figure>
     <aside><ul>
-        {% for property in card.properties -%}
+    {% for property in card.properties %}
         <li>{{ property }}</li>
     {% endfor %}
     </ul></aside>
     <summary>
-        {%- for cost in card.costs %}
+    {% for cost in card.costs %}
         <section>
-                {%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
+        {% 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 %}
+    {% endfor %}
     </summary>
     <article>
         <center><i>"{{ card.flavor }}"</i></center>
         <center>{{ card.description | markdown | safe }}</center>
-
+        {% if card.steps %}
-        {%- if card.steps %}
         <ul>
-            {% for step in card.steps -%}
+        {% for step in card.steps %}
             <li>{{ step }}</li>
         {% endfor %}
         </ul>
-        {%- endif %}
+        {% endif %}
-
     </article>
 </div>
 
-{#- <br><pre>{{ card }}</pre> -#}
+{# <br><pre>{{ card }}</pre> #}

style.js

@@ -5,7 +5,9 @@ var context = {
 };
 
 var env = new nunjucks.Environment({
-	autoescape: true
+	autoescape: true,
+	trimBlocks: true,
+	lstripBlocks: true,
 });
 env.addFilter('markdown', function(str) {
 	return md.render(str);

style.scss

@@ -41,7 +41,8 @@
         margin: 0;
 
         div {
-            color: #bbb;
+            --figure-color: #bbb;
+            color: var(--figure-color);
             position: absolute;
             top:0;right:0;left:0;bottom:0;
             height: var(--figure-size);
@@ -52,8 +53,17 @@
                 width: 100%;
                 height: 100%;
             }
+            img {
+                max-width: calc(var(--figure-size) * 0.9);
+                max-height: calc(var(--figure-size) * 0.9);
+            }
+            img.colored {
+                transform: translateY(-10000px);
+                filter: drop-shadow(0px 10000px var(--figure-color));
+            }
             .mdi,
             .fa,
+            .oi,
             .material-icons.figure {
                 font-size: calc(var(--figure-size) * 0.9);
                 line-height: var(--figure-size);
@@ -125,7 +135,7 @@
 	figure {
         background-color: #fff;
 		div {
-            color: #555; // default color
+            --figure-color: #555;
 		}
 	}
 	aside {

templates/style.xsl.j2

@@ -17,6 +17,7 @@
 <script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"></script>
 
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css" {{async}}/>
 <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}}/>