tecitheme 0.15.9 → 0.15.11

package/dist/components/BentoGrid.svelte

@@ -36,10 +36,10 @@
   <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
 
     <!-- Eyebrow Text -->
-    <h2 class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText ? eyebrowText : ""}</h2>
+    <p class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText ? eyebrowText : ""}</p>
 
     <!-- Heading -->
-    <a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><p>{heading ? heading : ""}</p></a>
+    <a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><h2>{heading ? heading : ""}</h2></a>
 
     <!-- Grid -->
     <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 {getGridSizeStyles(columns, rows)}">

package/dist/components/CTATwoColumn.svelte

@@ -48,7 +48,7 @@
         <div class="w-full flex-auto">
 
           <!-- Heading -->
-          <a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl text-gray-900">{heading}</a>
+          <a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl"><h2>{heading}</h2></a>
 
           {#if $scrollTargetVisible || !animate}
             <!-- Text -->

package/dist/components/FeatureAlternatingWithTestimonial.svelte

@@ -71,7 +71,7 @@
               out:conditionalTransition={{fn: fade, condition: animate, delay: 200, duration: 750, easing:cubicInOut}}
             >
               {#if heading}
-                <a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900">{heading}</a>
+                <a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900"><h2>{heading}</h2></a>
               {/if}
               
               <p class="mt-4 text-lg text-gray-500">{text}</p>

package/dist/components/SidebarContent.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { buildToC, makeIdString } from "../utils.js";
 
   export let data = {};
@@ -40,9 +40,11 @@
 
   onMount(async () => {
     if (data.toc) {
-      tocBuilt = buildToC();
+      tocBuilt = buildToC(data.tocDepth);
     }
   });
+
+  let pageNavPresent = getContext("pageNavPresent");
 </script>
 
 <section {id}
@@ -70,7 +72,7 @@
   {#if (data.toc || data.rightRail)}
   <aside class="relative w-0 md:w-60">
     {#if data.toc}
-      <div class="sticky top-8 flex shrink-0 flex-col">
+      <div class="sticky { pageNavPresent ? "top-20" : "top-8" } flex shrink-0 flex-col">
         <button
           on:click={() => {
             tocOpen = !tocOpen;

package/dist/layouts/blocks.svelte

@@ -25,6 +25,7 @@
   import PartnersList from "../components/PartnersList.svelte";
   import DescriptionList  from "../components/DescriptionList.svelte";
   import Carousel from "../components/Carousel.svelte";
+    import { setContext } from "svelte";
 
   let blocks = [
     { ref: "accordion", component: Accordion },
@@ -76,6 +77,8 @@
   }
 
   let pageNav = page_sections ? page_sections.filter(sect => sect.fieldGroup === "pageNav")[0] : undefined;
+
+  setContext("pageNavPresent", pageNav ? true : false);
 </script>
 
 <svelte:head>

package/dist/utils.d.ts

@@ -40,7 +40,7 @@ export function getGridRowSizeStyle(num: any): "lg:grid-rows-1" | "lg:grid-rows-
 export function getGridSizeStyles(columns: any, rows: any): string;
 export function validateEmail(email: any): boolean;
 export function slugFromPath(path: any): void;
-export function buildToC(): boolean;
+export function buildToC(tocDepth?: number): boolean;
 export function makeIdString(text: any): string;
 /**
  * Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged

package/dist/utils.js

@@ -364,7 +364,7 @@ export function slugFromPath(path) {
   path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
 }
 
-export function buildToC() {
+export function buildToC(tocDepth = 6) {
   // Based on https://projectcodeed.blogspot.com/2020/04/an-automatic-table-of-contents.html
 
   // Get ToC div
@@ -393,32 +393,103 @@ export function buildToC() {
   let tocList = document.createElement("ul");
 
   // Find the primary content section
-  let content = document.getElementById("content");
+  let content = document.getElementById("content").getHTML();
 
-  // Get the h2 tags - ToC entries
-  let headers = content.getElementsByTagName("h2");
+  let headings = [];
 
-  if (headers.length == 0) {
-    console.log("There are not any H2 elements in the document.");
-  } else {
-    // For each h2
-    for (let i = 0; i < headers.length; i++) {
-      // Get Heading ID
-      let name = headers[i].id;
+  // Set up depth search
+  let headingLevels = [];
+  for (let i=0; i<=tocDepth; i++) {
+    headingLevels.push(i.toString())
+  }
+
+  // Look for all levels of headings
+  for (const level of headingLevels)
+  {
+      const regexp = new RegExp(String.raw`<h${level}([^>]*)>([^<>]*)<\/h${level}>`, "gm")
+      let h = Array.from(content.matchAll(regexp));
+      
+      for (const tag of h)
+      {
+          let src = tag[0];
+          let text = tag[2];
+          let matches = src.match(/id="([^ ]*)"/);
+          if (matches) {
+              let tagRef = "#" + matches[1];
+
+              let data = {
+                  src,
+                  text,
+                  index: tag["index"],
+                  tagRef,
+                  level: parseInt(level)
+              };
+
+              headings.push(data);
+          }
+      }
+  }
+
+  // Sort headings by index
+  headings = headings.sort((tag1, tag2) => {
+      if (tag1.index < tag2.index) 
+      {
+          return -1;
+      }
+      else if (tag1.index > tag2.index)
+      {
+          return 1;
+      }
+      else 
+      {
+          return 0;
+      }
+  });
 
+
+  // Build heading links
+  if (headings.length == 0) {
+    console.log("There are not any heading elements in the document.");
+  } else {
+    // For each heading
+    for (const heading of headings) {
       // list item for the entry
       let tocListItem = document.createElement("li");
+
+      // Figure out how much margin to give the heading
+      let margin = "";
+      switch (heading.level) {
+        case 2:
+          margin = "ml-0";
+          break;
+        case 3:
+          margin = "ml-2";
+          break;
+        case 4:
+          margin = "ml-3";
+          break;
+        case 5:
+          margin = "ml-4";
+          break;
+        case 6:
+          margin = "ml-6";
+          break;
+        default:
+          break;
+      }
+
       tocListItem.classList.add(
         "text-teci-blue-light",
         "hover:text-teci-blue-dark",
         "text-sm",
-        "truncate"
+        "truncate",
+        margin
       );
 
       // link for the h2
       let tocEntry = document.createElement("a");
-      tocEntry.setAttribute("href", "#" + name);
-      tocEntry.innerText = headers[i].innerText;
+      tocEntry.setAttribute("href", heading.tagRef);
+      tocEntry.innerText = heading.text;
 
       // add link to list item list
       tocListItem.appendChild(tocEntry);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.15.9",
+  "version": "0.15.11",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",