tecitheme 0.0.17 → 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

@@ -18,8 +18,8 @@
     {#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 w-full max-w-xs">
-            <a href={link.linkURL} class="whitespace-nowrap w-full 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 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>

package/components/Card.svelte

@@ -1,20 +1,23 @@
 <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>
 
-<div class="group space-y-4">
+<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 class="w-full {halfHeight ? 'aspect-video' : 'aspect-square'} bg-cover bg-no-repeat shadow-md border border-gray-200 flex items-center justify-center" 
-    style="background-image: url({data.image});"
-  >
-    <div class="md:group-hover:backdrop-grayscale py-8 flex flex-col w-full h-full justify-center items-center {halfHeight ? 'space-y-4' : 'space-y-8'} transition">
-      {#each data.links as link}
-        <a href={link.linkURL} class="whitespace-nowrap hidden md:group-hover:block btn w-3/4 text-center">{link.linkText}</a>
-      {/each}
+  <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}
@@ -36,11 +39,14 @@
         </div>
       </div>
       {#if data.text}
-      <div class="text-lg">
+      <div class="text-lg w-full">
         <p class="text-gray-500">{data.text}</p>
-        <span class="text-sm font-medium text-teci-blue-light lg:mt-4">{data.cardLinkText}<span aria-hidden="true">&nbsp;→</span></span>
+        <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>
+</div>
+</Wrap>

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

@@ -1,23 +1,28 @@
 <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.'
-  };
+  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}
-      <h2 class="text-base font-semibold text-teci-blue-dark tracking-wide uppercase">
+    <p class="text-base font-semibold text-teci-blue-dark uppercase">
       {data.toptext}
-      </h2>
+    </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}
-  <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}

package/components/HeadingCentered.svelte.d.ts

@@ -2,11 +2,7 @@
 /** @typedef {typeof __propDef.events}  HeadingCenteredEvents */
 /** @typedef {typeof __propDef.slots}  HeadingCenteredSlots */
 export default class HeadingCentered extends SvelteComponentTyped<{
-    data?: {
-        toptext: string;
-        title: string;
-        subtitle: string;
-    };
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,11 +13,7 @@ export type HeadingCenteredSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        data?: {
-            toptext: string;
-            title: string;
-            subtitle: string;
-        };
+        data: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/NewsGrid.svelte

@@ -1,35 +1,73 @@
 <script>
   import { DateTime } from "luxon";
   import { getContext } from 'svelte';
+  import { paginate, LightPaginationNav } from 'svelte-paginate'
 
   export let data;
+
   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 class="flex flex-col sm:flex-row justify-between sm:items-end space-y-4 sm:space-y-0">
+<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>
     </div>
     <div class="w-32">
-      <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="1cb5a0d7baa67f6265665b6f911f3487" onclick="mjOpenPopin(event, this)"
-      >
-        Subscribe
-      </button>
+      <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 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
-    {#each posts as post}
+    {#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}</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/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/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

@@ -37,9 +37,9 @@
 <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} bind:data={section} {title} {date} {lastmod}><slot/></svelte:component>
+      <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} bind:data={section} />
+      <svelte:component this={blocks.find(obj=>obj.ref===section.fieldGroup).component} data={section} />
     {/if}
   {/each}
 </article>

package/package.json

@@ -1,43 +1,44 @@
 {
   "name": "tecitheme",
-  "version": "0.0.17",
+  "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.5.0",
+    "@types/cookie": "^0.5.1",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.19.0",
-    "autoprefixer": "^10.4.4",
+    "@typescript-eslint/parser": "^5.22.0",
+    "autoprefixer": "^10.4.7",
     "dotenv": "^16.0.0",
     "encoding": "^0.1.13",
-    "eslint": "^8.13.0",
+    "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^3.4.1",
-    "luxon": "^2.3.1",
+    "luxon": "^2.3.2",
     "mdsvex": "^0.10.5",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.13",
     "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.9",
+    "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.47.0",
+    "svelte": "^3.48.0",
     "svelte-check": "^2.7.0",
     "svelte-cubed": "^0.2.1",
+    "svelte-paginate": "^0.0.1",
     "svelte-preprocess": "^4.10.6",
     "svelte2tsx": "^0.5.9",
     "tailwindcss": "^3.0.24",
-    "three": "^0.139.2",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5",
-    "vite-plugin-autoimport": "^1.6.3"
+    "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": {
@@ -66,6 +67,7 @@
     "./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
     "./components/TrialForm.svelte": "./components/TrialForm.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",