article.html

{% extends "base.html" %}
{% import "utils.html" as utils %}

{% block title %}{% with title=article.title %}{% trans %}{{title}}{% endtrans %}{% endwith %}{% endblock %}

{% block body %}
<div class="docs-section container">
  <div class="news">
    <h1>{{ article.title }}</h1>
    {# Post content #}
    <p class="news-meta">
      <span class="date">
        <img class="icon" src="{{ SITEURL }}/theme/images/icons/date.svg" alt="Date" />
        <time>{{ article.locale_date }}</time>
      </span>
      {% if article.authors %}
      <span class="authors">
        <img class="icon" src="{{ SITEURL }}/theme/images/icons/author.svg" alt="Author" />
        {% for author in article.authors[:-2] %}
        <span class="author"><a href="{{ SITEURL }}/{{ author.url }}">{{ author.name }}</a></span>,
        {% endfor %}
        {% for author in article.authors[-2:-1] %}
        <span class="author"><a href="{{ SITEURL }}/{{ author.url }}">{{ author.name }}</a></span> and
        {% endfor %}
        {% for author in article.authors[-1:] %}
        <span class="author"><a href="{{ SITEURL }}/{{ author.url }}">{{ author.name }}</a></span>
        {% endfor %}
      </span>
      {% endif %}
      {% if article.tags %}
      <span class="tags">
        <img class="icon" src="{{ SITEURL }}/theme/images/icons/tag.svg" alt="Tag" />
        {% for tag in article.tags[:-1] %}
        <span class="tag"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag.name }}</a></span>,
        {% endfor %}
        {% for tag in article.tags[-1:] %}
        <span class="tag"><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag.name }}</a></span>
        {% endfor %}
      </span>
      {% endif %}
    </p>
    {{ article.content }}

    {# Ensure that all floats in post body are cleared. #}
    <div class="u-cf"></div>
  </div>

  {% if article.authors %}
  <div class="docs-section author-box">
    {% for author in article.authors %}
      {{ utils.author_box(author) }}
    {% endfor %}
  </div>
  {% endif %}

  {# Discourse Comments #}
  <div class="news-comments">
    <h4>{% trans %}Comments{% endtrans %}</h4>
    {% if article.comments and article.comments in ("true", "yes") %}
    <div id="discourse-comments" data-discourse-url="https://mixxx.discourse.group/" data-discourse-embed-url="{{ SITEURL }}/{{ article.url }}"></div>
    {% else %}
    <p>The comment section has been closed.</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block extra_head %}
{% if article.comments and article.comments in ("true", "yes") %}
<script src="{{ SITEURL }}/theme/js/discourse.js"></script>
{% endif %}
{% if article.math and article.math in ("true", "yes") %}
{# Note that we don't insert any mathjax config. If you want to configure mathjax, see https://docs.mathjax.org/en/latest/web/configuration.html#configuring-mathjax #}
{# pinning the latest MathJax and using Subresource integrity (since that allows us to avoid whitelisting all of jsdelivr in the CSP) #}
<script id="MathJax-script" type="text/javascript" integrity="sha256-1CldwzdEg2k1wTmf7s5RWVd7NMXI/7nxxjJM2C4DqII=" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>
{% endif %}
{% endblock %}