project-page.html

{% extends "layouts/page-with-menu.html" %}
{% import "macros/projects.html" as projects_macros %}
{% block page_with_menu_extra_class %}page-with-menu--news{% endblock page_with_menu_extra_class %}
{% block page_name %}Post{% endblock page_name %}
{% block mobile_page_menu %}{{ projects_macros::project_menu(toc=page.toc, max_levels=1) }}{% endblock mobile_page_menu %}
{% block page_menu %}{{ projects_macros::project_menu(toc=page.toc, max_levels=1) }}{% endblock page_menu %}

{% block head_extensions %}
  <script defer src="/highlight-intrapage-link.js"></script>
{% endblock head_extensions %}

{% block page_content %}
  <h1 class="project-title">{{ page.title }}</h1>
  {% if page.extra.image and page.extra.show_image %}
    <div class="media-content project-content project-content__hero-image">
      {% if page.extra.image_subtitle %}
        <img src="{{ page.extra.image }}" alt="{{ page.extra.image_subtitle }}" style="aspect-ratio: auto 16 / 9" />
      {% else %}
        <img src="{{ page.extra.image }}" alt="An image representing the article" style="aspect-ratio: auto 16 / 9" />
      {% endif %}
      {% if page.extra.image_subtitle %}
        {% if page.extra.image_subtitle_link %}
          <div class="project-image-subtitle">
            <a href="{{ page.extra.image_subtitle_link }}">{{ page.extra.image_subtitle }}</a>
          </div>
        {% else %}
          <div class="project-image-subtitle">{{ page.extra.image_subtitle }}</div>
        {% endif %}
      {% endif %}
    </div>
  {% endif %}
  <div class="media-content project-content">
    {{ page.content | safe }}
  </div>
  <script type="module">
  import { enable_image_compare } from '/components.js';

  document.addEventListener("DOMContentLoaded", function () {
    enable_image_compare();
  });
  </script>
{% endblock page_content %}