page.html

---
layout: default
---

{% assign pages = site.content | sort_pages %}

{% assign top = page.url | split:'/' | slice:0,2 | join:'/' | append:'/index.html' %}
{% for apage in pages %}
  {% if apage.url == top %}
    {% assign top = apage %}
    {% break %}
  {% endif %}
{% endfor %}

<div class="layout-page">

  <div class="ttn-header ttn-header-small">
    <div class="ttn-container container-fluid">
      <h1>
        <img src="{{ site.baseurl }}/assets/images/the-things-white.png" alt="⛅ The Things Network" />
        <span>Learn</span>
      </h1>
    </div>
  </div>

  <div class="container-fluid ttn-container">

    <div class="row page-top-nav">

      <div class="col-sm-9">
        <ul>
          <li class="page-top-nav-crumb"><a href="http://www.thethingsnetwork.org/">Home</a></li>
          <li class="page-top-nav-crumb"><a href="{{ site.baseurl }}/">Learn</a></li>
          {% for apage in pages %}
            {% unless apage.hidden %}
              {% assign apage_depth = apage.url | remove:'/index.html' | split:'/' | size %}
              {% if apage_depth == 2 %}
                <li class="{% if top.url == apage.url %}active{% endif %}"><a href="{{ site.baseurl }}{{ apage.url | remove:'index.html' }}">{{ apage.title }}</a></li>
              {% endif %}
            {% endunless %}
          {% endfor %}
        </ul>
      </div>

      <div class="hidden-xs col-sm-3 text-right">
        <a href="{% if page.source %}{{ page.source }}{% else %}{{ site.github.repository_url }}/edit/master/{{ page.path | downcase }}{% endif %}" class="page-edit" data-proofer-ignore><i class="fa fa-github"></i> Edit <strong>{{ page.path | split:'/' | last }}</strong></a>
      </div>

    </div>

    <div class="row">

      <div class="col-sm-3">

        <div class="panel page-side-nav page-affix">
          <div class="panel-body">

            <h5>{{ top.title }}</h5>
          
            <ul>
              <li class="{% if top.url == page.url %}active{% endif %}"><a href="{{ top.url | prepend:site.baseurl}}">Overview</a>
                {% include tree.html pages=pages parent=top nosection=true %}
              </li>
              {% for section in top.sections %}
                {% include tree.html pages=pages parent=top section=section %}
              {% endfor %}
              {% if top.links %}
                <li class="page-side-nav-section"><span>Links <i class="fa fa-link"></i></span>
                  <ul>
                    {% for link in top.links %}
                      <li class=""><a href="{% if link.href contains ':' %}{{ link.href }}{% else %}{{ link.href | prepend:top.url | prepend:site.baseurl | remove:'index.html' }}{% endif %}">{{ link.title }}</a></li>
                    {% endfor %}
                  </ul>
                </li>
              {% endif %}
            </ul>

          </div>
        </div>
        
      </div>
      
      <div class="col-sm-7">

        {% if page.ambassador %}
          <section class="panel page-ambassador">
            <div class="panel-body">
              <div class="media">
                <div class="media-left">
                  <a href="https://www.thethingsnetwork.org/u/{{ page.ambassador.username }}/"><img src="{% if page.ambassador.image %}{{ page.ambassador.image }}{% else %}https://account.thethingsnetwork.org/api/users/{{ page.ambassador.username }}/picture.jpg{% endif %}" alt="{{ page.ambassador.name }}" class="img-circle" /></a>
                </div>
                <div class="media-body">
                  {% if page.ambassador.text %}
                    {{ page.ambassador.text | markdownify }}
                  {% else %}
                    <p>This is a community effort led by The Things Network Ambassador <a href="https://www.thethingsnetwork.org/u/{{ page.ambassador.username }}/">{{ page.ambassador.name }}</a>. <a href="mailto:fokke@thethingsnetwork.org">Become an ambassador.</a></p>
                  {% endif %}
                </div>
              </div>
            </div>
          </section>
        {% endif %}

        <div class="panel">
          <div class="panel-body page-content">

            {% if page.description %}
              <p class="lead">{{ page.description }}</p>
            {% endif %}

            {{ content | docs_content }}

          </div>
        </div>

      </div>

      <div class="hidden-xs col-sm-2">
        <div class="page-toc page-affix"></div>
      </div>

    </div>
  </div>

</div>

<div class="modal fade" id="lightbox" tabindex="-1" role="dialog">
  <div class="modal-dialog text-center" role="document" style="width:auto;padding:20px;">
    <a href="https://ttnstaticfile.blob.core.windows.net/static/ttn/media/logo/ttn-logo.png"><img class="modal-content modal-body" src="https://ttnstaticfile.blob.core.windows.net/static/ttn/media/logo/ttn-logo.png" alt="Zoom" /></a>
  </div>
</div>

<script src="{{ site.baseurl }}/assets/js/page.js"></script>