<!DOCTYPE html> <html lang=“{{ site.data.manifest.lang | default: ”en-US“ }}”>

<head>

<meta charset="utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>

{% if site.data.manifest.name %}
{% assign title = site.data.manifest.name %}
{% else %}
{% assign title = site.title %}
{% endif %}

<title>{% if page.title %}{{ page.title }} | {% endif %}{{ title }}{% if site.data.manifest.tagline %} - {{ site.data.manifest.tagline }}{% endif %}</title>
{% if site.data.manifest.description %}
{% assign site.description = site.data.manifest.description %}
{% endif %}
{% seo title=false %}
{% include meta.html %}

<link rel="alternate" type="application/rss+xml" title="{{ title }}{% if site.data.manifest.tagline %} - {{ site.data.manifest.tagline }}{% endif %}" href="{{ site.baseurl }}/feed.xml" />

<!-- Website icon -->
<link rel="shortcut icon" href="{{ site.baseurl}}{% if site.data.manifest.icons[0] %}{{ site.data.manifest.icons[0].src }}{% else %}{{ site.logo }}{% endif %}">

<!-- Manifest -->
<link rel="manifest" href="{{ site.baseurl }}/manifest.json">
<meta name="theme-color" content="{{ site.data.manifest.theme_color | default: '#854fee' }}" />

<!-- Font Awesome -->
<script async src="https://kit.fontawesome.com/a8beec66c1.js" crossorigin="anonymous"></script>

<!-- Material Components for Web -->
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<!-- Material Icons from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/styles/app.css" />
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/styles/style.css" />

<!-- Installable PWA -->
<script async type="module" src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall@latest/dist/pwa-install.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

{% include github_head.html %}
{% include adsense_head.html %}
{% include analytics_head.html %}

<!-- Syntax Highlighting for Code Samples -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
</script>

</head>

<body class=“layout-{{ page.layout }}{% if page.title %} {{ page.title | slugify }}{% endif %}”>

{% include appbar.html %}

<main class="mdc-top-app-bar--fixed-adjust">
  {% unless page.id %}
  {% include drawer.html %}
  {% endunless %}

  <!-- Content -->
  <div class="main-content">
    <article class="about-section">
      <header>
        {% if site.breadcrubms %}
        <!-- Breadcrumbs -->
        <section>
          <nav class="breadcrumbs" aria-label="breadcrumb">
            <li class='breadcrumb-item active'>{{ page.title }}</li>
          </nav>
        </section>
        {% endif %}

        <!-- Cover Image -->
        {% if page.cover %}
        {% if page.cover contains '://' %}
        {% assign cover_url = page.cover %}
        {% else %}
        {% assign cover_url = page.cover | relative_url %}
        {% endif %}
        <div class="page-cover" style="background-image: url('{{ cover_url }}')">
        {% endif %}

        <!-- Summary -->
        <section class="{% if page.cover %}align-bottom{% endif %}">
          <div class="project-summary">
            {% if page.icon %}
            {% if page.icon contains '.' %}
            <img class="project-logo" src="{{ site.baseurl}}{{ page.icon }}" alt="{{ page.title | slice: 0 }}" />
            {% else %}
            <span class="material-icons project-logo">{{ page.icon }}</span>
            {% endif %}
            {% endif %}
            <div>
              {% if page.title %}<h1 class="project-title">{{ page.title }}</h1>{% endif %}
              {% unless page.icon %}
              <span class="project-type">{% if page.date %}{{ page.date | date: "%B %e, %Y" }}{% endif %}</span>
              {% endunless %}
              <div class="project-tags">
                {% if post %}
                {% assign categories = post.categories %}
                {% else %}
                {% assign categories = page.categories %}
                {% endif %}
                {% for category in categories %}
                <a href="{{site.baseurl}}/categories/#{{category|slugify|replace:",",""}}"><span class="project-tag"><i class="material-icons">sell</i>{{ category | replace: ",", "" }}</span></a>
                {% endfor %}
              </div>
              {% if page.device %}
              <p class="project-type"><span class="material-icons">devices</span>&nbsp; {{ page.device }}</p>
              {% endif %}
            </div>
          </div>
          {% if page.id %}
          <div>
            {% include widget_share.html %}
          </div>
          {% endif %}
        </section>

        {% if page.cover %}
        </div>
        {% endif %}
      </header>

      <!-- Page Content -->
      {% if page.title %}
      {{ content | replace_first: "h1", "h1 style='display: none;'" }}
      {% else %}
      {{ content }}
      {% endif %}

      <div id="status-bar" class="mdc-snackbar">
        <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
          <div class="mdc-snackbar__label" aria-atomic="false">
          </div>
          <div class="mdc-snackbar__actions" aria-atomic="true">
            <button type="button" class="mdc-button mdc-snackbar__action">
              <div class="mdc-button__ripple"></div>
              <span class="mdc-button__label"></span>
            </button>
          </div>
        </div>
      </div>

      <script>
        function showSnackbar(text, action = null, callback = null, timeout = 5000) {
          const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));
          snackbar.timeoutMs = timeout
          $('#status-bar .mdc-snackbar__label').text(text);
          if (action != null && callback != null) {
            $('#status-bar .mdc-snackbar__action').on('click', function() {
              snackbar.close();
              callback();
            });
            $('#status-bar .mdc-button__label').text(action);
          }
          snackbar.open();
        }
      </script>
    </article>
    {% include footer.html %}
  </div>
</main>

<script>
  $('#toc .mdc-list-item a').addClass('mdc-list-item__text');
</script>

<!-- Firebase services -->
<script async src="{{ site.baseurl }}/assets/scripts/firebase.js"></script>

<!-- Other global scripts -->
<script async src="{{ site.baseurl }}/assets/scripts/navigation.js"></script>

</body>

</html>