base.html

{% extends "base.html" %}

{% block styles %}
  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/almanac.css') }}">
{% endblock %}

{% block page_url %}https://almanac.httparchive.org{{ url_for(request.endpoint, **get_view_args(lang=language.lang_code, year=year)) }}{% endblock %}
{% block image_url %}https://almanac.httparchive.org/static/images/methodology-banner.png{% endblock %}
{% block image_height %}984{% endblock %}
{% block image_width %}1200{% endblock %}

{% block author_structured_data %}
{
  "@type": "Person",
  "sameAs": [
    "https://almanac.httparchive.org{{ url_for('contributors', year=year, lang=lang, _anchor='rviscomi') }}",
    "https://x.com/rick_viscomi",
    "https://github.com/rviscomi"
    ],
  "name": "Rick Viscomi"
}
{% endblock %}

{% block meta %}
<meta name="description" content="{{ self.description() }}">

<meta property="og:title" content="{{ self.title() }}">
<meta property="og:url" content="{{ self.page_url() }}">
<meta property="og:image" content="{{ self.image_url() }}">
<meta property="og:image:height" content="{{ self.image_height() }}">
<meta property="og:image:width" content="{{ self.image_width() }}">
<meta property="og:type" content="article">
<meta property="og:description" content="{{ self.description() }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@HTTPArchive">
<meta name="twitter:title" content="{{ self.title() }}">
<meta name="twitter:image" content="{{ self.image_url() }}">
<meta name="twitter:image:alt" content="{{ self.twitter_image_alt() }}">
<meta name="twitter:description" content="{{ self.description() }}">

<link rel="webmention" href="https://webmention.io/almanac.httparchive.org/webmention">
<link rel="pingback" href="https://webmention.io/almanac.httparchive.org/xmlrpc">
<link rel="me" href="mailto:team@httparchive.org">

{% block structured_data %}
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ self.page_url() }}"
    },
    "headline": "{{ self.title() }}",
    "image": {
        "@type": "ImageObject",
        "url": "{{ self.image_url() }}",
        "height": {{ self.image_height() }},
        "width": {{ self.image_width() }}
    },
    "publisher": {
        "@type": "Organization",
        "name": "HTTP Archive",
        "logo": {
            "@type": "ImageObject",
            "url": "https://almanac.httparchive.org/static/images/ha.png",
            "height": 160,
            "width": 320
        },
        "sameAs": [
          "https://httparchive.org",
          "https://x.com/HTTPArchive",
          "https://bsky.app/profile/httparchive.org",
          "https://github.com/HTTPArchive"
          ]
      },
    "author":
      {{ self.author_structured_data() }},
      "description": "{{ self.description() }}",
      "datePublished": "{{ date_published }}",
      "dateModified": "{{ date_modified }}"
  }
  </script>
  {% endblock %}

  {% block breadcrumb %}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ lang }}",
        "item": "https://almanac.httparchive.org/{{lang}}/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ year }}",
        "item": "https://almanac.httparchive.org/{{lang}}/{{year}}"
      }]
    }
  </script>
  {% endblock %}

{% endblock %}

{% block call_for_contributors_link %}https://github.com/HTTPArchive/almanac.httparchive.org/discussions/4062{% endblock %}

{% block contributors %}{{ config.contributors.keys() | length }}{% endblock %}

{% block non_chapter_nav_links %}
{% if year <= DEFAULT_YEAR %}
<li><a href="{{ url_for('contributors', year=year, lang=lang) }}">{{ self.contributors_title() }}</a></li>
<li><a href="{{ url_for('methodology', year=year, lang=lang) }}">{{ self.methodology_title() }}</a></li>
{% endif %}
{% endblock %}

{% macro nav_search(switcher_name) %}
  {% if switcher_name == "mobile" or switcher_name == "mobile-footer" %}
  <form class="search-nav" action="/{{ lang}}/search">
    <label for="{{ switcher_name }}-search-box" class="visually-hidden">{{ self.search_title() }}</label>
    <input id="{{ switcher_name }}-search-box" class="search-input" type="search" name="q" placeholder="{{ self.search_title() }}" title="{{ self.search_title() }}" aria-label="{{ self.search_title() }}">
    <button class="search-button" type="submit">
      <svg width="13" height="13" role="img" aria-labelledby="{{ switcher_name }}-search-icon">
        <title id="{{ switcher_name }}-search-icon">{{ self.search_title() }}</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use>
      </svg>
    </button>
  </form>
  {% else %}
  <a class="nav-dropdown-btn js-hide" href="{{ url_for('search', lang=lang) }}">{{ self.search_title() }}</a>
  <div class="nav-dropdown {{switcher_name}} search-nav js-enable hidden">
    <button type="button" class="nav-dropdown-btn search-button" aria-expanded="false">
      {{ self.search_title() }}
    </button>
    <ul class="nav-dropdown-list align-right hidden {{switcher_name}}-search">
      <li class="nav-dropdown-list-part">
        <form action="/{{ lang}}/search">
          <label for="{{ switcher_name }}-search-box" class="visually-hidden">{{ self.search_title() }}</label>
          <input id="{{ switcher_name }}-search-box" class="search-input" type="search" name="q" placeholder="{{ self.search_title() }}" title="{{ self.search_title() }}" aria-label="{{ self.search_title() }}">
          <button class="search-button" type="submit">
            <svg width="13" height="13" role="img" aria-labelledby="{{ switcher_name }}-search-icon">
              <title id="{{ switcher_name }}-search-icon">{{ self.search_title() }}</title>
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search-logo"></use>
            </svg>
          </button>
        </form>
      </li>
    </ul>
  </div>
  {% endif %}
{% endmacro %}

{% macro nav_table_of_contents(switcher_name) %}
{% if year <= DEFAULT_YEAR %}
  {% if switcher_name == "mobile" or switcher_name == "mobile-footer" %}
    {{ native_table_of_contents_dropdown(switcher_name) }}
  {% else %}
    {{ styled_table_of_contents_dropdown(switcher_name) }}
  {% endif %}
{% endif %}
{% endmacro %}

{% macro native_table_of_contents_dropdown(switcher_name) %}
{% set current_title = metadata.get('title') if metadata else None %}
<a class="js-hide" href="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</a>
<div class="table-of-contents-switcher js-enable hidden">
  <label for="table-of-contents-switcher-{{switcher_name}}" class="visually-hidden">
    {{ self.table_of_contents_switcher() }}
  </label>
  <select id="table-of-contents-switcher-{{switcher_name}}" data-label="toc-menu-mobile">
    {% if request.path.endswith("/" + year + "/") %}
      <option selected disabled value="{{ url_for('home', year=year, lang=lang) }}">{{ self.home() }}</option>
    {% else %}
      <option value="{{ url_for('home', year=year, lang=lang) }}">{{ self.home() }}</option>
    {% endif %}
    {% if request.path.endswith("table-of-contents") %}
      <option selected disabled value="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</option>
    {% else %}
      <option value="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</option>
    {% endif %}
    {% if self.foreword() | trim | length > 0 %}
    <option value="{{ url_for('table_of_contents', year=year, lang=lang, _anchor='foreword') }}">{{ self.foreword_title() }}</option>
    {% endif %}
    {% for part_config in config.outline %}
    {% for chapter_config in part_config.chapters %}
      {% set title = localizedChapterTitles[chapter_config.slug] if localizedChapterTitles[chapter_config.slug]|length else chapter_config.title %}
      {% if chapter_config.todo %}
        <option disabled>
          {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{title}}
        </option>
      {% else %}
        {% if chapter_lang_exists(lang, year, chapter_config.slug) %}
          {% if current_title == title %}
            <option disabled selected value="{{ url_for('chapter', year=year, lang=lang, chapter=chapter_config.slug) }}">
              {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{title}}
            </option>
          {% else %}
            <option value="{{ url_for('chapter', year=year, lang=lang, chapter=chapter_config.slug) }}">
              {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{title}}
            </option>
          {% endif %}
        {% else %}
        {% if current_title == title %}
          <option disabled selected value="{{ url_for('chapter', year=year, lang='en', chapter=chapter_config.slug) }}">
            {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{title}}
          </option>
        {% else %}
          <option value="{{ url_for('chapter', year=year, lang='en', chapter=chapter_config.slug) }}">
            {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{title}}
          </option>
        {% endif %}
        {% endif %}
      {% endif %}
    {% endfor %}
    {% endfor %}

    {% if request.path.endswith("methodology") %}
    <option selected disabled value="{{ url_for('methodology', year=year, lang=lang) }}">
      {{ self.methodology_title() }}
    </option>
    {% else %}
    <option value="{{ url_for('methodology', year=year, lang=lang) }}">
      {{ self.methodology_title() }}
    </option>
    {% endif %}
    {% if request.path.endswith("contributors") %}
    <option selected disabled value="{{ url_for('contributors', year=year, lang=lang) }}">
      {{ self.contributors_title() }}
    </option>
    {% else %}
    <option value="{{ url_for('contributors', year=year, lang=lang) }}">
      {{ self.contributors_title() }}
    </option>
    {% endif %}

    {% if request.path.endswith("search") %}
    <option selected disabled value="{{ url_for('search', lang=lang) }}">
      {{ self.search_title() }}
    </option>
    {% else %}
    <option value="{{ url_for('search', lang=lang) }}">
      {{ self.search_title() }}
    </option>
    {% endif %}

    {% if ebook_size_in_mb and ebook_size_in_mb > 0 %}
    <option value="https://cdn.httparchive.org/almanac/ebooks/web_almanac_{{ year }}_{{ lang }}.pdf" data-event="ebook-click">
      {{ self.ebook_download_short() }}
    </option>
    {% endif %}
  </select>
</div>
{% endmacro %}

{% macro styled_table_of_contents_dropdown(switcher_name) %}
{% set current_title = metadata.get('title') if metadata else None %}
<a class="nav-dropdown-btn js-hide" href="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</a>
<div class="nav-dropdown {{switcher_name}} table-of-contents js-enable hidden">
  <button type="button" class="nav-dropdown-btn" aria-expanded="false" aria-label="{{ self.table_of_contents_title() }}" >
    {{ self.table_of_contents_title() }}
  </button>
  <ul class="nav-dropdown-list hidden {{switcher_name}}-list">

    {% if request.path.endswith("/" + year + "/") %}
    <li class="nav-dropdown-list-part nav-dropdown-list-current">
      <span>{{ self.home() }}</span>
    </li>
    {% else %}
    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('home', year=year, lang=lang) }}">{{ self.home() }}</a>
    </li>
    {% endif %}

    {% if request.path.endswith('table-of-contents') %}
    <li class="nav-dropdown-list-part nav-dropdown-list-current">
      <span>{{ self.table_of_contents_title() }}</span>
    </li>
    {% else %}
    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</a>
    </li>
    {% endif %}
    {% if self.foreword() | trim | length > 0 %}
    <li class="nav-dropdown-list-chapter foreword">
      <a href="{{ url_for('table_of_contents', year=year, lang=lang, _anchor='foreword') }}">{{ self.foreword_title() }}</a>
    </li>
    {% endif %}

    {% for part_config in config.outline %}
    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('table_of_contents', year=year, lang=lang, _anchor='part-' + part_config.part_number) }}">{{ self.part() }} {{ localizedPartTitles[part_config.part] if localizedPartTitles[part_config.part]|length else chapter_config.title }}</a>
    </li>
    {% for chapter_config in part_config.chapters %}
    {% set title = localizedChapterTitles[chapter_config.slug] if localizedChapterTitles[chapter_config.slug]|length else chapter_config.title %}
    {% if current_title == title %}
    <li class="nav-dropdown-list-chapter nav-dropdown-list-current">
      {% if chapter_config.todo %}
      <span class="nav-dropdown-list-todo">{{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }}</span>
      {% else %}
          {% if chapter_lang_exists(lang, year, chapter_config.slug) %}
          <span>
            {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }}
          </span>
          {% else %}
          <span>
            {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }} <span class="not-translated">({{ self.translation_not_available() }})</span>
          </span>
          {% endif %}
      {% endif %}
    </li>
    {% else %}
    <li class="nav-dropdown-list-chapter">
      {% if chapter_config.todo %}
      <span class="nav-dropdown-list-todo">{{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }}</span>
      {% else %}
        {% if chapter_lang_exists(lang, year, chapter_config.slug) %}
        <a href="{{ url_for('chapter', year=year, lang=lang, chapter=chapter_config.slug) }}">
          {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }}
        </a>
        {% else %}
        <a href="{{ url_for('chapter', year=year, lang='en', chapter=chapter_config.slug) }}">
          {{ self.chapter() }} {{ chapter_config.chapter_number }}: {{ title }} <span class="not-translated">({{ self.translation_not_available() }})</span>
        </a>
        {% endif %}
      {% endif %}
    </li>
    {% endif %}
    {% endfor %}
    {% endfor %}

    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('table_of_contents', year=year, lang=lang, _anchor='appendices') }}">{{ self.appendices() }}</a>
    </li>
    {% if request.path.endswith("methodology") %}
    <li class="nav-dropdown-list-chapter nav-dropdown-list-current">
      <span>{{ self.methodology_title() }}</span>
    </li>
    {% else %}
    <li class="nav-dropdown-list-chapter">
      {% if page_lang_exists(lang, year, 'methodology') %}
      <a href="{{ url_for('methodology', year=year, lang=lang) }}">{{ self.methodology_title() }}</a>
      {% else %}
      <a href="{{ url_for('methodology', year=year, lang='en') }}">{{ self.methodology_title() }} <span class="not-translated">({{ self.translation_not_available() }})</span></a>
      {% endif %}
    </li>
    {% endif %}
    {% if request.path.endswith("contributors") %}
    <li class="nav-dropdown-list-chapter nav-dropdown-list-current">
      <span>{{ self.contributors_title() }}</span>
    </li>
    {% else %}
    <li class="nav-dropdown-list-chapter">
      {% if page_lang_exists(lang, year, 'contributors') %}
      <a href="{{ url_for('contributors', year=year, lang=lang) }}">{{ self.contributors_title() }}</a>
      {% else %}
      <a href="{{ url_for('contributors', year=year, lang='en') }}">{{ self.contributors_title() }} <span class="not-translated">({{ self.translation_not_available() }})</span></a>
      {% endif %}
    </li>
    {% endif %}

    {% if request.path.endswith("search") %}
    <li class="nav-dropdown-list-part nav-dropdown-list-current">
      <span>{{ self.search_title() }}</span>
    </li>
    {% else %}
    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('search', lang=lang) }}">{{ self.search_title() }}</a>
    </li>
    {% endif %}

    {% if ebook_size_in_mb and ebook_size_in_mb > 0 %}
    <li class="nav-dropdown-list-part">
      <a href="{{ url_for('table_of_contents', year=year, lang=lang, _anchor='ebook') }}">{{ self.ebook_title() }}</a>
    </li>
    <li class="nav-dropdown-list-chapter ebook">
      <a href="https://cdn.httparchive.org/almanac/ebooks/web_almanac_{{ year }}_{{ lang }}.pdf" data-event="ebook-click" data-label="toc-menu">{{ self.ebook_download_short() }}</a>
    </li>
    {% endif %}
  </ul>
</div>
{% endmacro %}

{% block content%}
  <div id="skiptocontent"><a href="#maincontent">{{ self.skip_navigation() }}</a></div>
  {% block announcement %}
    {% if self.announcement_text() %}
      <aside class="banner">
        <div class="container">
          {{ self.announcement_text() }}
        </div>
      </aside>
    {% endif %}
  {% endblock %}
  {% block header %}
  <header id="header" class="alt-bg">
    <div class="container">
      <div class="top-header">
        <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
          {{ self.web_almanac_logo() }}
        </a>
        <nav id="header-page-navigation" aria-label="{{ self.page_navigation() }}">
          <ul>
            {{ self.non_chapter_nav_links() }}
            <li>
              {{ nav_search('header') }}
            </li>
            <li>
              {{ nav_table_of_contents('header') }}
            </li>
            <li>
              {{ year_switcher('header') }}
            </li>
            <li>
              {{ language_switcher('header') }}
            </li>
          </ul>
        </nav>
        <nav id="menu" aria-labelledby="menu-btn">
          <a href="#footer" class="menu-btn js-hide" aria-label="{{ self.menu_title() }}">
            <span class="menu-btn-bar"></span>
            <span class="menu-btn-bar"></span>
            <span class="menu-btn-bar"></span>
          </a>
          <button type="button" class="menu-btn js-enable hidden" disabled id="menu-btn" aria-label="{{ self.open_the_menu() }}" aria-expanded="false" data-open-text="{{ self.open_the_menu() }}" data-close-text="{{ self.close_the_menu() }}">
            <span class="menu-btn-bar"></span>
            <span class="menu-btn-bar"></span>
            <span class="menu-btn-bar"></span>
          </button>
          <ul class="menu">
            {{ self.non_chapter_nav_links() }}
            <li>
              {{ nav_search('mobile') }}
            </li>
            <li>
              {{ nav_table_of_contents('mobile') }}
            </li>
            <li>
              {{ year_switcher('mobile') }}
            </li>
            <li>
              {{ language_switcher('mobile') }}
            </li>
            <li id="mobile-misc" class="misc">
              <ul class="misc">
                <li>
                  <a href="https://httparchive.org/" aria-labelledby="ha-logo-mobile">
                    <svg width="70" height="35" role="img">
                      <title id="ha-logo-mobile">{{ self.http_archive_link() }}</title>
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <ul class="social-media">
                    <li>
                      <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-mobile">
                        <svg width="20" height="20" role="img">
                          <title id="twitter-logo-mobile">Twitter</title>
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use>
                        </svg>
                      </a>
                    </li>
                    <li>
                      <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-mobile">
                        <svg width="20" height="20" role="img">
                          <title id="bluesky-logo-mobile">Bluesky</title>
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
                        </svg>
                      </a>
                    </li>
                    <li>
                      <a href="https://github.com/HTTPArchive/almanac.httparchive.org" aria-labelledby="github-logo-mobile">
                        <svg width="22" height="20" role="img">
                          <title id="github-logo-mobile">GitHub</title>
                          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use>
                        </svg>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <script nonce="{{ csp_nonce() }}">
    // If JS is enabled then enable menus ASAP to avoid CLS as menu items change from links to buttons
    (function() {
      document.querySelectorAll('.js-hide').forEach(element => {
        // Don't just hide it - delete it completely to avoid any specifity issues
        element.parentNode.removeChild(element);
      });
      document.querySelectorAll('.js-enable').forEach(element => {
        element.classList.remove('js-enable');
        element.classList.remove('hidden');
        element.disabled = false;
        element.hidden = false;
      });
    })();
  </script>
  {% endblock %}

  {% block container %}
    <div class="container">
      {% block main %}{% endblock %}
    </div>
  {% endblock %}

  {% block footer %}
    <footer id="footer" class="alt-bg">
      <div class="container">
        <div class="home-logo">
          <a class="navigation-logo" href="{{ url_for('home', year=year, lang=lang) }}">
            {{ self.web_almanac_logo() }}
          </a>
        </div>
        <hr>
        <nav id="footer-nav-items" aria-label="{{ self.footer_title() }}" class="nav-items">
          <ul>
            {{ self.non_chapter_nav_links() }}
            <li>
              {{ nav_search('footer') }}
            </li>
            <li>
              {{ nav_table_of_contents('footer') }}
            </li>
            <li>
              {{ year_switcher('footer') }}
            </li>
            <li>
              {{ language_switcher('footer') }}
            </li>
          </ul>
        </nav>
        <nav id="mobile-footer-nav-items" aria-label="{{ self.footer_title() }}" class="nav-items">
          <ul>
            {{ self.non_chapter_nav_links() }}
            <li>
              {{ nav_search('mobile-footer') }}
            </li>
            <li>
              {{ nav_table_of_contents('mobile-footer') }}
            </li>
            <li>
              {{ year_switcher('mobile-footer') }}
            </li>
            <li>
              {{ language_switcher('mobile-footer') }}
            </li>
          </ul>
        </nav>
        <div id="footer-mobile-social-media" class="mobile-ha-social-media">
          <a class="ha-logo" href="https://httparchive.org/" aria-labelledby="httparchive-logo-footer-mobile">
            <svg width="70" height="35" role="img">
              <title id="httparchive-logo-footer-mobile">{{ self.http_archive_link() }}</title>
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use>
            </svg>
          </a>
          <ul class="social-media">
            <li>
              <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-footer-mobile">
                <svg width="20" height="20" role="img">
                  <title id="twitter-logo-footer-mobile">Twitter</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer-mobile">
                <svg width="20" height="20" role="img">
                  <title id="bluesky-logo-footer-mobile">Bluesky</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer-mobile">
                <svg width="22" height="20" role="img">
                  <title id="github-logo-footer-mobile">GitHub</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use>
                </svg>
              </a>
            </li>
          </ul>
        </div>
        <hr>
        <p class="copyright">
          <span>{{ self.copyright() }}</span>
          <br>
          <a class="accessibility-statement" href="{{ url_for('accessibility_statement', lang=lang) }}">{{ self.accessibility_statement() }}</a>
          <span class="footer-bullet">&bullet;</span>
          <a class="rss-feed" href="{{ url_for('rss', lang=lang) }}">{{ self.rss_feed() }}</a>
        </p>
        <a class="ha-logo not-mobile" href="https://httparchive.org/" aria-labelledby="ha-logo-footer">
          <svg width="70" height="35" role="img">
            <title id="ha-logo-footer">{{ self.http_archive_link() }}</title>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ha-logo"></use>
          </svg>
        </a>
        <ul class="social-media not-mobile">
          <li>
            <a href="https://x.com/HTTPArchive" aria-labelledby="twitter-logo-footer">
              <svg width="20" height="20" role="img">
                <title id="twitter-logo-footer">Twitter</title>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-logo"></use>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-footer">
              <svg width="20" height="20" role="img">
                <title id="bluesky-logo-footer">Bluesky</title>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bluesky-logo"></use>
              </svg>
            </a>
          </li>
          <li>
            <a href="https://github.com/HTTPArchive/almanac.httparchive.org" rel="me" aria-labelledby="github-logo-footer">
              <svg width="22" height="20" role="img">
                <title id="github-logo-footer">GitHub</title>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-logo"></use>
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </footer>
  {% endblock %}
  {% block scripts %}
  <script async src="{{ get_versioned_filename('/static/js/almanac.js') }}" nonce="{{ csp_nonce() }}"></script>
  {% endblock %}
{% endblock %}

{% macro figure_dropdown(metadata, chapter_config, id, sheets_gid="", sql_file="", image="", caption="") %}
  {% if sheets_gid != "" or  sql_file != "" or image != "" %}
  <div class="figure-dropdown nav-dropdown">
    <button type="button" class="nav-dropdown-btn js-enable hidden" disabled aria-expanded="false" title="{{ self.explore_the_results() }}">
      <span class="visually-hidden">{{ self.explore_the_results() }}</span>
      <svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
      </svg>
    </button>
    <ul class="figure-dropdown-list nav-dropdown-list floating-card hidden">
      {% if sheets_gid != "" %}
      <li>
        {% if sheets_gid.startswith("https") %}
        <a href="{{ sheets_gid }}">
          {{ self.figure_data() }}
        </a>
        {% else %}
        <a href="{{ metadata.get('results') }}#gid={{ sheets_gid }}">
          {{ self.figure_data() }}
        </a>
        {% endif %}
      </li>
      {% endif %}
      {% if sql_file != "" %}
      <li>
        <a href="https://github.com/HTTPArchive/almanac.httparchive.org/tree/main/sql/{{ year }}/{{ metadata.get('chapter')  }}/{{ sql_file }}">
          {{ self.figure_sql() }}
        </a>
      </li>
      {% endif %}
      {% if image != "" %}
      <li>
        <a href="{{ image }}">
          {{ self.figure_image() }}
        </a>
      </li>
      {% endif %}
    </ul>
  </div>
  {% endif %}
{% endmacro %}


{% macro language_switcher(switcher_name) %}
  {% if switcher_name == "mobile" or switcher_name == "mobile-footer" %}
    {{ native_lang_dropdown(switcher_name) }}
  {% else %}
    {{ styled_lang_dropdown(switcher_name) }}
  {% endif %}
{% endmacro %}

{% macro native_lang_dropdown(switcher_name) %}
  <div class="language-switcher js-show">
    <label for="language-switcher-{{switcher_name}}" class="visually-hidden">{{ self.language_switcher() }}</label>
    <select id="language-switcher-{{switcher_name}}">
      {% for l in supported_languages | sort(attribute='_local_name') %}
        {% if l == language %}
          <option selected="selected" lang="{{ l.lang_code }}" value="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">
            {{ l }}
          </option>
        {% else %}
          <option lang="{{ l.lang_code }}" value="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">
            {{ l }}
          </option>
        {% endif %}
      {% endfor %}
      <hr>
      <option value="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide">
        {{ self.help_translate() }}
      </option>
    </select>
  </div>
{% endmacro %}

{% macro styled_lang_dropdown(switcher_name) %}
  <div class="nav-dropdown {{switcher_name}}">
    <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="{{ self.language_switcher() }}" >{{ language }}</button>
    <ul class="nav-dropdown-list hidden {{switcher_name}}-list">
      {% for l in supported_languages | sort(attribute='_local_name') %}
        {% if l != language %}
          <li>
            <a lang="{{ l.lang_code }}" href="{{ url_for(request.endpoint, **get_view_args(lang=l.lang_code)) }}">{{ l }}</a>
          </li>
        {% endif %}
      {% endfor %}
      {% if supported_languages|length > 1 %}
      <li>
        <a class="help-translate" href="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"><em>{{ self.help_translate() }}</em></a>
      </li>
      {% else %}
      <li>
        <a href="https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Translators'-Guide"><em>{{ self.help_translate() }}</em></a>
      </li>
      {% endif %}
    </ul>
  </div>
{% endmacro %}


{# Check if year_switcher already defined in child template as macros can't be overridden #}
{% if not year_switcher %}
  {% macro year_switcher(switcher_name) %}
    {# Only show if we currently support multi-year #}
    {% if all_supported_years|length > 1  %}
      {% if switcher_name == "mobile" or switcher_name == "mobile-footer" %}
          {{ native_year_dropdown(switcher_name) }}
        {% else %}
          {{ styled_year_dropdown(switcher_name) }}
      {% endif %}
    {% endif %}
  {% endmacro %}
{% endif %}

{% macro figure_id(metadata, chapter_config, id) %}{{ chapter_config.chapter_number }}.{{ id }}{% endmacro %}

{% macro figure_link(
  metadata,
  chapter_config,
  id,
  caption,
  sheets_gid="",
  sql_file="",
  image="",
  ebook=false
  )
%}
{% if ebook %}
<a href="#fig-{{ chapter_config.chapter_number }}-{{ id }}" class="anchor-link">{{ figure_text(metadata, chapter_config, id) }}</a> {{ caption|safe }}
{% else %}
<a href="#fig-{{ id }}" class="anchor-link">{{ figure_text(metadata, chapter_config, id) }}</a> {{ caption|safe }}
{% endif %}
{% endmacro %}

{%- macro figure_markup(
  id=0,
  image="",
  link="",
  video="",
  gif="",
  iframe="",
  caption="",
  alt=caption,
  description="",
  chart_url="",
  sheets_gid="",
  sql_file="",
  width=600,
  height=371,
  video_width=width,
  video_height=height,
  gif_width=width,
  gif_height=height,
  data_width=width,
  data_height=height,
  content="",
  classes="",
  metadata="",
  ebook=false,
  chapter_config=""
  )
%}

{# Add the chapter path to image and set the link #}
{% if image and not image.startswith("/") and not image.startswith("https://") %}{% set image="/static/images/%s/%s/%s" % (year, metadata.get('chapter'), image) %}{% endif %}

{% if gif and not gif.startswith("/") and not gif.startswith("https") %}{% set gif="/static/images/%s/%s/%s" % (year, metadata.get('chapter'), gif) %}{% endif %}

{# Set the link as appropriate if not provided #}
{% if not link and video %}{% set link=video %}{% elif not link %}{% set link=image %}{% endif %}

{% set print=request.args.get('print') != None %}

{# Ebook needs a unique fig id. 2019 is already out there so reluctant to change that, so "if" statemnt it is! #}
{% if ebook %}
{% set anchor="fig-%s-%s" % (chapter_config.chapter_number, id) %}
{% if link.startswith("/") %}{% set link="https://almanac.httparchive.org%s" % link %}{% endif %}
{% else %}
{% set anchor="fig-%s" % (id) %}
{% endif %}

<figure id="{{ anchor }}">
  {%- if image != "" %}
  <div class="figure-wrapper">
    {%- if not print and video != "" %}
    <iframe class="fig-mobile fig-desktop video-embed" src="{{ video }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen width="{{ video_width }}" height="{{ video_height }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description"></iframe>
    {%- endif %}
    {%- if not ebook and not print and gif != "" %}
    <picture class="fig-mobile fig-desktop video-embed">
      <source media="(prefers-reduced-motion: no-preference)" type="image/gif" srcset="{{ gif }}" width="{{ gif_width }}" height="{{ gif_height }}" >
      <img src="{{ image }}" alt="{{ caption|striptags }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description" width="{{ width }}" height="{{ height }}" loading="lazy">
    </picture>
    {%- endif %}
    {% if not ebook and not print and (video or gif) %}{% set anchor_class="video-fallback-image"%}{% endif %}
    <a href="{{ link }}"  class="{{ anchor_class }}">
      {%- if chart_url != "" %}
      <img src="{{ image }}" alt="{{ caption|striptags }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description" width="{{ width }}" height="{{ height }}" data-width="{{ data_width }}" data-height="{{ data_height }}" data-seamless="" data-frameborder="0" data-scrolling="no" data-iframe="{{ chart_url|safe }}" loading="lazy">
      {%- elif not ebook and iframe != "" %}
      <iframe class="fig-mobile fig-desktop fig-iframe" seamless frameborder="0" src="{{ image }}" width="{{ width }}" height="{{ height }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description"></iframe>
      {% else %}
      <img src="{{ image }}" class="{{ classes }}" alt="{{ caption|striptags }}" aria-labelledby="{{ anchor }}-caption" aria-describedby="{{ anchor }}-description" width="{{ width }}" height="{{ height }}" loading="lazy">
      {%- endif %}
    </a>
    {% if not ebook %}{{ figure_dropdown(metadata, chapter_config, id, sheets_gid, sql_file, image) }}{% endif %}
  </div>
  <button type="button" class="fig-description-button novisibility-until-js" aria-expanded="false" aria-controls="{{ anchor }}-description" data-show-text="{{ show_description(metadata,chapter_config,id) }}" data-hide-text="{{ hide_description(metadata,chapter_config,id) }}">{{ show_description(metadata,chapter_config,id) }}</button>
  <div id="{{ anchor }}-description" class="hidden">{{ description|safe }}</div>
  {%- elif content != "" %}
  <div class="figure-wrapper">
    <div class="{{ classes }}">{{ content|safe }}</div>
    {% if not ebook %}{{ figure_dropdown(metadata, chapter_config, id, sheets_gid, sql_file, image, ebook) }}{% endif %}
  </div>
  {%- endif %}
  <figcaption id="{{ anchor }}-caption">{{ figure_link(metadata, chapter_config, id, caption, ebook=ebook, sheets_gid=sheets_gid, sql_file=sql_file, image=image) }}</figcaption>
</figure>
{%- endmacro %}

{# The year drop down is a bit complicated because we want to handle a few cases: #}
{# - When chapter is not translated for a year (show link to English)             #}
{# - When chapter is not available in English for a year (show link to home page) #}
{# - When chapter is for a future year (show link to home page)                   #}
{% macro native_year_dropdown(switcher_name)%}
  <div class="year-switcher js-show">
    <label for="year-switcher-{{switcher_name}}" class="visually-hidden">{{ self.year_switcher() }}</label>
    <select id="year-switcher-{{switcher_name}}">
      {% for y in all_supported_years | sort(reverse=true)%}
        {% if y in supported_years %}
          {% if y == year %}
            <option selected="selected" value="{{ url_for(request.endpoint, **get_view_args(lang=lang, year=y)) }}">
              {{ y }}
            </option>
          {% elif y <= DEFAULT_YEAR or request.path.endswith("/" + year + "/") %}
            <option value="{{ url_for(request.endpoint, **get_view_args(lang=lang, year=y)) }}">
              {{ y }}
            </option>
          {% elif y > DEFAULT_YEAR %}
            <option value="{{ url_for('home', lang=lang, year=y) }}">
              {{ y }} {{ self.home() }}
            </option>
          {% endif %}
        {% else %}
          {% if y in en_supported_years and y <= DEFAULT_YEAR %}
          <option value="{{ url_for(request.endpoint, **get_view_args(lang='en', year=y)) }}">
            {{ y }} {{ self.in_english() }}
          </option>
          {% else %}
          <option value="{{ url_for('home', lang=lang, year=y) }}">
            {{ y }} {{ self.home() }}
          </option>
          {% endif %}
        {% endif %}
      {% endfor %}
    </select>
  </div>
{% endmacro %}

{# The year drop down is a bit complicated because we want to handle a few cases: #}
{# - When chapter is not translated for a year (show link to English)             #}
{# - When chapter is not available in English for a year (show link to home page) #}
{# - When chapter is for a future year (show link to home page)                   #}
{% macro styled_year_dropdown(switcher_name)%}
  <div class="nav-dropdown {{switcher_name}}">
    <button type="button" class="nav-dropdown-btn js-enable" disabled aria-expanded="false" aria-label="{{ self.year_switcher() }}">{{ year }}</button>
    <ul class="nav-dropdown-list hidden {{switcher_name}}-list">
      {% for y in all_supported_years | sort(reverse=true) %}
        {% if y in supported_years %}
          {% if y != year %}
            {% if y <= DEFAULT_YEAR or request.path.endswith("/" + year + "/") %}
            <li>
              <a href="{{ url_for(request.endpoint, **get_view_args(lang=lang, year=y)) }}">{{ y }}</a>
            </li>
          {% else %}
            <li>
              <a href="{{ url_for('home', lang=lang,year=y) }}">{{ y }} {{ self.home() }}</a>
            </li>
            {% endif %}
          {% endif %}
        {% else %}
          {% if y in en_supported_years and y <= DEFAULT_YEAR %}
          <li class="unsupported-year">
            <a href="{{ url_for(request.endpoint, **get_view_args(lang='en', year=y)) }}">{{ y }} {{ self.translation_not_available() }}</a>
          </li>
          {% else %}
          <li class="unsupported-year">
            <a href="{{ url_for('home', lang=lang,year=y) }}">{{ y }} {{ self.home() }}</a>
          </li>
          {% endif %}
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro swatch(color) %}
<svg width="10" height="15" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
  <title>{{ color }}</title>
  <rect x="0" y="0" width="10" height="15" stroke="black" fill="{{ color }}" stroke-width="1" />
</svg>
{% endmacro %}

{% block bodyend %}
{{ super() }}
{% if request.path.endswith("/" + year + "/") or request.path.endswith("table-of-contents") or request.path.endswith("contributors") %}
<!-- Let's assume you're going to visit one of the chapters and prefetch the page.css stylesheet -->
<!-- A small optimisation but hey, every little helps! -->
<link rel="prefetch" href="{{ get_versioned_filename('/static/css/page.css') }}">
{% endif %}

<script type="speculationrules" nonce="{{ csp_nonce() }}">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": {"href_matches": "/static/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>
{% endblock %}