larlet-fr-david/david/templates/article_2024.html

{% extends "base_2024.html" %}
{% block lang %}{{ page.lang }}{% endblock %}
{% block title %}{{ page.title }}{% endblock %}
{% block description %}{{ page.extract|striptags }}{% endblock %}
{% block extra_head %}
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>
{% endblock %}
{% block content %}
  <header>
    <hgroup>
      <h1>{{ page.title }}</h1>
      <p>Le <time datetime="{{ page.date }}">{{ page.date|format_date }}</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      {% if prev and not prev.is_draft %}
        <a rel="prev"
           href="{{ prev.url }}"
           title="Publication précédente : {{ prev.title }}">← Précédent</a> •
      {% endif %}
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      {% if next and not next.is_draft %}
        • <a rel="next"
            href="{{ next.url }}"
            title="Publication suivante : {{ next.title }}">Suivant →</a>
      {% endif %}
    </p>
  </nav>
  {{ page.content }}
  {% if page.tags %}
    <nav>
      <p>
        {% for tag in page.tags %}
          <a href="/david/2024/{{ slugify(tag) }}/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#{{ tag }}</a>
        {% endfor %}
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  {% endif %}
  <nav>
    <p>
      {% if prev and not prev.is_draft %}
        <a rel="prev"
           href="{{ prev.url }}"
           title="Publication précédente : {{ prev.title }}">← Précédent</a> •
      {% endif %}
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      {% if next and not next.is_draft %}
        • <a rel="next"
            href="{{ next.url }}"
            title="Publication suivante : {{ next.title }}">Suivant →</a>
      {% endif %}
    </p>
  </nav>
{% endblock content %}
{% block extra_body %}
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>
{% endblock %}