layout-blog.njk

---
layout: layout-base.njk
---
{% include '_skip-link.njk' %}
{% include '_nav.njk' %}

<main id="main" class="blog">

  <header class="band header">
    <h1>{{ title }}</h1>
    {% if tagline %}<p class="tagline">{{ tagline }}</p>{% endif %} 
    <time datetime="{{ page.date }}">{{ page.date | prettyDate }}</time>
  </header>

  <aside class="block-toc">
    <h2>Contents</h2>
    {{ content | toc | safe }}
  </aside>

  {% band %}
    <details class="inline-toc">
      <summary>Contents</summary>
      {{- content | toc | safe -}}
    </details>
  {% endband %}

  <section class="band">
    {{ content | safe }}
  </section>

  <pf-v6-back-to-top id="back-to-top-link">Back to Top</pf-v6-back-to-top>
</main>

{% include '_foot.njk' %}

<script type="module">
  import '@patternfly/elements/pf-v6-back-to-top/pf-v6-back-to-top.js';
  const allTocLinks = document.querySelectorAll('nav.toc [href^="#"]')

  const activeLinks = document.querySelectorAll('nav.toc li.active');

  const visibleHeaders = new Set();

  const io = new IntersectionObserver(function onIO(entries) {
    for (const entry of entries) {
      if (entry.target.id && entry.isIntersecting) {
        visibleHeaders.add(entry.target);
      } else { 
        visibleHeaders.delete(entry.target);
      }
    }

    let set = false;
    for (const link of allTocLinks) {

      const [,id] = link.href.split('#');
      const header = document.getElementById(id);

      if (!set && visibleHeaders.has(header)) { 
        link.closest('li').classList.add('active');
        set = true;
      } else {
        link.closest('li').classList.remove('active');
      }
    }
  });

  for (const el of document.querySelectorAll(':is(h2, h3, h4)[id]')) {
    io.observe(el);
  }
</script>

<style>
#back-to-top-link {
  position: sticky;
  justify-self: end;
}
</style>