ferrix/docs/templates/base.html

{%- import "macros/icons.html" as icons -%}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{{ config.title }}{% endblock title %}</title>
  <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#06101e">
  <link rel="icon" href="{{ get_url(path='favicon.svg') }}" type="image/svg+xml">
  <link rel="preload" href="{{ get_url(path='fonts/InterVariable.woff2') }}" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="{{ get_url(path='site.css', cachebust=true) }}">
  {#- The theme is set before the page is drawn, so that it does not flash. #}
  <script>
    try {
      var theme = localStorage.getItem("theme");
      if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
    } catch (e) {}
  </script>
  <script src="{{ get_url(path='js/site.js', cachebust=true) }}" defer></script>
</head>
<body class="{% block body_class %}{% endblock body_class %}"
      data-search-engine="{{ get_url(path='elasticlunr.min.js') }}"
      data-search-index="{{ get_url(path='search_index.en.js') }}">
  <a class="skip" href="#main">Skip to content</a>
  <header class="topbar">
    <div class="topbar-inner">
      {%- block menu_button %}{% endblock menu_button %}
      <a class="brand" href="{{ get_url(path='') }}" aria-label="Ferrix home">
        <span class="brand-mark" aria-hidden="true"></span>
        <span class="brand-name">Ferrix</span>
        <span class="brand-version">{{ config.extra.version }}</span>
      </a>
      <nav class="topnav" aria-label="Main">
        {%- for item in config.extra.nav %}
        <a href="{{ get_url(path=item.path) }}"{% if current_path and current_path is starting_with("/" ~ item.path) %} aria-current="page"{% endif %}>{{ item.name }}</a>
        {%- endfor %}
      </nav>
      <div class="topbar-actions">
        <button class="search-button" type="button" data-search-open aria-label="Search the documentation">
          {{ icons::search() }}
          <span class="search-button-label">Search</span>
          <kbd class="search-button-key">/</kbd>
        </button>
        <a class="icon-button" href="{{ config.extra.repository }}" aria-label="Source code">{{ icons::code() }}</a>
        <button class="icon-button" type="button" data-theme-toggle aria-label="Switch between light and dark">
          <span class="theme-icon-light">{{ icons::sun() }}</span>
          <span class="theme-icon-dark">{{ icons::moon() }}</span>
        </button>
      </div>
    </div>
  </header>

  {% block body %}{% endblock body %}

  <footer class="footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <span class="brand-mark" aria-hidden="true"></span>
        <span>Ferrix BGP {{ config.extra.version }}</span>
      </div>
      <nav class="footer-links" aria-label="Footer">
        <a href="{{ get_url(path='docs/getting-started/introduction/') }}">Documentation</a>
        <a href="{{ get_url(path='docs/reference/configuration/') }}">Configuration</a>
        <a href="{{ get_url(path='docs/reference/rfcs/') }}">RFCs</a>
        <a href="{{ config.extra.repository }}">Source</a>
        <span>Apache License 2.0</span>
      </nav>
    </div>
  </footer>

  <div class="search" data-search hidden>
    <div class="search-backdrop" data-search-close></div>
    <div class="search-dialog" role="dialog" aria-modal="true" aria-label="Search">
      <div class="search-field">
        {{ icons::search() }}
        <input type="search" placeholder="Search the documentation" autocomplete="off" spellcheck="false" data-search-input aria-label="Search">
        <kbd data-search-close>esc</kbd>
      </div>
      <ul class="search-results" data-search-results role="listbox"></ul>
      <p class="search-empty" data-search-empty hidden>Nothing found.</p>
    </div>
  </div>
</body>
</html>