mkdocs-material/src/base.html

<!--
  Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to
  deal in the Software without restriction, including without limitation the
  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
  sell copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  IN THE SOFTWARE.
-->

{% import "partials/language.html" as lang with context %}

<!doctype html>
<html lang="{{ lang.t('language') }}" class="no-js">
  <head>

    <!-- Metatags -->
    {% block site_meta %}
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />

      <!-- Page description -->
      {% if page and page.meta and page.meta.description %}
        <meta name="description" content="{{ page.meta.description }}" />
      {% elif config.site_description %}
        <meta name="description" content="{{ config.site_description }}" />
      {% endif %}

      <!-- Page keywords -->
      {% if page and page.meta and page.meta.keywords %}
        <meta name="keywords" content="{{ page.meta.keywords }}" />
      {% elif config.site_keywords %}
        <meta name="keywords" content="{{ config.site_keywords }}" />
      {% endif %}

      <!-- Canonical -->
      {% if page.canonical_url %}
        <link rel="canonical" href="{{ page.canonical_url }}" />
      {% endif %}

      <!-- Page author -->
      {% if page and page.meta and page.meta.author %}
        <meta name="author" content="{{ page.meta.author }}" />
      {% elif config.site_author %}
        <meta name="author" content="{{ config.site_author }}" />
      {% endif %}

      <!-- Favicon -->
      <link rel="shortcut icon" href="{{ config.theme.favicon | url }}" />

      <!-- Generator banner -->
      <meta
        name="generator"
        content="mkdocs-{{ mkdocs_version }}, $md-name$-$md-version$"
      />
    {% endblock %}

    <!-- Site title -->
    {% block htmltitle %}
      {% if page and page.meta and page.meta.title %}
        <title>{{ page.meta.title }} - {{ config.site_name }}</title>
      {% elif page and page.title and not page.is_homepage %}
        <title>{{ page.title | striptags }} - {{ config.site_name }}</title>
      {% else %}
        <title>{{ config.site_name }}</title>
      {% endif %}
    {% endblock %}

    <!-- Theme-related stylesheets -->
    {% block styles %}
      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.css' | url }}" />

      <!-- Extra color palette -->
      {% if config.theme.palette %}
        {% set palette = config.theme.palette %}
        <link
          rel="stylesheet"
          href="{{ 'assets/stylesheets/palette.css' | url }}"
        />

        <!-- Theme-color meta tag for Android -->
        {% if palette.primary %}
          {% import "partials/palette.html" as map %}
          {% set primary = map.primary(
            palette.primary | replace(" ", "-") | lower
          ) %}
          <meta name="theme-color" content="{{ primary }}" />
        {% endif %}
      {% endif %}
    {% endblock %}

    <!-- JavaScript libraries -->
    {% block libs %}{% endblock %}

    <!-- Webfonts -->
    {% block fonts %}

      <!-- Load fonts from Google -->
      {% if config.theme.font != false %}
        {% set font = config.theme.font %}
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family={{
            font.text | replace(' ', '+') + ':300,400,400i,700%7C' +
            font.code | replace(' ', '+')
          }}&display=fallback"
        />
        <style>
          body, input {
            font-family: "{{ font.text }}",
              -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
          }
          pre, code, kbd {
            font-family: "{{ font.code }}",
              SFMono-Regular, Consolas, Menlo, monospace;
          }
        </style>
      {% endif %}
    {% endblock %}

    <!-- Progressive Web App Manifest -->
    {% if config.extra.manifest %}
      <link
        rel="manifest"
        href="{{ config.extra.manifest | url }}"
        crossorigin="use-credentials"
      />
    {% endif %}

    <!-- Custom stylesheets, might contain media query after URL -->
    {% for path in config["extra_css"] %}
      <link rel="stylesheet" href="{{ path | url }}" />
    {% endfor %}

    <!-- Analytics -->
    {% block analytics %}
      {% if config.google_analytics %}
        {% include "partials/integrations/analytics.html" %}
      {% endif %}
    {% endblock %}

    <!-- Custom front matter -->
    {% block extrahead %}{% endblock %}
  </head>

  <!-- Text direction and color palette, if defined -->
  {% set direction = config.theme.direction or lang.t('direction') %}
  {% if config.theme.palette %}
    {% set palette = config.theme.palette %}
    {% if not palette is mapping %}
      {% set palette = palette | first %}
    {% endif %}
    {% set scheme  = palette.scheme  | replace(" ", "-") | lower %}
    {% set primary = palette.primary | replace(" ", "-") | lower %}
    {% set accent  = palette.accent  | replace(" ", "-") | lower %}
    <body
      dir="{{ direction }}"
      data-md-color-scheme="{{ scheme }}"
      data-md-color-primary="{{ primary }}"
      data-md-color-accent="{{ accent }}"
    >

      <!-- Experimental: set color scheme based on preference -->
      {% if "preference" == scheme %}
        <script>
          if (matchMedia("(prefers-color-scheme: dark)").matches)
            document.body.setAttribute("data-md-color-scheme", "slate")
        </script>
      {% endif %}

  {% else %}
    <body dir="{{ direction }}">
  {% endif %}

    <!--
      State toggles - we need to set autocomplete="off" in order to reset the
      drawer on back button invocation in some browsers
    -->
    <input
      class="md-toggle"
      data-md-toggle="drawer"
      type="checkbox"
      id="__drawer"
      autocomplete="off"
    />
    <input
      class="md-toggle"
      data-md-toggle="search"
      type="checkbox"
      id="__search"
      autocomplete="off"
    />

    <!-- Overlay for expanded drawer -->
    <label class="md-overlay" for="__drawer"></label>

    <!-- Link to skip to content -->
    <div data-md-component="skip">
      {% if page.toc | first is defined %}
        {% set skip = page.toc | first %}
        <a href="{{ skip.url | url }}" class="md-skip">
          {{ lang.t('skip.link.title') }}
        </a>
      {% endif %}
    </div>

    <!-- Announcement bar -->
    <div data-md-component="announce">
      {% if self.announce() %}
        <aside class="md-announce">
          <div class="md-announce__inner md-grid md-typeset">
            {% block announce %}{% endblock %}
          </div>
        </aside>
      {% endif %}
    </div>

    <!-- Application header -->
    {% block header %}
      {% include "partials/header.html" %}
    {% endblock %}

    <!-- Container, necessary for web-application context -->
    <div class="md-container" data-md-component="container">

      <!-- Hero teaser -->
      {% block hero %}{% endblock %}

      <!-- Tabs navigation -->
      {% block tabs %}
        {% if "navigation.tabs" in config.theme.features %}
          {% include "partials/tabs.html" %}
        {% endif %}
      {% endblock %}

      <!-- Main area -->
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">

          <!-- Navigation -->
          {% block site_nav %}

            <!-- Main navigation -->
            {% if nav %}
              <div
                class="md-sidebar md-sidebar--primary"
                data-md-component="navigation"
              >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    {% include "partials/nav.html" %}
                  </div>
                </div>
              </div>
            {% endif %}

            <!-- Table of contents -->
            {% if page.toc %}
              <div
                class="md-sidebar md-sidebar--secondary"
                data-md-component="toc"
              >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    {% include "partials/toc.html" %}
                  </div>
                </div>
              </div>
            {% endif %}
          {% endblock %}

          <!-- Article -->
          <div class="md-content">
            <article class="md-content__inner md-typeset">

              <!-- Content -->
              {% block content %}

                <!-- Edit button -->
                {% if page.edit_url %}
                  <a
                    href="{{ page.edit_url }}"
                    title="{{ lang.t('edit.link.title') }}"
                    class="md-content__button md-icon"
                  >
                    {% include ".icons/material/pencil.svg" %}
                  </a>
                {% endif %}

                <!--
                  Hack: check whether the content contains a h1 headline. If it
                  doesn't, the page title (or respectively site name) is used
                  as the main headline.
                -->
                {% if not "\x3ch1" in page.content %}
                  <h1>{{ page.title | default(config.site_name, true)}}</h1>
                {% endif %}

                <!-- Content -->
                {{ page.content }}

                <!-- Last update of source file -->
                {% if page and page.meta %}
                  {% if page.meta.git_revision_date_localized or
                        page.meta.revision_date
                  %}
                    {% include "partials/source-date.html" %}
                  {% endif %}
                {% endif %}
              {% endblock %}

              <!-- Disqus integration -->
              {% block disqus %}
                {% include "partials/integrations/disqus.html" %}
              {% endblock %}
            </article>
          </div>
        </div>
      </main>

      <!-- Application footer -->
      {% block footer %}
        {% include "partials/footer.html" %}
      {% endblock %}
    </div>

    <!-- Theme-related JavaScript -->
    {% block scripts %}
      <script src="{{ 'assets/javascripts/vendor.js' | url }}"></script>
      <script src="{{ 'assets/javascripts/bundle.js' | url }}"></script>

      <!-- Translations -->
      {%- set translations = {} -%}
      {%- for key in [
        "clipboard.copy",
        "clipboard.copied",
        "search.config.lang",
        "search.config.pipeline",
        "search.config.separator",
        "search.placeholder",
        "search.result.placeholder",
        "search.result.none",
        "search.result.one",
        "search.result.other",
        "search.result.more.one",
        "search.result.more.other",
        "search.result.term.missing"
      ] -%}
        {%- set _ = translations.update({ key: lang.t(key) }) -%}
      {%- endfor -%}
      <script id="__lang" type="application/json">
        {{- translations | tojson -}}
      </script>

      <!-- Application configuration -->
      {% block config %}{% endblock %}

      <!-- Application initialization -->
      <script>
        app = initialize({
          base: "{{ base_url }}",
          features: {{ config.theme.features or [] | tojson }},
          search: Object.assign({
            worker: "{{ 'assets/javascripts/worker/search.js' | url }}"
          }, typeof search !== "undefined" && search)
        })
      </script>

      <!-- Custom JavaScript -->
      {% for path in config["extra_javascript"] %}
        <script src="{{ path | url }}"></script>
      {% endfor %}
    {% endblock %}
  </body>
</html>