tecitheme 0.0.14 → 0.0.17

package/components/CTA.svelte

@@ -1,30 +1,28 @@
 <script>
-  export let data = {
-    title: 'Ready to dive in?',
-    subtitle: 'Start your free trial today.',
-    links: [
-      {
-        linkText: 'Get Started',
-        linkURL: '/product'
-      }
-    ]
-  }
+  export let data;
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<section class="bg-white mb-12">
+<section class="mb-12">
   <div class="mx-auto text-center px-4 sm:px-6 lg:px-8">
-    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-      <span class="block">{data.title}</span>
-    </h2>
-    <div class="mt-8 flex justify-center">
-      {#each data.links as link}
-        <div class="inline-flex shadow">
-          <a href={link.linkURL} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-teci-blue-light hover:bg-teci-blue-dark">{link.linkText}</a>
-        </div>
-      {:else}
-        <br>
-      {/each}
-    </div>
+    {#if data.title}
+      <h2 class="{ data.subtitle ? 'mb-4' : 'mb-8'} text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        <span class="block">{data.title}</span>
+      </h2>
+    {/if}
+    {#if data.subtitle}
+      <h2 class="mb-8 text-xl font-bold tracking-tight text-teci-blue-dark">
+        <span class="block">{data.subtitle}</span>
+      </h2>
+    {/if}
+    {#if data.links}
+      <div class="flex flex-col space-x-0 space-y-8 justify-center items-center md:space-x-8 md:space-y-0 md:flex-row md:justify-around">
+        {#each data.links as link}
+          <div class="inline-flex shadow w-full max-w-xs">
+            <a href={link.linkURL} class="whitespace-nowrap w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-teci-blue-light hover:bg-teci-blue-dark">{link.linkText}</a>
+          </div>
+        {/each}
+      </div>
+    {/if}
   </div>
 </section>

package/components/CTA.svelte.d.ts

@@ -2,14 +2,7 @@
 /** @typedef {typeof __propDef.events}  CtaEvents */
 /** @typedef {typeof __propDef.slots}  CtaSlots */
 export default class Cta extends SvelteComponentTyped<{
-    data?: {
-        title: string;
-        subtitle: string;
-        links: {
-            linkText: string;
-            linkURL: string;
-        }[];
-    };
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,14 +13,7 @@ export type CtaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        data?: {
-            title: string;
-            subtitle: string;
-            links: {
-                linkText: string;
-                linkURL: string;
-            }[];
-        };
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Card.svelte

@@ -0,0 +1,46 @@
+<script>
+  //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
+
+	import Icon from './Icon.svelte';
+  export let data;
+  export let halfHeight;
+</script>
+
+<div class="group space-y-4">
+  {#if data.image}
+  <div class="w-full {halfHeight ? 'aspect-video' : 'aspect-square'} bg-cover bg-no-repeat shadow-md border border-gray-200 flex items-center justify-center" 
+    style="background-image: url({data.image});"
+  >
+    <div class="md:group-hover:backdrop-grayscale py-8 flex flex-col w-full h-full justify-center items-center {halfHeight ? 'space-y-4' : 'space-y-8'} transition">
+      {#each data.links as link}
+        <a href={link.linkURL} class="whitespace-nowrap hidden md:group-hover:block btn w-3/4 text-center">{link.linkText}</a>
+      {/each}
+    </div>
+  </div>
+  {/if}
+  <div>
+    <a href={data.cardURL}>
+      <div class="flex flex-row items-start space-x-4 mb-2">
+        {#if data.icon}
+        <div class="grid place-items-center">
+          <Icon classes={data.classes} icon={data.icon} />
+        </div>
+        {/if}
+        <div class="leading-none font-medium flex flex-col">
+          {#if data.heading}
+          <h3 class="text-2xl leading-none">{data.heading}</h3>
+          {/if}
+          {#if data.subheading}
+          <p class="text-teci-blue-dark leading-6">{data.subheading}</p>
+          {/if}
+        </div>
+      </div>
+      {#if data.text}
+      <div class="text-lg">
+        <p class="text-gray-500">{data.text}</p>
+        <span class="text-sm font-medium text-teci-blue-light lg:mt-4">{data.cardLinkText}<span aria-hidden="true">&nbsp;→</span></span>
+      </div>
+      {/if}
+    </a>
+  </div>
+</div>

package/components/Card.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponentTyped<{
+    data: any;
+    halfHeight: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+        halfHeight: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/CountrySelector.svelte

@@ -6,7 +6,11 @@
     export let selection = 'sel';
     export let allowContinue = false;
 
-    let modal;
+    let modalData = {
+      title: '',
+      text: '',
+      modalContent: "<h2 class='text-lg leading-6 font-medium text-gray-900'>Reseller Required</h2><div class='mt-2 px-7 py-3'><p class='text-sm text-gray-500'>Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.</p></div><div class='items-center px-4 py-3'><a href='https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#r{resellerIndex+1}' id='ok-btn' class='px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'>Reseller Contact Information</a></div>"
+    };
     let resellerIndex = -1;
     let resellerArray = [
         ["BE", "NL", "LU"],
@@ -136,21 +140,4 @@
     <option value="VN">Viet Nam</option>
 </select>
 
-<Modal bind:this={modal}>
-    <div class="mt-3 text-center">
-      <h2 class="text-lg leading-6 font-medium text-gray-900">Reseller Required</h2>
-      <div class="mt-2 px-7 py-3">
-        <p class="text-sm text-gray-500">
-          Thunderhead cannot sell to you directly, you must use the authorized reseller for your region.
-        </p>
-      </div>
-      <div class="items-center px-4 py-3">
-        <a href="https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#r{resellerIndex+1}"
-          id="ok-btn"
-          class="px-4 py-2 bg-teci-blue-light text-white text-base font-medium w-full shadow-sm hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          Reseller Contact Information
-        </a>
-      </div>
-    </div>
-</Modal>
+<Modal bind:data={modalData} />

package/components/Figure.svelte

@@ -4,9 +4,11 @@
   export let caption;
 </script>
 
-<section class="flex justify-center not-prose">
+<section class="flex justify-center not-prose mb-8">
   <figure class="bg-white w-auto mx-auto shadow-lg border border-slate-100 p-2">
-    <img class="w-full" src={image} alt={title} title={title}>
+    <a href={image}>
+      <img class="w-full" src={image} alt={title} title={title}>
+    </a>
     {#if caption}
       <figcaption class="text-center p-2">{@html caption}</figcaption>
     {/if}

package/components/HeadingCentered.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeadingCenteredProps */
+/** @typedef {typeof __propDef.events}  HeadingCenteredEvents */
+/** @typedef {typeof __propDef.slots}  HeadingCenteredSlots */
+export default class HeadingCentered extends SvelteComponentTyped<{
+    data?: {
+        toptext: string;
+        title: string;
+        subtitle: string;
+    };
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeadingCenteredProps = typeof __propDef.props;
+export type HeadingCenteredEvents = typeof __propDef.events;
+export type HeadingCenteredSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            toptext: string;
+            title: string;
+            subtitle: string;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/MediaFeature.svelte

@@ -1,12 +1,13 @@
 <script>
-  import YT from "./YT.svelte"
+import Video from './Video.svelte'
+
   export let data;
 </script>
 
 <section class="w-full mx-auto flex flex-col md:flex-row items-center justify-center">
-  {#if data.video}
+  {#if data.v}
   <div class="w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
-    <YT v={data.video} />
+    <Video bind:data />
   </div>
   {:else if data.image}
   <div class="block w-full max-w-xl mb-4 md:mb-0">

package/components/Modal.svelte

@@ -1,31 +1,45 @@
 <script>
-    let shown = false;
-    export function show() {
-      shown = true;
-    }
-    export function hide() {
-      shown = false;
-    }
-  </script>
+  export let data;
+  let shown = false;
+
+  function show() {
+    shown = true;
+  }
+  function hide() {
+    shown = false;
+  }
+</script>
     
-  <svelte:window
-    on:keydown={e => {
-      if (e.keyCode == 27) {
-        hide();
-      }
-    }} />
-  
-  {#if shown}
-    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
-      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
-        <button type="button" on:click={hide} class="absolute top-0 right-0 bg-white p-1 mr-2 mt-2 inline-flex items-center justify-center text-teci-blue-light hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark">
-            <span class="sr-only">Close menu</span>
-            <!-- Heroicon name: outline/x -->
-            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-        </button>
-        <slot />
+<svelte:window
+  on:keydown={e => {
+    if (e.keyCode == 27) {
+      hide();
+    }
+  }} />
+
+<div class="prose max-w-none">
+  {#if data.title}
+  <h2>{data.title}</h2>
+  {/if}
+  {#if data.text}
+  <p>{data.text}</p>
+  {/if}
+  <button on:click={show} class="btn">{data.buttonText}</button>
+</div>
+
+{#if shown}
+  <div class="z-50 fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full !mt-0">
+    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
+      <button type="button" on:click={hide} class="absolute top-0 right-0 bg-white p-1 mr-2 mt-2 inline-flex items-center justify-center text-teci-blue-light hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark">
+          <span class="sr-only">Close menu</span>
+          <!-- Heroicon name: outline/x -->
+          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+      </button>
+      <div class="mt-3 text-center">
+        {@html data.modalContent}
       </div>
     </div>
-  {/if}
+  </div>
+{/if}

package/components/Modal.svelte.d.ts

@@ -2,15 +2,10 @@
 /** @typedef {typeof __propDef.events}  ModalEvents */
 /** @typedef {typeof __propDef.slots}  ModalSlots */
 export default class Modal extends SvelteComponentTyped<{
-    show?: () => void;
-    hide?: () => void;
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-    get show(): () => void;
-    get hide(): () => void;
+}, {}> {
 }
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;
@@ -18,14 +13,11 @@ export type ModalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        show?: () => void;
-        hide?: () => void;
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export {};

package/components/NewsGrid.svelte

@@ -1,59 +1,35 @@
 <script>
+  import { DateTime } from "luxon";
+  import { getContext } from 'svelte';
+
   export let data;
-  export let posts;
+  const posts = getContext('newsPosts');
 </script>
 
 <div class="relative mx-auto w-full divide-y-2 divide-gray-200">
-  <div>
-    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-      {data.title}
-    </h2>
-    <div class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:items-center lg:gap-5">
+  <div class="flex flex-col sm:flex-row justify-between sm:items-end space-y-4 sm:space-y-0">
+    <div>
+      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{data.title}</h1>
       <p class="text-xl text-gray-500">{data.subtitle}</p>
-      <form class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
-        <div>
-          <label for="email-address" class="sr-only">Email address</label>
-          <input
-            id="email-address"
-            name="email-address"
-            type="email"
-            autocomplete="email"
-            required
-            class="w-full appearance-none border-b-2 border-b-gray-800 bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 focus:border-teci-blue-light focus:outline-none focus:ring-teci-blue-light lg:max-w-xs"
-            placeholder="Enter your email"
-          />
-        </div>
-        <div
-          class="mt-2 flex w-full flex-shrink-0 shadow-sm sm:mt-0 sm:ml-3 sm:inline-flex sm:w-auto"
-        >
-          <button type="button" class="btn">Subscribe</button>
-        </div>
-      </form>
+    </div>
+    <div class="w-32">
+      <button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium text-white hover:bg-teci-blue-dark bg-teci-blue-light focus:outline-none focus:border-teci-blue-dark transition duration-150 ease-in-out" 
+        data-token="1cb5a0d7baa67f6265665b6f911f3487" onclick="mjOpenPopin(event, this)"
+      >
+        Subscribe
+      </button>
     </div>
   </div>
-  <div class="mt-6 grid gap-16 pt-10 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
+  <div class="mt-6 grid gap-16 pt-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
     {#each posts as post}
-      <div>
-        <p class="text-sm text-gray-500">
-          <time datetime={post.meta.date}>{post.meta.date}</time>
-        </p>
-        <a href={post.path} class="mt-2 block">
-          <p class="text-xl font-semibold text-gray-900">
-            {post.meta.title}
-          </p>
-          <p class="mt-3 text-base text-gray-500">
-            {post.meta.summary}
-          </p>
-        </a>
-        <div class="mt-3">
-          <a
-            href={post.path}
-            class="text-base font-semibold text-teci-blue-light hover:text-teci-blue-dark"
-          >
-            Read full story
-          </a>
-        </div>
+    <a class="block h-full" href={post.path}>
+      <div class="flex flex-col items-stretch h-full">    
+        <time class="block mb-1 text-sm text-gray-500" datetime={post.meta.date}>{DateTime.fromISO(post.meta.date).toLocaleString()}</time>
+        <p class="mb-2 text-xl font-semibold text-gray-900">{post.meta.title}</p>
+        <p class="flex-1 mb-2 text-base text-gray-500">{post.meta.summary}</p>
+        <p class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark">Read full article<span aria-hidden="true">&nbsp;→</span></p> 
       </div>
+    </a>
     {/each}
   </div>
 </div>

package/components/NewsGrid.svelte.d.ts

@@ -3,7 +3,6 @@
 /** @typedef {typeof __propDef.slots}  NewsGridSlots */
 export default class NewsGrid extends SvelteComponentTyped<{
     data: any;
-    posts: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,7 +14,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         data: any;
-        posts: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/SidebarContent.svelte

@@ -1,8 +1,15 @@
 <script>
   import { onMount } from "svelte";
+  import { buildToC } from "../utils.js";
+  import { DateTime } from "luxon";
 
   export let data;
+  export let title;
+  export let date;
+  export let lastmod;
 
+  let formattedDate = (date != undefined ? DateTime.fromISO(date).toLocaleString() : undefined)
+  let formattedLastModDate = (lastmod != undefined ? DateTime.fromISO(lastmod).toLocaleString() : undefined)  
   let tocOpen = false;
   let tocBuilt = false;
   let w;
@@ -14,73 +21,15 @@
       tocBuilt = buildToC();
     };
   });
-
-  function buildToC() {
-    // Based on https://projectcodeed.blogspot.com/2020/04/an-automatic-table-of-contents.html
-    
-    // Get ToC div
-    let toc = document.getElementById("ToC");
-    
-    //Add a header
-    var tocHeader = document.createElement("a");
-    tocHeader.classList.add("mb-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
-    tocHeader.innerHTML = "<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_top</span>";
-    tocHeader.setAttribute("href","#top");
-    tocHeader.setAttribute("title","To Top of Page");
-    toc.appendChild(tocHeader);
-  
-    // Create a list for the ToC entries
-    let tocList = document.createElement("ul");
-  
-    // Find the primary content section
-    let content = document.getElementById("content")
-
-    // Get the h2 tags - ToC entries
-    let headers = content.getElementsByTagName("h2");
-
-    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
-      
-        // list item for the entry
-        let tocListItem = document.createElement("li");
-        tocListItem.classList.add("text-teci-blue-light", "hover:text-teci-blue-dark", "text-sm", "truncate"); 
-
-        // link for the h2
-        let tocEntry = document.createElement("a");
-        tocEntry.setAttribute("href","#"+name);
-        tocEntry.innerText=headers[i].innerText;
-
-        // add link to list item list
-        tocListItem.appendChild(tocEntry);
-
-        // add list item to list
-        tocList.appendChild(tocListItem);
-      }
-      
-      // add list to toc element
-      toc.appendChild(tocList);
-
-      //Add a footer
-      //var tocFooter = document.createElement("a");
-      //tocFooter.classList.add("mt-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
-      //tocFooter.innerHTML="<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_bottom</span>";
-      //tocFooter.setAttribute("href","#bottom");
-      //tocFooter.setAttribute("title","To Bottom of Page");
-      //toc.appendChild(tocFooter);
-
-      return true;
-    }
-  }
 </script>
 
-<section bind:clientWidth={w} class="relative mx-auto flex flex-row {(data.toc || data.rightRail) ? 'md:space-x-8' : 'space-x-0'}">
+<section bind:clientWidth={w} class="relative flex flex-row { data.fullWidth ? 'mx-0' : 'mx-auto'} {(data.toc || data.rightRail) ? 'md:space-x-8' : 'space-x-0'}">
+
   <div id="content" class="prose w-full { data.fullWidth ? 'max-w-none' : 'max-w-prose'}">
+    <h1>{title}</h1>
+    {#if formattedDate}
+    <p>Published: {formattedDate}{#if (formattedLastModDate != formattedDate && formattedLastModDate)}, Updated: {formattedLastModDate}{/if}</p>
+    {/if}
     <slot />
   </div>
   <aside class="relative w-0 {(data.toc || data.rightRail) ? 'md:w-60' : 'hidden'}">
@@ -88,7 +37,7 @@
       <div class="sticky top-8 shrink-0 flex flex-col">
         <button on:click={() => {tocOpen = !tocOpen;}} 
           class="md:hidden absolute -left-10 w-10 h-10 flex items-center justify-center border border-teci-blue-light text-teci-blue-light bg-white
-          {tocOpen ? 'border-opacity-100 bg-opacity-100 text-opacity-100' : 'border-opacity-20 bg-opacity-20 text-opacity-20'}"
+          {tocOpen ? 'border-opacity-100 bg-opacity-100 text-opacity-100' : 'border-opacity-60 bg-opacity-20 text-opacity-60 hover:border-opacity-100 hover:bg-opacity-100 hover:text-opacity-100'}"
           title="Table of Contents Toggle" alt="Table of Contents Toggle"
         >
           <span class="material-icons-outlined">menu_open</span>

package/components/SidebarContent.svelte.d.ts

@@ -3,6 +3,9 @@
 /** @typedef {typeof __propDef.slots}  SidebarContentSlots */
 export default class SidebarContent extends SvelteComponentTyped<{
     data: any;
+    title: any;
+    date: any;
+    lastmod: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,6 +19,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         data: any;
+        title: any;
+        date: any;
+        lastmod: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ThreeColumn.svelte

@@ -1,76 +1,19 @@
 <script>
-	//Based on:
-	//https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
-	//https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
-  //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
-
-	import Icon from './Icon.svelte';
-
-	export let title = 'A better way to do things.';
-
-	export let data = [
-		{
-			icon: 'pyrosim',
-      classes: 'h-12 w-12',
-			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/09/company_pyrosim.jpg',
-			heading: 'Product 1',
-			subheading: 'Nutshell',
-			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
-			linkURL: '/product'
-		},
-		{
-			icon: '',
-      classes: '',
-			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_pathfinder.png',
-			heading: 'Product 2',
-			subheading: 'No Icon',
-			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis quam ultrices, vestibulum lacus nec, interdum est. Ut.',
-			linkURL: '/product'
-		},
-		{
-			icon: 'icon-auto_stories',
-			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
-      classes: 'inline-block bg-teci-blue-dark text-white text-4xl text-center align-bottom h-12 w-12 pt-1 px-1',
-			heading: 'Google Icon, No Subtitle or Text',
-			subheading: '',
-			text: '',
-			linkURL: '/product'
-		}
-	];
+  //Based on:
+  //https://tailwindui.com/components/marketing/sections/feature-sections#component-c683653471044e6ffc32739e199dfbf2
+  //https://tailwindui.com/components/marketing/sections/team-sections#component-0efa5ebc92e2aa72bc2332fcf5578869
+  import Card from './Card.svelte';
+  export let data;
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<div class="w-full mx-auto">
-	<h2 class="sr-only">{title}</h2>
-	<dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 lg:grid-cols-3">
-		{#each data as col}
-			<div>
-				<a href={col.linkURL}>
-					<div class="space-y-4">
-            {#if col.image}
-						<div class="w-full aspect-square bg-slate-100">
-							<img class="w-full aspect-square object-cover shadow-md border border-gray-200" src={col.image} alt="" />
-						</div>
-            {/if}
-						<div class="flex flex-row items-start space-x-4">
-              {#if col.icon}
-              <Icon classes={col.classes} icon={col.icon} />
-              {/if}
-							<div class="leading-none font-medium flex flex-col">
-								<h3 class="text-2xl leading-none">{col.heading}</h3>
-                {#if col.subheading}
-								<p class="text-teci-blue-dark leading-6">{col.subheading}</p>
-                {/if}
-							</div>
-						</div>
-            {#if col.text}
-            <div class="text-lg">
-							<p class="text-gray-500">{col.text}</p>
-						</div>
-            {/if}
-					</div>
-				</a>
-			</div>
-		{/each}
-	</dl>
+<div class="mx-auto w-full">
+  {#if data.title}
+    <h2 class="sr-only">{data.title}</h2>
+  {/if}
+  <dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 md:grid-cols-3">
+    {#each data.cards as card}
+      <Card bind:data={card} bind:halfHeight={data.halfHeight} />
+    {/each}
+  </dl>
 </div>

package/components/ThreeColumn.svelte.d.ts

@@ -2,16 +2,7 @@
 /** @typedef {typeof __propDef.events}  ThreeColumnEvents */
 /** @typedef {typeof __propDef.slots}  ThreeColumnSlots */
 export default class ThreeColumn extends SvelteComponentTyped<{
-    data?: {
-        icon: string;
-        classes: string;
-        image: string;
-        heading: string;
-        subheading: string;
-        text: string;
-        linkURL: string;
-    }[];
-    title?: string;
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,16 +13,7 @@ export type ThreeColumnSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        data?: {
-            icon: string;
-            classes: string;
-            image: string;
-            heading: string;
-            subheading: string;
-            text: string;
-            linkURL: string;
-        }[];
-        title?: string;
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Video.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let data = {};
+  export let v = '';
+  let id;
+  
+  if (v) {
+    id = v;
+  } 
+	else if (data) {
+		id = data.v;
+	}
+	else {
+		id = '';
+	}
+</script>
+
+<section class="w-full aspect-video border bg-black border-gray-200 shadow-md">
+  <iframe 
+    src="https://www.youtube.com/embed/{id}" 
+    title="YouTube Video ID {id}"
+    class="w-full aspect-video"
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen>
+  </iframe>
+</section>

package/components/Video.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  VideoProps */
+/** @typedef {typeof __propDef.events}  VideoEvents */
+/** @typedef {typeof __propDef.slots}  VideoSlots */
+export default class Video extends SvelteComponentTyped<{
+    data?: {};
+    v?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type VideoProps = typeof __propDef.props;
+export type VideoEvents = typeof __propDef.events;
+export type VideoSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+        v?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/layouts/blocks.svelte

@@ -1,41 +1,45 @@
 <script>
-    import SectionHeaderCentered from '../components/SectionHeaderCentered.svelte';
-    import ThreeColumn from '../components/ThreeColumn.svelte';
-    import NewsGrid from '../components/NewsGrid.svelte';
-    import YT from '../components/YT.svelte';
-    import CTA from '../components/CTA.svelte';
-    import SidebarContent from '../components/SidebarContent.svelte';
-    import MediaFeature from '../components/MediaFeature.svelte';
+  import CTA from '../components/CTA.svelte';
+  import HeadingCentered from '../components/HeadingCentered.svelte';
+  import MediaFeature from '../components/MediaFeature.svelte';
+  import Modal from '../components/Modal.svelte';
+  import NewsGrid from '../components/NewsGrid.svelte';
+  import SidebarContent from '../components/SidebarContent.svelte';
+  import ThreeColumn from '../components/ThreeColumn.svelte';
+  import TrialForm from '../components/TrialForm.svelte';
+  import Video from '../components/Video.svelte';
+  
+  let blocks = [
+    {ref: "cta-center", component: CTA},
+    {ref: "heading-centered", component: HeadingCentered},
+    {ref: "media-feature", component: MediaFeature},
+    {ref: "modal", component: Modal},
+    {ref: "news-grid", component: NewsGrid},
+    {ref: "sidebar-content", component: SidebarContent},
+    {ref: "three-column", component: ThreeColumn},
+    {ref: "trial-form", component: TrialForm},
+    {ref: "video", component: Video},
+  ]
 
-    export let title
-    export let page_sections
-    export let posts
+  export let title;
+  export let date;
+  export let lastmod;
+  export let summary;
+  export let layout;
+  export let page_sections;
 </script>
 
 <svelte:head>
   <title>{title} | Thunderhead Engineering</title>
+  <meta name="description" content={summary}>
 </svelte:head>
 
-<article class="flex flex-col space-y-12">
-{#each page_sections as section}
-  {#if section.fieldGroup == "heading-centered"}
-    <SectionHeaderCentered bind:data={section} />
-  {:else if section.fieldGroup == "three-column"}
-    <ThreeColumn bind:data={section.cards} />
-  {:else if section.fieldGroup == "news-grid"}
-    <NewsGrid bind:data={section} bind:posts={posts} />
-  {:else if section.fieldGroup == "video"}
-    <YT bind:v={section.v} />
-  {:else if section.fieldGroup == "cta-center"}
-    <CTA bind:data={section} />
-  {:else if section.fieldGroup == "sidebar-content"}
-    <SidebarContent bind:data={section}>
-      <slot/>
-    </SidebarContent>
-  {:else if section.fieldGroup == "media-feature"}
-    <MediaFeature bind:data={section} />
-  {:else if section.fieldGroup == "content"}
-    <div class="content prose"><slot/></div>
-  {/if}
-{/each}
+<article class="flex flex-col space-y-12 {layout}">
+  {#each page_sections as section}
+    {#if (section) && (section.fieldGroup === "sidebar-content")}
+      <svelte:component this={blocks.find(obj=>obj.ref===section.fieldGroup).component} bind:data={section} {title} {date} {lastmod}><slot/></svelte:component>
+    {:else if (section) && (section.fieldGroup != "sidebar-content")}
+      <svelte:component this={blocks.find(obj=>obj.ref===section.fieldGroup).component} bind:data={section} />
+    {/if}
+  {/each}
 </article>

package/layouts/blocks.svelte.d.ts

@@ -3,8 +3,11 @@
 /** @typedef {typeof __propDef.slots}  BlocksSlots */
 export default class Blocks extends SvelteComponentTyped<{
     title: any;
+    date: any;
+    lastmod: any;
+    summary: any;
+    layout: any;
     page_sections: any;
-    posts: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,8 +21,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title: any;
+        date: any;
+        lastmod: any;
+        summary: any;
+        layout: any;
         page_sections: any;
-        posts: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
@@ -9,39 +9,41 @@
     "@sveltejs/kit": "next",
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.2",
-    "@types/cookie": "^0.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "autoprefixer": "^10.4.2",
+    "@types/cookie": "^0.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
+    "autoprefixer": "^10.4.4",
     "dotenv": "^16.0.0",
     "encoding": "^0.1.13",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.4.0",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^3.4.1",
+    "luxon": "^2.3.1",
     "mdsvex": "^0.10.5",
-    "postcss": "^8.4.6",
-    "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.7",
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.9",
     "rehype-parse": "^8.0.4",
     "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "stream": "^0.0.2",
-    "svelte": "^3.46.4",
-    "svelte-check": "^2.4.3",
+    "svelte": "^3.47.0",
+    "svelte-check": "^2.7.0",
     "svelte-cubed": "^0.2.1",
-    "svelte-preprocess": "^4.10.4",
-    "svelte2tsx": "^0.5.3",
-    "tailwindcss": "^3.0.23",
-    "three": "^0.137.5",
+    "svelte-preprocess": "^4.10.6",
+    "svelte2tsx": "^0.5.9",
+    "tailwindcss": "^3.0.24",
+    "three": "^0.139.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5",
-    "vite": "^2.8.3"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5",
+    "vite-plugin-autoimport": "^1.6.3"
   },
   "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
-    "cookie": "^0.4.2",
-    "katex": "^0.15.2"
+    "cookie": "^0.5.0",
+    "katex": "^0.15.3"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -49,22 +51,22 @@
     "./components/Banner.svelte": "./components/Banner.svelte",
     "./components/Button.svelte": "./components/Button.svelte",
     "./components/CTA.svelte": "./components/CTA.svelte",
+    "./components/Card.svelte": "./components/Card.svelte",
     "./components/CountrySelector.svelte": "./components/CountrySelector.svelte",
     "./components/Figure.svelte": "./components/Figure.svelte",
     "./components/Footer.svelte": "./components/Footer.svelte",
     "./components/Header.svelte": "./components/Header.svelte",
+    "./components/HeadingCentered.svelte": "./components/HeadingCentered.svelte",
     "./components/Icon.svelte": "./components/Icon.svelte",
     "./components/Math.svelte": "./components/Math.svelte",
     "./components/MediaFeature.svelte": "./components/MediaFeature.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
     "./components/NewsGrid.svelte": "./components/NewsGrid.svelte",
-    "./components/SectionHeaderCentered.svelte": "./components/SectionHeaderCentered.svelte",
     "./components/SidebarContent.svelte": "./components/SidebarContent.svelte",
     "./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
     "./components/TrialForm.svelte": "./components/TrialForm.svelte",
-    "./components/YT.svelte": "./components/YT.svelte",
+    "./components/Video.svelte": "./components/Video.svelte",
     "./layouts/blocks.svelte": "./layouts/blocks.svelte",
-    "./layouts/news.svelte": "./layouts/news.svelte",
     "./req_utils": "./req_utils.js",
     "./utils": "./utils.js",
     "./variables": "./variables.js"

package/utils.d.ts

@@ -1,3 +1,4 @@
 export function scrollTo(anchor: any): void;
 export function validateEmail(email: any): boolean;
+export function buildToC(): boolean;
 export function slugFromPath(path: any): any;

package/utils.js

@@ -9,4 +9,67 @@ export function validateEmail(email) {
     return re.test(String(email).toLowerCase());
 }
 
-export const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
+export const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
+
+export function buildToC() {
+  // Based on https://projectcodeed.blogspot.com/2020/04/an-automatic-table-of-contents.html
+  
+  // Get ToC div
+  let toc = document.getElementById("ToC");
+  
+  //Add a header
+  var tocHeader = document.createElement("a");
+  tocHeader.classList.add("mb-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
+  tocHeader.innerHTML = "<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_top</span>";
+  tocHeader.setAttribute("href","#top");
+  tocHeader.setAttribute("title","To Top of Page");
+  toc.appendChild(tocHeader);
+
+  // Create a list for the ToC entries
+  let tocList = document.createElement("ul");
+
+  // Find the primary content section
+  let content = document.getElementById("content")
+
+  // Get the h2 tags - ToC entries
+  let headers = content.getElementsByTagName("h2");
+
+  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
+    
+      // list item for the entry
+      let tocListItem = document.createElement("li");
+      tocListItem.classList.add("text-teci-blue-light", "hover:text-teci-blue-dark", "text-sm", "truncate"); 
+
+      // link for the h2
+      let tocEntry = document.createElement("a");
+      tocEntry.setAttribute("href","#"+name);
+      tocEntry.innerText=headers[i].innerText;
+
+      // add link to list item list
+      tocListItem.appendChild(tocEntry);
+
+      // add list item to list
+      tocList.appendChild(tocListItem);
+    }
+    
+    // add list to toc element
+    toc.appendChild(tocList);
+
+    //Add a footer
+    //var tocFooter = document.createElement("a");
+    //tocFooter.classList.add("mt-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
+    //tocFooter.innerHTML="<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_bottom</span>";
+    //tocFooter.setAttribute("href","#bottom");
+    //tocFooter.setAttribute("title","To Bottom of Page");
+    //toc.appendChild(tocFooter);
+
+    return true;
+  }
+}

package/components/SectionHeaderCentered.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  SectionHeaderCenteredProps */
-/** @typedef {typeof __propDef.events}  SectionHeaderCenteredEvents */
-/** @typedef {typeof __propDef.slots}  SectionHeaderCenteredSlots */
-export default class SectionHeaderCentered extends SvelteComponentTyped<{
-    data?: {
-        toptext: string;
-        title: string;
-        subtitle: string;
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SectionHeaderCenteredProps = typeof __propDef.props;
-export type SectionHeaderCenteredEvents = typeof __propDef.events;
-export type SectionHeaderCenteredSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {
-            toptext: string;
-            title: string;
-            subtitle: string;
-        };
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/components/YT.svelte

@@ -1,14 +0,0 @@
-<script>
-  export let v
-</script>
-
-<section class="w-full aspect-video border bg-black border-gray-200 shadow-md">
-  <iframe
-  src="https://www.youtube-nocookie.com/embed/{v}?rel=0&modestbranding=1"
-  title="YouTube Video ID {v}"
-  class="w-full aspect-video"
-  frameborder="0"
-  allow="accelerometer; clipboard-write; encrypted-media; gyroscope"
-  allowfullscreen
-/>
-</section>

package/components/YT.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  YtProps */
-/** @typedef {typeof __propDef.events}  YtEvents */
-/** @typedef {typeof __propDef.slots}  YtSlots */
-export default class Yt extends SvelteComponentTyped<{
-    v: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type YtProps = typeof __propDef.props;
-export type YtEvents = typeof __propDef.events;
-export type YtSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        v: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/layouts/news.svelte

@@ -1,14 +0,0 @@
-<script>
-    export let title;
-    export let date;
-</script>
-
-<svelte:head>
-  <title>{title} | Thunderhead Engineering</title>
-</svelte:head>
-
-<div class="prose lg:prose-lg">
-  <h1>{title}</h1>
-  <p>Published on {date}</p>
-  <slot/>
-</div>

package/layouts/news.svelte.d.ts

@@ -1,29 +0,0 @@
-/** @typedef {typeof __propDef.props}  NewsProps */
-/** @typedef {typeof __propDef.events}  NewsEvents */
-/** @typedef {typeof __propDef.slots}  NewsSlots */
-export default class News extends SvelteComponentTyped<{
-    title: any;
-    date: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type NewsProps = typeof __propDef.props;
-export type NewsEvents = typeof __propDef.events;
-export type NewsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title: any;
-        date: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};