tecitheme 0.1.10 → 0.2.1

package/components/Banner.svelte

@@ -19,7 +19,7 @@
   <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">
+        <span class="flex p-1">
           <!-- 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" />

package/components/Card.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { dev } from '$app/env';
+  import { dev } from '$app/environment';
   //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';

package/components/Figure.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { dev } from '$app/env';
+  import { dev } from '$app/environment';
 
   export let image;
   export let title;
@@ -30,8 +30,8 @@
 {#if image}
 <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={figureLink}>
-      <img class="w-full" src="{figureImage}" alt={title} title={title}>
+    <a class="w-full bg-slate-200 inline-block p-1" href={figureLink}>
+      <img class="w-auto mx-auto" src="{figureImage}" alt={title} title={title}>
     </a>
     {#if caption}
       <figcaption class="text-center p-2">{@html caption}</figcaption>

package/components/Footer.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { session } from '$app/stores'
-    export const token = $session.token
+    import { page } from '$app/stores';
+    export const token = $page.data.token
     export let login = false;
   
     let d = new Date();

package/components/Header.svelte

@@ -32,13 +32,8 @@
 <svelte:window on:keyup="{handleEscape}" />
 
 <header class="relative bg-white">
-  <div
-    class="pointer-events-none absolute inset-0 z-30 shadow"
-    aria-hidden="true"
-  ></div>
-  <div
-    class="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8"
-  >
+  <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-30 shadow"></div>
+  <div class="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 sm:py-4 md:justify-start md:space-x-6 lg:space-x-10 lg:px-8">
     <!-- Nav Icon Linked to WWW Homepage -->
     <div class="flex-shrink-0">
       <a href="https://www.thunderheadeng.com" class="flex">
@@ -52,18 +47,14 @@
       <nav class="flex md:space-x-6 lg:space-x-10">
         <!-- Products -->
         <div id="products">
-          <button
-            type="button"
-            on:click="{() =>
-              openMenu == 'products'
-                ? (openMenu = '')
-                : (openMenu = 'products')}"
-            class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
+          <button type="button"
+            on:click={() => (openMenu == 'products')?(openMenu = ''):(openMenu = 'products')}
+            class="text-left group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded="{openMenu == 'products'}"
           >
             <span class:text-gray-900="{openMenu == 'products'}">Products</span>
             <svg
-              class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ===
+              class="ml-2 h-5 w-5 group-hover:text-gray-900 {openMenu ==
               'products'
                 ? 'rotate-180 text-gray-900'
                 : 'text-gray-400'}"
@@ -82,14 +73,14 @@
           <!-- Flyout menu -->
           {#if openMenu == 'products'}
             <div 
-              class="absolute inset-x-0 top-full z-10 transform bg-white shadow-lg"
+              class="text-left absolute inset-x-0 top-full z-10 transform bg-white shadow-lg"
               use:clickOutside
               on:outclick="{() => (openMenu = '')}"
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="mx-auto grid max-w-7xl gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8"
+              <button on:click={() => (openMenu = '')}
+                class="text-left mx-auto grid max-w-7xl gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/pyrosim/"
@@ -179,12 +170,12 @@
                     </div>
                   </div>
                 </a>
-              </div>
+              </button>
 
               <!-- Action Buttons -->
-              <div class="relative bg-gray-50">
-                <div on:click="{() => (openMenu = '')}"
-                  class="mx-auto max-w-7xl space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8"
+              <div class="relative bg-gray-50 text-left">
+                <button on:click="{() => (openMenu = '')}"
+                  class="max-w-7xl space-y-6 px-4 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-6 lg:px-8"
                 >
                   <div class="flow-root">
                     <a
@@ -254,7 +245,7 @@
                       <span class="ml-3">Contact Sales</span>
                     </a>
                   </div>
-                </div>
+                </button>
               </div>
             </div>
           {/if}
@@ -289,14 +280,14 @@
 
           {#if openMenu == 'support'}
             <div
-              class="absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
+              class="text-left absolute left-1/2 z-40 mt-3 w-screen max-w-md -translate-x-1/2 transform overflow-hidden px-2 shadow-lg ring-1 ring-black ring-opacity-5 sm:px-0"
               use:clickOutside
               on:outclick="{() => (openMenu = '')}"
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button on:click="{() => (openMenu = '')}"
+                class="text-left w-full relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://support.thunderheadeng.com/docs/"
@@ -405,9 +396,9 @@
                     </p>
                   </div>
                 </a>
-              </div>
-              <div on:click="{() => (openMenu = '')}"
-                class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
+              </button>
+              <button on:click="{() => (openMenu = '')}"
+                class="w-full space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
                   <a
@@ -455,7 +446,7 @@
                     <span class="ml-3">Contact Support</span>
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -464,8 +455,7 @@
         <div id="events" class="relative">
           <button
             type="button"
-            on:click="{() =>
-              openMenu == 'events' ? (openMenu = '') : (openMenu = 'events')}"
+            on:click="{() => openMenu == 'events' ? (openMenu = '') : (openMenu = 'events')}"
             class="group inline-flex items-center bg-white text-base font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-teci-blue-light focus:ring-offset-2"
             aria-expanded="{openMenu == 'events'}"
           >
@@ -495,8 +485,8 @@
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button on:click="{() => (openMenu = '')}"
+                class="relative w-full text-left grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/training/"
@@ -575,9 +565,9 @@
                     </p>
                   </div>
                 </a>
-              </div>
-              <div on:click="{() => (openMenu = '')}"
-                class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
+              </button>
+              <button on:click="{() => (openMenu = '')}"
+                class="w-full text-left space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8"
               >
                 <div class="flow-root">
                   <a
@@ -624,7 +614,7 @@
                     <span class="ml-3">Contact Training</span>
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -664,8 +654,8 @@
               in:slide="{{ duration: 250, easing: cubicOut }}"
               out:slide="{{ duration: 150, easing: cubicIn }}"
             >
-              <div on:click="{() => (openMenu = '')}"
-                class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
+              <button on:click="{() => (openMenu = '')}"
+                class="w-full text-left relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"
               >
                 <a
                   href="https://www.thunderheadeng.com/about/"
@@ -770,7 +760,7 @@
                     </p>
                   </div>
                 </a>
-              </div>
+              </button>
             </div>
           {/if}
         </div>
@@ -935,7 +925,7 @@
             </svg>
           </button>
         </div>
-        <div on:click="{() => (openMenu = '')}" class="mt-6 sm:mt-8">
+        <button on:click="{() => (openMenu = '')}" class="mt-6 sm:mt-8 w-full">
           <nav>
             <div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
               <a href="/" class="-m-3 flex items-center p-3 hover:bg-gray-50">
@@ -1066,9 +1056,9 @@
               </a>
             </div>
           </nav>
-        </div>
+        </button>
       </div>
-      <div on:click="{() => (openMenu = '')}" class="py-6 px-5">
+      <button on:click="{() => (openMenu = '')}" class="py-6 px-5 w-full text-left">
         <div class="grid grid-cols-2 gap-4">
           <div class="flow-root">
             <a
@@ -1202,7 +1192,7 @@
             </a>
           </div>
         </div>
-      </div>
+      </button>
     </div>
   {/if}
 </header>

package/components/MediaFeature.svelte

@@ -1,7 +1,7 @@
 <script>
 import Video from './Video.svelte'
 
-  import { dev } from '$app/env';
+  import { dev } from '$app/environment';
   export let data;
 
   let figureImage;

package/get-content.js

@@ -1,7 +1,7 @@
 // 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/env";
+import { dev } from "$app/environment";
 
 export async function getContent (content) {
   let indexData = []
@@ -11,10 +11,10 @@ export async function getContent (content) {
   // Use 'content' variable to determine files to import.
   switch (content) {
     case "news":
-      iterableContentFiles = Object.entries(import.meta.glob("/src/routes/news/*(!(*index|*news)).md"));
+      iterableContentFiles = Object.entries(import.meta.glob("/src/routes/news/*(!(+page)).md"));
       break;
     default:
-      iterableContentFiles = Object.entries(import.meta.glob("/src/routes/**/*(!(*index|*news)).md"));
+      iterableContentFiles = Object.entries(import.meta.glob("/src/routes/**/*(!(+page)).md"));
   }
 
   const allContent = await Promise.all(

package/layouts/blocks.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { browser, dev } from '$app/env';
+  import { browser, dev } from '$app/environment';
   import { getContext } from 'svelte';
 
   import CTA from '../components/CTA.svelte';

package/package.json

@@ -1,50 +1,51 @@
 {
   "name": "tecitheme",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
-    "@sveltejs/adapter-netlify": "1.0.0-next.65",
-    "@sveltejs/kit": "1.0.0-next.371",
-    "@tailwindcss/forms": "^0.5.2",
-    "@tailwindcss/typography": "^0.5.2",
+    "@sveltejs/adapter-netlify": "1.0.0-next.83",
+    "@sveltejs/kit": "1.0.0-next.532",
+    "@sveltejs/package": "^1.0.0-next.5",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.7",
     "@types/cookie": "^0.5.1",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "autoprefixer": "^10.4.7",
-    "dotenv": "^16.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "autoprefixer": "^10.4.12",
+    "dotenv": "^16.0.3",
     "encoding": "^0.1.13",
-    "eslint": "^8.17.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "html-to-text": "^8.2.0",
+    "html-to-text": "^8.2.1",
     "markdown-yaml-metadata-parser": "^3.0.0",
     "mdsvex": "^0.10.6",
-    "postcss": "^8.4.14",
-    "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.11",
+    "postcss": "^8.4.18",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "rehype-parse": "^8.0.4",
     "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "stream": "^0.0.2",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.7.2",
-    "svelte-paginate": "^0.0.1",
+    "svelte": "^3.52.0",
+    "svelte-check": "^2.9.2",
+    "svelte-paginate": "^0.1.0",
     "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.10",
-    "tailwindcss": "^3.1.3",
+    "svelte2tsx": "^0.5.20",
+    "tailwindcss": "^3.2.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3",
-    "uuid-by-string": "^3.0.7",
-    "vite": "^2.9.10",
+    "typescript": "^4.8.4",
+    "uuid-by-string": "^4.0.0",
+    "vite": "^3.2.0",
     "vite-plugin-autoimport": "^1.6.6"
   },
   "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.5.0",
-    "katex": "^0.15.6",
-    "svelte": "^3.49.0"
+    "katex": "^0.16.3",
+    "svelte": "^3.52.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -73,6 +74,7 @@
     "./get-content": "./get-content.js",
     "./layouts/blocks.svelte": "./layouts/blocks.svelte",
     "./req_utils": "./req_utils.js",
+    "./site_config.json": "./site_config.json",
     "./utils": "./utils.js",
     "./variables": "./variables.js"
   }

package/req_utils.js

@@ -1,4 +1,4 @@
-import {browser} from '$app/env'
+import {browser} from '$app/environment'
 
 export function browserGet(key) {
     if (browser) {

package/site_config.json

@@ -0,0 +1,11 @@
+{
+  "showBanner": true,
+  "bannerData":{
+    "showCTA": true,
+    "shortText": "Short text in a few words to show how it works.",
+    "longText": "Long test text that goes on and on for a while with some information about something that people should know about.",
+    "ctaText": "Take Action",
+    "ctaLink": "https://www.thunderheadeng.com",
+    "allowClose": false
+  }
+}