reconnect

.github/_layouts/about.html

@@ -0,0 +1,116 @@
+---
+# default "About" page layout
+# provides a full width featured image at top
+# with an auto generated TOC nav on the left and a narrow text block 
+layout: default
+---
+
+{% if page.about-featured-image or page.heading or page.sub-heading %}
+
+{% assign jumboId = page.about-featured-image %}
+{% if jumboId contains '/' %}
+{% assign jumboSrc = jumboId | relative_url %}
+{% else %}
+{% assign jumboItem = site.data[site.metadata] | where: "objectid", jumboId | first %}
+{% capture jumboSrc %}{{ jumboItem.object_location | default: jumboItem.image_small | relative_url }}{% endcapture %}
+{%- endif -%}
+
+<style>
+    #about-feature {
+        padding: 4rem 0;
+        margin-bottom: 1rem;
+        {% if page.about-featured-image %}
+        background-color: #e9ecef;
+        background-image: url({{ jumboSrc }});
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: {{ page.position | default: 'center' }};{% endif %}
+    }
+    {% if page.padding %}
+    .about-title-box {
+        padding-top: {{ page.padding }};
+        padding-bottom: 1em;
+    }
+    {%- endif -%}
+    .about-title {
+        padding-left: 15% !important;
+    }
+    @media screen and (max-width: 576px) {
+        {% if page.padding %}
+        .about-title-box {
+            padding-top: min({{ page.padding }}, 45vh);
+        }{% endif %}
+        .about-title {
+            padding-left: 1rem !important;
+        }
+    }
+</style>
+<div id="about-feature">
+    <div class="about-title-box">
+        {% if page.heading or page.sub-heading %}
+        <div class="p-2 text-start text-white bg-dark bg-opacity-75 about-title">
+            {% if page.heading %}<h2 class="display-1">{{ page.heading }}</h2>{% endif %}
+            {% if page.sub-heading  %}<h3 class="about-tagline h5">{{ page.sub-heading }}</h3>{% endif %}
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+<div id="about-wrapper">
+    <div id="about-toc-wrapper">
+        {% unless page.toc == false %}
+        <div id="about-toc">
+            <div id="about-toc-title">
+                <button class="btn btn-light" data-bs-toggle="collapse" data-bs-target="#about-toc-list" aria-expanded="false" aria-controls="about-toc-list">
+                    Contents
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+                    </svg>
+                </button>
+            </div>
+            <div id="about-toc-list" class="collapse" > 
+            {% include cb/jekyll-toc.html html=content sanitize=true h_min=1 h_max=3 skip_no_ids=true class="jekyll-toc-list" %}
+            </div>
+        </div>
+        {% endunless %}
+    </div>
+    <div id="about-contents-wrapper">
+        {{ content }}
+    </div>
+
+</div>
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const tocLinks = document.querySelectorAll("#about-toc-list a");
+  const headings = document.querySelectorAll("h1, h2, h3");
+
+  let activeId = null;
+
+  const observer = new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          activeId = entry.target.id;
+
+          tocLinks.forEach(link => link.classList.remove("active"));
+
+          const activeLink = document.querySelector(
+            `#about-toc-list a[href="#${activeId}"]`
+          );
+
+          if (activeLink) {
+            activeLink.classList.add("active");
+          }
+        }
+      });
+    },
+    {
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0
+    }
+  );
+
+  headings.forEach(heading => observer.observe(heading));
+});
+</script>