{% extends "zerm/templates/index.html" %}

{% block fonts %}
{% endblock fonts %}

{% block rss %}
  {%- if config.generate_feed -%}
    <link rel="alternate" type="application/atom+xml" title="{{ config.title }} Feed" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
  {%- endif -%}
{% endblock rss %}

{% block og_preview %}
  {%- if section -%}
    <link rel="canonical" href="{{ section.permalink }}" />
  {%- elif page -%}
    <link rel="canonical" href="{{ page.permalink }}" />
  {%- else -%}
    <link rel="canonical" href="{{ current_url }}" />
  {%- endif -%}
  {{ social::og_preview() }}

  {%- if config.extra.twitter.site -%}
    <meta name="twitter:site" content="{{ config.extra.twitter.site }}" />
  {%- endif -%}
  {%- if config.extra.twitter.creator -%}
    <meta name="twitter:creator" content="{{ config.extra.twitter.creator }}" />
  {%- endif -%}

  {%- if config.extra.webmention -%}
    <link rel="webmention" href="{{ config.extra.webmention }}" >
  {%- endif -%}
{% endblock og_preview %}

{% block copyright %}
  <div class="copyright">
    <div class="copyright--user">{{ config.extra.copyright | safe }}</div>
    <div class="copyright--tracking">
      public tracking available at <a href="https://plausible.io/hauleth.dev">Plausible.io</a>
    </div>
    <div class="copyright--source">
        <a href="{{ config.extra.source }}">source code</a>
    </div>
  </div>
{% endblock copyright %}

{% block script %}
  <script defer data-domain="hauleth.dev" src="/js/script.js"></script>
{% endblock script %}

{% block css %}
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <link rel="stylesheet" type="text/css" href="/syntax-theme.css" />
  {% if config.extra.theme_color != "orange" -%}
    {% set color = "/color/" ~ config.extra.theme_color ~ ".css" -%}
    <link rel="stylesheet" type="text/css" href="{{ color }}" />
  {%- else -%}
    <link rel="stylesheet" type="text/css" href="/color/orange.css" />
  {% endif %}
  <meta name="theme-color" content="#1d1e28" />
{% endblock css %}

{% block header %}
  <header class="header">
    <div class="header__inner">
      <div class="header__logo">
        {{ logo::logo() }}
      </div>
    </div>
    <nav class="menu">
      <ul class="menu__inner">
        {%- for menu_item in config.extra.main_menu -%}
        <li>
          <a href="{% if menu_item.url is matching("^https?://") %}{{ menu_item.url }}{% else %}{{ get_url(path=menu_item.url) }}{% endif %}"
             {% if menu_item.rel %}rel="{{ menu_item.rel }}"{% endif %}>{{ menu_item.name }}</a>
        </li>
        {%- endfor-%}
      </ul>
    </nav>
  </header>
{% endblock header %}

{% block general_meta %}
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {%- if page.title -%}
        <meta name="description" content="{{ config.description }} {{ page.title }} {{ page.description }}"/>
    {%- else -%}
        <meta name="description" content="{{ config.description }}"/>
    {%- endif -%}

    {%- if page.taxonomies.tags or page.taxonomies.categories -%}
        <meta name="keywords" content="
        {%- if page.taxonomies.categories -%}
            {%- for cat in page.taxonomies.categories -%}
                    {{ cat }}, {% endfor -%}
        {%- endif -%}

        {%- if page.taxonomies.tags -%}
            {%- for tag in page.taxonomies.tags -%}
                {%- if loop.last -%}
                    {{ tag }}
                {%- else -%}
                    {{ tag }}, {% endif -%}
            {%- endfor -%}
        {%- endif -%}
        " />
    {%- endif -%}
{% endblock general_meta %}