tecitheme 0.0.4 → 0.0.8
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/README.md +1 -1
- package/{Logos → assets}/TECi_logo.svelte +0 -0
- package/{Logos → assets}/TECi_logo.svelte.d.ts +0 -0
- package/components/Banner.svelte +2 -2
- package/components/CTA.svelte +30 -0
- package/components/CTA.svelte.d.ts +37 -0
- package/components/CountrySelector.svelte +3 -3
- package/components/Figure.svelte +12 -0
- package/components/Figure.svelte.d.ts +27 -0
- package/components/Header.svelte +25 -25
- package/components/Icon.svelte +52 -0
- package/components/Icon.svelte.d.ts +25 -0
- package/components/Math.svelte +19 -0
- package/components/Math.svelte.d.ts +25 -0
- package/components/Modal.svelte +2 -2
- package/components/NewsGrid.svelte +59 -0
- package/components/NewsGrid.svelte.d.ts +25 -0
- package/components/SectionHeaderCentered.svelte +26 -0
- package/components/SectionHeaderCentered.svelte.d.ts +31 -0
- package/components/ThreeColumn.svelte +73 -0
- package/components/ThreeColumn.svelte.d.ts +39 -0
- package/components/TrialForm.svelte +174 -148
- package/components/YT.svelte +14 -0
- package/components/YT.svelte.d.ts +23 -0
- package/layouts/blocks.svelte +31 -0
- package/layouts/blocks.svelte.d.ts +31 -0
- package/layouts/news.svelte +14 -0
- package/layouts/news.svelte.d.ts +29 -0
- package/package.json +28 -17
- package/utils.d.ts +1 -0
- package/utils.js +3 -1
- package/Logos/TECi_icon_250.svelte +0 -21
- package/Logos/TECi_icon_250.svelte.d.ts +0 -23
package/README.md
CHANGED
|
@@ -4,4 +4,4 @@ SvelteKit Design System for Thunderhead web properties.
|
|
|
4
4
|
|
|
5
5
|
NPM package available at: https://www.npmjs.com/package/tecitheme
|
|
6
6
|
|
|
7
|
-
See
|
|
7
|
+
See https://tecitheme.netlify.app/ for demo, documentation and component details.
|
|
File without changes
|
|
File without changes
|
package/components/Banner.svelte
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
{#if showCTA}
|
|
28
28
|
<!-- CTA Button -->
|
|
29
29
|
<div class="order-3 mt-2 flex-shrink-0 w-full sm:order-2 sm:mt-0 sm:w-auto">
|
|
30
|
-
<div class="
|
|
30
|
+
<div class="shadow-sm">
|
|
31
31
|
<a href={ctaLink}
|
|
32
32
|
class="flex items-center justify-center px-4 py-2 border shadow-md border-transparent text-sm leading-5 font-medium text-teci-blue-light bg-white hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:shadow-outline transition ease-in-out duration-150"
|
|
33
33
|
aria-label="Button to {ctaText}"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<!-- Hide Banner Button -->
|
|
42
42
|
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
|
|
43
43
|
<button x-on:click="toggle" type="button"
|
|
44
|
-
class="-mr-1 flex p-2
|
|
44
|
+
class="-mr-1 flex p-2 hover:bg-teci-blue-dark focus:outline-none focus:bg-teci-blue-dark sm:-mr-2 transition ease-in-out duration-150"
|
|
45
45
|
aria-label="Dismiss"
|
|
46
46
|
title="Dismiss Banner"
|
|
47
47
|
>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let data = {
|
|
3
|
+
title: 'Ready to dive in?',
|
|
4
|
+
subtitle: 'Start your free trial today.',
|
|
5
|
+
links: [
|
|
6
|
+
{
|
|
7
|
+
linkText: 'Get Started',
|
|
8
|
+
linkURL: '/product'
|
|
9
|
+
}
|
|
10
|
+
]
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
15
|
+
<section class="bg-white mb-12">
|
|
16
|
+
<div class="mx-auto text-center px-4 sm:px-6 lg:px-8">
|
|
17
|
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
|
18
|
+
<span class="block">{data.title}</span>
|
|
19
|
+
</h2>
|
|
20
|
+
<div class="mt-8 flex justify-center">
|
|
21
|
+
{#each data.links as link}
|
|
22
|
+
<div class="inline-flex shadow">
|
|
23
|
+
<a href={link.linkURL} class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-teci-blue-light hover:bg-teci-blue-dark">{link.linkText}</a>
|
|
24
|
+
</div>
|
|
25
|
+
{:else}
|
|
26
|
+
<br>
|
|
27
|
+
{/each}
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</section>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CtaProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CtaEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CtaSlots */
|
|
4
|
+
export default class Cta extends SvelteComponentTyped<{
|
|
5
|
+
data?: {
|
|
6
|
+
title: string;
|
|
7
|
+
subtitle: string;
|
|
8
|
+
links: {
|
|
9
|
+
linkText: string;
|
|
10
|
+
linkURL: string;
|
|
11
|
+
}[];
|
|
12
|
+
};
|
|
13
|
+
}, {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
}, {}> {
|
|
16
|
+
}
|
|
17
|
+
export type CtaProps = typeof __propDef.props;
|
|
18
|
+
export type CtaEvents = typeof __propDef.events;
|
|
19
|
+
export type CtaSlots = typeof __propDef.slots;
|
|
20
|
+
import { SvelteComponentTyped } from "svelte";
|
|
21
|
+
declare const __propDef: {
|
|
22
|
+
props: {
|
|
23
|
+
data?: {
|
|
24
|
+
title: string;
|
|
25
|
+
subtitle: string;
|
|
26
|
+
links: {
|
|
27
|
+
linkText: string;
|
|
28
|
+
linkURL: string;
|
|
29
|
+
}[];
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
events: {
|
|
33
|
+
[evt: string]: CustomEvent<any>;
|
|
34
|
+
};
|
|
35
|
+
slots: {};
|
|
36
|
+
};
|
|
37
|
+
export {};
|
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
import Modal from "./Modal.svelte";
|
|
4
4
|
|
|
5
5
|
export let resellerModal = true;
|
|
6
|
-
let modal;
|
|
7
6
|
export let selection = 'sel';
|
|
7
|
+
export let allowContinue = false;
|
|
8
|
+
|
|
9
|
+
let modal;
|
|
8
10
|
let resellerIndex = -1;
|
|
9
11
|
let resellerArray = [
|
|
10
12
|
["BE", "NL", "LU"],
|
|
@@ -24,8 +26,6 @@
|
|
|
24
26
|
["ES"]
|
|
25
27
|
]
|
|
26
28
|
|
|
27
|
-
export let allowContinue = false;
|
|
28
|
-
|
|
29
29
|
function isReseller() {
|
|
30
30
|
resellerIndex = resellerArray.findIndex(arr => arr.includes(selection))
|
|
31
31
|
return resellerIndex > -1
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let image;
|
|
3
|
+
export let title;
|
|
4
|
+
export let caption;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<figure class="not-prose shadow-lg border border-slate-100 p-2">
|
|
8
|
+
<img src={image} alt={title} title={title}>
|
|
9
|
+
{#if caption}
|
|
10
|
+
<figcaption class="text-center p-2">{@html caption}</figcaption>
|
|
11
|
+
{/if}
|
|
12
|
+
</figure>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} FigureProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} FigureEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} FigureSlots */
|
|
4
|
+
export default class Figure extends SvelteComponentTyped<{
|
|
5
|
+
image: any;
|
|
6
|
+
title: any;
|
|
7
|
+
caption: any;
|
|
8
|
+
}, {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
}, {}> {
|
|
11
|
+
}
|
|
12
|
+
export type FigureProps = typeof __propDef.props;
|
|
13
|
+
export type FigureEvents = typeof __propDef.events;
|
|
14
|
+
export type FigureSlots = typeof __propDef.slots;
|
|
15
|
+
import { SvelteComponentTyped } from "svelte";
|
|
16
|
+
declare const __propDef: {
|
|
17
|
+
props: {
|
|
18
|
+
image: any;
|
|
19
|
+
title: any;
|
|
20
|
+
caption: any;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {};
|
|
26
|
+
};
|
|
27
|
+
export {};
|
package/components/Header.svelte
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import
|
|
2
|
+
import Icon from "./Icon.svelte";
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<header>
|
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
<div class="absolute inset-0 shadow z-30 pointer-events-none" aria-hidden="true"></div>
|
|
8
8
|
<div class="relative">
|
|
9
9
|
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 md:space-x-6 sm:px-6 sm:py-4 lg:px-8 md:justify-start lg:space-x-10">
|
|
10
|
-
<!-- Nav
|
|
10
|
+
<!-- Nav Icon Linked to WWW Homepage -->
|
|
11
11
|
<div class="flex-shrink-0">
|
|
12
12
|
<a href="https://www.thunderheadeng.com" class="flex">
|
|
13
13
|
<span class="sr-only">Thunderhead Engineering</span>
|
|
14
|
-
<
|
|
14
|
+
<Icon classes="h-10 w-auto" />
|
|
15
15
|
</a>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
47
47
|
class="absolute z-10 top-full inset-x-0 transform shadow-lg bg-white" style="display: none;">
|
|
48
48
|
<div
|
|
49
|
-
class="max-w-7xl mx-auto grid gap-y-
|
|
50
|
-
<a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between
|
|
49
|
+
class="max-w-7xl mx-auto grid gap-y-8 px-4 py-8 sm:grid-cols-2 sm:gap-8 sm:px-6 lg:grid-cols-3 lg:px-8">
|
|
50
|
+
<a href="https://www.thunderheadeng.com/pyrosim/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
51
51
|
<div class="flex md:h-full lg:flex-col">
|
|
52
52
|
<div class="flex-shrink-0">
|
|
53
|
-
<
|
|
53
|
+
<Icon classes="h-12 w-auto" icon="pyrosim" />
|
|
54
54
|
</div>
|
|
55
55
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
56
56
|
<div>
|
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
</div>
|
|
69
69
|
</a>
|
|
70
70
|
|
|
71
|
-
<a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between
|
|
71
|
+
<a href="https://www.thunderheadeng.com/pathfinder/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
72
72
|
<div class="flex md:h-full lg:flex-col">
|
|
73
73
|
<div class="flex-shrink-0">
|
|
74
|
-
<
|
|
74
|
+
<Icon classes="h-12 w-auto" icon="pathfinder" />
|
|
75
75
|
</div>
|
|
76
76
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
77
77
|
<div>
|
|
@@ -89,10 +89,10 @@
|
|
|
89
89
|
</div>
|
|
90
90
|
</a>
|
|
91
91
|
|
|
92
|
-
<a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between
|
|
92
|
+
<a href="https://www.thunderheadeng.com/petrasim/" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
93
93
|
<div class="flex md:h-full lg:flex-col">
|
|
94
94
|
<div class="flex-shrink-0">
|
|
95
|
-
<
|
|
95
|
+
<Icon classes="h-12 w-auto" icon='petrasim' />
|
|
96
96
|
</div>
|
|
97
97
|
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
|
98
98
|
<div>
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
</div>
|
|
111
111
|
</a>
|
|
112
112
|
<!--
|
|
113
|
-
<a href="#" class="-m-3 p-3 flex flex-col justify-between
|
|
113
|
+
<a href="#" class="-m-3 p-3 flex flex-col justify-between hover:bg-gray-50">
|
|
114
114
|
<div class="flex md:h-full lg:flex-col">
|
|
115
115
|
<div class="flex-shrink-0">
|
|
116
116
|
<span
|
|
@@ -220,10 +220,10 @@
|
|
|
220
220
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
221
221
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
222
222
|
style="display: none;">
|
|
223
|
-
<div class="
|
|
223
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
224
224
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
225
225
|
<a href="https://support.thunderheadeng.com/docs/"
|
|
226
|
-
class="-m-3 p-3 flex items-start
|
|
226
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
227
227
|
<!-- Heroicon name: outline/book-open -->
|
|
228
228
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
229
229
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
</a>
|
|
242
242
|
|
|
243
243
|
<a href="https://support.thunderheadeng.com/tutorials/"
|
|
244
|
-
class="-m-3 p-3 flex items-start
|
|
244
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
245
245
|
<!-- Heroicon name: outline/library -->
|
|
246
246
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
247
247
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -259,7 +259,7 @@
|
|
|
259
259
|
</a>
|
|
260
260
|
|
|
261
261
|
<a href="https://support.thunderheadeng.com/release-notes/"
|
|
262
|
-
class="-m-3 p-3 flex items-start
|
|
262
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
263
263
|
<!-- Heroicon name: outline/document-text -->
|
|
264
264
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
265
265
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
</a>
|
|
278
278
|
|
|
279
279
|
<a href="https://support.thunderheadeng.com/answers/"
|
|
280
|
-
class="-m-3 p-3 flex items-start
|
|
280
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
281
281
|
<!-- Heroicon name: outline/cursor-click -->
|
|
282
282
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
283
283
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -353,10 +353,10 @@
|
|
|
353
353
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
354
354
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
355
355
|
style="display: none;">
|
|
356
|
-
<div class="
|
|
356
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
357
357
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
358
358
|
<a href="https://www.thunderheadeng.com/training/"
|
|
359
|
-
class="-m-3 p-3 flex items-start
|
|
359
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
360
360
|
<!-- Heroicon name: outline/calendar -->
|
|
361
361
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
362
362
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
</a>
|
|
375
375
|
|
|
376
376
|
<a href="https://www.femtc.com/"
|
|
377
|
-
class="-m-3 p-3 flex items-start
|
|
377
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
378
378
|
<!-- Heroicon name: outline/presentation-chart-line -->
|
|
379
379
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
380
380
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -392,7 +392,7 @@
|
|
|
392
392
|
</a>
|
|
393
393
|
|
|
394
394
|
<a href="https://www.thunderheadeng.com/training/"
|
|
395
|
-
class="-m-3 p-3 flex items-start
|
|
395
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
396
396
|
<!-- Heroicon name: outline/cursor-click -->
|
|
397
397
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
398
398
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -478,10 +478,10 @@
|
|
|
478
478
|
x-transition:leave-end="opacity-0 -translate-y-1"
|
|
479
479
|
class="absolute z-40 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0"
|
|
480
480
|
style="display: none;">
|
|
481
|
-
<div class="
|
|
481
|
+
<div class="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
|
482
482
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
483
483
|
<a href="https://www.thunderheadeng.com/about/"
|
|
484
|
-
class="-m-3 p-3 flex items-start
|
|
484
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
485
485
|
<!-- Heroicon name: outline/information-circle -->
|
|
486
486
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-teci-blue-light" fill="none"
|
|
487
487
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -499,7 +499,7 @@
|
|
|
499
499
|
</a>
|
|
500
500
|
|
|
501
501
|
<a href="https://www.thunderheadeng.com/news/"
|
|
502
|
-
class="-m-3 p-3 flex items-start
|
|
502
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
503
503
|
<!-- Heroicon name: outline/speakerphone -->
|
|
504
504
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
505
505
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -517,7 +517,7 @@
|
|
|
517
517
|
</a>
|
|
518
518
|
|
|
519
519
|
<a href="https://www.thunderheadeng.com/job-openings/"
|
|
520
|
-
class="-m-3 p-3 flex items-start
|
|
520
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
521
521
|
<!-- Heroicon name: outline/briefcase -->
|
|
522
522
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
523
523
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -535,7 +535,7 @@
|
|
|
535
535
|
</a>
|
|
536
536
|
|
|
537
537
|
<a href="https://www.thunderheadeng.com/pyrosim/pyrosim-licensing/#distributors"
|
|
538
|
-
class="-m-3 p-3 flex items-start
|
|
538
|
+
class="-m-3 p-3 flex items-start hover:bg-gray-50 transition ease-in-out duration-150">
|
|
539
539
|
<!-- Heroicon name: outline/globe-alt -->
|
|
540
540
|
<svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-6 w-6 text-teci-blue-light"
|
|
541
541
|
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
// Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
|
|
3
|
+
export let icon;
|
|
4
|
+
export let classes;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div>
|
|
8
|
+
{#if icon == 'pyrosim'}
|
|
9
|
+
<img
|
|
10
|
+
class={classes}
|
|
11
|
+
src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
|
|
12
|
+
alt="PyroSim"
|
|
13
|
+
title="PyroSim Icon"
|
|
14
|
+
/>
|
|
15
|
+
{:else if icon == 'pathfinder'}
|
|
16
|
+
<img
|
|
17
|
+
class={classes}
|
|
18
|
+
src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
|
|
19
|
+
alt="Pathfinder"
|
|
20
|
+
title="Pathfinder Icon"
|
|
21
|
+
/>
|
|
22
|
+
{:else if icon == 'petrasim'}
|
|
23
|
+
<img
|
|
24
|
+
class={classes}
|
|
25
|
+
src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
|
|
26
|
+
alt="PetraSim"
|
|
27
|
+
title="PetraSim Icon"
|
|
28
|
+
/>
|
|
29
|
+
{:else if icon?.startsWith("icon-")}
|
|
30
|
+
<div class="{classes} w-12 bg-teci-blue-dark flex flex-col justify-center items-center">
|
|
31
|
+
<span class="material-icons block text-4xl text-white">{icon?.slice(5)}</span>
|
|
32
|
+
</div>
|
|
33
|
+
{:else}
|
|
34
|
+
<svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
|
|
35
|
+
<path
|
|
36
|
+
style="fill:#0c3879;fill-rule:evenodd;stroke:none"
|
|
37
|
+
d="M88.113 220.536h97.672v97.672H88.113z"
|
|
38
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
39
|
+
/>
|
|
40
|
+
<path
|
|
41
|
+
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
42
|
+
d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
|
|
43
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
44
|
+
/>
|
|
45
|
+
<path
|
|
46
|
+
style="fill:#fff;fill-rule:evenodd;stroke:none"
|
|
47
|
+
d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
|
|
48
|
+
transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
|
|
49
|
+
/>
|
|
50
|
+
</svg>
|
|
51
|
+
{/if}
|
|
52
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} IconProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} IconEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} IconSlots */
|
|
4
|
+
export default class Icon extends SvelteComponentTyped<{
|
|
5
|
+
icon: any;
|
|
6
|
+
classes: any;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type IconProps = typeof __propDef.props;
|
|
12
|
+
export type IconEvents = typeof __propDef.events;
|
|
13
|
+
export type IconSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
icon: any;
|
|
18
|
+
classes: any;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
// Based on: https://svelte.dev/repl/49ff6c089825418888cf804d9dde77bc?version=3.46.4
|
|
3
|
+
import katex from "katex";
|
|
4
|
+
export let math;
|
|
5
|
+
export let displayMode = false;
|
|
6
|
+
|
|
7
|
+
const options = {
|
|
8
|
+
displayMode: displayMode,
|
|
9
|
+
throwOnError: false
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
$: katexString = katex.renderToString(math, options);
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<svelte:head>
|
|
16
|
+
<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">
|
|
17
|
+
</svelte:head>
|
|
18
|
+
|
|
19
|
+
{@html katexString}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} MathProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} MathEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} MathSlots */
|
|
4
|
+
export default class Math extends SvelteComponentTyped<{
|
|
5
|
+
math: any;
|
|
6
|
+
displayMode?: boolean;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type MathProps = typeof __propDef.props;
|
|
12
|
+
export type MathEvents = typeof __propDef.events;
|
|
13
|
+
export type MathSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
math: any;
|
|
18
|
+
displayMode?: boolean;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export {};
|
package/components/Modal.svelte
CHANGED
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
|
|
18
18
|
{#if shown}
|
|
19
19
|
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full">
|
|
20
|
-
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg
|
|
21
|
-
<button type="button" on:click={hide} class="absolute top-0 right-0 bg-white
|
|
20
|
+
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
|
|
21
|
+
<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">
|
|
22
22
|
<span class="sr-only">Close menu</span>
|
|
23
23
|
<!-- Heroicon name: outline/x -->
|
|
24
24
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let data;
|
|
3
|
+
export let posts;
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class="relative mx-auto w-full divide-y-2 divide-gray-200 pb-12">
|
|
7
|
+
<div>
|
|
8
|
+
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
|
9
|
+
{data.title}
|
|
10
|
+
</h2>
|
|
11
|
+
<div class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:items-center lg:gap-5">
|
|
12
|
+
<p class="text-xl text-gray-500">{data.subtitle}</p>
|
|
13
|
+
<form class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
|
|
14
|
+
<div>
|
|
15
|
+
<label for="email-address" class="sr-only">Email address</label>
|
|
16
|
+
<input
|
|
17
|
+
id="email-address"
|
|
18
|
+
name="email-address"
|
|
19
|
+
type="email"
|
|
20
|
+
autocomplete="email"
|
|
21
|
+
required
|
|
22
|
+
class="w-full appearance-none border-b-2 border-b-gray-800 bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 focus:border-teci-blue-light focus:outline-none focus:ring-teci-blue-light lg:max-w-xs"
|
|
23
|
+
placeholder="Enter your email"
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
<div
|
|
27
|
+
class="mt-2 flex w-full flex-shrink-0 shadow-sm sm:mt-0 sm:ml-3 sm:inline-flex sm:w-auto"
|
|
28
|
+
>
|
|
29
|
+
<button type="button" class="btn">Subscribe</button>
|
|
30
|
+
</div>
|
|
31
|
+
</form>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="mt-6 grid gap-16 pt-10 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
|
|
35
|
+
{#each posts as post}
|
|
36
|
+
<div>
|
|
37
|
+
<p class="text-sm text-gray-500">
|
|
38
|
+
<time datetime={post.meta.date}>{post.meta.date}</time>
|
|
39
|
+
</p>
|
|
40
|
+
<a href={post.path} class="mt-2 block">
|
|
41
|
+
<p class="text-xl font-semibold text-gray-900">
|
|
42
|
+
{post.meta.title}
|
|
43
|
+
</p>
|
|
44
|
+
<p class="mt-3 text-base text-gray-500">
|
|
45
|
+
{post.meta.summary}
|
|
46
|
+
</p>
|
|
47
|
+
</a>
|
|
48
|
+
<div class="mt-3">
|
|
49
|
+
<a
|
|
50
|
+
href={post.path}
|
|
51
|
+
class="text-base font-semibold text-teci-blue-light hover:text-teci-blue-dark"
|
|
52
|
+
>
|
|
53
|
+
Read full story
|
|
54
|
+
</a>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
{/each}
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} NewsGridProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} NewsGridEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} NewsGridSlots */
|
|
4
|
+
export default class NewsGrid extends SvelteComponentTyped<{
|
|
5
|
+
data: any;
|
|
6
|
+
posts: any;
|
|
7
|
+
}, {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
}, {}> {
|
|
10
|
+
}
|
|
11
|
+
export type NewsGridProps = typeof __propDef.props;
|
|
12
|
+
export type NewsGridEvents = typeof __propDef.events;
|
|
13
|
+
export type NewsGridSlots = typeof __propDef.slots;
|
|
14
|
+
import { SvelteComponentTyped } from "svelte";
|
|
15
|
+
declare const __propDef: {
|
|
16
|
+
props: {
|
|
17
|
+
data: any;
|
|
18
|
+
posts: any;
|
|
19
|
+
};
|
|
20
|
+
events: {
|
|
21
|
+
[evt: string]: CustomEvent<any>;
|
|
22
|
+
};
|
|
23
|
+
slots: {};
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
//Based on: https://tailwindui.com/components/marketing/sections/header#component-2c3b25e7b9e4490edd7b6950692c0a11
|
|
3
|
+
|
|
4
|
+
export let data = {
|
|
5
|
+
toptext: 'Small Top Text ',
|
|
6
|
+
title: 'Big Title Text',
|
|
7
|
+
subtitle: 'Subtitle Text - Fairly long to see where the text wraps for this element, because who knows where things will end up.'
|
|
8
|
+
};
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
12
|
+
<div class="text-center pb-12">
|
|
13
|
+
{#if data.toptext}
|
|
14
|
+
<h2 class="text-base font-semibold text-teci-blue-dark tracking-wide uppercase">
|
|
15
|
+
{data.toptext}
|
|
16
|
+
</h2>
|
|
17
|
+
{/if}
|
|
18
|
+
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
19
|
+
{data.title}
|
|
20
|
+
</p>
|
|
21
|
+
{#if data.subtitle}
|
|
22
|
+
<p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
|
|
23
|
+
{data.subtitle}
|
|
24
|
+
</p>
|
|
25
|
+
{/if}
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} SectionHeaderCenteredProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} SectionHeaderCenteredEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} SectionHeaderCenteredSlots */
|
|
4
|
+
export default class SectionHeaderCentered extends SvelteComponentTyped<{
|
|
5
|
+
data?: {
|
|
6
|
+
toptext: string;
|
|
7
|
+
title: string;
|
|
8
|
+
subtitle: string;
|
|
9
|
+
};
|
|
10
|
+
}, {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
}, {}> {
|
|
13
|
+
}
|
|
14
|
+
export type SectionHeaderCenteredProps = typeof __propDef.props;
|
|
15
|
+
export type SectionHeaderCenteredEvents = typeof __propDef.events;
|
|
16
|
+
export type SectionHeaderCenteredSlots = typeof __propDef.slots;
|
|
17
|
+
import { SvelteComponentTyped } from "svelte";
|
|
18
|
+
declare const __propDef: {
|
|
19
|
+
props: {
|
|
20
|
+
data?: {
|
|
21
|
+
toptext: string;
|
|
22
|
+
title: string;
|
|
23
|
+
subtitle: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
events: {
|
|
27
|
+
[evt: string]: CustomEvent<any>;
|
|
28
|
+
};
|
|
29
|
+
slots: {};
|
|
30
|
+
};
|
|
31
|
+
export {};
|