tecitheme 0.0.5 → 0.0.6

package/components/Figure.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let image;
+  export let title;
+  export let caption;
+</script>
+
+<figure class="not-prose shadow-lg border border-slate-100 p-2">
+  <img src={image} alt={title} title={title}>
+  {#if caption}
+    <figcaption class="text-center p-2">{@html caption}</figcaption>
+  {/if}
+</figure>

package/components/Figure.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FigureProps */
+/** @typedef {typeof __propDef.events}  FigureEvents */
+/** @typedef {typeof __propDef.slots}  FigureSlots */
+export default class Figure extends SvelteComponentTyped<{
+    image: any;
+    title: any;
+    caption: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FigureProps = typeof __propDef.props;
+export type FigureEvents = typeof __propDef.events;
+export type FigureSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        image: any;
+        title: any;
+        caption: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Math.svelte

@@ -0,0 +1,19 @@
+<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/components/Math.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MathProps */
+/** @typedef {typeof __propDef.events}  MathEvents */
+/** @typedef {typeof __propDef.slots}  MathSlots */
+export default class Math extends SvelteComponentTyped<{
+    math: any;
+    displayMode?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MathProps = typeof __propDef.props;
+export type MathEvents = typeof __propDef.events;
+export type MathSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        math: any;
+        displayMode?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/NewsGrid.svelte

@@ -0,0 +1,67 @@
+<script>
+  export let data;
+  export let posts;
+</script>
+
+<div class="relative pb-12 w-full mx-auto divide-y-2 divide-gray-200">
+  <div>
+      <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
+          {data.title}
+      </h2>
+      <div
+          class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:gap-5 lg:items-center"
+      >
+          <p class="text-xl text-gray-500">{data.subtitle}</p>
+          <form class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
+              <div>
+                  <label for="email-address" class="sr-only"
+                      >Email address</label
+                  >
+                  <input
+                      id="email-address"
+                      name="email-address"
+                      type="email"
+                      autocomplete="email"
+                      required
+                      class="appearance-none w-full px-4 py-2 border border-gray-300 text-base rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 lg:max-w-xs"
+                      placeholder="Enter your email"
+                  />
+              </div>
+              <div
+                  class="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex"
+              >
+                  <button
+                      type="button"
+                      class="w-full bg-indigo-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex"
+                      >Notify me</button
+                  >
+              </div>
+          </form>
+      </div>
+  </div>
+  <div class="mt-6 pt-10 grid gap-16 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
+      {#each posts as post}
+          <div>
+              <p class="text-sm text-gray-500">
+                  <time datetime="{post.meta.date}">{post.meta.date}</time>
+              </p>
+              <a href={post.path} class="mt-2 block">
+                  <p class="text-xl font-semibold text-gray-900">
+                      {post.meta.title}
+                  </p>
+                  <p class="mt-3 text-base text-gray-500">
+                      {post.meta.summary}
+                  </p>
+              </a>
+              <div class="mt-3">
+                  <a
+                      href="{post.path}"
+                      class="text-base font-semibold text-indigo-600 hover:text-indigo-500"
+                  >
+                      Read full story
+                  </a>
+              </div>
+          </div>
+      {/each}
+  </div>
+</div>

package/components/NewsGrid.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  NewsGridProps */
+/** @typedef {typeof __propDef.events}  NewsGridEvents */
+/** @typedef {typeof __propDef.slots}  NewsGridSlots */
+export default class NewsGrid extends SvelteComponentTyped<{
+    data: any;
+    posts: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NewsGridProps = typeof __propDef.props;
+export type NewsGridEvents = typeof __propDef.events;
+export type NewsGridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: any;
+        posts: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/SectionHeaderCentered.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<div class="text-center">
+<div class="text-center pb-12">
 {#if data.toptext}
     <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">
     {data.toptext}

package/components/ThreeColumn.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <!-- This example requires Tailwind CSS v2.0+ -->
-<div class="py-12 bg-white mx-auto">
+<div class="pb-12 bg-white mx-auto">
 	<h2 class="sr-only">{title}</h2>
 	<dl class="space-y-10 sm:grid sm:grid-cols-2 sm:gap-8 sm:space-y-0 lg:grid-cols-3">
 		{#each data as col}

package/components/TrialForm.svelte

@@ -62,7 +62,7 @@ const submitForm = async () => {
 <div class="prose">
 	<h2>30-day Trial Request</h2>
 </div>
-<div class="mt-10 sm:mt-0">
+<div class="mt-10 sm:mt-0 pb-12">
 	<div class="md:grid md:grid-cols-3 md:gap-6 mt-8">
 		<div class="md:col-span-1">
 			<div class=" prose px-4 sm:px-0">

package/components/YT.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let v
+</script>
+
+<iframe
+  class="w-full aspect-video border border-slate-100 shadow-lg p-2"
+  src="https://www.youtube-nocookie.com/embed/{v}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+/>

package/components/YT.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  YtProps */
+/** @typedef {typeof __propDef.events}  YtEvents */
+/** @typedef {typeof __propDef.slots}  YtSlots */
+export default class Yt extends SvelteComponentTyped<{
+    v: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type YtProps = typeof __propDef.props;
+export type YtEvents = typeof __propDef.events;
+export type YtSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        v: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/layouts/blocks.svelte

@@ -0,0 +1,25 @@
+<script>
+    import SectionHeaderCentered from 'tecitheme/components/SectionHeaderCentered.svelte';
+    import ThreeColumn from 'tecitheme/components/ThreeColumn.svelte';
+    import NewsGrid from 'tecitheme/components/NewsGrid.svelte';
+
+    export let title
+    export let page_sections
+    export let posts
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
+{#each page_sections as section}
+  {#if section.block == "heading-centered"}
+    <SectionHeaderCentered bind:data={section} />
+  {:else if section.block == "three-column"}
+    <ThreeColumn bind:data={section.cards} />
+  {:else if section.block == "news-grid"}
+    <NewsGrid bind:data={section} bind:posts={posts} />
+  {:else if section.block == "content"}
+    <div class="content prose"><slot/></div>
+  {/if}
+{/each}

package/layouts/blocks.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  BlocksProps */
+/** @typedef {typeof __propDef.events}  BlocksEvents */
+/** @typedef {typeof __propDef.slots}  BlocksSlots */
+export default class Blocks extends SvelteComponentTyped<{
+    title: any;
+    page_sections: any;
+    posts: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BlocksProps = typeof __propDef.props;
+export type BlocksEvents = typeof __propDef.events;
+export type BlocksSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        page_sections: any;
+        posts: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/layouts/news.svelte

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,29 @@
+/** @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 {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "svelte": true,
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
@@ -20,7 +20,7 @@
     "mdsvex": "^0.10.5",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.6.0",
+    "prettier-plugin-tailwindcss": "^0.1.5",
     "stream": "^0.0.2",
     "svelte": "^3.46.3",
     "svelte-check": "^2.4.2",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.4.1",
+    "katex": "^0.15.2",
     "ultra_cart_rest_api_v2": "^3.6.36"
   },
   "exports": {
@@ -44,14 +45,20 @@
     "./assets/TECi_logo.svelte": "./assets/TECi_logo.svelte",
     "./components/Banner.svelte": "./components/Banner.svelte",
     "./components/CountrySelector.svelte": "./components/CountrySelector.svelte",
+    "./components/Figure.svelte": "./components/Figure.svelte",
     "./components/Footer.svelte": "./components/Footer.svelte",
     "./components/Header.svelte": "./components/Header.svelte",
     "./components/Icon.svelte": "./components/Icon.svelte",
+    "./components/Math.svelte": "./components/Math.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
+    "./components/NewsGrid.svelte": "./components/NewsGrid.svelte",
     "./components/SectionHeaderCentered.svelte": "./components/SectionHeaderCentered.svelte",
     "./components/ThreeColumn.svelte": "./components/ThreeColumn.svelte",
     "./components/TrialForm.svelte": "./components/TrialForm.svelte",
+    "./components/YT.svelte": "./components/YT.svelte",
     "./demodata": "./demodata.js",
+    "./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,2 +1,3 @@
 export function scrollTo(anchor: any): void;
 export function validateEmail(email: any): boolean;
+export function slugFromPath(path: any): any;

package/utils.js

@@ -7,4 +7,6 @@ export function scrollTo(anchor) {
 export function validateEmail(email) {
     const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(String(email).toLowerCase());
-}
+}
+
+export const slugFromPath = (path) => path.match(/([\w-]+)\.(svelte\.md|md|svx)/i)?.[1] ?? null;