diff --git a/Makefile b/Makefile index 8f996f5..70f5bbc 100644 --- a/Makefile +++ b/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" diff --git a/card.yaml b/card.yaml index d3a1e3a..e12a4d7 100644 --- a/card.yaml +++ b/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 - type: fa - color: "#ff0000" +- name: batman + type: svg + color: false scale: 0.8 flip_x: false flip_y: false diff --git a/style.html.j2 b/style.html.j2 index 64bb1d1..d10c54f 100644 --- a/style.html.j2 +++ b/style.html.j2 @@ -1,5 +1,5 @@ -{% macro figure_layer(figure) -%} - {%- set figure_style %}{% filter cull_whitespace %} +{% 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: @@ -9,68 +9,82 @@ {% if figure.flip_y %}scaleY(-1){% endif %} {% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %} ; - {% endfilter %}{% endset -%} + {% endfilter %}{% endset %}
- {%- if figure.type == "material-icons" -%} - {#- https://material.io/icons/ -#} + {% if figure.type == "material-icons" %} + {# https://material.io/icons/ #} {{ figure.name }} - {%- elif figure.type == "mdi" -%} - {#- https://materialdesignicons.com/ -#} + {% elif figure.type == "mdi" %} + {# https://materialdesignicons.com/ #} - {%- elif figure.type == "fa" -%} - {#- http://fontawesome.io/icons/ -#} + {% elif figure.type == "fa" %} + {# http://fontawesome.io/icons/ #} - {%- elif figure.type == "lnr" -%} - {#- https://linearicons.com/free -#} + {% elif figure.type == "lnr" %} + {# https://linearicons.com/free #} - {%- elif figure.type == "svg" -%} - {#- /cards/svg -#} - - {%- elif figure.type == "img" -%} - {#- /cards/img -#} - - {%- endif -%} + {% elif figure.type == "oi" %} + {# https://useiconic.com/open #} + + {% elif figure.type == "svg" %} + {# /cards/svg #} + {% if figure.color != false %} + {% if figure.color %} + + {% else %} + + {% endif %} + {% else %} + + {% endif %} + {% elif figure.type == "img" %} + {# /cards/img #} + {% if figure.color %} + + {% else %} + + {% endif %} + + {% endif %}
-{%- endmacro -%} +{% endmacro %}
{{ card.title }}
- {% for figure in card.figures -%} - {{ figure_layer(figure) }} - {% endfor %} + {% for figure in card.figures %} + {{ figure_layer(figure) }} + {% endfor %}
- {%- for cost in card.costs %} -
- {%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %} - {{ cost.split()[0] }}
- {{ cost.split()[1] }} - {% else %} - {{ cost }} - {% endif %} -
- {%- endfor %} + {% for cost in card.costs %} +
+ {% if cost.split() | length == 2 and cost.split()[0].isnumeric() %} + {{ cost.split()[0] }}
+ {{ cost.split()[1] }} + {% else %} + {{ cost }} + {% endif %} +
+ {% endfor %}
"{{ card.flavor }}"
{{ card.description | markdown | safe }}
- - {%- if card.steps %} + {% if card.steps %} - {%- endif %} - + {% endif %}
-{#- 
{{ card }}
-#} +{# 
{{ card }}
#} diff --git a/style.js b/style.js index 50e6cfe..7147621 100644 --- a/style.js +++ b/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); diff --git a/style.scss b/style.scss index 4befff0..77867ae 100644 --- a/style.scss +++ b/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 { diff --git a/templates/style.xsl.j2 b/templates/style.xsl.j2 index 559b195..d88dfb2 100644 --- a/templates/style.xsl.j2 +++ b/templates/style.xsl.j2 @@ -17,6 +17,7 @@ +