Files
Personal-Website/src/views/partials/macros.njk
T

27 lines
1.4 KiB
Plaintext

{% macro icon(name) -%}
{%- set paths = {
'arrow-right': 'M5 12h14M13 6l6 6-6 6',
'arrow-left': 'M19 12H5M11 6l-6 6 6 6',
'arrow-up': 'M12 19V5M6 11l6-6 6 6',
'external': 'M7 17 17 7M8 7h9v9',
'mail': 'M3.5 6.5h17v11h-17zM4 7l8 6.5L20 7',
'branch': 'M6 3v12M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9',
'close': 'M6 6l12 12M18 6 6 18',
'prev': 'M15 5l-7 7 7 7',
'next': 'M9 5l7 7-7 7',
'file': 'M14 3H7a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 7 21h10a1.5 1.5 0 0 0 1.5-1.5V7.5zM14 3v4.5h4.5',
'play': 'M8 5.5v13l10.5-6.5z'
} -%}
<svg class="icon icon--{{ name }}" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>
{%- endmacro %}
{% macro picture(image, sizes='100vw', class='', eager=false, alt=undefined) -%}
{%- if image -%}
<img{% if class %} class="{{ class }}"{% endif %} src="{{ image.src }}"{% if image.srcset %} srcset="{{ image.srcset }}" sizes="{{ sizes }}"{% endif %} width="{{ image.width }}" height="{{ image.height }}" alt="{{ alt if alt is defined else image.alt }}"{% if eager %} fetchpriority="high"{% else %} loading="lazy"{% endif %} decoding="async">
{%- endif -%}
{%- endmacro %}
{% macro linkIcon(url) -%}
{%- if url.indexOf('mailto:') == 0 %}mail{% elif url.indexOf('/media/') == 0 %}file{% elif url.indexOf('git') != -1 %}branch{% else %}external{% endif -%}
{%- endmacro %}