tecitheme 0.0.14 → 0.0.15

package/components/Figure.svelte

@@ -4,7 +4,7 @@
   export let caption;
 </script>
 
-<section class="flex justify-center not-prose">
+<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">
     <img class="w-full" src={image} alt={title} title={title}>
     {#if caption}

package/components/Modal.svelte

@@ -16,7 +16,7 @@
     }} />
   
   {#if shown}
-    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
+    <div class="z-50 fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
       <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
         <button type="button" on:click={hide} class="absolute top-0 right-0 bg-white p-1 mr-2 mt-2 inline-flex items-center justify-center text-teci-blue-light hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark">
             <span class="sr-only">Close menu</span>

package/components/NewsGrid.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { DateTime } from "luxon";
   export let data;
   export let posts;
 </script>
@@ -35,7 +36,7 @@
     {#each posts as post}
       <div>
         <p class="text-sm text-gray-500">
-          <time datetime={post.meta.date}>{post.meta.date}</time>
+          <time datetime={post.meta.date}>{DateTime.fromISO(post.meta.date).toLocaleString()}</time>
         </p>
         <a href={post.path} class="mt-2 block">
           <p class="text-xl font-semibold text-gray-900">

package/components/SidebarContent.svelte

@@ -1,8 +1,15 @@
 <script>
   import { onMount } from "svelte";
+  import { buildToC } from "../utils.js";
+  import { DateTime } from "luxon";
 
   export let data;
+  export let title;
+  export let date;
+  export let lastmod;
 
+  let formattedDate = (date != undefined ? DateTime.fromISO(date).toLocaleString() : undefined)
+  let formattedLastModDate = (lastmod != undefined ? DateTime.fromISO(lastmod).toLocaleString() : undefined)  
   let tocOpen = false;
   let tocBuilt = false;
   let w;
@@ -14,73 +21,13 @@
       tocBuilt = buildToC();
     };
   });
-
-  function buildToC() {
-    // Based on https://projectcodeed.blogspot.com/2020/04/an-automatic-table-of-contents.html
-    
-    // Get ToC div
-    let toc = document.getElementById("ToC");
-    
-    //Add a header
-    var tocHeader = document.createElement("a");
-    tocHeader.classList.add("mb-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
-    tocHeader.innerHTML = "<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_top</span>";
-    tocHeader.setAttribute("href","#top");
-    tocHeader.setAttribute("title","To Top of Page");
-    toc.appendChild(tocHeader);
-  
-    // Create a list for the ToC entries
-    let tocList = document.createElement("ul");
-  
-    // Find the primary content section
-    let content = document.getElementById("content")
-
-    // Get the h2 tags - ToC entries
-    let headers = content.getElementsByTagName("h2");
-
-    if (headers.length == 0) {
-      console.log("There are not any H2 elements in the document.");
-    } else {
-      // For each h2
-      for (let i = 0; i < headers.length; i++){
-
-        // Get Heading ID
-        let name = headers[i].id
-      
-        // list item for the entry
-        let tocListItem = document.createElement("li");
-        tocListItem.classList.add("text-teci-blue-light", "hover:text-teci-blue-dark", "text-sm", "truncate"); 
-
-        // link for the h2
-        let tocEntry = document.createElement("a");
-        tocEntry.setAttribute("href","#"+name);
-        tocEntry.innerText=headers[i].innerText;
-
-        // add link to list item list
-        tocListItem.appendChild(tocEntry);
-
-        // add list item to list
-        tocList.appendChild(tocListItem);
-      }
-      
-      // add list to toc element
-      toc.appendChild(tocList);
-
-      //Add a footer
-      //var tocFooter = document.createElement("a");
-      //tocFooter.classList.add("mt-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
-      //tocFooter.innerHTML="<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_bottom</span>";
-      //tocFooter.setAttribute("href","#bottom");
-      //tocFooter.setAttribute("title","To Bottom of Page");
-      //toc.appendChild(tocFooter);
-
-      return true;
-    }
-  }
 </script>
 
-<section bind:clientWidth={w} class="relative mx-auto flex flex-row {(data.toc || data.rightRail) ? 'md:space-x-8' : 'space-x-0'}">
+<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'}">
+    <h1>{title}</h1>
+    <p>Published: {formattedDate}{#if (formattedLastModDate != formattedDate && formattedLastModDate)}, Updated: {formattedLastModDate}{/if}</p>
     <slot />
   </div>
   <aside class="relative w-0 {(data.toc || data.rightRail) ? 'md:w-60' : 'hidden'}">

package/components/SidebarContent.svelte.d.ts

@@ -3,6 +3,9 @@
 /** @typedef {typeof __propDef.slots}  SidebarContentSlots */
 export default class SidebarContent extends SvelteComponentTyped<{
     data: any;
+    title: any;
+    date: any;
+    lastmod: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,6 +19,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         data: any;
+        title: any;
+        date: any;
+        lastmod: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ThreeColumn.svelte

@@ -30,7 +30,7 @@
 		{
 			icon: 'icon-auto_stories',
 			image: 'https://www.thunderheadeng.com/wp-content/uploads/2013/08/company_petrasim.png',
-      classes: 'inline-block bg-teci-blue-dark text-white text-4xl text-center align-bottom h-12 w-12 pt-1 px-1',
+      classes: 'bg-teci-blue-dark text-white text-4xl grid place-items-center h-12 w-12',
 			heading: 'Google Icon, No Subtitle or Text',
 			subheading: '',
 			text: '',
@@ -54,7 +54,9 @@
             {/if}
 						<div class="flex flex-row items-start space-x-4">
               {#if col.icon}
-              <Icon classes={col.classes} icon={col.icon} />
+              <div class="grid place-items-center">
+                <Icon classes={col.classes} icon={col.icon} />
+              </div>
               {/if}
 							<div class="leading-none font-medium flex flex-col">
 								<h3 class="text-2xl leading-none">{col.heading}</h3>

package/layouts/blocks.svelte

@@ -6,14 +6,19 @@
     import CTA from '../components/CTA.svelte';
     import SidebarContent from '../components/SidebarContent.svelte';
     import MediaFeature from '../components/MediaFeature.svelte';
+    import TrialForm from '../components/TrialForm.svelte';
 
     export let title
+    export let date
+    export let lastmod
     export let page_sections
     export let posts
+    export let summary
 </script>
 
 <svelte:head>
   <title>{title} | Thunderhead Engineering</title>
+  <meta name="description" content={summary}>
 </svelte:head>
 
 <article class="flex flex-col space-y-12">
@@ -29,11 +34,13 @@
   {:else if section.fieldGroup == "cta-center"}
     <CTA bind:data={section} />
   {:else if section.fieldGroup == "sidebar-content"}
-    <SidebarContent bind:data={section}>
+    <SidebarContent bind:data={section} {title} {date} {lastmod} {summary}>
       <slot/>
     </SidebarContent>
   {:else if section.fieldGroup == "media-feature"}
     <MediaFeature bind:data={section} />
+  {:else if section.fieldGroup == "trial"}
+    <TrialForm />
   {:else if section.fieldGroup == "content"}
     <div class="content prose"><slot/></div>
   {/if}

package/layouts/blocks.svelte.d.ts

@@ -3,8 +3,11 @@
 /** @typedef {typeof __propDef.slots}  BlocksSlots */
 export default class Blocks extends SvelteComponentTyped<{
     title: any;
+    date: any;
+    lastmod: any;
     page_sections: any;
     posts: any;
+    summary: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,8 +21,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title: any;
+        date: any;
+        lastmod: any;
         page_sections: any;
         posts: any;
+        summary: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "svelte": true,
   "devDependencies": {
     "@jsdevtools/rehype-toc": "^3.0.2",
@@ -18,6 +18,7 @@
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.4.0",
+    "luxon": "^2.3.1",
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
@@ -35,7 +36,8 @@
     "three": "^0.137.5",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "vite": "^2.8.3"
+    "vite": "^2.8.3",
+    "vite-plugin-autoimport": "^1.4.3"
   },
   "type": "module",
   "dependencies": {
@@ -64,7 +66,6 @@
     "./components/TrialForm.svelte": "./components/TrialForm.svelte",
     "./components/YT.svelte": "./components/YT.svelte",
     "./layouts/blocks.svelte": "./layouts/blocks.svelte",
-    "./layouts/news.svelte": "./layouts/news.svelte",
     "./req_utils": "./req_utils.js",
     "./utils": "./utils.js",
     "./variables": "./variables.js"

package/utils.d.ts

@@ -1,3 +1,4 @@
 export function scrollTo(anchor: any): void;
 export function validateEmail(email: any): boolean;
+export function buildToC(): boolean;
 export function slugFromPath(path: any): any;

package/utils.js

@@ -9,4 +9,67 @@ export function validateEmail(email) {
     return re.test(String(email).toLowerCase());
 }
 
-export const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
+export const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;
+
+export function buildToC() {
+  // Based on https://projectcodeed.blogspot.com/2020/04/an-automatic-table-of-contents.html
+  
+  // Get ToC div
+  let toc = document.getElementById("ToC");
+  
+  //Add a header
+  var tocHeader = document.createElement("a");
+  tocHeader.classList.add("mb-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
+  tocHeader.innerHTML = "<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_top</span>";
+  tocHeader.setAttribute("href","#top");
+  tocHeader.setAttribute("title","To Top of Page");
+  toc.appendChild(tocHeader);
+
+  // Create a list for the ToC entries
+  let tocList = document.createElement("ul");
+
+  // Find the primary content section
+  let content = document.getElementById("content")
+
+  // Get the h2 tags - ToC entries
+  let headers = content.getElementsByTagName("h2");
+
+  if (headers.length == 0) {
+    console.log("There are not any H2 elements in the document.");
+  } else {
+    // For each h2
+    for (let i = 0; i < headers.length; i++){
+
+      // Get Heading ID
+      let name = headers[i].id
+    
+      // list item for the entry
+      let tocListItem = document.createElement("li");
+      tocListItem.classList.add("text-teci-blue-light", "hover:text-teci-blue-dark", "text-sm", "truncate"); 
+
+      // link for the h2
+      let tocEntry = document.createElement("a");
+      tocEntry.setAttribute("href","#"+name);
+      tocEntry.innerText=headers[i].innerText;
+
+      // add link to list item list
+      tocListItem.appendChild(tocEntry);
+
+      // add list item to list
+      tocList.appendChild(tocListItem);
+    }
+    
+    // add list to toc element
+    toc.appendChild(tocList);
+
+    //Add a footer
+    //var tocFooter = document.createElement("a");
+    //tocFooter.classList.add("mt-2", "inline-block", "w-auto", "text-center", "bg-gray-50", "hover:bg-gray-100", "py-1", "px-2", "border")
+    //tocFooter.innerHTML="<span class='material-icons-outlined text-sm font-bold text-gray-500 align-text-bottom'>vertical_align_bottom</span>";
+    //tocFooter.setAttribute("href","#bottom");
+    //tocFooter.setAttribute("title","To Bottom of Page");
+    //toc.appendChild(tocFooter);
+
+    return true;
+  }
+}

package/layouts/news.svelte

@@ -1,14 +0,0 @@
-<script>
-    export let title;
-    export let date;
-</script>
-
-<svelte:head>
-  <title>{title} | Thunderhead Engineering</title>
-</svelte:head>
-
-<div class="prose lg:prose-lg">
-  <h1>{title}</h1>
-  <p>Published on {date}</p>
-  <slot/>
-</div>

package/layouts/news.svelte.d.ts

@@ -1,29 +0,0 @@
-/** @typedef {typeof __propDef.props}  NewsProps */
-/** @typedef {typeof __propDef.events}  NewsEvents */
-/** @typedef {typeof __propDef.slots}  NewsSlots */
-export default class News extends SvelteComponentTyped<{
-    title: any;
-    date: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type NewsProps = typeof __propDef.props;
-export type NewsEvents = typeof __propDef.events;
-export type NewsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        title: any;
-        date: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};