tecitheme 0.1.3 → 0.1.6

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 if (data.image) {
+    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('https://thunderheadeng-www.imgix.net{data.image}?w=600&auto=compress&auto=format');"
+    <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 && image) {
+    figureImage = image
+    figureLink = link ? link : image
+  } else if (image) {
+    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 : '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 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/MediaFeature.svelte

@@ -1,7 +1,19 @@
 <script>
 import Video from './Video.svelte'
 
+  import { dev } from '$app/env';
   export let data;
+
+  let figureImage;
+  let figureLink;
+
+  if (dev && data.image) {
+    figureImage = data.image
+    figureLink = data.image
+  } else if (data.image) {
+    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 items-center md:flex-row md:items-start justify-center">
@@ -12,9 +24,9 @@ import Video from './Video.svelte'
   {:else if data.image}
   <div class="block w-full max-w-xl mb-4 md:mb-0">
     <figure>
-      <a href="https://thunderheadeng-www.imgix.net{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="https://thunderheadeng-www.imgix.net{data.image}?w=576&ar=16:9&fit=crop&auto=compress&auto=format" alt={data.name}
+          src={figureImage} alt={data.name}
         />
       </a>
     </figure>

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,7 +41,11 @@
   host = getContext('currentHost');
 
   if (images.length > 0) {
-    featuredImage = 'https://thunderheadeng-www.imgix.net'+images[0]+'?w=1200&h=627&fit=crop&auto=compress&auto=format'
+    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://files.thunderheadeng.com/www/images/teci_icon_250.png'
   }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "tecitheme",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
-    "@sveltejs/adapter-netlify": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-netlify": "1.0.0-next.65",
+    "@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",