blube.club/templates/page.html

{% extends 'base.html' %}

{% block title %}
{{ config.title }} | {{ page.title }}
{% endblock %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-8 is-offset-2">
        <article class="box">
          <h1 class="title">
            {{ page.title }}
          </h1>
          <p class="subtitle">{{ page.description }}</p>
          <div class="columns is-multiline is-gapless">
            <div class="column is-8">
              {{ macros::page_publish_metadata(page=page) }}
            </div>
            <div class="column is-4 has-text-right-desktop">
              {{ macros::page_content_metadata(page=page) }}
            </div>
            <div class="column">
              {% if page.taxonomies.categories %}
              {{ macros::render_categories(categories=page.taxonomies.categories) }}
              {% endif %}
            </div>
            <div class="column has-text-right-desktop">
              {% if page.taxonomies.tags %}
              {{ macros::render_tags(tags=page.taxonomies.tags) }}
              {% endif %}
            </div>
          </div>
          <div class="content mt-2">
            {{ page.content | safe }}
          </div>
        </article>
      </div>
      {% if page.extra.toc %}
      <div class="column is-2 is-hidden-mobile">
        <aside class="menu" style="position: sticky; top: 48px">
          <p class="heading has-text-weight-bold">Contents</p>
          <ul class="menu-list">
            {% for h1 in page.toc %}
            <li>
              <a id="link-{{h1.id}}" class="toc is-size-7 {% if loop.first %}is-active{% endif %}"
                href="{{ h1.permalink | safe }}">
                {{ h1.title }}
              </a>
              {% if h1.children %}
              <ul>
                {% for h2 in h1.children %}
                <li>
                  <a id="link-{{h2.id}}" class="toc is-size-7" href="{{ h2.permalink | safe }}">
                    {{ h2.title }}
                  </a>
                </li>
                {% endfor %}
              </ul>
              {% endif %}
            </li>
            {% endfor %}
          </ul>
        </aside>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}

{% block pagination %}
{% if page.earlier or page.later or page.lighter or page.heavier %}
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-8">
        <nav class="level">
          {% if page.later %}
          <div class="level-item has-text-centered">
            <a class="button is-black is-outlined" href="{{ page.later.permalink }}">
              <span class="icon mr-2">
                <i class="fas fa-arrow-circle-left"></i>
              </span>
              {{ page.later.title }}
            </a>
          </div>
          {% endif %} {% if page.earlier %}
          <div class="level-item has-text-centered">
            <a class="button is-black is-outlined" href="{{ page.earlier.permalink }}">
              {{ page.earlier.title }}<span class="icon ml-2">
                <i class="fas fa-arrow-circle-right"></i>
              </span>
            </a>
          </div>
          {% endif %} {% if page.heavier %}
          <div class="level-item has-text-centered">
            <a class="button is-black is-outlined" href="{{ page.heavier.permalink }}">
              <span class="icon mr-2">
                <i class="fas fa-arrow-circle-left"></i>
              </span>
              {{ page.heavier.title }}
            </a>
          </div>
          {% endif %} {% if page.lighter %}
          <div class="level-item has-text-centered">
            <a class="button is-black is-outlined" href="{{ page.lighter.permalink }}">
              {{ page.lighter.title }}<span class="icon ml-2">
                <i class="fas fa-arrow-circle-right"></i>
              </span>
            </a>
          </div>
          {% endif %}
        </nav>
      </div>
    </div>
  </div>
</section>
{% endif %}
{% endblock %}

{% block comment %}
{% if page.extra.comments and config.extra.commenting.disqus %}
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-6">
        <div id="disqus_thread"></div>
      </div>
    </div>
  </div>
</section>
{% endif %}
{% endblock %}

{% block custom_js %}
{% if page.extra.toc %}
<script type="text/javascript">
  const menuBarHeight = $("nav.navbar").height();
  const tocItems = $('.toc');
  const navSections = new Array($('.toc').length);

  tocItems.each(function (i) {
    let id = $(this).attr("id").substring(5);
    navSections[i] = document.getElementById(id);
  })

  function isVisible(tocIndex) {
    const current = navSections[tocIndex];
    const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1] : $("section.section").get(1);

    const c = current.getBoundingClientRect();
    const n = next.getBoundingClientRect();
    const h = (window.innerHeight || document.documentElement.clientHeight);

    return (c.top <= h) && (c.top + (n.top - c.top) - menuBarHeight >= 0);
  }

  function activateIfVisible() {
    for (b = true, i = 0; i < tocItems.length; i++) {
      if (b && isVisible(i)) {
        tocItems[i].classList.add('is-active');
        b = false;
      } else
        tocItems[i].classList.remove('is-active');
    }
  }

  var isTicking = null;
  window.addEventListener('scroll', () => {
    if (!isTicking) {
      window.requestAnimationFrame(() => {
        activateIfVisible();
        isTicking = false;
      });
      isTicking = true;
    }
  }, false);
</script>
{% endif %}

{% if page.extra.comments and config.extra.commenting.disqus %}
<script>
  var disqus_config = function () {
    this.page.url = "{{config.base_url | safe}}";
    this.page.identifier = "{{ current_path | safe}}";
  };

  (function () {
    var d = document, s = d.createElement('script');
    s.src = 'https://{{ config.extra.commenting.disqus | safe}}.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
{% endif %}
{% endblock %}