tecitheme 0.0.18 → 0.0.21

package/components/HeadingCentered.svelte

@@ -5,27 +5,27 @@
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<div class="w-full text-center">
-  {#if data.toptext}
-    <p class="text-base font-semibold text-teci-blue-dark uppercase">
-      {data.toptext}
-    </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}
-  {#if data.subtitle}
-  <p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
-      {data.subtitle}
+<section class="w-full text-center">
+{#if data.toptext}
+  <p class="text-base font-semibold text-teci-blue-dark uppercase">
+    {data.toptext}
   </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}
-</div>
+{/if}
+{#if data.subtitle}
+<p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
+    {data.subtitle}
+</p>
+{/if}
+</section>

package/components/MediaFeature.svelte

@@ -4,16 +4,18 @@ import Video from './Video.svelte'
   export let data;
 </script>
 
-<section class="w-full mx-auto flex flex-col md:flex-row items-center justify-center">
+<section class="w-full mx-auto flex flex-col md:flex-row items-start justify-center">
   {#if data.v}
-  <div class="w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
+  <div class="block w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
     <Video bind:data />
   </div>
   {:else if data.image}
-  <div class="block w-full max-w-xl mb-4 md:mb-0">
+  <div class="block w-full max-w-xl {data.position === 'right' ? 'mb-4 md:mb-0' : 'mb-0'}">
     <figure>
       <a href={data.image}>
-        <img class="aspect-video object-cover" src={data.image} alt={data.name}/>
+        <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}
+        />
       </a>
     </figure>
   </div>

package/components/MetaSocial.svelte

@@ -0,0 +1,28 @@
+<script>
+  export let title
+  export let description
+  export let image
+  export let url
+
+  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.href}">
+<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}" >
+{/if}
+<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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  MetaSocialProps */
+/** @typedef {typeof __propDef.events}  MetaSocialEvents */
+/** @typedef {typeof __propDef.slots}  MetaSocialSlots */
+export default class MetaSocial extends SvelteComponentTyped<{
+    title: any;
+    description: any;
+    image: any;
+    url: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MetaSocialProps = typeof __propDef.props;
+export type MetaSocialEvents = typeof __propDef.events;
+export type MetaSocialSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        description: any;
+        image: any;
+        url: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/NewsGrid.svelte

@@ -1,32 +1,33 @@
 <script>
-  import { DateTime } from "luxon";
+  import { DateTime } from 'luxon';
   import { getContext } from 'svelte';
-  import { paginate, LightPaginationNav } from 'svelte-paginate'
+  import { paginate, PaginationNav } 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)
+    return terms.some((value) => {
+      return arr.includes(value);
     });
   }
 
   function filterPosts(arr, terms) {
-    for (let i = 0; i < arr.length;) {
+    for (let i = 0; i < arr.length; ) {
       if (termExists(arr[i].meta.categories, terms)) {
         i++;
-        continue
-      };
-      arr.splice(i,1)
-    };
+        continue;
+      }
+      arr.splice(i, 1);
+    }
     return arr;
-  };
+  }
 
   if (data.filter) {
     items = filterPosts(posts, data.filter);
@@ -34,40 +35,90 @@
     items = posts;
   }
 
-  $: paginatedItems = paginate({ items, pageSize, currentPage })
+  $: paginatedItems = paginate({ items, pageSize, currentPage });
 </script>
 
 <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
+    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"
+  >
     <div>
-      <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{data.title}</h1>
+      <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">
-      <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>
+      <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="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="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">
+  <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}
-    <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.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>
+      <a class="block h-full" href="{post.path}">
+        <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
+          >
+          <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}
+          <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 class="pt-8 w-auto max-w-sm mx-auto">
-    <LightPaginationNav
+  <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}"
+      on:setPage="{(e) => (currentPage = e.detail.page)}"
     />
   </div>
 </div>

package/components/SidebarContent.svelte

@@ -26,11 +26,13 @@
 <section bind:clientWidth={w} class="relative flex flex-row { data.fullWidth ? 'mx-0' : 'mx-auto'} {(data.toc || data.rightRail) ? 'md:space-x-8' : 'space-x-0'}">
 
   <div id="content" class="prose w-full { data.fullWidth ? 'max-w-none' : 'max-w-prose'}">
+    {#if !data.hideTitle}
     <h1>{title}</h1>
-    {#if formattedDate}
-    <p>Published: {formattedDate}{#if (formattedLastModDate != formattedDate && formattedLastModDate)}, Updated: {formattedLastModDate}{/if}</p>
     {/if}
     <slot />
+    {#if (formattedDate && data.showDate)}
+    <p class="text-sm">Published: {formattedDate}{#if (formattedLastModDate != formattedDate && formattedLastModDate)}, Updated: {formattedLastModDate}{/if}</p>
+    {/if}
   </div>
   <aside class="relative w-0 {(data.toc || data.rightRail) ? 'md:w-60' : 'hidden'}">
     {#if data.toc}

package/components/ThreeColumn.svelte

@@ -7,13 +7,13 @@
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<div class="mx-auto w-full">
+<section class="mx-auto w-full">
   {#if data.title}
     <h2 class="sr-only">{data.title}</h2>
   {/if}
-  <dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 md:grid-cols-3">
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
     {#each data.cards as card}
       <Card bind:data={card} bind:halfHeight={data.halfHeight} />
     {/each}
-  </dl>
-</div>
+  </div>
+</section>

package/layouts/blocks.svelte

@@ -1,4 +1,6 @@
 <script>
+  import {page} from "$app/stores"
+
   import CTA from '../components/CTA.svelte';
   import HeadingCentered from '../components/HeadingCentered.svelte';
   import MediaFeature from '../components/MediaFeature.svelte';
@@ -8,6 +10,7 @@
   import ThreeColumn from '../components/ThreeColumn.svelte';
   import TrialForm from '../components/TrialForm.svelte';
   import Video from '../components/Video.svelte';
+  import MetaSocial from '../components/MetaSocial.svelte';
   
   let blocks = [
     {ref: "cta-center", component: CTA},
@@ -25,13 +28,23 @@
   export let date;
   export let lastmod;
   export let summary;
+  export let images = [];
   export let layout;
   export let page_sections;
+
+  let featuredImage;
+
+  if (images.length > 0) {
+    featuredImage = images[0]
+  } else {
+    featuredImage = "https://www.thunderheadeng.com/wp-content/uploads/2022/01/femtc-brno.jpg"
+  }
 </script>
 
 <svelte:head>
   <title>{title} | Thunderhead Engineering</title>
   <meta name="description" content={summary}>
+  <MetaSocial title={title} description={summary} image={featuredImage} url={$page.url} />
 </svelte:head>
 
 <article class="flex flex-col space-y-12 {layout}">

package/layouts/blocks.svelte.d.ts

@@ -2,12 +2,13 @@
 /** @typedef {typeof __propDef.events}  BlocksEvents */
 /** @typedef {typeof __propDef.slots}  BlocksSlots */
 export default class Blocks extends SvelteComponentTyped<{
+    summary: any;
     title: any;
     date: any;
     lastmod: any;
-    summary: any;
     layout: any;
     page_sections: any;
+    images?: any[];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,12 +21,13 @@ export type BlocksSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        summary: any;
         title: any;
         date: any;
         lastmod: any;
-        summary: any;
         layout: any;
         page_sections: any;
+        images?: any[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,50 +1,47 @@
 {
   "name": "tecitheme",
-  "version": "0.0.18",
+  "version": "0.0.21",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
-    "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-netlify": "next",
     "@sveltejs/kit": "next",
     "@tailwindcss/forms": "^0.5.1",
     "@tailwindcss/typography": "^0.5.2",
     "@types/cookie": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.19.0",
-    "@typescript-eslint/parser": "^5.22.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "autoprefixer": "^10.4.7",
-    "dotenv": "^16.0.0",
+    "dotenv": "^16.0.1",
     "encoding": "^0.1.13",
-    "eslint": "^8.14.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^3.4.1",
-    "luxon": "^2.3.2",
-    "mdsvex": "^0.10.5",
-    "postcss": "^8.4.13",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "luxon": "^2.4.0",
+    "mdsvex": "^0.10.6",
+    "postcss": "^8.4.14",
     "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.10",
+    "prettier-plugin-tailwindcss": "^0.1.11",
     "rehype-parse": "^8.0.4",
     "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "stream": "^0.0.2",
     "svelte": "^3.48.0",
-    "svelte-check": "^2.7.0",
-    "svelte-cubed": "^0.2.1",
+    "svelte-check": "^2.7.1",
     "svelte-paginate": "^0.0.1",
     "svelte-preprocess": "^4.10.6",
-    "svelte2tsx": "^0.5.9",
+    "svelte2tsx": "^0.5.10",
     "tailwindcss": "^3.0.24",
-    "three": "^0.140.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4",
-    "vite": "^2.9.8",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.9",
     "vite-plugin-autoimport": "^1.6.6"
   },
   "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.5.0",
-    "katex": "^0.15.3"
+    "katex": "^0.15.6"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -61,6 +58,7 @@
     "./components/Icon.svelte": "./components/Icon.svelte",
     "./components/Math.svelte": "./components/Math.svelte",
     "./components/MediaFeature.svelte": "./components/MediaFeature.svelte",
+    "./components/MetaSocial.svelte": "./components/MetaSocial.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
     "./components/NewsGrid.svelte": "./components/NewsGrid.svelte",
     "./components/SidebarContent.svelte": "./components/SidebarContent.svelte",