tecitheme 0.3.2 → 0.3.4

package/src/lib/components/TrialForm.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+  import CountrySelector from "$lib/components/CountrySelector.svelte";
+  import Icon from "$lib/components/Icon.svelte";
+  import { onMount } from "svelte";
+  import { scrollTo, validateEmail } from "$lib/utils.js";
+  import { variables } from "$lib/variables";
+
+  onMount(() => {
+    setTimeout(() => {
+      timePassed = true;
+    }, 3000);
+  });
+
+  let resellerModal = false;
+  let country = "sel";
+  let name = "";
+  let email = "";
+  let product = 0;
+  let valid = false;
+  let message = "";
+  let error = "";
+  let answer = "";
+  let submitted = false;
+  let waiting = false;
+  let timePassed = false;
+
+  $: if (
+    country != "sel" &&
+    name != "" &&
+    validateEmail(email) &&
+    product != 0 &&
+    answer == "" &&
+    timePassed
+  ) {
+    valid = true;
+  } else {
+    valid = false;
+  }
+
+  $: if (submitted == true && message == "") {
+    waiting = true;
+    scrollTo("trial-request");
+  } else {
+    waiting = false;
+  }
+
+  const submitForm = async () => {
+    submitted = true;
+    error = "";
+
+    try {
+      const submit = await fetch(variables.trialEndpoint, {
+        method: "POST",
+        body: JSON.stringify({
+          name,
+          email,
+          country,
+          product,
+        }),
+      });
+      message = await submit.json();
+    } catch (err) {
+      console.log(err);
+    }
+  };
+</script>
+
+<div class="mt-10 sm:mt-0">
+  <div class="mt-8 md:grid md:grid-cols-3 md:gap-6">
+    <div class="md:col-span-1">
+      <div class="prose px-4 sm:px-0">
+        <h2>30-day Trial Request</h2>
+        <p>
+          Please complete the form and click "Send Request". <b
+            >All fields are required.</b
+          >
+        </p>
+        <p>
+          Within a few minutes, you will receive an email message containing a
+          download link.
+        </p>
+        <p>
+          If you need assistance, please send an email to <a
+            href="mailto:sales@thunderheadeng.com">sales</a
+          >.
+        </p>
+      </div>
+    </div>
+    <div class="mt-5 md:col-span-2 md:mt-0">
+      <form id="trial-request" on:submit|preventDefault={submitForm}>
+        <div class="overflow-hidden border shadow">
+          {#if message}
+            <div class="prose bg-white px-4 py-5 sm:p-6">
+              <p>
+                Thank you <strong>{message.name}</strong> for requesting a trial
+                of {#if message.product == 1}PyroSim{:else if message.product == 2}Pathfinder{:else if message.product == 3}PyroSim
+                  and Pathfinder{/if}!<br />
+                You will receive an email to <strong>{message.email}</strong>
+                with your activation key{#if message.product == 3}s{/if}
+                in a few moments.
+              </p>
+              {#if message.product == 1}
+                <h3>PyroSim</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pyrosim/"
+                    >PyroSim Support</a
+                  > page.
+                </p>
+              {:else if message.product == 2}
+                <h3>Pathfinder</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pathfinder/"
+                    >Pathfinder Support</a
+                  > page.
+                </p>
+              {:else if message.product == 3}
+                <h3>PyroSim</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pyrosim/"
+                    >PyroSim Support</a
+                  > page.
+                </p>
+                <h3>Pathfinder</h3>
+                <p>
+                  To download the most recent version visit the <a
+                    href="https://support.thunderheadeng.com/pathfinder/"
+                    >Pathfinder Support</a
+                  > page.
+                </p>
+              {/if}
+              <h3>Need Help?</h3>
+              <p>
+                Please email <a href="mailto:support@thunderheadeng.com"
+                  >support@thunderheadeng.com</a
+                > if you have any questions.
+              </p>
+            </div>
+          {:else if error}
+            <p>There was an error: {error}</p>
+          {:else if waiting}
+            <div id="waiting" class="mx-auto p-12">
+              <p class="pb-8 text-center font-bold">
+                Waiting for Trial Approval...
+              </p>
+              <Icon classes="h-24 w-24 mx-auto animate-pulse" />
+            </div>
+          {:else}
+            <div class="space-y-6 bg-white px-4 py-5 sm:p-6">
+              <fieldset>
+                <div>
+                  <legend class="text-lg font-bold text-gray-900">
+                    Personal Information
+                  </legend>
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="name"
+                    class="block whitespace-nowrap pr-2 font-medium text-gray-700"
+                  >
+                    Full Name:
+                  </label>
+                  <input
+                    id="name"
+                    type="text"
+                    name="name"
+                    bind:value={name}
+                    class="w-full border-0 border-b-2 border-gray-500 p-1"
+                  />
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="email"
+                    class="block pr-2 font-medium text-gray-700"
+                  >
+                    Email:
+                  </label>
+                  <input
+                    id="email"
+                    type="text"
+                    name="email"
+                    bind:value={email}
+                    class="w-full border-0 border-b-2 border-gray-500 p-1"
+                  />
+                </div>
+                <div class="flex flex-row items-center pt-4 align-middle">
+                  <label
+                    for="country"
+                    class="block pr-2 font-medium text-gray-700"
+                  >
+                    Country:
+                  </label>
+                  <input
+                    id="country"
+                    type="hidden"
+                    name="country"
+                    value={country}
+                  />
+                  <CountrySelector
+                    bind:selection={country}
+                    bind:resellerModal
+                  />
+                </div>
+              </fieldset>
+              <fieldset>
+                <div>
+                  <legend class="text-lg font-bold text-gray-900">
+                    What would you like to try?
+                  </legend>
+                </div>
+                <div class="mt-4 space-y-4">
+                  <div class="flex items-center">
+                    <input
+                      id="pyrosim"
+                      name="product"
+                      type="radio"
+                      value={1}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pyrosim"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      PyroSim
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="pathfinder"
+                      name="product"
+                      type="radio"
+                      value={2}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pathfinder"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      Pathfinder
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="pyropath"
+                      name="product"
+                      type="radio"
+                      value={3}
+                      bind:group={product}
+                      class="h-4 w-4 border-gray-300 text-blue-600 focus:ring-teci-blue-dark"
+                    />
+                    <label
+                      for="pyropath"
+                      class="ml-3 block text-sm font-medium text-gray-700"
+                    >
+                      PyroSim and Pathfinder
+                    </label>
+                  </div>
+                </div>
+              </fieldset>
+              <input
+                class="confident"
+                id="answer"
+                type="text"
+                name="answer"
+                bind:value={answer}
+                placeholder="Correct answers only..."
+              />
+            </div>
+            <div class="px-4 py-3 text-right sm:px-6">
+              <button
+                type="submit"
+                disabled={!valid}
+                class="inline-flex justify-center border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm {valid ===
+                true
+                  ? 'bg-teci-blue-light hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
+                  : 'cursor-not-allowed bg-gray-300'}"
+              >
+                Send Request
+              </button>
+              {#if answer}
+                <p>
+                  Something is wrong with the form, please email
+                  support@thunderheadeng.com.
+                </p>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  .confident {
+    @apply hidden;
+  }
+</style>

package/src/lib/components/Video.svelte

@@ -0,0 +1,118 @@
+<script>
+  import { onMount } from 'svelte'
+
+  export let data={};
+  export let v="";
+  export let thumbnail="";
+
+  let id="";
+  let thumb="";
+  let youtube=false;
+  let videoURL="";
+
+  onMount(() => {
+    var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
+
+    if ("IntersectionObserver" in window) {
+      var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(function(video) {
+          if (video.isIntersecting) {
+            for (var source in video.target.children) {
+              var videoSource = video.target.children[source];
+              if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+                videoSource.src = videoSource.dataset.src;
+              }
+            }
+
+            video.target.load();
+            video.target.classList.remove("lazy");
+            lazyVideoObserver.unobserve(video.target);
+          }
+        });
+      });
+
+      lazyVideos.forEach(function(lazyVideo) {
+        lazyVideoObserver.observe(lazyVideo);
+      });
+    }
+  })
+
+  if (v) {
+    if (v.includes("mp4")) {
+      youtube = false;
+      videoURL = `https://teci-files.imgix.net/www/videos/${v}`;
+    } else {
+      youtube = true;
+      id = v;
+    };
+  } else if (data.v) {
+    if (data.v.includes("mp4")) {
+      youtube = false;
+      videoURL = `https://teci-files.imgix.net/www/videos/${data.v}`;
+    } else {
+      youtube = true;
+      id = data.v;
+    };
+  } else {
+    id = "";
+    videoURL = "";
+  };
+
+  if (thumbnail) {
+    thumb = `https://teci-files.imgix.net/www/images/${thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+  } else if (data.thumbnail) {
+    thumb = `https://teci-files.imgix.net/www/images/${data.thumbnail}?w=1214&fit=clip&auto=compress&auto=format`;
+  } else if (id) {
+    if (youtube) {
+      thumb = `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`;
+    }
+  }
+</script>
+
+<section class="aspect-video not-prose w-full border border-gray-200 bg-black shadow-md">
+  {#if youtube}
+    <iframe
+    title="YouTube Video ID {id}"
+    class="aspect-video w-full"
+    frameborder="0"
+    allow="autoplay; encrypted-media"
+    allowfullscreen
+    src="https://www.youtube.com/embed/${id}?autoplay=1&start=0&mute=1"
+    srcdoc="{`
+      <style>
+        body, .youtubeembed {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        object-fit: cover;
+        }
+      </style>
+      <a
+        href='https://www.youtube.com/embed/${id}?autoplay=1&start=0&mute=1'
+        class='youtubeembed'
+      >
+        <img
+          src='${thumb}'
+          class='youtubeembed'
+        />
+        <svg
+          version='1.1'
+          viewBox='0 0 68 48'
+          width='68px'
+          style='position: relative;'
+        >
+          <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
+          <path d='M 45,24 27,14 27,34' fill='#fff'></path>
+        </svg>
+      </a>
+    `}"
+  />
+  {:else}
+    <video class="lazy aspect-video w-full" autoplay muted loop playsinline controls poster={thumb}>
+      <source data-src={videoURL} type="video/mp4">
+    </video>
+  {/if}  
+</section>

package/src/lib/components/Wrap.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let tag = "div";
+  export let when = true;
+</script>
+
+{#if when}
+  <svelte:element this={tag} {...$$restProps}>
+    <slot />
+  </svelte:element>
+{:else}
+  <slot />
+{/if}

package/src/lib/get-content.js

@@ -0,0 +1,98 @@
+// get-content.js
+// HTML parser from https://github.com/html-to-text/node-html-to-text
+import { convert } from "html-to-text";
+import { dev } from "$app/environment";
+
+const getContent = async (content='') => {
+
+  let indexData = [];
+  let iterableContentFiles = Object.entries([]);
+  let sortedIndex = [];
+
+  // Use 'content' variable to determine files to import.
+  switch (content) {
+    case "news":
+      iterableContentFiles = Object.entries(
+        import.meta.glob("/src/routes/news/*(!(+page)).md")
+      );
+      break;
+    default:
+      iterableContentFiles = Object.entries(
+        import.meta.glob("/src/routes/**/*(!(+page)).md")
+      );
+  }
+
+  const allContent = await Promise.all(
+    iterableContentFiles.map(async ([path, resolver]) => {
+      const contentPath = path.slice(11, -3);
+      const file = await resolver();
+      const metadata = file.metadata;
+      const today = new Date();
+
+      if (
+        metadata.notIndexed ||
+        (dev ? false : metadata.draft) ||
+        (dev ? false : new Date(metadata.date) > today)
+      ) {
+        return;
+      } else {
+        var html = file.default.render().html;
+        var plaintext = convert(html, {
+          baseElements: {
+            orderBy: "occurrence",
+          },
+          wordwrap: false,
+          selectors: [
+            { selector: "h1", format: "skip" },
+            { selector: "h2", options: { uppercase: false } },
+            { selector: "a", options: { ignoreHref: true } },
+            { selector: "a.button", format: "skip" },
+            { selector: "a.btn", format: "skip" },
+            { selector: "aside", format: "skip" },
+            { selector: "ul", options: { itemPrefix: "- " } },
+            { selector: "img", format: "skip" },
+          ],
+        })
+          .replace(/\n\n\n/gm, " ")
+          .replace(/\n\n/g, " ")
+          .replace(/\n/g, " ")
+          .replace(/\"/g, "'")
+          .trim();
+
+        if (metadata && contentPath && plaintext) {
+          return {
+            meta: metadata,
+            path: contentPath,
+            text: plaintext,
+          };
+        }
+      }
+    })
+  );
+
+  for (let i = 0; i < allContent.length; i++) {
+    if (allContent[i]) {
+      let today = new Date();
+      let postdate = allContent[i].meta.date
+        ? new Date(allContent[i].meta.date)
+        : today;
+      let entry = {
+        title: allContent[i].meta.title,
+        content: allContent[i].text,
+        summary: allContent[i].meta.summary,
+        date: postdate,
+        slug: allContent[i].path,
+        categories: allContent[i].meta.categories,
+      };
+      indexData.push(entry);
+    } else {
+      continue;
+    }
+  }
+
+  sortedIndex = indexData.slice().sort((a, b) => new Date(b.date) - new Date(a.date));
+
+  return sortedIndex;
+}
+
+export default getContent

package/src/lib/layouts/blocks.svelte

@@ -0,0 +1,93 @@
+<script>
+  import CTA from "$lib/components/CTA.svelte";
+  import HeadingCentered from "$lib/components/HeadingCentered.svelte";
+  import MediaFeature from "$lib/components/MediaFeature.svelte";
+  import Modal from "$lib/components/Modal.svelte";
+  import NewsGrid from "$lib/components/NewsGrid.svelte";
+  import SidebarContent from "$lib/components/SidebarContent.svelte";
+  import ThreeColumn from "$lib/components/ThreeColumn.svelte";
+  import TrialForm from "$lib/components/TrialForm.svelte";
+  import Video from "$lib/components/Video.svelte";
+  import Hero from "$lib/components/Hero.svelte";
+  import CTABranded from "$lib/components/CTABranded.svelte";
+  import FeatureGrid from "$lib/components/FeatureGrid.svelte";
+  import LogoCloud from "$lib/components/LogoCloud.svelte";
+  import CtaSplitImage from "$lib/components/CTASplitImage.svelte";
+  import ContentTwoColumns from "$lib/components/ContentTwoColumns.svelte";
+  import PricingTable from "$lib/components/PricingTable.svelte";
+  import Stats from "$lib/components/Stats.svelte";
+  import Testimonial from "$lib/components/Testimonial.svelte";
+
+  let blocks = [
+    { ref: "cta-center", component: CTA },
+    { ref: "heading-centered", component: HeadingCentered },
+    { ref: "media-feature", component: MediaFeature },
+    { ref: "modal", component: Modal },
+    { ref: "news-grid", component: NewsGrid },
+    { ref: "sidebar-content", component: SidebarContent },
+    { ref: "three-column", component: ThreeColumn },
+    { ref: "trial-form", component: TrialForm },
+    { ref: "video", component: Video },
+    { ref: "hero", component: Hero },
+    { ref: "cta-branded", component: CTABranded },
+    { ref: "feature-grid", component: FeatureGrid },
+    { ref: "logo-cloud", component: LogoCloud },
+    { ref: "cta-split-image", component: CtaSplitImage },
+    { ref: "content-two-columns", component: ContentTwoColumns },
+    { ref: "pricing-table", component: PricingTable },
+    { ref: "stats", component: Stats },
+    { ref: "testimonial", component: Testimonial },
+  ];
+
+  export let title;
+  export let date;
+  export let summary;
+  export let image;
+  export let lastmod;
+  export let layout;
+  export let page_sections;
+
+  let featuredImage;
+
+  if (image) {
+    featuredImage = "https://teci-files.imgix.net/www/images/" + image + "?w=1200&h=627&fit=crop&auto=compress&auto=format";
+  } else {
+    featuredImage = "https://teci-files.imgix.net/www/images/teci_icon_250.png";
+  }
+</script>
+
+<svelte:head>
+	<title>{title} | Thunderhead Engineering</title>
+	<meta data-key="description" name="description" content={summary}>
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content={title} />
+	<meta name="twitter:title" content={title} />
+	<meta property="og:description" content={summary} />
+	<meta name="twitter:description" content={summary} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@thunderheadeng" />
+  <meta name="twitter:creator" content="@thunderheadeng" />
+	<meta property="og:image" content={featuredImage} />
+	<meta name="twitter:card" content={featuredImage} />
+  <!-- <meta property="og:image:width" content={coverWidth} />
+	<meta property="og:image:height" content={coverHeight} /> -->
+</svelte:head>
+
+<article class="flex flex-col space-y-16 {layout}">
+  {#each page_sections as section}
+    {#if section && section.fieldGroup === "sidebar-content"}
+      <svelte:component
+        this={blocks.find((obj) => obj.ref === section.fieldGroup).component}
+        data={section}
+        {title}
+        {date}
+        {lastmod}><slot /></svelte:component
+      >
+    {:else if section && section.fieldGroup != "sidebar-content"}
+      <svelte:component
+        this={blocks.find((obj) => obj.ref === section.fieldGroup).component}
+        data={section}
+      />
+    {/if}
+  {/each}
+</article>

package/src/lib/req_utils.js

@@ -0,0 +1,63 @@
+import { browser } from "$app/environment";
+
+export function browserGet(key) {
+  if (browser) {
+    const item = localStorage.getItem(key);
+    if (item) {
+      return JSON.parse(item);
+    }
+  }
+  return null;
+}
+
+export function browserSet(key, value) {
+  if (browser) {
+    localStorage.setItem(key, value);
+  }
+  return null;
+}
+
+export async function post(fetch, url, body) {
+  let customError = false;
+  try {
+    let headers = {};
+    if (!(body instanceof FormData)) {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify(body);
+    }
+    const token = browserGet("token");
+    if (token) {
+      headers["X-UltraCart-Api-Version"] = "2017-03-01";
+      headers[Accept] = "application/json";
+      headers["x-ultracart-simple-key"] = token;
+    }
+    const res = await fetch(url, {
+      method: "POST",
+      body,
+      headers,
+    });
+    if (!res.ok) {
+      try {
+        const data = await res.json();
+        const error = data.message[0].messages[0];
+        customError = true;
+        throw { id: error.id, message: error.message };
+      } catch (err) {
+        console.log(err);
+        throw err;
+      }
+    }
+    try {
+      const json = await res.json();
+      return json;
+    } catch (err) {
+      console.log(err);
+      throw { id: "", message: "An unknown error has occured." };
+    }
+  } catch (err) {
+    console.log(err);
+    throw customError
+      ? err
+      : { id: "", message: "An unknown error has occured" };
+  }
+}