tecitheme 0.0.23 → 0.1.1

package/components/Card.svelte

@@ -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/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

package/components/MetaSocial.svelte

@@ -3,6 +3,7 @@
   export let description
   export let image
   export let url
+  export let host
 
   function imageURL(str)
   {
@@ -15,13 +16,13 @@
 </script>
 
 <meta property="og:type" content="website">
-<meta property="og:url" content="{url.href}">
+<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://{url.hostname}{image}" >
+<meta name="og:image" content="https://{host}/{image}" >
 {/if}
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@thunderheadeng">

package/components/MetaSocial.svelte.d.ts

@@ -6,6 +6,7 @@ export default class MetaSocial extends SvelteComponentTyped<{
     description: any;
     image: any;
     url: any;
+    host: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,6 +21,7 @@ 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,78 +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">
-      <a class="block h-full" href="/{post.path}">
-        <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
-          >
-          <p class="mb-2 text-xl font-semibold text-gray-900">
-            {post.meta.title}
-          </p>
-          {#if post.meta.summary}
-            <p class="mb-2 flex-1 text-base text-gray-500">
-              {post.meta.summary.length > 190
-                ? post.meta.summary.substring(0, 190) + ' ...'
-                : post.meta.summary}
-            </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>
+  {#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>
-            {/each}
+            </p>
           </div>
-          {/if}
-          <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>
-    {/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

@@ -1,5 +1,6 @@
 <script>
-  import {page} from "$app/stores"
+  import { browser } from '$app/env';
+  import { getContext } from 'svelte';
 
   import CTA from '../components/CTA.svelte';
   import HeadingCentered from '../components/HeadingCentered.svelte';
@@ -33,6 +34,11 @@
   export let page_sections;
 
   let featuredImage;
+  let url;
+  let host;
+  
+  url = getContext('currentURL');
+  host = getContext('currentHost');
 
   if (images.length > 0) {
     featuredImage = images[0]
@@ -44,7 +50,9 @@
 <svelte:head>
   <title>{title} | Thunderhead Engineering</title>
   <meta name="description" content={summary}>
-  <MetaSocial title={title} description={summary} image={featuredImage} url={$page.url} />
+  {#if browser}
+  <MetaSocial title={title} description={summary} image={featuredImage} {url} {host} />
+  {/if}
 </svelte:head>
 
 <article class="flex flex-col space-y-12 {layout}">

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tecitheme",
-  "version": "0.0.23",
+  "version": "0.1.1",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
-    "@tailwindcss/forms": "^0.5.1",
+    "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.2",
     "@types/cookie": "^0.5.1",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
@@ -14,7 +14,7 @@
     "autoprefixer": "^10.4.7",
     "dotenv": "^16.0.1",
     "encoding": "^0.1.13",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "luxon": "^2.4.0",
@@ -27,14 +27,15 @@
     "rehype-stringify": "^9.0.3",
     "stream": "^0.0.2",
     "svelte": "^3.48.0",
-    "svelte-check": "^2.7.1",
+    "svelte-check": "^2.7.2",
     "svelte-paginate": "^0.0.1",
-    "svelte-preprocess": "^4.10.6",
+    "svelte-preprocess": "^4.10.7",
     "svelte2tsx": "^0.5.10",
-    "tailwindcss": "^3.0.24",
+    "tailwindcss": "^3.1.3",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.2",
-    "vite": "^2.9.9",
+    "typescript": "^4.7.3",
+    "uuid-by-string": "^3.0.7",
+    "vite": "^2.9.12",
     "vite-plugin-autoimport": "^1.6.6"
   },
   "type": "module",