tecitheme 0.4.6 → 0.5.0

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" : (data.color == "ventus" ? "bg-ventus" : "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" : (data.color == "ventus" ? "bg-ventus" : "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,8 +1,13 @@
 <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" : (data.color == "ventus" ? "text-ventus" : "text-teci-blue-dark")))}">{data.preheading}</h2>
@@ -44,4 +49,4 @@
       {/if}
     </div>
   </div>
-</div>
+</section>

package/dist/components/FeatureGrid.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>
+<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 

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">

package/dist/components/Icon.svelte

@@ -2,10 +2,16 @@
   // 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://teci-files.imgix.net/www/images/pyrosim_icon.svg"
@@ -14,7 +20,7 @@
     />
   </span>
 {:else if icon == "pyrosim-results"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/pyrosim-results_icon.svg"
@@ -23,7 +29,7 @@
     />
   </span>
 {:else if icon == "pyrosim-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/pyrosim_logo.svg"
@@ -32,7 +38,7 @@
     />
   </span>
 {:else if icon == "pathfinder"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/pathfinder_icon.svg"
@@ -41,7 +47,7 @@
     />
   </span>
 {:else if icon == "pathfinder-results"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/pathfinder-results_icon.svg"
@@ -50,7 +56,7 @@
     />
   </span>
 {:else if icon == "pathfinder-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/pathfinder_logo.svg"
@@ -59,7 +65,7 @@
     />
   </span>
   {:else if icon == "ventus"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/ventus_icon.svg"
@@ -68,7 +74,7 @@
     />
   </span>
 {:else if icon == "ventus-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/ventus_logo.svg"
@@ -77,7 +83,7 @@
     />
   </span>
 {:else if icon == "petrasim"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/petrasim_icon.svg"
@@ -86,7 +92,7 @@
     />
   </span>
 {:else if icon == "petrasim-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/petrasim_logo.svg"
@@ -95,7 +101,7 @@
     />
   </span>
 {:else if icon == "teci-logo"}
-  <span class="not-prose">
+  <span {id} class="not-prose">
     <img
       class={classes}
       src="https://teci-files.imgix.net/www/images/teci_logo.svg"
@@ -104,7 +110,7 @@
     />
   </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"
@@ -128,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"
   >
@@ -170,6 +175,18 @@
         >
       </div>
     {/if}
+    {#if !postLimit}
+    <div class="sr-only">
+      <p>List of all News links for screen readers and bots.</p>
+      <ul>
+      {#each posts as post}
+        <li>
+          <a href={post.slug}>{post.title}</a>
+        </li>
+      {/each}
+      </ul>
+    </div>
+    {/if}
   {:else}
     <div class="prose">
       <p class="pt-8">
@@ -179,4 +196,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>

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>
@@ -26,7 +31,7 @@
           </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}?w=1152&fit=crop&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"

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/dist/site_config.json

@@ -1,4 +1,6 @@
 {
+  "name": "Thunderhead Engineering Design System",
+  "url": "https://tecitheme.netlify.app",
   "showBanner": false,
   "bannerData": {
     "showCTA": true,

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "tecitheme",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "package": "svelte-package",
+    "prepare": "svelte-kit sync",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
@@ -26,14 +27,14 @@
     "dist"
   ],
   "peerDependencies": {
-    "@sveltejs/kit": "^1.10.0",
-    "svelte": "^3.55.1"
+    "@sveltejs/kit": "^1.13.0",
+    "svelte": "^3.57.0"
   },
   "devDependencies": {
     "@fontsource/inter": "^4.5.15",
     "@fontsource/material-icons-outlined": "^4.5.4",
     "@sveltejs/adapter-static": "2.0.1",
-    "@sveltejs/kit": "^1.10.0",
+    "@sveltejs/kit": "^1.13.0",
     "@sveltejs/package": "^2.0.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
@@ -48,22 +49,23 @@
     "markdown-yaml-metadata-parser": "^3.0.0",
     "mdsvex": "^0.10.6",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.4",
+    "prettier": "^2.8.6",
+    "prettier-plugin-tailwindcss": "^0.2.5",
     "rehype-slug": "^5.1.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.4",
+    "svelte": "^3.57.0",
+    "svelte-check": "^3.1.4",
     "svelte-paginate": "^0.1.0",
-    "svelte-preprocess": "^5.0.1",
-    "svelte2tsx": "^0.6.2",
-    "sveltekit-autoimport": "^1.6.10",
+    "svelte-preprocess": "^5.0.3",
+    "svelte2tsx": "^0.6.10",
+    "sveltekit-autoimport": "^1.7.0",
     "tailwindcss": "^3.2.7",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.1.4"
+    "uuid-by-string": "^4.0.0",
+    "vite": "^4.2.1"
   },
   "dependencies": {
     "katex": "^0.16.4",
-    "svelte": "^3.55.1"
+    "svelte": "^3.57.0"
   }
 }