create-thunderous 0.0.2 → 0.0.3
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/package.json +1 -1
- package/reference-project/package.json +2 -2
- package/reference-project/src/_layout.html +14 -26
- package/reference-project/src/about/about-data.server.ts +2 -2
- package/reference-project/src/about/contact.html +3 -1
- package/reference-project/src/about/index.html +3 -3
- package/reference-project/src/component-registry.ts +7 -0
- package/reference-project/src/components/crumb.ts +41 -0
- package/reference-project/src/components/my-component.ts +4 -4
- package/reference-project/src/components/page.ts +30 -35
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"eslint": "^9.38.0",
|
|
29
29
|
"prettier": "^3.6.2",
|
|
30
30
|
"serve": "^14.2.5",
|
|
31
|
-
"thunderous-server": "^0.0.
|
|
31
|
+
"thunderous-server": "^0.0.4",
|
|
32
32
|
"tsx": "^4.20.6",
|
|
33
33
|
"typescript": "^5.9.3",
|
|
34
34
|
"typescript-eslint": "^8.46.2",
|
|
@@ -36,6 +36,6 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"thunderous": "^2.4.2",
|
|
39
|
-
"thunderous-csr": "^0.0.
|
|
39
|
+
"thunderous-csr": "^0.0.3"
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -6,46 +6,34 @@
|
|
|
6
6
|
<link rel="stylesheet" href="/global.css" />
|
|
7
7
|
</head>
|
|
8
8
|
<body>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
<!-- This view element is used for CSR navigation, only this element will be replaced when navigating -->
|
|
10
|
+
<t-view id="main-content">
|
|
11
|
+
<x-page expr:prominent="pathname === '/'">
|
|
12
|
+
<h1 slot="header">
|
|
13
|
+
<script expr>
|
|
14
|
+
title === '' ? 'Home' : title;
|
|
15
|
+
</script>
|
|
16
|
+
</h1>
|
|
15
17
|
|
|
16
|
-
<!-- We can use multiple views to render different content in different regions - see main-content for more details -->
|
|
17
|
-
<t-view id="breadcrumbs">
|
|
18
18
|
<nav slot="header">
|
|
19
19
|
<p>
|
|
20
20
|
<script expr>
|
|
21
|
-
breadcrumbs.map(
|
|
22
|
-
(crumb, index) => html`
|
|
23
|
-
<a href="${crumb.pathname}">${crumb.name}</a>
|
|
24
|
-
${index < breadcrumbs.length - 1 ? html`<span> | </span>` : ''}
|
|
25
|
-
`,
|
|
26
|
-
);
|
|
21
|
+
breadcrumbs.map((crumb) => html`<x-crumb href="${crumb.pathname}">${crumb.name}</x-crumb>`);
|
|
27
22
|
</script>
|
|
28
23
|
</p>
|
|
29
24
|
</nav>
|
|
30
|
-
</t-view>
|
|
31
25
|
|
|
32
|
-
<!-- This view element is used for CSR navigation, only this element will be replaced when navigating -->
|
|
33
|
-
<t-view id="main-content">
|
|
34
26
|
<!-- This is where page content is inserted when this layout is used -->
|
|
35
27
|
<slot></slot>
|
|
36
|
-
</
|
|
37
|
-
</t-
|
|
28
|
+
</x-page>
|
|
29
|
+
</t-view>
|
|
38
30
|
|
|
39
|
-
<script isomorphic>
|
|
40
|
-
import { View } from 'thunderous-csr';
|
|
41
|
-
import { Page } from './components/page';
|
|
42
|
-
View.define('t-view');
|
|
43
|
-
Page.define('t-page');
|
|
44
|
-
</script>
|
|
31
|
+
<script isomorphic src="/component-registry.ts"></script>
|
|
45
32
|
|
|
46
|
-
<!-- This makes some handy data available to the template, like breadcrumbs -->
|
|
47
33
|
<script server>
|
|
48
34
|
import { getMeta } from 'thunderous-server';
|
|
35
|
+
|
|
36
|
+
// This makes some handy data available to the template, like breadcrumbs
|
|
49
37
|
export default getMeta();
|
|
50
38
|
</script>
|
|
51
39
|
</body>
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
// that is, any file ending with .server.ts will ONLY be evaluated on the server.
|
|
3
3
|
// This is useful to avoid inadvertently exposing sensitive data to the client.
|
|
4
4
|
export default {
|
|
5
|
-
|
|
6
|
-
description: 'We build fast static sites.',
|
|
5
|
+
title: 'About Us',
|
|
6
|
+
description: 'We build fast static sites with Thunderous.',
|
|
7
7
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<h2>
|
|
5
5
|
<script expr>
|
|
6
|
-
|
|
6
|
+
title;
|
|
7
7
|
</script>
|
|
8
8
|
</h2>
|
|
9
9
|
<p>
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
</script>
|
|
13
13
|
</p>
|
|
14
14
|
|
|
15
|
-
<!-- <script server> tags also support files via the
|
|
16
|
-
<script server
|
|
15
|
+
<!-- <script server> tags also support files via the src attribute -->
|
|
16
|
+
<script server src="./about-data.server.ts"></script>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { css, customElement, html } from 'thunderous';
|
|
2
|
+
|
|
3
|
+
export const Crumb = customElement(({ adoptStyleSheet, attrSignals }) => {
|
|
4
|
+
const { href } = attrSignals;
|
|
5
|
+
const [getHref] = href ?? [() => ''];
|
|
6
|
+
adoptStyleSheet(stylesheet);
|
|
7
|
+
return html`
|
|
8
|
+
<span class="crumb">
|
|
9
|
+
<a href=${getHref()}>
|
|
10
|
+
<slot></slot>
|
|
11
|
+
</a>
|
|
12
|
+
</span>
|
|
13
|
+
`;
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const stylesheet = css`
|
|
17
|
+
a {
|
|
18
|
+
color: var(--link);
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
transition: color 180ms ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
a:hover,
|
|
25
|
+
a:focus-visible {
|
|
26
|
+
color: var(--link-hover);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
a:focus-visible {
|
|
30
|
+
outline: 2px solid color-mix(in srgb, var(--link) 50%, white 20%);
|
|
31
|
+
outline-offset: 3px;
|
|
32
|
+
border-radius: 0.25rem;
|
|
33
|
+
}
|
|
34
|
+
:host(:not(:last-child)) {
|
|
35
|
+
.crumb::after {
|
|
36
|
+
content: ' > ';
|
|
37
|
+
display: inline-block;
|
|
38
|
+
padding: 0 0.5em;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
@@ -48,7 +48,7 @@ const stylesheet = css`
|
|
|
48
48
|
text-align: center;
|
|
49
49
|
position: relative;
|
|
50
50
|
overflow: hidden;
|
|
51
|
-
padding:
|
|
51
|
+
padding: 2em 3em;
|
|
52
52
|
border-radius: 20px;
|
|
53
53
|
border: 1px solid var(--border);
|
|
54
54
|
background:
|
|
@@ -103,9 +103,9 @@ const stylesheet = css`
|
|
|
103
103
|
display: inline-flex;
|
|
104
104
|
align-items: center;
|
|
105
105
|
justify-content: center;
|
|
106
|
-
gap: 0.
|
|
107
|
-
margin
|
|
108
|
-
padding: 0.
|
|
106
|
+
gap: 0.5em;
|
|
107
|
+
margin: 1.5em 0 0.5em;
|
|
108
|
+
padding: 0.85em 1.25em;
|
|
109
109
|
border-radius: 999px;
|
|
110
110
|
border: 1px solid color-mix(in srgb, var(--border) 85%, white 15%);
|
|
111
111
|
background:
|
|
@@ -1,37 +1,32 @@
|
|
|
1
1
|
import { customElement, html, css } from 'thunderous';
|
|
2
2
|
|
|
3
|
-
export const Page = customElement(
|
|
4
|
-
(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
attributesAsProperties: [['prominent', Boolean]],
|
|
33
|
-
},
|
|
34
|
-
);
|
|
3
|
+
export const Page = customElement(({ adoptStyleSheet }) => {
|
|
4
|
+
adoptStyleSheet(stylesheet);
|
|
5
|
+
return html`
|
|
6
|
+
<div class="page">
|
|
7
|
+
<header>
|
|
8
|
+
<slot name="header"></slot>
|
|
9
|
+
<nav class="header-nav">
|
|
10
|
+
<a href="/">Home</a>
|
|
11
|
+
<a href="/about">About Us</a>
|
|
12
|
+
<a href="/about/contact">Contact Us</a>
|
|
13
|
+
</nav>
|
|
14
|
+
</header>
|
|
15
|
+
<main>
|
|
16
|
+
<slot></slot>
|
|
17
|
+
</main>
|
|
18
|
+
<footer>
|
|
19
|
+
<nav class="footer-nav">
|
|
20
|
+
<a href="/">Home</a> | <a href="/about">About Us</a> | <a href="/about/contact">Contact Us</a>
|
|
21
|
+
</nav>
|
|
22
|
+
<slot name="footer"></slot>
|
|
23
|
+
<small
|
|
24
|
+
>© ${new Date().getFullYear()} — Powered by <a href="https://thunderous.dev">Thunderous</a></small
|
|
25
|
+
>
|
|
26
|
+
</footer>
|
|
27
|
+
</div>
|
|
28
|
+
`;
|
|
29
|
+
});
|
|
35
30
|
|
|
36
31
|
const stylesheet = css`
|
|
37
32
|
:host {
|
|
@@ -69,7 +64,7 @@ const stylesheet = css`
|
|
|
69
64
|
-moz-osx-font-smoothing: grayscale;
|
|
70
65
|
-webkit-font-smoothing: antialiased;
|
|
71
66
|
}
|
|
72
|
-
.page
|
|
67
|
+
:host([prominent]) .page {
|
|
73
68
|
align-items: center;
|
|
74
69
|
}
|
|
75
70
|
.header-nav {
|
|
@@ -148,10 +143,10 @@ const stylesheet = css`
|
|
|
148
143
|
}
|
|
149
144
|
|
|
150
145
|
header {
|
|
151
|
-
padding: 1em 1.5em;
|
|
146
|
+
padding: 1em 1.5em 0;
|
|
152
147
|
}
|
|
153
148
|
main {
|
|
154
|
-
padding:
|
|
149
|
+
padding: 2em 1.5em 4em;
|
|
155
150
|
}
|
|
156
151
|
|
|
157
152
|
footer {
|