tecitheme 0.0.18 → 0.0.19
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 +6 -6
- package/components/Card.svelte +44 -31
- package/components/NewsGrid.svelte +21 -2
- package/components/ThreeColumn.svelte +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,17 +12,17 @@ This theme system is released on NPM to make it easier to include in all Thunder
|
|
|
12
12
|
### Authenticate to NPM
|
|
13
13
|
|
|
14
14
|
1. `npm adduser`
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
1. Enter username and password for the npm account.
|
|
16
|
+
1. Enter email address
|
|
17
|
+
1. Enter 2FA Code
|
|
18
18
|
|
|
19
19
|
### Update the package version
|
|
20
20
|
|
|
21
21
|
1. Edit package.json with the next version.
|
|
22
|
-
|
|
22
|
+
1. Commit and push to origin.
|
|
23
23
|
|
|
24
24
|
### Package the project and publish
|
|
25
25
|
|
|
26
26
|
1. `npm run package`
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
1. `cd package`
|
|
28
|
+
1. `npm publish`
|
package/components/Card.svelte
CHANGED
|
@@ -1,52 +1,65 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
//Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
|
|
3
|
-
|
|
3
|
+
import Icon from './Icon.svelte';
|
|
4
4
|
import Wrap from './Wrap.svelte';
|
|
5
5
|
export let data;
|
|
6
6
|
export let halfHeight;
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
|
-
<
|
|
10
|
-
<div class="group space-y-4 p-2 border border-gray-100 hover:border-gray-200 hover:shadow-md">
|
|
9
|
+
<div class="group flex flex-col items-stretch space-y-2 border border-gray-100 p-2 hover:border-gray-200 hover:shadow-md" >
|
|
11
10
|
{#if data.image}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
<div style="background-image: url({data.image});"
|
|
12
|
+
class="w-full shrink-0 {halfHeight ? 'aspect-video' : 'aspect-square'} flex items-center justify-center border border-gray-200 bg-cover bg-no-repeat"
|
|
13
|
+
>
|
|
14
|
+
<div class="{halfHeight ? 'space-y-4' : 'space-y-8'} flex h-full w-full flex-col items-center justify-center" >
|
|
15
|
+
{#if data.links}
|
|
16
|
+
{#each data.links as link}
|
|
17
|
+
<a href={link.linkURL} class="btn w-3/4 whitespace-nowrap text-center text-sm" >
|
|
18
|
+
{link.linkText}
|
|
19
|
+
</a>
|
|
20
|
+
{/each}
|
|
21
|
+
{:else}
|
|
22
|
+
<a href={data.cardURL} class="h-full w-full">
|
|
23
|
+
<span>​</span>
|
|
24
|
+
</a>
|
|
25
|
+
{/if}
|
|
26
|
+
</div>
|
|
21
27
|
</div>
|
|
22
|
-
</div>
|
|
23
28
|
{/if}
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
{#if data.icon}
|
|
29
|
+
<a href={data.cardURL}>
|
|
30
|
+
<div class="flex flex-row items-start space-x-2">
|
|
31
|
+
{#if data.icon}
|
|
28
32
|
<div class="grid place-items-center">
|
|
29
33
|
<Icon classes={data.classes} icon={data.icon} />
|
|
30
34
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
{/if}
|
|
36
|
+
{#if data.heading || data.subheading}
|
|
37
|
+
<div class="flex flex-col font-medium leading-none">
|
|
33
38
|
{#if data.heading}
|
|
34
|
-
|
|
39
|
+
<h3 class="text-2xl leading-none">{data.heading}</h3>
|
|
35
40
|
{/if}
|
|
36
41
|
{#if data.subheading}
|
|
37
|
-
|
|
42
|
+
<p class="leading-6 text-teci-blue-dark">{data.subheading}</p>
|
|
38
43
|
{/if}
|
|
39
44
|
</div>
|
|
40
|
-
</div>
|
|
41
|
-
{#if data.text}
|
|
42
|
-
<div class="text-lg w-full">
|
|
43
|
-
<p class="text-gray-500">{data.text}</p>
|
|
44
|
-
<div class="w-full flex flex-col items-end">
|
|
45
|
-
<span class="inline-block max-w-sm text-center text-sm font-medium text-white mt-1 btn">{data.cardLinkText}</span>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
45
|
{/if}
|
|
46
|
+
</div>
|
|
47
|
+
</a>
|
|
48
|
+
{#if data.text}
|
|
49
|
+
<div class="flex w-full flex-1 flex-col">
|
|
50
|
+
{data.text}
|
|
51
|
+
{#if data.cardActionStyle == 'link'}
|
|
52
|
+
<a class="inline-block mt-2 text-sm font-medium text-teci-blue-light" href={data.cardURL}>
|
|
53
|
+
{data.cardLinkText}<span aria-hidden="true"> →</span>
|
|
54
|
+
</a>
|
|
55
|
+
{/if}
|
|
56
|
+
</div>
|
|
57
|
+
{/if}
|
|
58
|
+
{#if data.cardActionStyle == 'button'}
|
|
59
|
+
<a class="block shrink-0" href={data.cardURL}>
|
|
60
|
+
<div class="flex w-full flex-col items-end">
|
|
61
|
+
<span class="btn text-sm">{data.cardLinkText}</span>
|
|
62
|
+
</div>
|
|
49
63
|
</a>
|
|
50
|
-
|
|
64
|
+
{/if}
|
|
51
65
|
</div>
|
|
52
|
-
</Wrap>
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
export let data;
|
|
7
7
|
|
|
8
8
|
const posts = getContext('newsPosts');
|
|
9
|
+
|
|
9
10
|
let filteredPosts = [];
|
|
10
11
|
let items = [];
|
|
11
12
|
let currentPage = 1;
|
|
@@ -48,13 +49,31 @@
|
|
|
48
49
|
<button class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium text-white hover:bg-teci-blue-dark bg-teci-blue-light focus:outline-none focus:border-teci-blue-dark transition duration-150 ease-in-out" data-token="f594659941689957f270ca278a80dc7d" onclick="mjOpenPopin(event, this)">Subscribe</button>
|
|
49
50
|
</div>
|
|
50
51
|
</div>
|
|
51
|
-
<div class="
|
|
52
|
+
<div class="pt-8 w-auto max-w-sm mx-auto">
|
|
53
|
+
<LightPaginationNav
|
|
54
|
+
totalItems="{items.length}"
|
|
55
|
+
pageSize="{pageSize ? pageSize : 6}"
|
|
56
|
+
currentPage="{currentPage}"
|
|
57
|
+
limit="{1}"
|
|
58
|
+
showStepOptions="{true}"
|
|
59
|
+
on:setPage="{(e) => currentPage = e.detail.page}"
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="grid gap-16 pt-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
|
|
52
63
|
{#each paginatedItems as post}
|
|
53
64
|
<a class="block h-full" href={post.path}>
|
|
54
65
|
<div class="flex flex-col items-stretch h-full">
|
|
55
66
|
<time class="block mb-1 text-sm text-gray-500" datetime={post.meta.date}>{DateTime.fromISO(post.meta.date).toLocaleString()}</time>
|
|
56
67
|
<p class="mb-2 text-xl font-semibold text-gray-900">{post.meta.title}</p>
|
|
57
|
-
|
|
68
|
+
{#if post.meta.summary}
|
|
69
|
+
<p class="flex-1 mb-2 text-base text-gray-500">
|
|
70
|
+
{post.meta.summary.length > 190 ? post.meta.summary.substring(0,190) + " ..." : post.meta.summary}
|
|
71
|
+
</p>
|
|
72
|
+
{:else}
|
|
73
|
+
<p class="flex-1 mb-2 text-base text-red-500">
|
|
74
|
+
Missing Summary Text
|
|
75
|
+
</p>
|
|
76
|
+
{/if}
|
|
58
77
|
<p class="text-sm font-semibold text-teci-blue-light hover:text-teci-blue-dark">Read full article<span aria-hidden="true"> →</span></p>
|
|
59
78
|
</div>
|
|
60
79
|
</a>
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
{#if data.title}
|
|
12
12
|
<h2 class="sr-only">{data.title}</h2>
|
|
13
13
|
{/if}
|
|
14
|
-
<
|
|
14
|
+
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
|
15
15
|
{#each data.cards as card}
|
|
16
16
|
<Card bind:data={card} bind:halfHeight={data.halfHeight} />
|
|
17
17
|
{/each}
|
|
18
|
-
</
|
|
18
|
+
</div>
|
|
19
19
|
</div>
|