website-v2/templates/libraries/detail.html

{% extends "base.html" %}
{% load i18n static avatar_tags version_select %}

{% block title %}{{ object.display_name }} ({{ version.display_name }}){% endblock %}
{% block description %}{% if library_version.description %}{% trans library_version.description %}{% endif %}{% endblock %}
{% block author %}{{ author_tag }}{% endblock %}

{% block content %}
  <main class="content">
    <div class="pt-3 md:pt-4 md:pb-1 px-0 mb-0 w-full md:mb-2 flex flex-row flex-nowrap items-center"
         x-data="{'showSearch': false}"
         x-on:keydown.escape="showSearch=false">
      <div class="flex-auto mb-2 w-full">
        <div id="overview">
          <span class="mx-3 text-xl md:text-3xl text-orange">{{ object.display_name }}</span>

        </div>
      </div>
      <div class="flex-shrink mr-3 md:mr-0">
        {% version_select %}
      </div>
    </div>

    <!-- alert for non-current Boost versions -->
    {% include "libraries/includes/version_alert.html" %}

    <section class="content divide-x-0 divide-transparent md:divide-x md:divide-gray-200">

      <div class="pb-2 w-full md:pb-0 md:w-1/3">
        <div class="flex flex-col">

          <div class="pb-4 pt-1">
            <span
              class="py-0 px-2 text-sm font-bold text-gray-600 rounded-full border dark:text-gray-300 bg-green/40 border-green/60 dark:bg-green/40"
              title="C++ Version {% if library_version.cpp_standard_minimum %}{{ library_version.cpp_standard_minimum }}{% else %}03{% endif %} or Later">
              <span class="scale-x-75 text-white dark:text-gray-800 tracking-wide origin-left w-6 inline-block whitespace-nowrap">C++</span>
                {% if library_version.cpp_standard_minimum %}{{ library_version.cpp_standard_minimum }}{% else %}03{% endif %}
            </span>
            <span class="float-right">{% if object.first_boost_version %}Added in Boost
              {{ object.first_boost_version.display_name }}{% endif %}</span>
          </div>

          <div>
            <div class="pt-1 text-sm">
              <span class="font-bold">Categories:</span>
              {% for category in object.categories.all %}
                <a class="inline text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
                href="{% url 'libraries-list' category_slug=category.slug library_view_str=library_view_str version_slug=version_str %}">{{ category.name }}</a>
                {% if not forloop.last %}, {% endif %}
              {% endfor %}
            </div>

            <p class="pt-4 mt-4 whitespace-normal text-lg border-t border-gray-700">{{ library_version.description|default:"No description provide for this version." }}</p>
          </div>

          <div class="-ml-2 min-h-16">
            {% if documentation_url %}
            <a class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
              href="{{ documentation_url }}">
              <span class="dark:text-white text-slate">Documentation</span>
              <span class="block text-xs break-words text-wrap whitespace-pre-line mb-2">{{ request.get_host }}{{ documentation_url|cut:"https://" }}</span>
            </a>
            {% endif %}
          </div>
          <div class="-ml-2 min-h-16">
            <a
              class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
              href="{{ object.github_issues_url }}">
              <i class="float-right mt-1 fas fa-bug"></i>
              <span class="dark:text-white text-slate">GitHub Issues</span>
              <span class="block text-xs whitespace-pre-line mb-2">{{ object.github_issues_url|cut:"https://" }}</span>
            </a>
          </div>
          <div class="-ml-2 min-h-16">
            <a
              class="block items-center py-1 px-2 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-slate text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange"
              href="{{ github_url }}">
              <i class="float-right mt-1 fab fa-github"></i>
              <span class="dark:text-white text-slate">Source Code</span>
              <span class="block text-xs whitespace-pre-line mb-2">{{ github_url|cut:"https://" }}</span>
            </a>
          </div>
        </div>
      </div>
      <div class="pb-2 px-0 ml-0 w-full h-auto md:w-2/3 md:pb-0 md:pl-6 md:mx-6">
        <div class="flex">
          <div class="flex w-full">
            <div class="w-full">
              <div id="chart1" class="w-full text-center">{# Commits per Release #}</div>
            </div>
          </div>
        </div>
      </div>

    </section>

    {% if authors or maintainers or top_contributors_release_new or top_contributors_release_old %}
    <section class="p-6 pt-1 my-4 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
      <!-- Avatars -->
      <h2 class="text-2xl">This Release</h2>
      <div class="flex flex-col gap-y-4">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-3 gap-x-2">
        {% for user in authors %}
          {% avatar user=user commitauthor=user.commitauthor avatar_type="wide" contributor_label="Author" %}
        {% endfor %}
        {% for user in maintainers %}
          {% avatar user=user commitauthor=user.commitauthor avatar_type="wide" contributor_label="Maintainer" %}
        {% endfor %}
        {% for author in top_contributors_release_new %}
          {% avatar commitauthor=author avatar_type="wide" contributor_label="Contributor - New" %}
        {% endfor %}
        {% for author in top_contributors_release_old %}
          {% avatar commitauthor=author avatar_type="wide" contributor_label="Contributor" %}
        {% endfor %}
        </div>
      </div>
    </section>
    {% endif %}

    {% if description %}
      <section id="libraryReadMe"
        class="boostlook p-6 my-4 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
        {{ description|safe }}
      </section>
    {% endif %}

    {% if previous_contributors %}
    <section class="p-6 pt-1 my-4 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
      <h2 class="text-2xl">All Time</h2>
      <div class="flex flex-col gap-y-4">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-3 gap-x-2">
        {% for author in previous_contributors %}
          {% avatar commitauthor=author avatar_type="wide" contributor_label="Contributor" %}
        {% endfor %}
        </div>
      </div>
    </section>
    {% endif %}

  </main>
{% endblock %}
{% block footer_js %}
  <script>
    var options = {
      series: [{
        name: 'Commits',
        data: [{% for commit_data in commit_data_by_release %}{{ commit_data.commit_count }}, {% endfor %}]
      }],
      chart: {
        height: 350,
        type: 'bar',
        foreColor: localStorage.getItem('colorMode') === 'dark' ? '#f6f7f8' : '#373d3f',
        background: localStorage.getItem('colorMode') === 'dark' ? '#172A34' : '#ffffff',
        toolbar: {
          show: false,
        },
      },
      theme: {
        mode: localStorage.getItem('colorMode') === 'dark' ? 'dark' : 'light',
      },
      tooltip: {
        theme: localStorage.getItem('colorMode') === 'dark' ? 'dark' : 'light',
      },
      plotOptions: {
        bar: {
          borderRadius: 2,
          dataLabels: {
            position: 'top', // top, center, bottom
          },
        }
      },
      dataLabels: {
        enabled: true,
        formatter: function (val) {
          //return val + "%";
          return val;
        },
        offsetY: -20,
        style: {
          fontSize: '12px',

        }
      },

      xaxis: {
        categories: [{% for commit_data in commit_data_by_release %}"{{ commit_data.release }}",{% endfor %}],
        position: 'top',
        labels: {
          rotate: -45,
          rotateAlways: true,
        },
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },

        tooltip: {
          enabled: true,
        }
      },
      yaxis: {
        axisBorder: {
          show: true
        },
        axisTicks: {
          show: true,
        },
        labels: {
          show: true,
          formatter: function (val) {
            //return val + "%";
            return val;
          }
        }

      },
      title: {
        text: 'Commits Per Release',
        floating: true,
        offsetY: 330,
        align: 'center',

      }
    };

    // SS: putting this in the window object, a bit hacky, to be able to access it in the light/dark switcher - probably a better way
    window.chart = new ApexCharts(document.querySelector("#chart1"), options);
    window.chart.render();

    const ValidateGitImages = () => {
      document.querySelectorAll("img").forEach((img) => {
        var test_img = new Image();
        test_img.src = img.getAttribute('src');

        test_img.onerror = function() {
            var alt = img.getAttribute('alt');
            if (alt) {
                img.parentElement.insertAdjacentText('afterbegin', alt);
                img.parentElement.classList.add('text-xs');
            }
            img.remove();
        };
      });
    }

    window.addEventListener('load', function() {
      ValidateGitImages();
    });
  </script>
{% endblock %}