tecitheme 0.1.1 → 0.1.4

package/components/Banner.svelte

@@ -1,57 +1,59 @@
 <script>
-    export let showCTA
-    export let shortText
-    export let longText
-    export let ctaText
-    export let ctaLink
+  export let showCTA;
+  export let shortText;
+  export let longText;
+  export let ctaText;
+  export let ctaLink;
+  export let allowClose;
+
+  let bannerOpen = true;
+
+  let toggleBanner = () => {
+    bannerOpen = !bannerOpen
+  }
 </script>
 
-<div x-data="banner">
-    <div x-show="open" class="bg-teci-blue-light">
-      <div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
-        <div class="flex items-center justify-between flex-wrap">
-          <div class="w-0 flex-1 flex items-center">
-            <!-- Banner Text -->
-            <p class="font-medium text-white truncate">
-              <!-- Short Text -->
-              <span class="md:hidden">
-                {shortText}
-              </span>
-              <!-- Long Text-->
-              <span class="hidden md:inline">
-                {longText}
-              </span>
-            </p>
-          </div>
-          
-          {#if showCTA}
-          <!-- CTA Button -->
-          <div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
-            <div class="shadow-sm">
-              <a href={ctaLink}
-                class="flex items-center justify-center px-4 py-2 border shadow-md border-transparent text-sm leading-5 font-medium text-teci-blue-light bg-white hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:shadow-outline transition ease-in-out duration-150"
-                aria-label="Button to {ctaText}"
-                title="Click to {ctaText}"
-              >
-                {ctaText}
-              </a>
-            </div>
-          </div>
-          {/if}
-          <!-- Hide Banner Button -->
-          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
-            <button x-on:click="toggle" type="button"
-              class="-mr-1 flex p-2 hover:bg-teci-blue-dark focus:outline-none focus:bg-teci-blue-dark sm:-mr-2 transition ease-in-out duration-150"
-              aria-label="Dismiss"
-              title="Dismiss Banner"
-            >
-              <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-        </div>
+{#if bannerOpen}
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div class="bg-teci-blue-light" >
+  <div class="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+    <div class="flex justify-between flex-wrap">
+      <div class="h-10 w-0 flex-1 flex items-center order-1">
+        <span class="flex p-2 bg-teci-blue-dark">
+          <!-- Heroicon name: outline/speakerphone -->
+          <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+          </svg>
+        </span>
+        <p class="ml-3 font-medium text-white truncate">
+          <span class="inline md:hidden">{shortText}</span>
+          <span class="hidden md:inline">{longText}</span>
+        </p>
+      </div>
+      {#if showCTA}
+      <div class="flex-shrink-0 w-full sm:w-auto order-3 sm:order-2 mt-2 sm:mt-0 sm:ml-3">
+        <a href="{ctaLink}" 
+          class="flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium text-teci-blue-light bg-white hover:bg-teci-blue-dark hover:text-white">
+            {ctaText}
+          </a>
+      </div>
+      {/if}
+      {#if allowClose}
+      <div class="flex-shrink-0 sm:ml-3 order-2 sm:order-3">
+        <button type="button" on:click={toggleBanner} class="-mr-1 flex p-2 hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
+          <span class="sr-only">Dismiss</span>
+          <!-- Heroicon name: outline/x -->
+          <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      {:else}
+      <div class="flex-shrink-0 order-2">
+        <span>&nbsp;</span>
       </div>
+      {/if}
     </div>
   </div>
-    
+</div>
+{/if}

package/components/Banner.svelte.d.ts

@@ -7,6 +7,7 @@ export default class Banner extends SvelteComponentTyped<{
     longText: any;
     ctaText: any;
     ctaLink: any;
+    allowClose: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -22,6 +23,7 @@ declare const __propDef: {
         longText: any;
         ctaText: any;
         ctaLink: any;
+        allowClose: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Card.svelte

@@ -1,14 +1,24 @@
 <script>
+  import { dev } from '$app/env';
   //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;
+
+  let backgroundImage;
+
+  if (dev && data.image) {
+    backgroundImage = data.image;
+  } else {
+    backgroundImage = 'https://thunderheadeng-www.imgix.net'+data.image+'?w=1200&h=627&fit=crop&auto=compress&auto=format';
+  }
+
 </script>
 
 <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({backgroundImage});"
       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" >

package/components/Figure.svelte

@@ -1,14 +1,28 @@
 <script>
+  import { dev } from '$app/env';
+
   export let image;
   export let title;
   export let caption;
   export let link;
+
+  let figureImage;
+  let figureLink;
+
+  if (dev) {
+    figureImage = image
+    figureLink = link ? link : image
+  } else {
+    figureImage = image.startsWith('http') ? image : 'https://thunderheadeng-www.imgix.net'+image+'?auto=compress&auto=format'
+    figureLink = link ? link : image.startsWith('http') ? image : 'https://thunderheadeng-www.imgix.net'+image
+  }
+
 </script>
 
 <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={figureLink}>
+      <img class="w-full" src="{figureImage}" alt={title} title={title}>
     </a>
     {#if caption}
       <figcaption class="text-center p-2">{@html caption}</figcaption>

package/components/Header.svelte

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

@@ -1,20 +1,32 @@
 <script>
 import Video from './Video.svelte'
 
+  import { dev } from '$app/env';
   export let data;
+
+  let figureImage;
+  let figureLink;
+
+  if (dev) {
+    figureImage = data.image
+    figureLink = data.image
+  } else {
+    figureImage = data.image.startsWith('http') ? data.image : 'https://thunderheadeng-www.imgix.net'+data.image+'?w=576&ar=16:9&fit=crop&auto=compress&auto=format'
+    figureLink = data.image.startsWith('http') ? data.image : 'https://thunderheadeng-www.imgix.net'+data.image
+  }
 </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={figureLink}>
         <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={figureImage} 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

@@ -126,7 +126,7 @@
                 {#each post.meta.categories.sort() as term}
                   <a
                     class="mr-2 mb-2 inline-block"
-                    href="/news/{term}"
+                    href="/news/filter/{term}"
                     rel="external"
                   >
                     <span

package/components/Subscribe.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let classes;
+</script>
+
+<div class="w-32 not-prose {classes ? classes : ''}">
+  <data
+    id="mj-w-res-data"
+    data-token="2a0fbbba6aa7f1398b091a6a5f5f2167"
+    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="flex w-full items-center justify-center border border-transparent bg-teci-blue-light px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-teci-blue-dark focus:border-teci-blue-dark focus:outline-none"
+    data-token="2a0fbbba6aa7f1398b091a6a5f5f2167"
+    onclick="mjOpenPopin(event, this)">Subscribe</button
+  >
+</div>
+<div class="clear-both"></div>

package/components/Subscribe.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SubscribeProps */
+/** @typedef {typeof __propDef.events}  SubscribeEvents */
+/** @typedef {typeof __propDef.slots}  SubscribeSlots */
+export default class Subscribe extends SvelteComponentTyped<{
+    classes: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SubscribeProps = typeof __propDef.props;
+export type SubscribeEvents = typeof __propDef.events;
+export type SubscribeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        classes: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/layouts/blocks.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { browser } from '$app/env';
+  import { browser, dev } from '$app/env';
   import { getContext } from 'svelte';
 
   import CTA from '../components/CTA.svelte';
@@ -41,9 +41,13 @@
   host = getContext('currentHost');
 
   if (images.length > 0) {
-    featuredImage = images[0]
+    if (dev) {
+      featuredImage = images[0]
+    } else {
+      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 +55,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,11 +1,11 @@
 {
   "name": "tecitheme",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
     "@sveltejs/adapter-netlify": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "1.0.0-next.358",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.2",
     "@types/cookie": "^0.5.1",
@@ -35,7 +35,7 @@
     "tslib": "^2.4.0",
     "typescript": "^4.7.3",
     "uuid-by-string": "^3.0.7",
-    "vite": "^2.9.12",
+    "vite": "^2.9.10",
     "vite-plugin-autoimport": "^1.6.6"
   },
   "type": "module",
@@ -63,6 +63,7 @@
     "./components/Modal.svelte": "./components/Modal.svelte",
     "./components/NewsGrid.svelte": "./components/NewsGrid.svelte",
     "./components/SidebarContent.svelte": "./components/SidebarContent.svelte",
+    "./components/Subscribe.svelte": "./components/Subscribe.svelte",
     "./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
     "./components/TrialForm.svelte": "./components/TrialForm.svelte",
     "./components/Video.svelte": "./components/Video.svelte",