tecitheme 0.0.24 → 0.1.2

package/components/Card.svelte

@@ -8,7 +8,7 @@
 
 <div class="group flex flex-col items-stretch space-y-2 border border-gray-100 p-2 hover:border-gray-200 hover:shadow-md" >
   {#if data.image}
-    <div style="background-image: url({data.image});"
+    <div style="background-image: url('https://thunderheadeng-www.imgix.net{data.image}?w=600&auto=compress&auto=format');"
       class="w-full shrink-0 {halfHeight ? 'aspect-video' : 'aspect-square'} flex items-center justify-center border border-gray-200 bg-cover bg-no-repeat"
     >
       <div class="{halfHeight ? 'space-y-4' : 'space-y-8'} flex h-full w-full flex-col items-center justify-center" >
@@ -47,7 +47,7 @@
   </a>
   {#if data.text}
     <div class="flex w-full flex-1 flex-col">
-      {data.text}
+      {@html data.text}
       {#if data.cardActionStyle == 'link'}
       <a class="inline-block mt-2 text-sm font-medium text-teci-blue-light" href={data.cardURL}>
         {data.cardLinkText}<span aria-hidden="true"> →</span>

package/components/Figure.svelte

@@ -7,8 +7,8 @@
 
 <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">
-    <a href={link ? link : image}>
-      <img class="w-full" src={image} alt={title} title={title}>
+    <a href={link ? link : 'https://thunderheadeng-www.imgix.net' + image}>
+      <img class="w-full" src="https://thunderheadeng-www.imgix.net{image}?auto=compress&auto=format" alt={title} title={title}>
     </a>
     {#if caption}
       <figcaption class="text-center p-2">{@html caption}</figcaption>

package/components/Header.svelte

@@ -1,7 +1,7 @@
 <script>
   import Icon from './Icon.svelte';
   import { slide } from 'svelte/transition';
-  import { cubicIn, cubicOut, bounceIn, bounceOut } from 'svelte/easing';
+  import { cubicIn, cubicOut } from 'svelte/easing';
 
   let openMenu = '';
 
@@ -81,14 +81,14 @@
 
           <!-- Flyout menu -->
           {#if openMenu == 'products'}
-            <div
+            <div 
               class="absolute inset-x-0 top-full z-10 transform bg-white shadow-lg"
               use:clickOutside
               on:outclick="{() => (openMenu = '')}"
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="mx-auto grid max-w-7xl gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8"
               >
                 <a
@@ -183,7 +183,7 @@
 
               <!-- Action Buttons -->
               <div class="relative bg-gray-50">
-                <div
+                <div on:click="{() => (openMenu = '')}"
                   class="mx-auto max-w-7xl space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8"
                 >
                   <div class="flow-root">
@@ -295,7 +295,7 @@
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
@@ -406,7 +406,7 @@
                   </div>
                 </a>
               </div>
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
@@ -495,7 +495,7 @@
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
@@ -576,7 +576,7 @@
                   </div>
                 </a>
               </div>
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
@@ -664,7 +664,7 @@
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div
+              <div on:click="{() => (openMenu = '')}"
                 class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
@@ -746,7 +746,7 @@
                 </a>
 
                 <a
-                  href="https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#distributors"
+                  href="https://www.thunderheadeng.com/pyrosim/licensing#international-distributors"
                   class="-m-3 flex items-start p-3 transition duration-150 ease-in-out hover:bg-gray-50"
                 >
                   <svg
@@ -904,10 +904,10 @@
     >
       <div class="px-4 pt-5 pb-6 sm:pb-8">
         <div class="flex items-center justify-between">
-          <a class="block" href="https://www.thunderheadeng.com">
+          <a on:click="{() => (openMenu = '')}" class="block" href="https://www.thunderheadeng.com">
             <img
               class="h-10 w-auto"
-              src="https://files.thunderheadeng.com/support/images/te_logo.svg"
+              src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
               alt="Thunderhead Engineering"
             />
           </a>
@@ -1073,7 +1073,7 @@
           <div class="flow-root">
             <a
               href="https://www.thunderheadeng.com/news"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1095,7 +1095,7 @@
           <div class="flow-root">
             <a
               href="https://support.thunderheadeng.com/release-notes"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1117,7 +1117,7 @@
           <div class="flow-root">
             <a
               href="https://store2.thunderheadeng.com/cart"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1139,7 +1139,7 @@
           <div class="flow-root">
             <a
               href="https://store2.thunderheadeng.com/trial/"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1160,7 +1160,7 @@
           <div class="flow-root">
             <a
               href="mailto:sales@thunderheadeng.com"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1182,7 +1182,7 @@
           <div class="flow-root">
             <a
               href="mailto:support@thunderheadeng.com"
-              class="-m-3 flex items-center p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
+              class="-m-3 flex items-start p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"

package/components/MediaFeature.svelte

@@ -4,17 +4,17 @@ import Video from './Video.svelte'
   export let data;
 </script>
 
-<section class="w-full mx-auto flex flex-col md:flex-row items-start justify-center">
+<section class="w-full mx-auto flex flex-col items-center md:flex-row md:items-start justify-center">
   {#if data.v}
-  <div class="block w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
+  <div class="block w-full max-w-xl mb-4 md:mb-0">
     <Video bind:data />
   </div>
   {:else if data.image}
-  <div class="block w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
+  <div class="block w-full max-w-xl mb-4 md:mb-0">
     <figure>
-      <a href={data.image}>
+      <a href="https://thunderheadeng-www.imgix.net{data.image}">
         <img class="w-full aspect-video object-cover border bg-black border-gray-200 shadow-md {data.imageClass ? data.imageClass : ''}"
-          src={data.image} alt={data.name}
+          src="https://thunderheadeng-www.imgix.net{data.image}?w=576&ar=16:9&fit=crop&auto=compress&auto=format" alt={data.name}
         />
       </a>
     </figure>

package/components/MetaSocial.svelte

@@ -3,27 +3,13 @@
   export let description
   export let image
   export let url
-  export let host
-
-  function imageURL(str)
-  {
-    var tarea = str;
-    if (tarea.indexOf("http://") == 0 || tarea.indexOf("https://") == 0) {
-      return true
-    }
-    return false
-  }
 </script>
 
 <meta property="og:type" content="website">
-<meta property="og:url" content="{url}">
+<meta property="og:url" content={url}>
 <meta name="og:title" content={title} >
 <meta name="og:description" content={description} >
-{#if imageURL(image)}
-<meta name="og:image" content="{image}" >
-{:else}
-<meta name="og:image" content="https://{host}/{image}" >
-{/if}
+<meta name="og:image" content={image} >
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@thunderheadeng">
 <meta name="twitter:creator" content="@thunderheadeng">

package/components/MetaSocial.svelte.d.ts

@@ -6,7 +6,6 @@ export default class MetaSocial extends SvelteComponentTyped<{
     description: any;
     image: any;
     url: any;
-    host: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -21,7 +20,6 @@ declare const __propDef: {
         description: any;
         image: any;
         url: any;
-        host: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/NewsGrid.svelte

@@ -2,25 +2,32 @@
   import { DateTime } from 'luxon';
   import { getContext } from 'svelte';
   import { paginate, PaginationNav } from 'svelte-paginate';
-  import Icon from './Icon.svelte'
+  import Icon from './Icon.svelte';
 
   export let data;
 
-  const posts = getContext('newsPosts');
+  let posts = getContext('newsPosts');
 
   let filteredPosts = [];
   let items = [];
   let currentPage = 1;
   let pageSize = data.pageSize;
+  let postLimit = data.limit;
+  let showPagination = true;
+
+  if (postLimit > 0) {
+    posts = posts.slice(0, postLimit);
+    postLimit <= pageSize ? (showPagination = false) : (showPagination = true);
+  }
 
   function termExists(arr, terms) {
     if (arr) {
       return terms.some((term) => {
-      return arr.includes(term);
+        return arr.includes(term);
       });
     } else {
-      return false
-    }    
+      return false;
+    }
   }
 
   function filterPosts(arr, terms) {
@@ -43,7 +50,7 @@
   $: paginatedItems = paginate({ items, pageSize, currentPage });
 </script>
 
-<div class="relative w-full mx-auto">
+<div 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"
   >
@@ -72,80 +79,100 @@
       >
     </div>
   </div>
-  {#if (items.length > 0)}
-  <div class="paginator mx-auto flex justify-center pt-4">
-    <PaginationNav
-      totalItems="{items.length}"
-      pageSize="{pageSize ? pageSize : 6}"
-      currentPage="{currentPage}"
-      limit="{1}"
-      showStepOptions="{true}"
-      on:setPage="{(e) => (currentPage = e.detail.page)}"
-    />
-  </div>
-  <div
-    class="grid gap-16 pt-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12"
-  >
-    {#each paginatedItems as post}
-    <div class="h-full">
-      <div class="h-full flex flex-col items-stretch ">
-        <time
-          class="mb-1 block text-sm text-gray-500"
-          datetime="{post.meta.date}"
-          >{DateTime.fromISO(post.meta.date).toLocaleString()}</time
-        >
-        <h2 class="mb-2 text-xl font-semibold text-gray-900">
-          <a href="/{post.path}">
-          {post.meta.title}
-          </a>
-        </h2>
-        {#if post.meta.summary}
-          <p class="mb-2 flex-1 text-base text-gray-500">
-            <a href="/{post.path}">
-            {post.meta.summary.length > 190
-              ? post.meta.summary.substring(0, 190) + ' ...'
-              : post.meta.summary}
-            </a>
-          </p>
-        {:else}
-          <p class="mb-2 flex-1 text-base text-red-500">
-            Missing Summary Text
-          </p>
-        {/if}
-        {#if post.meta.categories}
-        <div class="w-full text-sm flex flex-wrap">
-          {#each (post.meta.categories.sort()) as term}
-            <a class="inline-block mr-2 mb-2" href="/news/{term}" rel="external">
-              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs bg-teci-blue-dark text-white">{term}</span>
-            </a>
-          {/each}
-        </div>
-        {/if}
-        <p class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark">
-          <a href="/{post.path}">
-          Read full article<span aria-hidden="true">&nbsp;→</span>
-          </a>
-        </p>
+  {#if items.length > 0}
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-4">
+        <PaginationNav
+          totalItems="{items.length}"
+          pageSize="{pageSize ? pageSize : 6}"
+          currentPage="{currentPage}"
+          limit="{1}"
+          showStepOptions="{true}"
+          on:setPage="{(e) => (currentPage = e.detail.page)}"
+        />
       </div>
+    {/if}
+    <div
+      class="grid gap-8 pt-8 md:grid-cols-2 md:gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12"
+    >
+      {#each paginatedItems as post}
+        <div class="h-full">
+          <div class="flex h-full flex-col items-stretch ">
+            <time
+              class="mb-1 block text-sm text-gray-500"
+              datetime="{post.meta.date}"
+              >{DateTime.fromISO(post.meta.date).toLocaleString()}</time
+            >
+            <h2 class="mb-2 text-xl font-semibold text-gray-900">
+              <a href="/{post.path}">
+                {post.meta.title}
+              </a>
+            </h2>
+            {#if post.meta.summary}
+              <p class="mb-2 flex-1 text-base text-gray-500">
+                <a href="/{post.path}">
+                  {post.meta.summary.length > 190
+                    ? post.meta.summary.substring(0, 190) + ' ...'
+                    : post.meta.summary}
+                </a>
+              </p>
+            {:else}
+              <p class="mb-2 flex-1 text-base text-red-500">
+                Missing Summary Text
+              </p>
+            {/if}
+            {#if post.meta.categories}
+              <div class="flex w-full flex-wrap text-sm">
+                {#each post.meta.categories.sort() as term}
+                  <a
+                    class="mr-2 mb-2 inline-block"
+                    href="/news/{term}"
+                    rel="external"
+                  >
+                    <span
+                      class="inline-flex items-center rounded-full bg-teci-blue-dark px-2.5 py-0.5 text-xs text-white hover:bg-teci-blue-light"
+                      >{term}</span
+                    >
+                  </a>
+                {/each}
+              </div>
+            {/if}
+            <p
+              class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark"
+            >
+              <a href="/{post.path}">
+                Read full article<span aria-hidden="true">&nbsp;→</span>
+              </a>
+            </p>
+          </div>
+        </div>
+      {/each}
     </div>
-    {/each}
-  </div>
-  <div class="paginator mx-auto flex justify-center pt-8">
-    <PaginationNav
-      totalItems="{items.length}"
-      pageSize="{pageSize ? pageSize : 6}"
-      currentPage="{currentPage}"
-      limit="{1}"
-      showStepOptions="{true}"
-      on:setPage="{(e) => (currentPage = e.detail.page)}"
-    />
-  </div>
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-8">
+        <PaginationNav
+          totalItems="{items.length}"
+          pageSize="{pageSize ? pageSize : 6}"
+          currentPage="{currentPage}"
+          limit="{1}"
+          showStepOptions="{true}"
+          on:setPage="{(e) => (currentPage = e.detail.page)}"
+        />
+      </div>
+    {/if}
+    {#if !showPagination}
+      <div class="mt-8 w-full">
+        <a class="btn float-right" href="/news" rel="external">All News Posts</a
+        >
+      </div>
+    {/if}
   {:else}
-  <div class="prose">
-    <p class="pt-8">
-      Sorry, there isn't any news for you to see here.<br>
-      Please visit the <a rel="external" href="/news">All News</a> page for an updated list.
-    </p>
-  </div>
+    <div class="prose">
+      <p class="pt-8">
+        Sorry, there isn't any news for you to see here.<br />
+        Please visit the <a rel="external" href="/news">All News</a> page for an
+        updated list.
+      </p>
+    </div>
   {/if}
-</div>
+</div>

package/layouts/blocks.svelte

@@ -41,9 +41,9 @@
   host = getContext('currentHost');
 
   if (images.length > 0) {
-    featuredImage = images[0]
+    featuredImage = 'https://thunderheadeng-www.imgix.net'+images[0]+'?w=1200&h=627&fit=crop&auto=compress&auto=format'
   } else {
-    featuredImage = "https://www.thunderheadeng.com/wp-content/uploads/2022/01/femtc-brno.jpg"
+    featuredImage = 'https://files.thunderheadeng.com/www/images/teci_icon_250.png'
   }
 </script>
 
@@ -51,7 +51,7 @@
   <title>{title} | Thunderhead Engineering</title>
   <meta name="description" content={summary}>
   {#if browser}
-  <MetaSocial title={title} description={summary} image={featuredImage} {url} {host} />
+  <MetaSocial title={title} description={summary} image={featuredImage} {url} />
   {/if}
 </svelte:head>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.0.24",
+  "version": "0.1.2",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
@@ -31,11 +31,11 @@
     "svelte-paginate": "^0.0.1",
     "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.10",
-    "tailwindcss": "^3.1.1",
+    "tailwindcss": "^3.1.3",
     "tslib": "^2.4.0",
     "typescript": "^4.7.3",
     "uuid-by-string": "^3.0.7",
-    "vite": "^2.9.10",
+    "vite": "^2.9.12",
     "vite-plugin-autoimport": "^1.6.6"
   },
   "type": "module",