tecitheme 0.4.5 → 0.4.7

package/dist/components/Banner.svelte

@@ -15,7 +15,7 @@
 
 {#if bannerOpen}
   <!-- This example requires Tailwind CSS v2.0+ -->
-  <div class="bg-teci-blue-light">
+  <div id="top-banner" class="bg-teci-blue-light">
     <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
       <div class="flex flex-wrap justify-between">
         <div class="order-1 flex h-10 w-0 flex-1 items-center">

package/dist/components/CTA.svelte

@@ -1,9 +1,14 @@
 <script>
   export let data;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<section class="mx-auto mb-12 px-4 text-center sm:px-6 lg:px-8">
+<section {id} class="mx-auto mb-12 px-4 text-center sm:px-6 lg:px-8">
   {#if data.title}
     <h2
       class="{data.subtitle

package/dist/components/CTABranded.svelte

@@ -1,8 +1,13 @@
 <script>
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
+<section {id} class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}">
   <div class="mx-auto max-w-4xl py-10 px-6 text-center sm:py-10 lg:px-8">
     <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
       <span class="block">{@html data.heading}</span>

package/dist/components/CTASplitImage.svelte

@@ -1,8 +1,13 @@
 <script>
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<div class="relative {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
+<section {id} class="relative {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}">
   <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
     <img class="h-full w-full object-cover" src="https://teci-files.imgix.net/www/images/{data.image}?w=608&fit=clip&auto=compress&auto=format" alt="Image for {data.preheading}">
   </div>
@@ -24,4 +29,4 @@
       </div>
     </div>
   </div>
-</div>
+</section>

package/dist/components/Card.svelte

@@ -1,7 +1,6 @@
 <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;
 

package/dist/components/ContentTwoColumns.svelte

@@ -1,11 +1,16 @@
 <script>
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<div class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
+<section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
   <div class="relative z-10 mb-8 md:mb-2">
     <div class="max-w-prose text-base lg:max-w-none">
-      <h2 class="font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}">{data.preheading}</h2>
+      <h2 class="font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}">{data.preheading}</h2>
       <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">{data.heading}</p>
     </div>
   </div>
@@ -34,7 +39,7 @@
       <div class="mt-8 flex gap-x-4 float-right py-1">
         {#each data.ctas as cta}
           <a href={cta.url} class="inline-block px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-          {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white")))}
+          {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
           ">
             {cta.text}
             <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
@@ -44,4 +49,4 @@
       {/if}
     </div>
   </div>
-</div>
+</section>

package/dist/components/FeatureGrid.svelte

@@ -2,13 +2,18 @@
 import Icon from './Icon.svelte'
 
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<section>
+<section {id} class="overflow-hidden mx-auto max-w-max lg:max-w-7xl">
   <div class="sm:text-center">
     {#if data.preheading}
     <p class="mb-2 text-lg font-semibold leading-8 
-      {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}
+      {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}
     ">
         {data.preheading}
     </p>
@@ -27,7 +32,7 @@ import Icon from './Icon.svelte'
       {#each data.blocks as block}
         <div class="relative flex flex-row gap-6">
           <div class="hidden sm:flex h-12 w-12 items-center justify-center text-white sm:shrink-0 flex-shrink-0 
-          {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}
+          {(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}
           ">
             <Icon classes="w-auto" icon={block.icon} />
           </div>

package/dist/components/Figure.svelte

@@ -6,6 +6,11 @@
 
   let figureImage;
   let figureLink;
+  let id
+
+  if (title) {
+    id = encodeURIComponent(title).toLowerCase()
+  }
 
   if (image.startsWith("http")) {
     figureImage = image;
@@ -22,16 +27,16 @@
 </script>
 
 {#if image}
-  <section class="not-prose mb-8 flex justify-center">
-    <figure
-      class="mx-auto w-auto border border-slate-100 bg-white p-2 shadow-lg"
-    >
-      <a class="inline-block w-full bg-slate-200 p-1" href={figureLink}>
-        <img class="mx-auto w-auto" src={figureImage} alt={title} {title} />
-      </a>
-      {#if caption}
-        <figcaption class="p-2 text-center">{@html caption}</figcaption>
-      {/if}
-    </figure>
-  </section>
+<section {id} class="not-prose mb-8 flex justify-center">
+  <figure
+    class="mx-auto w-auto border border-slate-100 bg-white p-2 shadow-lg"
+  >
+    <a class="inline-block w-full bg-slate-200 p-1" href={figureLink}>
+      <img class="mx-auto w-auto" src={figureImage} alt={title} {title} />
+    </a>
+    {#if caption}
+      <figcaption class="p-2 text-center">{@html caption}</figcaption>
+    {/if}
+  </figure>
+</section>
 {/if}

package/dist/components/Header.svelte

@@ -31,7 +31,7 @@
 
 <svelte:window on:keyup={handleEscape} />
 
-<header class="relative bg-white">
+<header id="menu" class="relative bg-white">
   <div
     aria-hidden="true"
     class="pointer-events-none absolute inset-0 z-30 shadow"

package/dist/components/HeadingCentered.svelte

@@ -2,10 +2,15 @@
   //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
   import Icon from "./Icon.svelte";
   export let data;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<section class="w-full text-center">
+<section {id} class="w-full text-center">
   {#if data.toptext}
     <p class="text-base font-semibold uppercase text-teci-blue-dark">
       {data.toptext}

package/dist/components/Hero.svelte

@@ -2,9 +2,14 @@
 import Icon from './Icon.svelte'
 
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<section class="relative bg-white">
+<section {id} class="relative bg-white">
   <div class="mx-auto max-w-7xl md:grid md:grid-cols-12 md:gap-x-8 md:px-0">
     <div class="pt-0 pb-0 md:col-span-8 lg:col-span-7 xl:col-span-6">
       <div class="mx-auto">
@@ -19,11 +24,11 @@ import Icon from './Icon.svelte'
         {#if data.banner_text}
         <div class="mt-6 sm:mt-8 lg:mt-4">
           <a href={data.banner_link_url} class="inline-flex space-x-6">
-            <span class="rounded-full bg-gray-300/10 px-3 py-1 text-sm font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))} ring-1 ring-inset {(data.color == "pyrosim" ? "ring-pyrosim/20" : (data.color == "pathfinder" ? "ring-pathfinder/20" : "ring-teci-blue-dark/20"))}">{data.banner_text}</span>
+            <span class="rounded-full bg-gray-300/10 px-3 py-1 text-sm font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))} ring-1 ring-inset {(data.color == "pyrosim" ? "ring-pyrosim/20" : (data.color == "pathfinder" ? "ring-pathfinder/20" : (data.color == "ventus" ? "ring-ventus/20" : "ring-teci-blue-dark/20")))}">{data.banner_text}</span>
             <span class="inline-flex items-center space-x-1 text-sm font-medium leading-6 text-gray-400">
               <span>{data.banner_link_text}</span>
               <!-- Heroicon name: mini/chevron-right -->
-              <svg class="h-5 w-5 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <svg class="h-5 w-5 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                 <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
               </svg>
             </span>
@@ -36,7 +41,7 @@ import Icon from './Icon.svelte'
           <div class="mt-10 flex gap-x-8 sm:justify-left">
             {#each data.ctas as cta}
               <a href={cta.url} class="inline-block px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-              {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white")))}
+              {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
               ">
                 {cta.text}
                 <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
@@ -45,7 +50,7 @@ import Icon from './Icon.svelte'
           </div>
         {/if}
         <div class="mt-16">
-          <section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
+          <section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : (data.color == "ventus" ? "bg-ventus" : "bg-teci-blue-dark")))}">
             <div class="text-center mx-auto max-w-4xl py-10 px-6 sm:py-10 lg:px-8">
               <h2 class="text-3xl font-bold tracking-tight text-white sm:text-2xl">
                 <span class="block">{@html data.heading}</span>

package/dist/components/Icon.svelte

@@ -2,91 +2,115 @@
   // Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
   export let icon;
   export let classes;
+
+  let id
+
+  if (icon) {
+    id = encodeURIComponent(icon).toLowerCase()
+  }
 </script>
 
 {#if icon == "pyrosim"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
+      src="https://teci-files.imgix.net/www/images/pyrosim_icon.svg"
       alt="PyroSim"
       title="PyroSim Icon"
     />
   </span>
 {:else if icon == "pyrosim-results"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pyrosim-results_icon.svg"
+      src="https://teci-files.imgix.net/www/images/pyrosim-results_icon.svg"
       alt="PyroSim Results"
       title="PyroSim Results Icon"
     />
   </span>
 {:else if icon == "pyrosim-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pyrosim_logo.svg"
+      src="https://teci-files.imgix.net/www/images/pyrosim_logo.svg"
       alt="PyroSim Logo"
       title="PyroSim Logo"
     />
   </span>
 {:else if icon == "pathfinder"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
+      src="https://teci-files.imgix.net/www/images/pathfinder_icon.svg"
       alt="Pathfinder"
       title="Pathfinder Icon"
     />
   </span>
 {:else if icon == "pathfinder-results"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pathfinder-results_icon.svg"
+      src="https://teci-files.imgix.net/www/images/pathfinder-results_icon.svg"
       alt="Pathfinder Results"
       title="Pathfinder Results Icon"
     />
   </span>
 {:else if icon == "pathfinder-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/pathfinder_logo.svg"
+      src="https://teci-files.imgix.net/www/images/pathfinder_logo.svg"
       alt="Pathfinder Logo"
       title="Pathfinder Logo"
     />
   </span>
+  {:else if icon == "ventus"}
+  <span {id} class="not-prose">
+    <img
+      class={classes}
+      src="https://teci-files.imgix.net/www/images/ventus_icon.svg"
+      alt="Ventus"
+      title="Ventus Icon"
+    />
+  </span>
+{:else if icon == "ventus-logo"}
+  <span {id} class="not-prose">
+    <img
+      class={classes}
+      src="https://teci-files.imgix.net/www/images/ventus_logo.svg"
+      alt="Ventus Logo"
+      title="Ventus Logo"
+    />
+  </span>
 {:else if icon == "petrasim"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
+      src="https://teci-files.imgix.net/www/images/petrasim_icon.svg"
       alt="PetraSim"
       title="PetraSim Icon"
     />
   </span>
 {:else if icon == "petrasim-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/petrasim_logo.svg"
+      src="https://teci-files.imgix.net/www/images/petrasim_logo.svg"
       alt="PetraSim Logo"
       title="PetraSim Logo"
     />
   </span>
 {:else if icon == "teci-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
-      src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
+      src="https://teci-files.imgix.net/www/images/teci_logo.svg"
       alt="Thunderhead Logo"
       title="Thunderhead Logo"
     />
   </span>
 {:else if icon == "teci-icon"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <svg
       class={classes}
       xmlns="http://www.w3.org/2000/svg"
@@ -110,9 +134,9 @@
     </svg>
   </span>
 {:else if icon?.startsWith("icon-")}
-  <span class="material-icons-outlined {classes}">{icon?.slice(5)}</span>
+  <span {id} class="material-icons-outlined {classes}">{icon?.slice(5)}</span>
 {:else}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <svg
       class={classes}
       xmlns="http://www.w3.org/2000/svg"

package/dist/components/MediaFeature.svelte

@@ -5,6 +5,11 @@ import Video from './Video.svelte'
 
   let figureImage;
   let figureLink;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 
   if (data.image) {
     if (data.image.startsWith("http")) {
@@ -27,7 +32,7 @@ import Video from './Video.svelte'
   }
 </script>
 
-<section
+<section {id}
   class="mx-auto flex w-full flex-col items-center justify-center md:flex-row md:items-start"
 >
   {#if data.v}

package/dist/components/NewsGrid.svelte

@@ -12,6 +12,11 @@
   let pageSize = data.pageSize;
   let postLimit = data.limit;
   let showPagination = true;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 
   if (postLimit > 0) {
     posts = posts.slice(0, postLimit);
@@ -48,7 +53,7 @@
   $: paginatedItems = paginate({ items, pageSize, currentPage });
 </script>
 
-<div class="relative mx-auto w-full">
+<section {id} class="relative mx-auto w-full">
   <div
     class="flex flex-col justify-between space-y-4 border-b-2 border-gray-200 pb-4 sm:flex-row sm:items-end sm:space-y-0"
   >
@@ -179,4 +184,4 @@
       </p>
     </div>
   {/if}
-</div>
+  </section>

package/dist/components/PricingTable.svelte

@@ -1,13 +1,18 @@
 <script>
   export let data
   let toggleID = data.groups[0].id
+  let id
 
-  function toggleSelection(id) {
-    toggleID = id
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
+
+  function toggleSelection(group_id) {
+    toggleID = group_id
   }
 </script>
 
-<section class="overflow-hidden">
+<section {id} class="overflow-hidden">
   <div class="sm:align-center sm:flex sm:flex-col">
     <h1 class="text-5xl font-bold tracking-tight text-gray-900 sm:text-center">{data.heading}</h1>
     <p class="mt-5 text-xl text-gray-500 sm:text-center">{data.subheading}</p>
@@ -42,7 +47,7 @@
                   <span class="text-base font-medium text-gray-500">{option.divisor}</span>  
                 {/if}
               </p>
-              <a href={option.cta_url} class="mt-8 block w-full border {(option.cta_color == "pyrosim" ? "border-pyrosim bg-pyrosim" : (data.color == "pathfinder" ? "border-pathfinder bg-pathfinder" : "border-teci-blue-dark bg-teci-blue-dark"))} py-2 text-center text-sm font-semibold text-white hover:bg-teci-blue-dark">{option.cta_label}</a>
+              <a href={option.cta_url} class="mt-8 block w-full border {(option.cta_color == "pyrosim" ? "border-pyrosim bg-pyrosim" : (data.color == "pathfinder" ? "border-pathfinder bg-pathfinder" : (data.color == "ventus" ? "border-ventus bg-ventus" : "border-teci-blue-dark bg-teci-blue-dark")))} py-2 text-center text-sm font-semibold text-white hover:bg-teci-blue-dark">{option.cta_label}</a>
             </div>
             <div class="px-6 pt-6 pb-8">
               <h3 class="text-sm font-medium text-gray-900">{option.features_text}</h3>
@@ -79,7 +84,7 @@
     <div class="flex gap-x-8 py-2 sm:justify-center">
       {#each data.footer.ctas as cta}
         <a href={cta.url} class="inline-block whitespace-nowrap px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
-        {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white")))}
+        {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "ventus" ? "bg-ventus text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white"))))}
         ">
           {cta.text}
           <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>

package/dist/components/SidebarContent.svelte

@@ -6,6 +6,11 @@
   export let title;
   export let date;
   export let lastmod;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 
   let formattedDate =
     date != undefined
@@ -44,15 +49,16 @@
   });
 </script>
 
-<section
+<section {id}
   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'}"
+  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'}"
+    class="prose w-full {data.fullWidth?'max-w-none':'max-w-prose'}"
   >
     {#if !data.hideTitle}
       <h1>{title}</h1>
@@ -65,9 +71,8 @@
       </p>
     {/if}
   </div>
-  <aside
-    class="relative w-0 {data.toc || data.rightRail ? 'md:w-60' : 'hidden'}"
-  >
+  {#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">
         <button
@@ -110,13 +115,10 @@
       </div>
     {/if}
     {#if data.rightRail}
-      <div
-        class="hidden bg-gray-200 p-2 md:block {data.toc || data.rightRail
-          ? 'md:w-60'
-          : 'w-0'}"
-      >
+      <div class="hidden bg-gray-200 p-2 md:block md:w-60">
         Dynamic Stuff
       </div>
     {/if}
   </aside>
+  {/if}
 </section>

package/dist/components/Stats.svelte

@@ -1,8 +1,13 @@
 <script>
   export let data
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<section class="bg-gray-50">
+<section {id} class="bg-gray-50">
   <div class="mx-auto max-w-7xl p-6 lg:p-8">
     <div class="mx-auto max-w-4xl text-center">
       <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{data.heading}</h2>
@@ -20,13 +25,13 @@
             {#each data.stats as stat, i}
             <div id="stat-{i}" class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r sm:border-l">
               <dt class="order-2 mt-2 text-lg font-medium leading-6 text-gray-500">{stat.label}</dt>
-              <dd class="order-1 text-5xl font-bold tracking-tight {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}">{stat.value}</dd>
+              <dd class="order-1 text-5xl font-bold tracking-tight {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}">{stat.value}</dd>
             </div>
             {/each}
           </dl>
         </div>
         <figure>
-          <img class="w-full" alt="World map with colored countries for Thunderhead software customers." src="https://teci-files.imgix.net/www/images/{data.image}?auto=compress&auto=format">
+          <img class="w-full" alt="{(data.imageAltText?data.imageAltText:data.heading)}" src="https://teci-files.imgix.net/www/images/{data.image}?w=1152&fit=crop&auto=compress&auto=format">
         </figure>
       </div>
     </div>

package/dist/components/Testimonial.svelte

@@ -6,14 +6,17 @@ import Icon from './Icon.svelte'
 
   export let data;
 
-  let anchor;
   let index = 0;
   let interval = 12000;
   let auto = true;
   let slideInterval;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 
   onMount(() => {
-    anchor = document.getElementById('slider');
     setSlideAutomation();
   })
 
@@ -51,7 +54,7 @@ import Icon from './Icon.svelte'
   }
 </script>
 
-<section id="slider" class="overflow-hidden">
+<section {id} class="overflow-hidden">
   <div class="relative mx-auto max-w-4xl lg:max-w-none mt-10 lg:px-4 lg:py-8 lg:mt-0">
     <svg
       class="absolute right-full top-1/2 hidden translate-x-1/2 -translate-y-1/2 transform lg:block"
@@ -143,11 +146,7 @@ import Icon from './Icon.svelte'
                       {quote.fullname}
                     </div>
                     <div
-                      class="text-base font-medium {data.color == 'pyrosim'
-                        ? 'text-pyrosim'
-                        : data.color == 'pathfinder'
-                        ? 'text-pathfinder'
-                        : 'text-teci-blue-dark'}"
+                      class="text-base font-medium {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}"
                     >
                       {quote.fulltitle}
                     </div>

package/dist/components/ThreeColumn.svelte

@@ -1,13 +1,14 @@
 <script>
-  //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;
+  let id
+
+  if (data.name) {
+    id = encodeURIComponent(data.name).toLowerCase()
+  }
 </script>
 
-<!-- This example requires Tailwind CSS v2.0+ -->
-<section class="mx-auto w-full">
+<section {id} class="mx-auto w-full">
   {#if data.title}
     <h2 class="sr-only">{data.title}</h2>
   {/if}

package/dist/components/Video.svelte

@@ -5,10 +5,17 @@
   export let v="";
   export let thumbnail="";
 
-  let id="";
+  let videoID="";
   let thumb="";
   let youtube=false;
   let videoURL="";
+  let id
+
+  if (data.v) {
+    id = `video-${encodeURIComponent(data.v).toLowerCase()}`
+  } else if (v) {
+    id = `video-${encodeURIComponent(v).toLowerCase()}`
+  }
 
   onMount(() => {
     var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
@@ -43,7 +50,7 @@
       videoURL = `https://teci-files.imgix.net/www/videos/${v}`;
     } else {
       youtube = true;
-      id = v;
+      videoID = v;
     };
   } else if (data.v) {
     if (data.v.includes("mp4")) {
@@ -51,10 +58,10 @@
       videoURL = `https://teci-files.imgix.net/www/videos/${data.v}`;
     } else {
       youtube = true;
-      id = data.v;
+      videoID = data.v;
     };
   } else {
-    id = "";
+    videoID = "";
     videoURL = "";
   };
 
@@ -62,22 +69,22 @@
     thumb = `https://teci-files.imgix.net/www/images/${thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
   } else if (data.thumbnail) {
     thumb = `https://teci-files.imgix.net/www/images/${data.thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
-  } else if (id) {
+  } else if (videoID) {
     if (youtube) {
-      thumb = `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
+      thumb = `https://i.ytimg.com/vi/${videoID}/maxresdefault.jpg`;
     }
   }
 </script>
 
-<section class="aspect-video not-prose w-full border border-gray-200 bg-black shadow-md">
+<section {id} class="aspect-video not-prose w-full border border-gray-200 bg-black shadow-md">
   {#if youtube}
     <iframe
-    title="YouTube Video ID {id}"
+    title="YouTube Video ID {videoID}"
     class="aspect-video w-full"
     frameborder="0"
     allow="autoplay; encrypted-media"
     allowfullscreen
-    src="https://www.youtube.com/embed/${id}?autoplay=1&start=0&mute=1"
+    src="https://www.youtube.com/embed/${videoID}?autoplay=1&start=0&mute=1"
     srcdoc="{`
       <style>
         body, .youtubeembed {
@@ -91,7 +98,7 @@
         }
       </style>
       <a
-        href='https://www.youtube.com/embed/${id}?autoplay=1&start=0&mute=1'
+        href='https://www.youtube.com/embed/${videoID}?autoplay=1&start=0&mute=1'
         class='youtubeembed'
       >
         <img

package/package.json

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