tecitheme 0.13.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BentoGrid.svelte +75 -0
- package/dist/components/BentoGrid.svelte.d.ts +25 -0
- package/dist/components/CTATwoColumn.svelte +55 -20
- package/dist/components/FeatureAlternatingWithTestimonial.svelte +13 -28
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/layouts/blocks.svelte +2 -2
- package/dist/utils.d.ts +54 -0
- package/dist/utils.js +184 -0
- package/package.json +2 -1
- package/dist/components/BentoBox.svelte +0 -140
- package/dist/components/BentoBox.svelte.d.ts +0 -25
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles, getGridItemSizeStyles, getGridSizeStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
|
|
3
|
+
import { onMount } from "svelte";
|
|
4
|
+
import { cubicInOut } from "svelte/easing";
|
|
5
|
+
import { writable } from "svelte/store";
|
|
6
|
+
import { fly } from "svelte/transition";
|
|
7
|
+
import Button from "./Button.svelte";
|
|
8
|
+
|
|
9
|
+
export let data = {};
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
name,
|
|
13
|
+
heading,
|
|
14
|
+
eyebrowText,
|
|
15
|
+
color,
|
|
16
|
+
columns,
|
|
17
|
+
rows,
|
|
18
|
+
button,
|
|
19
|
+
items,
|
|
20
|
+
animateOnScroll = true
|
|
21
|
+
} = data;
|
|
22
|
+
|
|
23
|
+
let id = makeIdString(name);
|
|
24
|
+
|
|
25
|
+
// Detect if the heading is visible, then trigger animations
|
|
26
|
+
let scrollTargetVisible = writable(false);
|
|
27
|
+
onMount(() => {
|
|
28
|
+
triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
|
|
29
|
+
})
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<div {id} class="py-8 sm:py-12">
|
|
33
|
+
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
|
34
|
+
|
|
35
|
+
<!-- Eyebrow Text -->
|
|
36
|
+
<h2 class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText}</h2>
|
|
37
|
+
|
|
38
|
+
<!-- Heading -->
|
|
39
|
+
<a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><p>{heading}</p></a>
|
|
40
|
+
|
|
41
|
+
<!-- Grid -->
|
|
42
|
+
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 {getGridSizeStyles(columns, rows)}">
|
|
43
|
+
|
|
44
|
+
{#each items as item, index}
|
|
45
|
+
{#if $scrollTargetVisible}
|
|
46
|
+
<div class="relative {getGridItemSizeStyles(item.width, item.height)}"
|
|
47
|
+
in:fly={{ delay: index*100, duration: 1500, easing: cubicInOut, x:'100%'}}
|
|
48
|
+
>
|
|
49
|
+
<a class="relative flex h-full flex-col overflow-hidden shadow ring-1 ring-black/5 {item.url ? "hover:scale-105 transition ease-in-out delay-75" : ""}" href={item.url} rel="external">
|
|
50
|
+
|
|
51
|
+
<!-- Image -->
|
|
52
|
+
<img class="h-80 object-cover object-left mask-image-b mask-image-start-90 mask-image-end-100" src={getTeciImageURL(item.image.url)} alt={item.image.alt}>
|
|
53
|
+
|
|
54
|
+
<!-- Text -->
|
|
55
|
+
<div class="p-10 pt-4">
|
|
56
|
+
<h3 class="text-sm/4 font-semibold {getColorStyles("text", color)}">{item.eyebrowText}</h3>
|
|
57
|
+
<p class="mt-2 text-lg font-semibold tracking-tight text-gray-900">{item.heading}</p>
|
|
58
|
+
<p class="mt-2 text-sm">{item.text}</p>
|
|
59
|
+
</div>
|
|
60
|
+
</a>
|
|
61
|
+
</div>
|
|
62
|
+
{:else}
|
|
63
|
+
<div class="{getGridItemSizeStyles(item.width, item.height)} h-32"></div>
|
|
64
|
+
{/if}
|
|
65
|
+
{/each}
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Button -->
|
|
69
|
+
{#if button}
|
|
70
|
+
<div class="mt-10">
|
|
71
|
+
<Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
|
|
72
|
+
</div>
|
|
73
|
+
{/if}
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} BentoGridProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} BentoGridEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} BentoGridSlots */
|
|
4
|
+
export default class BentoGrid extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type BentoGridProps = typeof __propDef.props;
|
|
11
|
+
export type BentoGridEvents = typeof __propDef.events;
|
|
12
|
+
export type BentoGridSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data?: {};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
exports?: {};
|
|
23
|
+
bindings?: string;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -1,52 +1,87 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles } from "../utils";
|
|
2
|
+
import { getColorStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
|
|
3
|
+
import { writable } from "svelte/store";
|
|
3
4
|
import Button from "./Button.svelte";
|
|
4
5
|
import Icon from "./Icon.svelte";
|
|
6
|
+
import { onMount } from "svelte";
|
|
7
|
+
import { fade, fly } from "svelte/transition";
|
|
8
|
+
import { cubicInOut } from "svelte/easing";
|
|
5
9
|
|
|
6
10
|
export let data = {};
|
|
7
11
|
|
|
8
12
|
let {
|
|
13
|
+
name,
|
|
9
14
|
heading,
|
|
10
15
|
text,
|
|
11
16
|
bullets,
|
|
12
17
|
color,
|
|
13
18
|
image,
|
|
14
|
-
button
|
|
19
|
+
button,
|
|
20
|
+
animateOnScroll = true
|
|
15
21
|
} = data;
|
|
16
22
|
|
|
17
|
-
let
|
|
23
|
+
let id = makeIdString(name);
|
|
24
|
+
|
|
25
|
+
// Detect if the heading is visible, then trigger animations
|
|
26
|
+
let scrollTargetVisible = writable(false);
|
|
27
|
+
onMount(() => {
|
|
28
|
+
triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
|
|
29
|
+
})
|
|
30
|
+
|
|
18
31
|
</script>
|
|
19
32
|
|
|
20
|
-
<div class="{getColorStyles("background", color)} py-16">
|
|
33
|
+
<div {id} class="{getColorStyles("background", color)} py-16">
|
|
21
34
|
<div class="relative isolate">
|
|
22
35
|
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
23
36
|
<div class="mx-auto flex max-w-2xl flex-col gap-16 px-6 py-16 sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
|
|
24
37
|
|
|
25
38
|
<!-- Image -->
|
|
26
|
-
<img
|
|
39
|
+
<img
|
|
40
|
+
class="h-96 w-full flex-none object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm"
|
|
41
|
+
src={getTeciImageURL(image.url)}
|
|
42
|
+
alt={image.alt}
|
|
43
|
+
>
|
|
27
44
|
|
|
28
45
|
<div class="w-full flex-auto">
|
|
29
46
|
|
|
30
47
|
<!-- Heading -->
|
|
31
|
-
<
|
|
48
|
+
<a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">{heading}</a>
|
|
32
49
|
|
|
33
|
-
|
|
34
|
-
|
|
50
|
+
{#if $scrollTargetVisible}
|
|
51
|
+
<!-- Text -->
|
|
52
|
+
<p
|
|
53
|
+
class="mt-6 text-lg/8 text-pretty"
|
|
54
|
+
in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
|
|
55
|
+
>
|
|
56
|
+
{text}
|
|
57
|
+
</p>
|
|
35
58
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
<!-- Bullet Items -->
|
|
60
|
+
<ul
|
|
61
|
+
role="list"
|
|
62
|
+
class="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 sm:grid-cols-2"
|
|
63
|
+
in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
|
|
64
|
+
>
|
|
65
|
+
{#each bullets as bullet}
|
|
66
|
+
<li class="flex gap-x-4">
|
|
67
|
+
<Icon icon="{bullet.icon ? bullet.icon : 'icon-task_alt'}" classes="text-xl"/>
|
|
68
|
+
{bullet.text}
|
|
69
|
+
</li>
|
|
70
|
+
{/each}
|
|
71
|
+
</ul>
|
|
72
|
+
{:else}
|
|
73
|
+
<div class="h-32"></div>
|
|
74
|
+
{/if}
|
|
45
75
|
|
|
46
76
|
<!-- Button -->
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
77
|
+
{#if $scrollTargetVisible}
|
|
78
|
+
<div
|
|
79
|
+
class="mt-10 flex"
|
|
80
|
+
in:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x:"100%"}}
|
|
81
|
+
>
|
|
82
|
+
<Button url={button.url} text="{button.text} →" color={button.color} justify={button.justify} fullwidth={button.fullWidth}/>
|
|
83
|
+
</div>
|
|
84
|
+
{/if}
|
|
50
85
|
</div>
|
|
51
86
|
|
|
52
87
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { getColorStyles, makeIdString } from "../utils";
|
|
2
|
+
import { getColorStyles, makeIdString, triggerWhenVisible } from "../utils";
|
|
3
3
|
import { onMount } from "svelte";
|
|
4
4
|
import { fly, fade } from "svelte/transition";
|
|
5
5
|
import Button from "./Button.svelte";
|
|
@@ -18,36 +18,22 @@
|
|
|
18
18
|
button, //Follows format of Button.svelte
|
|
19
19
|
icon,
|
|
20
20
|
testimonial,
|
|
21
|
-
textPosition
|
|
21
|
+
textPosition,
|
|
22
|
+
animateOnScroll = true
|
|
22
23
|
} = data;
|
|
23
24
|
|
|
24
25
|
// Initialize Text Position if left undefined
|
|
25
|
-
textPosition = textPosition ? textPosition : "left"
|
|
26
|
+
textPosition = textPosition ? textPosition : "left"
|
|
26
27
|
|
|
27
28
|
// Detect if the heading is visible, then trigger animations
|
|
28
29
|
let scrollTargetVisible = writable(false);
|
|
29
30
|
onMount(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
function updateVisibility() {
|
|
33
|
-
var rect = scrollTarget.getBoundingClientRect();
|
|
34
|
-
|
|
35
|
-
let topVisible = (rect.top >= 0) && (rect.top <= window.innerHeight);
|
|
36
|
-
let bottomVisible = rect.bottom <= window.innerHeight
|
|
37
|
-
|
|
38
|
-
console.log()
|
|
39
|
-
scrollTargetVisible.update(_ => (topVisible) || (bottomVisible));
|
|
40
|
-
}
|
|
41
|
-
updateVisibility();
|
|
42
|
-
|
|
43
|
-
addEventListener("scroll", (event) => {
|
|
44
|
-
updateVisibility()
|
|
45
|
-
})
|
|
31
|
+
triggerWhenVisible(scrollTargetVisible, id+"text", !animateOnScroll)
|
|
46
32
|
})
|
|
47
33
|
|
|
48
34
|
</script>
|
|
49
35
|
|
|
50
|
-
<div id={id} class="relative overflow-hidden
|
|
36
|
+
<div id={id} class="relative overflow-hidden py-8 lg:py-12">
|
|
51
37
|
|
|
52
38
|
<div class="relative">
|
|
53
39
|
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
|
|
@@ -81,7 +67,7 @@
|
|
|
81
67
|
in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
|
|
82
68
|
out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
|
|
83
69
|
>
|
|
84
|
-
<
|
|
70
|
+
<a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900">{heading}</a>
|
|
85
71
|
<p class="mt-4 text-lg text-gray-500">{text}</p>
|
|
86
72
|
<div class="mt-6">
|
|
87
73
|
<Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
|
|
@@ -121,13 +107,6 @@
|
|
|
121
107
|
<!-- Image -->
|
|
122
108
|
<div id={id + "image"} class="relative mt-12 sm:mt-16 lg:mt-0 {textPosition == "left" ? "" : "lg:col-start-1"}"
|
|
123
109
|
>
|
|
124
|
-
{#if !$scrollTargetVisible}
|
|
125
|
-
<div
|
|
126
|
-
out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '+100%' }}
|
|
127
|
-
class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
|
|
128
|
-
>
|
|
129
|
-
</div>
|
|
130
|
-
{/if}
|
|
131
110
|
{#if $scrollTargetVisible}
|
|
132
111
|
<div
|
|
133
112
|
class="{textPosition == "left" ? "-mr-48 pl-6 md:-mr-16" : "-ml-48 pr-6 md:-ml-16"} lg:relative lg:m-0 lg:h-full lg:px-0"
|
|
@@ -136,6 +115,12 @@
|
|
|
136
115
|
>
|
|
137
116
|
<img class="w-full shadow-xl ring-1 ring-black/5 lg:absolute {textPosition == "left" ? "lg:left-0" : "right-0"} lg:h-full lg:w-auto lg:max-w-none" src="https://files.thunderheadeng.com/www/images/{image.url}?fmt=auto" alt={image.alt}>
|
|
138
117
|
</div>
|
|
118
|
+
{:else}
|
|
119
|
+
<div
|
|
120
|
+
out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
|
|
121
|
+
class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
|
|
122
|
+
>
|
|
123
|
+
</div>
|
|
139
124
|
{/if}
|
|
140
125
|
</div>
|
|
141
126
|
</div>
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export * from "./utils.js";
|
|
|
2
2
|
export { default as getContent } from "./get-content.js";
|
|
3
3
|
export { default as Accordion } from "./components/Accordion.svelte";
|
|
4
4
|
export { default as Banner } from "./components/Banner.svelte";
|
|
5
|
-
export { default as
|
|
5
|
+
export { default as BentoGrid } from "./components/BentoGrid.svelte";
|
|
6
6
|
export { default as Button } from "./components/Button.svelte";
|
|
7
7
|
export { default as Card } from "./components/Card.svelte";
|
|
8
8
|
export { default as Carousel } from "./components/Carousel.svelte";
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ export { default as getContent } from './get-content.js';
|
|
|
5
5
|
// Components
|
|
6
6
|
export { default as Accordion } from './components/Accordion.svelte';
|
|
7
7
|
export { default as Banner } from './components/Banner.svelte';
|
|
8
|
-
export { default as
|
|
8
|
+
export { default as BentoGrid } from './components/BentoGrid.svelte';
|
|
9
9
|
export { default as Button } from './components/Button.svelte';
|
|
10
10
|
export { default as Card } from './components/Card.svelte';
|
|
11
11
|
export { default as Carousel } from './components/Carousel.svelte';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Accordion from "../components/Accordion.svelte";
|
|
3
|
-
import
|
|
3
|
+
import BentoGrid from "../components/BentoGrid.svelte";
|
|
4
4
|
import CTA from "../components/CTA.svelte";
|
|
5
5
|
import CtaTwoColumn from "../components/CTATwoColumn.svelte";
|
|
6
6
|
import HeadingCentered from "../components/HeadingCentered.svelte";
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
let blocks = [
|
|
30
30
|
{ ref: "accordion", component: Accordion },
|
|
31
|
-
{ ref: "bento", component:
|
|
31
|
+
{ ref: "bento-grid", component: BentoGrid },
|
|
32
32
|
{ ref: "cta", component: CTA },
|
|
33
33
|
{ ref: "cta-two-column", component: CtaTwoColumn },
|
|
34
34
|
{ ref: "heading-centered", component: HeadingCentered },
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,6 +1,60 @@
|
|
|
1
1
|
export function scrollTo(anchor: any): void;
|
|
2
2
|
export function getColorStyles(type: any, color: any): string;
|
|
3
|
+
/**
|
|
4
|
+
* Utility function to get the column span style for defining width in a grid. These styles only apply as screen size lg+
|
|
5
|
+
* @param {*} span The number of rows to span
|
|
6
|
+
* @returns String containing the proper style class
|
|
7
|
+
*/
|
|
8
|
+
export function getGridItemColumnSpanStyle(span: any): "lg:col-span-1" | "lg:col-span-2" | "lg:col-span-3" | "lg:col-span-4" | "lg:col-span-5" | "lg:col-span-6" | "lg:col-span-7" | "lg:col-span-8" | "lg:col-span-9";
|
|
9
|
+
/**
|
|
10
|
+
* Utility function to get the Row span style for defining height in a grid. These styles only apply at screen size lg+
|
|
11
|
+
* @param {*} span The number of rows to span
|
|
12
|
+
* @returns String containing the proper style class
|
|
13
|
+
*/
|
|
14
|
+
export function getGridItemRowSpanStyle(span: any): "lg:row-span-1" | "lg:row-span-2" | "lg:row-span-3" | "lg:row-span-4" | "lg:row-span-5" | "lg:row-span-6" | "lg:row-span-7" | "lg:row-span-8" | "lg:row-span-9";
|
|
15
|
+
/**
|
|
16
|
+
* Utility function to get the Column and Row span styles for defining size in a grid. These styles only apply at screen size lg+
|
|
17
|
+
* @param {*} width The number of columns to span
|
|
18
|
+
* @param {*} height The number of rows to span
|
|
19
|
+
* @returns String containing the proper style classes
|
|
20
|
+
*/
|
|
21
|
+
export function getGridItemSizeStyles(width: any, height: any): string;
|
|
22
|
+
/**
|
|
23
|
+
* Utility function to get the Grid Column Number style for defining the number of columns in a grid. These styles only apply at screen size lg+
|
|
24
|
+
* @param {*} num The number of columns to set for the grid
|
|
25
|
+
* @returns String containing the proper style class
|
|
26
|
+
*/
|
|
27
|
+
export function getGridColumnSizeStyle(num: any): "lg:grid-cols-1" | "lg:grid-cols-2" | "lg:grid-cols-3" | "lg:grid-cols-4" | "lg:grid-cols-5" | "lg:grid-cols-6" | "lg:grid-cols-7" | "lg:grid-cols-8" | "lg:grid-cols-9";
|
|
28
|
+
/**
|
|
29
|
+
* Utility function to get the Grid Row Number style for defining the number of rows in a grid. These styles only apply at screen size lg+
|
|
30
|
+
* @param {*} num The number of rows to set for the grid
|
|
31
|
+
* @returns String containing the proper style class
|
|
32
|
+
*/
|
|
33
|
+
export function getGridRowSizeStyle(num: any): "lg:grid-rows-1" | "lg:grid-rows-2" | "lg:grid-rows-3" | "lg:grid-rows-4" | "lg:grid-rows-5" | "lg:grid-rows-6" | "lg:grid-rows-7" | "lg:grid-rows-8" | "lg:grid-rows-9";
|
|
34
|
+
/**
|
|
35
|
+
* Utility function to get the Grid Size styles for defining size of a grid.
|
|
36
|
+
* @param {*} columns The number of columns to add to the grid
|
|
37
|
+
* @param {*} rows The number of rows to add to the grid
|
|
38
|
+
* @returns String containing the proper style classes
|
|
39
|
+
*/
|
|
40
|
+
export function getGridSizeStyles(columns: any, rows: any): string;
|
|
3
41
|
export function validateEmail(email: any): boolean;
|
|
4
42
|
export function slugFromPath(path: any): void;
|
|
5
43
|
export function buildToC(): boolean;
|
|
6
44
|
export function makeIdString(text: any): string;
|
|
45
|
+
/**
|
|
46
|
+
* Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
|
|
47
|
+
* @param {*} imageSrc The image source string
|
|
48
|
+
* @param {*} site ('www' or 'support') TECi image folder to pull from
|
|
49
|
+
*/
|
|
50
|
+
export function getTeciImageURL(imageSrc: any, site?: any): any;
|
|
51
|
+
/**
|
|
52
|
+
* Convenience function that sets the state of a Svelte Store to true when an element is visible on the screen. Useful for triggering animations.
|
|
53
|
+
*
|
|
54
|
+
* This state change will happen whenever the HTMLElement defined by elementId becomes visible by entering the bottom of the screen.
|
|
55
|
+
*
|
|
56
|
+
* @param {*} store The Svelte Store whose state should change
|
|
57
|
+
* @param {*} elementId The DOM id of the element whose visibility should trigger the state change. This element should have a specified height at all times, otherwise this state my change at unexpected times.
|
|
58
|
+
* @param {*} latch If true, the state will always be set to true after the page loads
|
|
59
|
+
*/
|
|
60
|
+
export function triggerWhenVisible(store: any, elementId: any, latch?: any): void;
|
package/dist/utils.js
CHANGED
|
@@ -206,6 +206,154 @@ export function getColorStyles(type, color){
|
|
|
206
206
|
return classes;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
|
+
/**
|
|
210
|
+
* Utility function to get the column span style for defining width in a grid. These styles only apply as screen size lg+
|
|
211
|
+
* @param {*} span The number of rows to span
|
|
212
|
+
* @returns String containing the proper style class
|
|
213
|
+
*/
|
|
214
|
+
export function getGridItemColumnSpanStyle(span) {
|
|
215
|
+
switch(span) {
|
|
216
|
+
case 1:
|
|
217
|
+
return "lg:col-span-1";
|
|
218
|
+
case 2:
|
|
219
|
+
return "lg:col-span-2";
|
|
220
|
+
case 3:
|
|
221
|
+
return "lg:col-span-3";
|
|
222
|
+
case 4:
|
|
223
|
+
return "lg:col-span-4";
|
|
224
|
+
case 5:
|
|
225
|
+
return "lg:col-span-5";
|
|
226
|
+
case 6:
|
|
227
|
+
return "lg:col-span-6";
|
|
228
|
+
case 7:
|
|
229
|
+
return "lg:col-span-7";
|
|
230
|
+
case 8:
|
|
231
|
+
return "lg:col-span-8";
|
|
232
|
+
case 9:
|
|
233
|
+
return "lg:col-span-9";
|
|
234
|
+
case undefined:
|
|
235
|
+
return "lg:col-span-1";
|
|
236
|
+
default:
|
|
237
|
+
return "lg:col-span-1";
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Utility function to get the Row span style for defining height in a grid. These styles only apply at screen size lg+
|
|
243
|
+
* @param {*} span The number of rows to span
|
|
244
|
+
* @returns String containing the proper style class
|
|
245
|
+
*/
|
|
246
|
+
export function getGridItemRowSpanStyle(span) {
|
|
247
|
+
switch(span) {
|
|
248
|
+
case 1:
|
|
249
|
+
return "lg:row-span-1";
|
|
250
|
+
case 2:
|
|
251
|
+
return "lg:row-span-2";
|
|
252
|
+
case 3:
|
|
253
|
+
return "lg:row-span-3";
|
|
254
|
+
case 4:
|
|
255
|
+
return "lg:row-span-4";
|
|
256
|
+
case 5:
|
|
257
|
+
return "lg:row-span-5";
|
|
258
|
+
case 6:
|
|
259
|
+
return "lg:row-span-6";
|
|
260
|
+
case 7:
|
|
261
|
+
return "lg:row-span-7";
|
|
262
|
+
case 8:
|
|
263
|
+
return "lg:row-span-8";
|
|
264
|
+
case 9:
|
|
265
|
+
return "lg:row-span-9";
|
|
266
|
+
case undefined:
|
|
267
|
+
return "lg:row-span-1";
|
|
268
|
+
default:
|
|
269
|
+
return "lg:row-span-1";
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* Utility function to get the Column and Row span styles for defining size in a grid. These styles only apply at screen size lg+
|
|
275
|
+
* @param {*} width The number of columns to span
|
|
276
|
+
* @param {*} height The number of rows to span
|
|
277
|
+
* @returns String containing the proper style classes
|
|
278
|
+
*/
|
|
279
|
+
export function getGridItemSizeStyles(width, height) {
|
|
280
|
+
return `${getGridItemColumnSpanStyle(width)} ${getGridItemRowSpanStyle(height)}`
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Utility function to get the Grid Column Number style for defining the number of columns in a grid. These styles only apply at screen size lg+
|
|
285
|
+
* @param {*} num The number of columns to set for the grid
|
|
286
|
+
* @returns String containing the proper style class
|
|
287
|
+
*/
|
|
288
|
+
export function getGridColumnSizeStyle(num) {
|
|
289
|
+
switch(num) {
|
|
290
|
+
case 1:
|
|
291
|
+
return "lg:grid-cols-1";
|
|
292
|
+
case 2:
|
|
293
|
+
return "lg:grid-cols-2";
|
|
294
|
+
case 3:
|
|
295
|
+
return "lg:grid-cols-3";
|
|
296
|
+
case 4:
|
|
297
|
+
return "lg:grid-cols-4";
|
|
298
|
+
case 5:
|
|
299
|
+
return "lg:grid-cols-5";
|
|
300
|
+
case 6:
|
|
301
|
+
return "lg:grid-cols-6";
|
|
302
|
+
case 7:
|
|
303
|
+
return "lg:grid-cols-7";
|
|
304
|
+
case 8:
|
|
305
|
+
return "lg:grid-cols-8";
|
|
306
|
+
case 9:
|
|
307
|
+
return "lg:grid-cols-9";
|
|
308
|
+
case undefined:
|
|
309
|
+
return "lg:grid-cols-1";
|
|
310
|
+
default:
|
|
311
|
+
return "lg:grid-cols-1";
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Utility function to get the Grid Row Number style for defining the number of rows in a grid. These styles only apply at screen size lg+
|
|
317
|
+
* @param {*} num The number of rows to set for the grid
|
|
318
|
+
* @returns String containing the proper style class
|
|
319
|
+
*/
|
|
320
|
+
export function getGridRowSizeStyle(num) {
|
|
321
|
+
switch(num) {
|
|
322
|
+
case 1:
|
|
323
|
+
return "lg:grid-rows-1";
|
|
324
|
+
case 2:
|
|
325
|
+
return "lg:grid-rows-2";
|
|
326
|
+
case 3:
|
|
327
|
+
return "lg:grid-rows-3";
|
|
328
|
+
case 4:
|
|
329
|
+
return "lg:grid-rows-4";
|
|
330
|
+
case 5:
|
|
331
|
+
return "lg:grid-rows-5";
|
|
332
|
+
case 6:
|
|
333
|
+
return "lg:grid-rows-6";
|
|
334
|
+
case 7:
|
|
335
|
+
return "lg:grid-rows-7";
|
|
336
|
+
case 8:
|
|
337
|
+
return "lg:grid-rows-8";
|
|
338
|
+
case 9:
|
|
339
|
+
return "lg:grid-rows-9";
|
|
340
|
+
case undefined:
|
|
341
|
+
return "lg:grid-rows-1";
|
|
342
|
+
default:
|
|
343
|
+
return "lg:grid-rows-1";
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/**
|
|
348
|
+
* Utility function to get the Grid Size styles for defining size of a grid.
|
|
349
|
+
* @param {*} columns The number of columns to add to the grid
|
|
350
|
+
* @param {*} rows The number of rows to add to the grid
|
|
351
|
+
* @returns String containing the proper style classes
|
|
352
|
+
*/
|
|
353
|
+
export function getGridSizeStyles(columns, rows) {
|
|
354
|
+
return `${getGridColumnSizeStyle(columns)} ${getGridRowSizeStyle(rows)}`
|
|
355
|
+
}
|
|
356
|
+
|
|
209
357
|
export function validateEmail(email) {
|
|
210
358
|
const re =
|
|
211
359
|
/^(([^<>()[\]\\.,;:\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,}))$/;
|
|
@@ -302,3 +450,39 @@ export function makeIdString(text) {
|
|
|
302
450
|
}
|
|
303
451
|
return null; //Null because most of our components use a null id as a default
|
|
304
452
|
}
|
|
453
|
+
|
|
454
|
+
/**
|
|
455
|
+
* Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
|
|
456
|
+
* @param {*} imageSrc The image source string
|
|
457
|
+
* @param {*} site ('www' or 'support') TECi image folder to pull from
|
|
458
|
+
*/
|
|
459
|
+
export function getTeciImageURL(imageSrc, site = "www") {
|
|
460
|
+
return imageSrc.startsWith("http") ? imageSrc : `https://files.thunderheadeng.com/${site}/images/${imageSrc}?fmt=auto`
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
/**
|
|
464
|
+
* Convenience function that sets the state of a Svelte Store to true when an element is visible on the screen. Useful for triggering animations.
|
|
465
|
+
*
|
|
466
|
+
* This state change will happen whenever the HTMLElement defined by elementId becomes visible by entering the bottom of the screen.
|
|
467
|
+
*
|
|
468
|
+
* @param {*} store The Svelte Store whose state should change
|
|
469
|
+
* @param {*} elementId The DOM id of the element whose visibility should trigger the state change. This element should have a specified height at all times, otherwise this state my change at unexpected times.
|
|
470
|
+
* @param {*} latch If true, the state will always be set to true after the page loads
|
|
471
|
+
*/
|
|
472
|
+
export function triggerWhenVisible(store, elementId, latch = false) {
|
|
473
|
+
let scrollTarget = document.getElementById(elementId);
|
|
474
|
+
|
|
475
|
+
function updateVisibility() {
|
|
476
|
+
var rect = scrollTarget.getBoundingClientRect();
|
|
477
|
+
|
|
478
|
+
let topVisible = (rect.top >= 0) && (rect.top <= window.innerHeight);
|
|
479
|
+
let bottomVisible = rect.bottom <= window.innerHeight
|
|
480
|
+
|
|
481
|
+
store.update(_ => ((topVisible) || (bottomVisible)) || latch);
|
|
482
|
+
}
|
|
483
|
+
updateVisibility();
|
|
484
|
+
|
|
485
|
+
addEventListener("scroll", (event) => {
|
|
486
|
+
updateVisibility()
|
|
487
|
+
})
|
|
488
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecitheme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.14.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
"vite": "^4.4.3"
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
+
"@designbycode/tailwindcss-mask-image": "^2.0.3",
|
|
69
70
|
"katex": "^0.16.8",
|
|
70
71
|
"slugify": "^1.6.6",
|
|
71
72
|
"svelte": "^4.0.5"
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { getColorStyles } from "../utils";
|
|
3
|
-
import Button from "./Button.svelte";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export let data = {};
|
|
7
|
-
|
|
8
|
-
let {
|
|
9
|
-
cols,
|
|
10
|
-
rows,
|
|
11
|
-
items,
|
|
12
|
-
heading,
|
|
13
|
-
eyebrowText,
|
|
14
|
-
color
|
|
15
|
-
} = data;
|
|
16
|
-
|
|
17
|
-
let bentoCols = "lg:grid-cols-3";
|
|
18
|
-
switch (cols) {
|
|
19
|
-
case 1:
|
|
20
|
-
bentoCols = "lg:grid-cols-1"
|
|
21
|
-
break;
|
|
22
|
-
case 2:
|
|
23
|
-
bentoCols = "lg:grid-cols-2"
|
|
24
|
-
break;
|
|
25
|
-
case 3:
|
|
26
|
-
bentoCols = "lg:grid-cols-3"
|
|
27
|
-
break;
|
|
28
|
-
case 4:
|
|
29
|
-
bentoCols = "lg:grid-cols-4"
|
|
30
|
-
break;
|
|
31
|
-
case 5:
|
|
32
|
-
bentoCols = "lg:grid-cols-5"
|
|
33
|
-
break;
|
|
34
|
-
case 6:
|
|
35
|
-
bentoCols = "lg:grid-cols-6"
|
|
36
|
-
break;
|
|
37
|
-
case 7:
|
|
38
|
-
bentoCols = "lg:grid-cols-7"
|
|
39
|
-
break;
|
|
40
|
-
case 8:
|
|
41
|
-
bentoCols = "lg:grid-cols-8"
|
|
42
|
-
break;
|
|
43
|
-
case 9:
|
|
44
|
-
bentoCols = "lg:grid-cols-9"
|
|
45
|
-
break;
|
|
46
|
-
default:
|
|
47
|
-
bentoCols = "lg:grid-cols-3"
|
|
48
|
-
break;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
let bentoRows = "lg:grid-rows-2";
|
|
52
|
-
switch (rows) {
|
|
53
|
-
case 1:
|
|
54
|
-
bentoRows = "lg:grid-rows-1"
|
|
55
|
-
break;
|
|
56
|
-
case 2:
|
|
57
|
-
bentoRows = "lg:grid-rows-2"
|
|
58
|
-
break;
|
|
59
|
-
case 3:
|
|
60
|
-
bentoRows = "lg:grid-rows-3"
|
|
61
|
-
break;
|
|
62
|
-
case 4:
|
|
63
|
-
bentoRows = "lg:grid-rows-4"
|
|
64
|
-
break;
|
|
65
|
-
case 5:
|
|
66
|
-
bentoRows = "lg:grid-rows-5"
|
|
67
|
-
break;
|
|
68
|
-
case 6:
|
|
69
|
-
bentoRows = "lg:grid-rows-6"
|
|
70
|
-
break;
|
|
71
|
-
case 7:
|
|
72
|
-
bentoRows = "lg:grid-rows-7"
|
|
73
|
-
break;
|
|
74
|
-
case 8:
|
|
75
|
-
bentoRows = "lg:grid-rows-8"
|
|
76
|
-
break;
|
|
77
|
-
case 9:
|
|
78
|
-
bentoRows = "lg:grid-rows-9"
|
|
79
|
-
break;
|
|
80
|
-
default:
|
|
81
|
-
bentoRows = "lg:grid-rows-2"
|
|
82
|
-
break;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<div class="bg-gray-50 py-24 sm:py-32">
|
|
88
|
-
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
|
89
|
-
|
|
90
|
-
<!-- Heading -->
|
|
91
|
-
<h2 class="text-center text-base/7 font-semibold {getColorStyles("text", color)}">{heading}</h2>
|
|
92
|
-
|
|
93
|
-
<!-- Eyebrow Text -->
|
|
94
|
-
<p class="mx-auto mt-2 max-w-lg text-balance text-center text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl">{eyebrowText}</p>
|
|
95
|
-
|
|
96
|
-
<!-- Bento -->
|
|
97
|
-
<div class="mt-10 grid gap-4 sm:mt-16 {bentoCols} {bentoRows}">
|
|
98
|
-
|
|
99
|
-
{#each items as item}
|
|
100
|
-
{@const imageUrl = item.image.url.startsWith("http") ? item.image.url : `https://files.thunderheadeng.com/www/images/${item.image.url}?fmt=auto`}
|
|
101
|
-
<!-- Card -->
|
|
102
|
-
<a class="relative {item.gridClasses}" href={item.url}>
|
|
103
|
-
<!-- White Background -->
|
|
104
|
-
<div class="absolute inset-px bg-white"></div>
|
|
105
|
-
|
|
106
|
-
<!-- Foreground -->
|
|
107
|
-
<div class="relative flex h-full flex-col overflow-hidden">
|
|
108
|
-
|
|
109
|
-
<!-- Heading and Text -->
|
|
110
|
-
<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
|
|
111
|
-
<p class="mt-2 text-lg font-medium tracking-tight max-lg:text-center">{item.heading}</p>
|
|
112
|
-
<p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">{item.text}</p>
|
|
113
|
-
{#if item.buttonText}
|
|
114
|
-
<div class="mt-2 mb-2 hidden lg:flex">
|
|
115
|
-
<Button text={item.buttonText} color={color} justify="left"/>
|
|
116
|
-
</div>
|
|
117
|
-
{/if}
|
|
118
|
-
</div>
|
|
119
|
-
|
|
120
|
-
<!-- Image -->
|
|
121
|
-
<div class="{item.image.containerClasses}">
|
|
122
|
-
<div class="{item.image.innerContainerClasses}">
|
|
123
|
-
<img
|
|
124
|
-
class={item.image.classes}
|
|
125
|
-
src={imageUrl}
|
|
126
|
-
alt="{item.image.alt}"
|
|
127
|
-
title="{item.image.alt}"
|
|
128
|
-
/>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<!-- Something that I don't understand. Focus element? -->
|
|
135
|
-
<div class="pointer-events-none absolute inset-px shadow ring-1 ring-black/5"></div>
|
|
136
|
-
</a>
|
|
137
|
-
{/each}
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
</div>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} BentoBoxProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} BentoBoxEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} BentoBoxSlots */
|
|
4
|
-
export default class BentoBox extends SvelteComponent<{
|
|
5
|
-
data?: {};
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {}> {
|
|
9
|
-
}
|
|
10
|
-
export type BentoBoxProps = typeof __propDef.props;
|
|
11
|
-
export type BentoBoxEvents = typeof __propDef.events;
|
|
12
|
-
export type BentoBoxSlots = typeof __propDef.slots;
|
|
13
|
-
import { SvelteComponent } from "svelte";
|
|
14
|
-
declare const __propDef: {
|
|
15
|
-
props: {
|
|
16
|
-
data?: {};
|
|
17
|
-
};
|
|
18
|
-
events: {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
};
|
|
21
|
-
slots: {};
|
|
22
|
-
exports?: {};
|
|
23
|
-
bindings?: string;
|
|
24
|
-
};
|
|
25
|
-
export {};
|