Feat: Initiatives by permalink

src/_includes/initiatives.html

@@ -18,10 +18,10 @@ <h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
           class="nav-link {{ initiative.active }}"
           id="pills-{{ initiative.slug }}-tab"
           data-bs-toggle="pill"
-          data-bs-target="#pills-{{ initiative.slug }}"
+          data-bs-target="#initiatives-{{ initiative.slug }}"
           type="button"
           role="tab"
-          aria-controls="pills-{{ initiative.slug }}"
+          aria-controls="initiatives-{{ initiative.slug }}"
           aria-selected="true"
         >
           {{ initiative.tag }}
@@ -35,10 +35,10 @@ <h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
 <div class="tab-content" id="pills-tabContent">
   {% for initiative in site.data.initiatives %}
   <div
-    class="tab-pane fade {{ initiative.active }}"
-    id="pills-{{ initiative.slug }}"
+    class="tab-pane fade scroll-link {{ initiative.active }}"
+    id="initiatives-{{ initiative.slug }}"
     role="tabpanel"
-    aria-labelledby="pills-{{ initiative.slug }}-tab"
+    aria-labelledby="initiatives-{{ initiative.slug }}-tab"
     tabindex="0"
   >
     <div
@@ -116,3 +116,5 @@ <h4 class="small-caps text-white mb-3">Resources</h4>
   </div>
   {% endfor %}
 </div>
+
+<script src="/scripts/initiatives.js"></script>

src/_layouts/default.html

@@ -12,6 +12,7 @@
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-      crossorigin="anonymous"></script>
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>

src/scripts/initiatives.js

@@ -0,0 +1,16 @@
+window.addEventListener("load", () => {
+  const triggerTabList = document.querySelectorAll("#pills-tab button");
+  triggerTabList.forEach((triggerEl) => {
+    const tabTrigger = new bootstrap.Tab(triggerEl);
+
+    triggerEl.addEventListener("click", (event) => {
+      event.preventDefault();
+      tabTrigger.show();
+    });
+  });
+
+  if (window.location.hash.startsWith("#initiatives")) {
+    const triggerEl = document.querySelector("button[data-bs-target='" + window.location.hash + "']");
+    bootstrap.Tab.getInstance(triggerEl).show();
+  }
+});

src/stylesheets/main.css

@@ -305,6 +305,10 @@ footer a:hover {
   border-style: solid;
 }
 
+.scroll-link {
+  scroll-margin-top: 240px;
+}
+
 .black-on-white .nav-pills {
   --bs-nav-pills-link-active-color: var(--bs-white);
   --bs-nav-pills-link-active-bg: var(--bs-body-color);