tecitheme 0.0.15 → 0.0.18

package/README.md

@@ -5,3 +5,24 @@ SvelteKit Design System for Thunderhead web properties.
 NPM package available at: https://www.npmjs.com/package/tecitheme
 
 See https://tecitheme.netlify.app/ for demo, documentation and component details.
+
+## How to update the NPM package
+
+This theme system is released on NPM to make it easier to include in all Thunderhead web properties.
+### Authenticate to NPM
+
+1. `npm adduser`
+2. Enter username and password for the npm account.
+3. Enter email address
+3. Enter 2FA Code
+
+### Update the package version
+
+1. Edit package.json with the next version.
+2. Commit and push to origin.
+
+### Package the project and publish
+
+1. `npm run package`
+2. `cd package`
+3. `npm publish`

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-sm w-full max-w-xs">
+            <a href={link.linkURL} class="btn w-full inline-flex items-center px-5 py-3 text-base">{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,52 @@
+<script>
+  //Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
+	import Icon from './Icon.svelte';
+  import Wrap from './Wrap.svelte';
+  export let data;
+  export let halfHeight;
+</script>
+
+<Wrap tag='a' when={!data.links} href={data.cardURL}>
+<div class="group space-y-4 p-2 border border-gray-100 hover:border-gray-200 hover:shadow-md">
+  {#if data.image}
+  <div style="background-image: url({data.image});" class="w-full {halfHeight ? 'aspect-video' : 'aspect-square'} bg-cover bg-no-repeat border border-gray-200 flex items-center justify-center">
+    <div class="{halfHeight ? 'space-y-4' : 'space-y-8'} p-4 flex flex-col w-full h-full justify-center items-center">
+      {#if data.links}
+        {#each data.links as link}
+          <a href={link.linkURL} class="whitespace-nowrap text-sm btn w-3/4 text-center">{link.linkText}</a>
+        {/each}
+      {:else}
+        <span>&#8203;</span>
+      {/if}
+    </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 w-full">
+        <p class="text-gray-500">{data.text}</p>
+        <div class="w-full flex flex-col items-end">
+          <span class="inline-block max-w-sm text-center text-sm font-medium text-white mt-1 btn">{data.cardLinkText}</span>
+        </div>
+      </div>
+      {/if}
+    </a>
+  </div>
+</div>
+</Wrap>

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

@@ -6,7 +6,9 @@
 
 <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/Footer.svelte

@@ -48,7 +48,7 @@
                   </a>
                 </li>
                 <li>
-                  <a href="https://www.thunderheadeng.com/" class="text-base text-gray-300 hover:text-white">
+                  <a href="https://www.thunderheadeng.com/other" class="text-base text-gray-300 hover:text-white">
                     Other Tools
                   </a>
                 </li>

package/components/HeadingCentered.svelte

@@ -0,0 +1,31 @@
+<script>
+  //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
+  import Icon from "./Icon.svelte";
+  export let data;
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="w-full text-center">
+  {#if data.toptext}
+    <p class="text-base font-semibold text-teci-blue-dark uppercase">
+      {data.toptext}
+    </p>
+  {/if}
+  {#if (data.title || data.logo)}
+    {#if data.logo}
+      <div class="grid place-items-center">
+        <h1 class="sr-only">{data.title}</h1>
+        <Icon classes={data.classes} icon={data.logo} />
+      </div>
+    {:else}
+      <h1 class="mt-1 text-4xl font-bold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
+        {data.title}
+      </h1>
+    {/if}
+  {/if}
+  {#if data.subtitle}
+  <p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
+      {data.subtitle}
+  </p>
+  {/if}
+</div>

package/components/HeadingCentered.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeadingCenteredProps */
+/** @typedef {typeof __propDef.events}  HeadingCenteredEvents */
+/** @typedef {typeof __propDef.slots}  HeadingCenteredSlots */
+export default class HeadingCentered extends SvelteComponentTyped<{
+    data: any;
+}, {
+    [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: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Icon.svelte

@@ -22,6 +22,15 @@
     title="PyroSim Results Icon"
   />
 </span>
+{:else if icon == 'pyrosim-logo'}
+<span class="not-prose">
+  <img
+    class={classes}
+    src="https://files.thunderheadeng.com/www/images/pyrosim_logo.svg"
+    alt="PyroSim Logo"
+    title="PyroSim Logo"
+  />
+</span>
 {:else if icon == 'pathfinder'}
 <span class="not-prose">
   <img
@@ -40,6 +49,15 @@
     title="Pathfinder Results Icon"
   />
 </span>
+{:else if icon == 'pathfinder-logo'}
+<span class="not-prose">
+  <img
+    class={classes}
+    src="https://files.thunderheadeng.com/www/images/pathfinder_logo.svg"
+    alt="Pathfinder Logo"
+    title="Pathfinder Logo"
+  />
+</span>
 {:else if icon == 'petrasim'}
 <span class="not-prose">
 	<img
@@ -49,6 +67,44 @@
     title="PetraSim Icon"
 	/>
 </span>
+{:else if icon == 'petrasim-logo'}
+<span class="not-prose">
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/petrasim_logo.svg"
+		alt="PetraSim Logo"
+    title="PetraSim Logo"
+	/>
+</span>
+{:else if icon == 'teci-logo'}
+<span class="not-prose">
+	<img
+		class={classes}
+		src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
+		alt="Thunderhead Logo"
+    title="Thunderhead Logo"
+	/>
+</span>
+{:else if icon == 'teci-icon'}
+<span class="not-prose">
+	<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
+		<path
+			style="fill:#0c3879;fill-rule:evenodd;stroke:none"
+			d="M88.113 220.536h97.672v97.672H88.113z"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+		<path
+			style="fill:#fff;fill-rule:evenodd;stroke:none"
+			d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
+			transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
+		/>
+	</svg>
+</span>
 {:else if icon?.startsWith("icon-")}
 <span class="material-icons-outlined {classes}">{icon?.slice(5)}</span>
 {:else}

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="z-50 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,60 +1,73 @@
 <script>
   import { DateTime } from "luxon";
+  import { getContext } from 'svelte';
+  import { paginate, LightPaginationNav } from 'svelte-paginate'
+
   export let data;
-  export let posts;
+
+  const posts = getContext('newsPosts');
+  let filteredPosts = [];
+  let items = [];
+  let currentPage = 1;
+  let pageSize = data.pageSize;
+
+  function termExists(arr, terms) {
+    return terms.some(value => {
+      return arr.includes(value)
+    });
+  }
+
+  function filterPosts(arr, terms) {
+    for (let i = 0; i < arr.length;) {
+      if (termExists(arr[i].meta.categories, terms)) {
+        i++;
+        continue
+      };
+      arr.splice(i,1)
+    };
+    return arr;
+  };
+
+  if (data.filter) {
+    items = filterPosts(posts, data.filter);
+  } else {
+    items = posts;
+  }
+
+  $: paginatedItems = paginate({ items, pageSize, currentPage })
 </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="relative mx-auto w-full">
+  <div class="flex flex-col sm:flex-row justify-between sm:items-end space-y-4 sm:space-y-0 pb-4 border-b-2 border-gray-200">
+    <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">
+      <data id="mj-w-res-data" data-token="f594659941689957f270ca278a80dc7d" class="mj-w-data" data-apikey="3aOX" data-w-id="Fbu" data-lang="en_US" data-base="https://app.mailjet.com" data-width="640" data-height="480" data-statics="statics"></data>
+      <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="f594659941689957f270ca278a80dc7d" 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">
-    {#each posts as post}
-      <div>
-        <p class="text-sm text-gray-500">
-          <time datetime={post.meta.date}>{DateTime.fromISO(post.meta.date).toLocaleString()}</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>
+  <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 paginatedItems as post}
+    <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.length > 190 ? post.meta.summary.substring(0,190) + " ..." : 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>
+  <div class="pt-8 w-auto max-w-sm mx-auto">
+    <LightPaginationNav
+      totalItems="{items.length}"
+      pageSize="{pageSize ? pageSize : 6}"
+      currentPage="{currentPage}"
+      limit="{1}"
+      showStepOptions="{true}"
+      on:setPage="{(e) => currentPage = e.detail.page}"
+    />
+  </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

@@ -27,7 +27,9 @@
 
   <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'}">
@@ -35,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/ThreeColumn.svelte

@@ -1,78 +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: 'bg-teci-blue-dark text-white text-4xl grid place-items-center h-12 w-12',
-			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}
-              <div class="grid place-items-center">
-                <Icon classes={col.classes} icon={col.icon} />
-              </div>
-              {/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/TrialForm.svelte

@@ -1,4 +1,4 @@
-<script >import CountrySelector from './CountrySelector.svelte';
+<script>import CountrySelector from './CountrySelector.svelte';
 import Icon from './Icon.svelte';
 import { onMount } from 'svelte';
 import { scrollTo, validateEmail } from '../utils.js';
@@ -242,7 +242,7 @@ const submitForm = async () => {
 	</div>
 </div>
 
-<style >
+<style>
 	.confident {
 		@apply hidden;
 	}

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/components/Wrap.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let tag = 'div';
+	export let when = true;
+</script>
+
+{#if when}
+<svelte:element this={tag} {...$$restProps}>
+	<slot/>
+</svelte:element>
+{:else}
+	<slot/>
+{/if}

package/components/Wrap.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  WrapProps */
+/** @typedef {typeof __propDef.events}  WrapEvents */
+/** @typedef {typeof __propDef.slots}  WrapSlots */
+export default class Wrap extends SvelteComponentTyped<{
+    [x: string]: any;
+    tag?: string;
+    when?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type WrapProps = typeof __propDef.props;
+export type WrapEvents = typeof __propDef.events;
+export type WrapSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tag?: string;
+        when?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/layouts/blocks.svelte

@@ -1,19 +1,32 @@
 <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 TrialForm from '../components/TrialForm.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 date
-    export let lastmod
-    export let page_sections
-    export let posts
-    export let summary
+  export let title;
+  export let date;
+  export let lastmod;
+  export let summary;
+  export let layout;
+  export let page_sections;
 </script>
 
 <svelte:head>
@@ -21,28 +34,12 @@
   <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} {title} {date} {lastmod} {summary}>
-      <slot/>
-    </SidebarContent>
-  {:else if section.fieldGroup == "media-feature"}
-    <MediaFeature bind:data={section} />
-  {:else if section.fieldGroup == "trial"}
-    <TrialForm />
-  {: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} 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} data={section} />
+    {/if}
+  {/each}
 </article>

package/layouts/blocks.svelte.d.ts

@@ -5,9 +5,9 @@ export default class Blocks extends SvelteComponentTyped<{
     title: any;
     date: any;
     lastmod: any;
-    page_sections: any;
-    posts: any;
     summary: any;
+    layout: any;
+    page_sections: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,9 +23,9 @@ declare const __propDef: {
         title: any;
         date: any;
         lastmod: any;
-        page_sections: any;
-        posts: any;
         summary: any;
+        layout: any;
+        page_sections: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,49 +1,50 @@
 {
   "name": "tecitheme",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
-    "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/forms": "^0.5.1",
     "@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.1",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "autoprefixer": "^10.4.7",
     "dotenv": "^16.0.0",
     "encoding": "^0.1.13",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.4.0",
-    "luxon": "^2.3.1",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^3.4.1",
+    "luxon": "^2.3.2",
     "mdsvex": "^0.10.5",
-    "postcss": "^8.4.6",
-    "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.7",
+    "postcss": "^8.4.13",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.10",
     "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.48.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",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.5",
-    "vite": "^2.8.3",
-    "vite-plugin-autoimport": "^1.4.3"
+    "svelte-paginate": "^0.0.1",
+    "svelte-preprocess": "^4.10.6",
+    "svelte2tsx": "^0.5.9",
+    "tailwindcss": "^3.0.24",
+    "three": "^0.140.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8",
+    "vite-plugin-autoimport": "^1.6.6"
   },
   "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",
@@ -51,20 +52,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",
+    "./components/Wrap.svelte": "./components/Wrap.svelte",
     "./layouts/blocks.svelte": "./layouts/blocks.svelte",
     "./req_utils": "./req_utils.js",
     "./utils": "./utils.js",

package/components/SectionHeaderCentered.svelte

@@ -1,26 +0,0 @@
-<script>
-  //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
-
-  export let data = {
-    toptext: 'Small Top Text ',
-    title: 'Big Title Text',
-    subtitle: 'Subtitle Text - Fairly long to see where the text wraps for this element, because who knows where things will end up.'
-  };
-</script>
-
-<!-- This example requires Tailwind CSS v2.0+ -->
-<div class="w-full text-center">
-  {#if data.toptext}
-      <h2 class="text-base font-semibold text-teci-blue-dark tracking-wide uppercase">
-      {data.toptext}
-      </h2>
-  {/if}
-  <p class="mt-1 text-4xl font-bold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
-      {data.title}
-  </p>
-  {#if data.subtitle}
-  <p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
-      {data.subtitle}
-  </p>
-  {/if}
-</div>

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 {};