tecitheme 0.0.20 → 0.0.23

package/components/Figure.svelte

@@ -2,11 +2,12 @@
   export let image;
   export let title;
   export let caption;
+  export let link;
 </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={image}>
+    <a href={link ? link : image}>
       <img class="w-full" src={image} alt={title} title={title}>
     </a>
     {#if caption}

package/components/Figure.svelte.d.ts

@@ -5,6 +5,7 @@ export default class Figure extends SvelteComponentTyped<{
     image: any;
     title: any;
     caption: any;
+    link: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,6 +19,7 @@ declare const __propDef: {
         image: any;
         title: any;
         caption: any;
+        link: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/MediaFeature.svelte

@@ -13,7 +13,7 @@ import Video from './Video.svelte'
   <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="w-full aspect-video object-cover border bg-black border-gray-200 shadow-md"
+        <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>

package/components/NewsGrid.svelte

@@ -2,6 +2,7 @@
   import { DateTime } from 'luxon';
   import { getContext } from 'svelte';
   import { paginate, PaginationNav } from 'svelte-paginate';
+  import Icon from './Icon.svelte'
 
   export let data;
 
@@ -13,9 +14,13 @@
   let pageSize = data.pageSize;
 
   function termExists(arr, terms) {
-    return terms.some((value) => {
-      return arr.includes(value);
-    });
+    if (arr) {
+      return terms.some((term) => {
+      return arr.includes(term);
+      });
+    } else {
+      return false
+    }    
   }
 
   function filterPosts(arr, terms) {
@@ -38,7 +43,7 @@
   $: paginatedItems = paginate({ items, pageSize, currentPage });
 </script>
 
-<div class="relative mx-auto w-full">
+<div class="relative w-full mx-auto">
   <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"
   >
@@ -67,6 +72,7 @@
       >
     </div>
   </div>
+  {#if (items.length > 0)}
   <div class="paginator mx-auto flex justify-center pt-4">
     <PaginationNav
       totalItems="{items.length}"
@@ -81,8 +87,9 @@
     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 h-full flex-col items-stretch">
+    <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}"
@@ -102,6 +109,15 @@
               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>
+              </a>
+            {/each}
+          </div>
+          {/if}
           <p
             class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark"
           >
@@ -109,6 +125,7 @@
           </p>
         </div>
       </a>
+    </div>
     {/each}
   </div>
   <div class="paginator mx-auto flex justify-center pt-8">
@@ -121,4 +138,12 @@
       on:setPage="{(e) => (currentPage = e.detail.page)}"
     />
   </div>
+  {: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>
+  {/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",