custom_theme_files/base.html

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
  <head>

    <!-- Charset and viewport -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,
      user-scalable=no, initial-scale=1, maximum-scale=1" />

    <!-- General meta tags -->
    {% block htmltitle %}

      <!-- Site title -->
      {% if page_title %}
        <title>{{ page_title }} - {{ site_name }}</title>
      {% elif page_description %}
        <title>{{ site_name }} - {{ page_description }}</title>
      {% else %}
        <title>{{ site_name }}</title>
      {% endif %}

      <!-- Site description -->
      {% if page_description %}
        <meta name="description" content="{{ page_description }}" />
      {% endif %}

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

      <!-- Author -->
      {% if site_author %}
        <meta name="author" content="{{ site_author }}" />
      {% endif %}
    {% endblock %}

    <!-- Open graph tags -->
    <meta property="og:url" content="{{ canonical_url }}" />
    <meta property="og:title" content="{{ site_name }}"/>
    <meta property="og:image"
      content="{{ canonical_url }}/{{ base_url }}/{{ config.extra.logo }}" />

    <!-- Web application capability on iOS -->
    <meta name="apple-mobile-web-app-title" content="{{ site_name }}" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style"
      content="black-translucent" />

    <!-- Web application icon on iOS -->
    {% if config.extra.logo %}
      <link rel="apple-touch-icon"
        href="{{ base_url }}/{{ config.extra.logo }}">
    {% endif %}

    <!-- Favicon -->
    {% set favicon = favicon | default("assets/images/favicon.ico", true) %}
    <link rel="shortcut icon" type="image/x-icon"
      href="{{ base_url }}/{{ favicon }}" />
    <link rel="icon" type="image/x-icon"
      href="{{ base_url }}/{{ favicon }}" />

    <!-- Configure icons (placed here to omit issues with subdirectories) -->
    <style>
      @font-face {
      	font-family: 'Icon';
      	src: url('{{ base_url }}/assets/fonts/icon.eot?52m981');
      	src: url('{{ base_url }}/assets/fonts/icon.eot?#iefix52m981')
               format('embedded-opentype'),
      		   url('{{ base_url }}/assets/fonts/icon.woff?52m981')
               format('woff'),
      		   url('{{ base_url }}/assets/fonts/icon.ttf?52m981')
               format('truetype'),
      		   url('{{ base_url }}/assets/fonts/icon.svg?52m981#icon')
               format('svg');
      	font-weight: normal;
      	font-style: normal;
      }
    </style>

    <!-- Theme-related stylesheets -->
    <link rel="stylesheet" type="text/css"
      href="{{ base_url }}/assets/stylesheets/application.css" />

    <!-- Extra palettes -->
    {% if config.extra.palette %}
      <link rel="stylesheet" type="text/css"
        href="{{ base_url }}/assets/stylesheets/palettes.css" />
    {% endif %}

    <!-- Configure webfonts -->
    {% if config.extra.font != "none" %}
      {% set text = config.extra.get("font", {}).text | default("Ubuntu") %}
      {% set code = config.extra.get("font", {}).code | default("Ubuntu Mono") %}
      {% set font = text + ':400,700|' + code | replace(' ', '+') %}
      <link rel="stylesheet" type="text/css"
        href="https://fonts.googleapis.com/css?family={{ font }}" />
      <style>
        body, input {
          font-family: '{{ text }}', Helvetica, Arial, sans-serif;
        }
        pre, code {
          font-family: '{{ code }}', 'Courier New', 'Courier', monospace;
        }
      </style>
    {% endif %}

    <!-- Custom stylesheets -->
    {% for path in extra_css %}
      <link rel="stylesheet" type="text/css" href="{{ path }}" />
    {% endfor %}

    <!-- Modernizr -->
    <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>

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

  <!-- Define palette -->
  {% set palette = config.extra.get("palette", {}) %}
  {% set primary = palette.primary | replace(' ', '-') | lower %}
  {% set accent  = palette.accent  | replace(' ', '-') | lower %}
  <body class="
    {% if primary %}palette-primary-{{ primary }}{% endif %}
    {% if accent %}palette-accent-{{ accent }}{% endif %}
  ">

    <!--
      Sadly the jinja template engine is not very flexible - it doesn't support
      regular expressions out-of-the-box. Since there might be a slash at the
      end of the repository name, we just do a string comparison and kill it.
    -->
    {% if repo_name == "GitHub" and repo_url %}
      {% set repo_id = repo_url | replace("https://github.com/", "") %}
      {% if repo_id[-1:] == "/" %}
        {% set repo_id = repo_id[:-1] %}
      {% endif %}
    {% endif %}

    <!-- Backdrop -->
    <div class="backdrop">
      <div class="backdrop-paper"></div>
    </div>

    <!-- State toggles -->
    <input class="toggle" type="checkbox" id="toggle-drawer" />
    <input class="toggle" type="checkbox" id="toggle-search" />

    <!-- Overlay for expanded drawer -->
    <label class="toggle-button overlay" for="toggle-drawer"></label>

    <!-- Header -->
    <header class="header">
      {% include "header.html" %}
    </header>

    <!-- Main content -->
    <main class="main">

      <!--
        This is a nasty hack that checks whether the content contains a
        h1 headline. If it does, the variable h1 is set to true. This is
        necessary for correctly rendering the table of contents which is
        embedded into the navigation and the actual headline.
      -->
      {% set h1 = "\x3ch1 id=" in content %}

      <!-- Drawer with navigation -->
      <div class="drawer">
        {% include "drawer.html" %}
      </div>

      <!-- Article -->
      <article class="article">
        <div class="wrapper">

          <!-- Headline -->
          {% if not h1 %}
            <h1>
              {{ page_title | default(site_name, true)}}
              <a class="headerlink" href="{{ page.edit_url }}">Edit this page on GitHub!</a>
            </h1>
          {% endif %}

          <!-- Article content -->
          {{ content }}

          <!-- Copyright and theme information -->
          <aside class="copyright" role="note">
            {% if copyright %}
              {{ copyright }} &ndash;
            {% endif %}
            <hr />
            <p>
              <b>Found a typo or have a question?</b>
              <br />
              Do you have an issue with this page of the DevCenter?
              <br />
              Feel free to <a href="{{ repo_url }}/issues/new?title=PAGE:{{ page.title }}" target="_blank">create an issue on the DevCenter's GitHub page</a>,
              or to <a href="https://www.bitrise.io/contact" target="_blank">contact us</a>!
              <br />
              You can also edit this page on <a href="{{ page.edit_url }}">GitHub</a> directly, you don't have to git clone the repository.
              <br />
              Just <a href="{{ page.edit_url }}">select the file on GitHub</a> and click the <b>pencil/edit icon</b>,
              which will open the GitHub editor for the file.
            </p>
          </aside>

          <!-- Footer -->
          {% block footer %}
            <footer class="footer">
              {% include "footer.html" %}
            </footer>
          {% endblock %}
        </div>
      </article>

      <!-- Search results -->
      <div class="results" role="status" aria-live="polite">
        <div class="scrollable">
          <div class="wrapper">
            <div class="meta"></div>
            <div class="list"></div>
          </div>
        </div>
      </div>
    </main>

    <!-- Theme-related and custom javascripts -->
    <script>
      var base_url = '{{ base_url }}';
      var repo_id  = '{{ repo_id }}';
    </script>
    <script src="{{ base_url }}/assets/javascripts/application.js"></script>
    {% for path in extra_javascript %}
      <script src="{{ path }}"></script>
    {% endfor %}

    <!-- Google Analytics -->
    {% if google_analytics %}
      <script>
        (function(i,s,o,g,r,a,m){
          i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
          []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
          m.parentNode.insertBefore(a,m)
        })(window, document,
          'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        /* General initialization */
        ga('create', '{{ google_analytics[0] }}', '{{ google_analytics[1] }}');
        ga('set', 'anonymizeIp', true);
        ga('send', 'pageview');

        /* Track outbound links */
        var buttons = document.querySelectorAll('a');
        Array.prototype.map.call(buttons, function(item) {
          if (item.host != document.location.host) {
            item.addEventListener('click', function() {
              var action = item.getAttribute('data-action') || 'follow';
              ga('send', 'event', 'outbound', action, item.href);
            });
          }
        });

        /* Register handler to log search on blur */
        var query = document.querySelector('.query');
        query.addEventListener('blur', function() {
          if (this.value) {
            var path = document.location.pathname;
            ga('send', 'pageview', path + '?q=' + this.value);
          }
        });
      </script>
    {% endif %}
  </body>
</html>