page-with-toc.html

{% extends "layout.html" %}

{% block title %}{{ this.title }}{% endblock %}

{% block body %}
  <div class="code-guidelines">
    <header class="header">
      <div class="container is-paddingless">
        <h1>{{ this.title }}</h1>
        <div class="description column is-9 is-paddingless">
          {{ this.description }}
        </div>
      </div>
    </header>
    <div class="container code-guidelines-body">
      <div class="columns">
        <div class="column is-one-quarter">
          <div class="row">
            {% if this.is_child_of('/contributing-code') %}
              <aside class="menu sidebar-menu">
                <ul class="menu-list">
                  {% for href, title in [
                    ['/contributing-code/projects', 'Project List'],
                    ['/contributing-code/issue-finder', 'Issue Finder'],
                    ['/contributing-code', 'Contribution Guidelines'],
                    ['/contributing-code/usability', 'Usability'],
                  ] %}
                    <li>
                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
                    {% if (href == '/contributing-code') %}
                      <ul>
                      {% for href, title in [
                        ['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
                        ['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
                        ['/contributing-code/repo-labels', 'Repository Labels'],
                        ['/contributing-code/javascript-guidelines', 'JavaScript Guidelines'],
                        ['/contributing-code/python-guidelines', 'Python Guidelines'],
                        ['/contributing-code/translation-guide', 'Translation Guide'],
                      ] %}
                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
                      {% endfor %}
                      </ul>
                    {% endif %}
                    </li>
                    {% if (href != '/contributing-code/usability') %}
                      <hr class="divider">
                    {% endif %}
                  {% endfor %}
                </ul>
              </aside>
            {% elif this.is_child_of('/community') %}
              <aside class="menu sidebar-menu">
                <ul class="menu-list">
                  {% for href, title in [
                    ['/community', 'Join the Community'],
                    ['/community/community-team', 'Community Team'],
                    ['/community/write-a-blog-post', 'Write a Blog Post'],
                    ['/community/code-of-conduct', 'Code of Conduct'],
                  ] %}
                    <li>
                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
                    {% if (href == '/community/community-team') %}
                      <ul>
                      {% for href, title in [
                        ['/community/community-team/members', 'Community Team Members'],
                        ['/community/community-team/project-roles', 'Project Roles'],
                        ['/community/community-team/community-building-roles', 'Community Building Roles'],
                        ['/community/community-team/engagement-channels', 'Engagement Channels'],
                      ] %}
                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
                      {% endfor %}
                      </ul>
                    {% endif %}
                    {% if (href == '/community/code-of-conduct') %}
                      <ul>
                        <li><a class="{% if this._path == '/community/code-of-conduct/enforcement' %} is-active {% endif%} link" href="{{ '/community/code-of-conduct/enforcement'|url }}"><i class="icon circle-filled"></i>Code of Conduct Enforcement</a></li>
                      </ul>
                    {% endif %}
                    </li>
                    {% if (href != '/community/code-of-conduct') %}
                      <hr class="divider">
                    {% endif %}
                  {% endfor %}
                  </li>
                </ul>
              </aside>
            {% elif this.is_child_of('/programs') %}
              <aside class="menu sidebar-menu">
                <ul class="menu-list">
                  {% for href, title in [
                    ['/programs', 'Overview'],
                    ['/programs/project-ideas', 'Project Ideas'],
                    ['/programs/history', 'History'],
                  ] %}
                    <li>
                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
                    {% if (href == '/programs') %}
                      <ul>
                      {% for href, title in [
                        ['/programs/applicant-guide', 'Applicant Guide'],
                        ['/programs/contrib-guide', 'Contributor Guide'],
                        ['/programs/lead-guide', 'Project Lead Guide'],
                      ] %}
                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
                      {% endfor %}
                      </ul>
                    {% endif %}
                    </li>
                    {% if (href != '/programs/history') %}
                      <hr class="divider">
                    {% endif %}
                  {% endfor %}
                </ul>
              </aside>
            {% endif %}
          </div>
          <div class="row padding-bottom-normal sticky-top">
            <h4 class="b-header">On this page</h4>
            <aside class="menu table-of-contents">
              <ul class="menu-list">
                {% for item in this.body.toc %}
                  <li>
                    <a class="link" href="#{{ item.anchor }}">{{ item.title }}</a>
                    {% if item.children and not this.is_long_page %}
                      <ul>
                        {% for subitem in item.children %}
                          <li><a class="link" href="#{{ subitem.anchor }}"><i class="icon circle-filled"></i>{{ subitem.title }}</a></li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </aside>
          </div>
        </div>
        <div class="column content is-three-quarters">
          {{ this.body }}
        </div>
      </div>
    </div>
  </div>
{% endblock %}