tecitheme 0.3.3 → 0.3.4

package/src/lib/components/HeadingCentered.svelte

@@ -0,0 +1,33 @@
+<script>
+  //Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
+  import Icon from "$lib/components/Icon.svelte";
+  export let data;
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<section class="w-full text-center">
+  {#if data.toptext}
+    <p class="text-base font-semibold uppercase text-teci-blue-dark">
+      {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="mx-auto mt-5 max-w-4xl text-xl text-gray-500">
+      {data.subtitle}
+    </p>
+  {/if}
+</section>

package/src/lib/components/Hero.svelte

@@ -0,0 +1,72 @@
+<script>
+  export let data
+</script>
+
+<section class="relative bg-white">
+  <div class="mx-auto max-w-7xl md:grid md:grid-cols-12 md:gap-x-8 md:px-0">
+    <div class="pt-0 pb-0 md:col-span-8 lg:col-span-7 xl:col-span-6">
+      <div class="mx-auto">
+        {#if data.logo}
+          <span class="sr-only">{data.title}</span>
+          <Icon icon={data.logo} classes="h-12 sm:h-20" />
+        {:else}
+          <h1 class="z-10 text-4xl font-bold tracking-tight sm:text-center sm:text-6xl">
+            {data.heading}
+          </h1>
+        {/if}
+        {#if data.banner_text}
+        <div class="mt-6 sm:mt-8 lg:mt-4">
+          <a href={data.banner_link_url} class="inline-flex space-x-6">
+            <span class="rounded-full bg-gray-300/10 px-3 py-1 text-sm font-semibold leading-6 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))} ring-1 ring-inset {(data.color == "pyrosim" ? "ring-pyrosim/20" : (data.color == "pathfinder" ? "ring-pathfinder/20" : "ring-teci-blue-dark/20"))}">{data.banner_text}</span>
+            <span class="inline-flex items-center space-x-1 text-sm font-medium leading-6 text-gray-400">
+              <span>{data.banner_link_text}</span>
+              <!-- Heroicon name: mini/chevron-right -->
+              <svg class="h-5 w-5 {(data.color == "pyrosim" ? "text-pyrosim" : (data.color == "pathfinder" ? "text-pathfinder" : "text-teci-blue-dark"))}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+              </svg>
+            </span>
+          </a>
+        </div>
+        {/if}
+        <h2 class="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{data.tagline}</h2>
+        <p class="mt-6 text-lg leading-8 text-gray-600">{data.text}</p>
+        {#if data.ctas}
+          <div class="mt-10 flex gap-x-8 sm:justify-left">
+            {#each data.ctas as cta}
+              <a href={cta.url} class="inline-block px-4 py-1.5 text-base font-semibold leading-7 shadow-sm ring-1 ring-gray-900/10 hover:ring-gray-900/20 hover:bg-teci-blue-dark
+              {(cta.color == "pyrosim" ? "bg-pyrosim text-white" : (cta.color == "pathfinder" ? "bg-pathfinder text-white" : (cta.color == "white" ? "bg-white text-gray-600 hover:text-white" : "bg-teci-blue-dark text-white")))}
+              ">
+                {cta.text}
+                <span class="hidden sm:inline {(cta.color == "white" ? "text-gray-600" : "text-white")}" aria-hidden="true">&rarr;</span>
+              </a>
+            {/each}
+          </div>
+        {/if}
+        <div class="mt-16">
+          <section class="{(data.color == "pyrosim" ? "bg-pyrosim" : (data.color == "pathfinder" ? "bg-pathfinder" : "bg-teci-blue-dark"))}">
+            <div class="text-center mx-auto max-w-4xl py-10 px-6 sm:py-10 lg:px-8">
+              <h2 class="text-3xl font-bold tracking-tight text-white sm:text-2xl">
+                <span class="block">{@html data.heading}</span>
+              </h2>
+              <p class="mt-4 text-lg leading-6 text-gray-200">{@html data.body}</p>
+              <a href={data.cta_url} class="mt-8 inline-flex w-full items-center justify-center border border-transparent bg-white px-5 py-3 text-base font-medium text-gray-900 hover:bg-indigo-50 sm:w-auto">
+                {@html data.cta}
+              </a>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+    <div class="relative hidden md:block md:col-span-4 lg:col-span-5 xl:col-span-6">
+      {#if data.video}
+      <video src="https://teci-files.imgix.net/www/videos/{data.video}" autoplay="true" loop muted 
+        class="absolute object-cover h-full w-full">
+      </video>
+      {:else if data.image}
+        <img src="https://teci-files.imgix.net/www/images/{data.image}?fmt=auto" alt={data.heading}
+        class="absolute object-cover h-full w-full"
+        >
+      {/if}
+    </div>
+  </div>
+</section>

package/src/lib/components/Icon.svelte

@@ -0,0 +1,138 @@
+<script>
+  // Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
+  export let icon;
+  export let classes;
+</script>
+
+{#if icon == "pyrosim"}
+  <span class="not-prose">
+    <img
+      class={classes}
+      src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
+      alt="PyroSim"
+      title="PyroSim Icon"
+    />
+  </span>
+{:else if icon == "pyrosim-results"}
+  <span class="not-prose">
+    <img
+      class={classes}
+      src="https://files.thunderheadeng.com/www/images/pyrosim-results_icon.svg"
+      alt="PyroSim Results"
+      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
+      class={classes}
+      src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
+      alt="Pathfinder"
+      title="Pathfinder Icon"
+    />
+  </span>
+{:else if icon == "pathfinder-results"}
+  <span class="not-prose">
+    <img
+      class={classes}
+      src="https://files.thunderheadeng.com/www/images/pathfinder-results_icon.svg"
+      alt="Pathfinder Results"
+      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
+      class={classes}
+      src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
+      alt="PetraSim"
+      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}
+  <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>
+{/if}

package/src/lib/components/LogoCloud.svelte

@@ -0,0 +1,25 @@
+<div class="bg-white">
+  <div class="mx-auto max-w-7xl py-12 px-6 lg:py-16 lg:px-8">
+    <p class="text-center text-lg font-semibold text-gray-600">Trusted by fire protection experts all over the world</p>
+    <div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Workcation">
+      </div>
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage">
+      </div>
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple">
+      </div>
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/laravel-logo-gray-400.svg" alt="Laravel">
+      </div>
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit">
+      </div>
+      <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
+        <img class="max-h-12" src="https://tailwindui.com/img/logos/statamic-logo-gray-400.svg" alt="Statamic">
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/Math.svelte

@@ -0,0 +1,24 @@
+<script>
+  // Based on: https://svelte.dev/repl/49ff6c089825418888cf804d9dde77bc?version=3.46.4
+  import katex from "katex";
+  export let math;
+  export let displayMode = false;
+
+  const options = {
+    displayMode: displayMode,
+    throwOnError: false,
+  };
+
+  $: katexString = katex.renderToString(math, options);
+</script>
+
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
+    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
+    crossorigin="anonymous"
+  />
+</svelte:head>
+
+{@html katexString}

package/src/lib/components/MediaFeature.svelte

@@ -0,0 +1,66 @@
+<script>
+  export let data;
+
+  let figureImage;
+  let figureLink;
+
+  if (data.image) {
+    if (data.image.startsWith("http")) {
+      figureImage = data.image;
+      figureLink = data.link ? data.link : data.image;
+    } else if (data.image.includes("gif")) {
+      figureImage = "https://teci-files.imgix.net/www/images/" + data.image;
+      figureLink = data.link
+        ? data.link
+        : "https://teci-files.imgix.net/www/images/" + data.image;
+    } else {
+      figureImage =
+        "https://teci-files.imgix.net/www/images/" +
+        data.image +
+        "?w=576&ar=16:9&fit=crop&auto=compress&auto=format";
+      figureLink = data.link
+        ? data.link
+        : "https://teci-files.imgix.net/www/images/" + data.image;
+    }
+  }
+</script>
+
+<section
+  class="mx-auto flex w-full flex-col items-center justify-center md:flex-row md:items-start"
+>
+  {#if data.v}
+    <div class="mb-4 block w-full max-w-xl md:mb-0">
+      <Video bind:data />
+    </div>
+  {:else if data.image}
+    <div class="mb-4 block w-full max-w-xl md:mb-0">
+      <figure>
+        <a href={figureLink}>
+          <img
+            class="aspect-video w-full border border-gray-200 bg-black object-cover shadow-md {data.imageClass
+              ? data.imageClass
+              : ''}"
+            src={figureImage}
+            alt={data.name}
+          />
+        </a>
+      </figure>
+    </div>
+  {/if}
+  <div
+    class="flex w-full max-w-xl flex-col justify-center {data.position ===
+    'right'
+      ? 'md:order-last md:ml-8'
+      : 'md:order-first md:mr-8'}"
+  >
+    <div class="w-full max-w-3xl">
+      <h2 class="pb-4 text-lg font-bold">{data.name}</h2>
+      <span class="prose">{@html data.text}</span>
+    </div>
+    {#if data.ctaText}
+      <div class="mt-4 text-right md:text-left">
+        <a class="btn inline-block" href={data.ctaURL}>{data.ctaText}</a>
+      </div>
+    {/if}
+  </div>
+</section>

package/src/lib/components/Modal.svelte

@@ -0,0 +1,68 @@
+<script>
+  export let data;
+  let shown = false;
+
+  export function show() {
+    shown = true;
+  }
+  export function hide() {
+    shown = false;
+  }
+</script>
+
+<svelte:window
+  on:keydown={(e) => {
+    if (e.keyCode == 27) {
+      hide();
+    }
+  }}
+/>
+
+{#if (data.title || data.text || data.buttonText)}
+  <div class="prose max-w-none">
+    {#if data.title}
+      <h2>{data.title}</h2>
+    {/if}
+    {#if data.text}
+      <p>{data.text}</p>
+    {/if}
+    {#if data.buttonText}
+      <button on:click={show} class="btn">{data.buttonText}</button>
+    {/if}
+  </div>
+{/if}
+
+{#if shown}
+  <div
+    class="fixed inset-0 z-50 !mt-0 h-full w-full overflow-y-auto bg-gray-900 bg-opacity-50"
+  >
+    <div class="relative top-20 mx-auto w-96 border bg-white p-5 shadow-lg">
+      <button
+        type="button"
+        on:click={hide}
+        class="absolute top-0 right-0 mr-2 mt-2 inline-flex items-center justify-center bg-white p-1 text-teci-blue-light hover:bg-teci-blue-dark hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark"
+      >
+        <span class="sr-only">Close menu</span>
+        <!-- Heroicon name: outline/x -->
+        <svg
+          class="h-6 w-6"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+      <div class="mt-3 text-center">
+        {@html data.modalContent}
+      </div>
+    </div>
+  </div>
+{/if}

package/src/lib/components/NewsGrid.svelte

@@ -0,0 +1,182 @@
+<script>
+  import { page } from '$app/stores';
+  import { paginate, PaginationNav } from "svelte-paginate";
+  import Icon from "$lib/components/Icon.svelte";
+
+  export let data;
+
+  let posts = $page.data.newsPosts;
+  let filteredPosts = [];
+  let items = [];
+  let currentPage = 1;
+  let pageSize = data.pageSize;
+  let postLimit = data.limit;
+  let showPagination = true;
+
+  if (postLimit > 0) {
+    posts = posts.slice(0, postLimit);
+    postLimit <= pageSize ? (showPagination = false) : (showPagination = true);
+  }
+
+  function termExists(arr, terms) {
+    if (arr) {
+      return terms.some((term) => {
+        return arr.includes(term);
+      });
+    } else {
+      return false;
+    }
+  }
+
+  function filterPosts(arr, terms) {
+    for (let i = 0; i < arr.length; ) {
+      if (termExists(arr[i].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">
+  <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>
+      <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"
+      />
+      <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>
+  {#if items.length > 0}
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-4">
+        <PaginationNav
+          totalItems={items.length}
+          pageSize={pageSize ? pageSize : 6}
+          {currentPage}
+          limit={1}
+          showStepOptions={true}
+          on:setPage={(e) => (currentPage = e.detail.page)}
+        />
+      </div>
+    {/if}
+    <div
+      class="grid gap-8 pt-8 md:grid-cols-2 md:gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12"
+    >
+      {#each paginatedItems as post}
+        <div class="h-full">
+          <div class="flex h-full flex-col items-stretch ">
+            <time class="mb-1 block text-sm text-gray-500" datetime={post.date}
+              >{new Date(post.date).toLocaleDateString("en-us", {
+                weekday: "short",
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                timeZone: "UTC",
+                timeZoneName: "short",
+              })}</time
+            >
+            <h2 class="mb-2 text-xl font-semibold text-gray-900">
+              <a href={post.slug}>
+                {post.title}
+              </a>
+            </h2>
+            {#if post.summary}
+              <p class="mb-2 flex-1 text-base text-gray-500">
+                <a href={post.slug}>
+                  {post.summary.length > 190
+                    ? post.summary.substring(0, 190) + " ..."
+                    : post.summary}
+                </a>
+              </p>
+            {:else}
+              <p class="mb-2 flex-1 text-base text-red-500">
+                Missing Summary Text
+              </p>
+            {/if}
+            {#if post.categories}
+              <div class="flex w-full flex-wrap text-sm">
+                {#each post.categories.sort() as term}
+                  <a
+                    class="mr-2 mb-2 inline-block"
+                    href="/news/filter/{term}"
+                    target="_self"
+                  >
+                    <span
+                      class="inline-flex items-center rounded-full bg-teci-blue-dark px-2.5 py-0.5 text-xs text-white hover:bg-teci-blue-light"
+                      >{term}</span
+                    >
+                  </a>
+                {/each}
+              </div>
+            {/if}
+            <p
+              class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark"
+            >
+              <a href={post.slug}>
+                Read full article<span aria-hidden="true">&nbsp;→</span>
+              </a>
+            </p>
+          </div>
+        </div>
+      {/each}
+    </div>
+    {#if showPagination}
+      <div class="paginator mx-auto flex justify-center pt-8">
+        <PaginationNav
+          totalItems={items.length}
+          pageSize={pageSize ? pageSize : 6}
+          {currentPage}
+          limit={1}
+          showStepOptions={true}
+          on:setPage={(e) => (currentPage = e.detail.page)}
+        />
+      </div>
+    {/if}
+    {#if !showPagination}
+      <div class="mt-8 w-full">
+        <a class="btn float-right" href="/news" rel="external">All News Posts</a
+        >
+      </div>
+    {/if}
+  {: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>